Initial changes to enable localstorage

src/app/components/paint/paint.component.ts

@@ -2,7 +2,6 @@ import { Component, OnDestroy } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { takeWhile } from 'rxjs/operators';
 import { ControlService } from '../../paint/control.service';
-import { SavedCanvas } from '../../paint/saved-canvas.service';
 
 @Component({
   selector: 'app-paint',
@@ -13,7 +12,7 @@ export class PaintComponent implements OnDestroy {
   private alive = true;
 
   constructor(private route: ActivatedRoute, private controlService: ControlService) {
-    route.params.pipe(takeWhile(() => this.alive)).subscribe((savedCanvas: SavedCanvas) => controlService.savedCanvas.next(savedCanvas));
+    route.data.pipe(takeWhile(() => this.alive)).subscribe(({canvas}) => this.controlService.savedCanvas.next(canvas));
   }
 
   public ngOnDestroy(): void {

src/app/paint/managers/network-manager.ts

@@ -54,6 +54,10 @@ export class NetworkManager {
     this.connection.send(`t:d,i:${id}`);
   }
 
+  public readData(data: string): void {
+    this.onConnectionMessage(data);
+  }
+
   private connectionDrawLoop(): void {
 
     if (this.compiledObjectStashNeedRedraw) {

src/app/paint/managers/paint-manager.ts

@@ -76,21 +76,12 @@ export class PaintManager {
   /**
    * Saves compiled object
    * Draws compiled object
-   * Saves to localstorage
    *
    * @param object Object to save
    */
   public saveCompiledObject(object: CompiledObject): void {
     this.compiledObjectStorage.set(object.id, object);
     this.modes.get(object.name).reproduceObject(this.mainCanvasCTX, object);
-
-    // Save to localstorage
-    (async () => {
-      const canvasId = this.controlService.savedCanvas.value.id;
-      const canvas = await this.savedCanvasService.getCanvas(canvasId);
-      canvas.objects.set(object.id, object);
-      this.savedCanvasService.saveCanvas(canvas);
-    })();
   }
 
   public removeCompiledObject(id: string): boolean {

src/app/paint/paint.ts

@@ -313,14 +313,12 @@ export class Paint {
   }
 
   private async loadFromSavedCanvas(savedCanvas: SavedCanvas): Promise<void> {
-    console.log(this.paintManager.compiledObjectStorage);
-    console.log(savedCanvas);
+    for (const packet of savedCanvas.packets) {
+      this.networkManager.readData(packet);
+    }
   }
 
   private async export(): Promise<void> {
-    console.log(this.paintManager.compiledObjectStorage);
-
-    return;
     const pdfDoc = await PDFDocument.create();
     const page = pdfDoc.addPage([this.mainCanvas.width * (1 / window.devicePixelRatio), this.mainCanvas.height * (1 / window.devicePixelRatio)]);
 

src/app/paint/saved-canvas.resolver.ts

@@ -1,13 +1,12 @@
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
 import { SavedCanvas, SavedCanvasService } from './saved-canvas.service';
 
 @Injectable({providedIn: 'root'})
 export class SavedCanvasResolver implements Resolve<SavedCanvas> {
   constructor(private service: SavedCanvasService) { }
 
-  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<SavedCanvas> | Promise<SavedCanvas> | SavedCanvas {
+  async resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<SavedCanvas> {
     return this.service.getCanvas(route.paramMap.get('id'));
   }
 }

src/app/paint/saved-canvas.service.ts

@@ -1,11 +1,11 @@
 import { Injectable } from '@angular/core';
-import { CompiledObject } from './compiled-objects/compiled-object';
 
 export interface SavedCanvas {
   id: string;
   title: string;
-  image?: string;
-  objects: Map<string, CompiledObject>;
+  image: string;
+  objects: Map<string, string>;
+  packets: string[];
 }
 
 @Injectable({
@@ -27,9 +27,15 @@ export class SavedCanvasService {
       canvas.id = `C${canvas.id}`;
     }
 
-    canvas.image = null;
-    console.log(JSON.stringify(canvas))
-    console.log(canvas)
+    if (!!canvas.objects) {
+      const packets = [];
+      for (const packet of canvas.objects?.values()) {
+        packets.push(packet);
+      }
+
+      canvas.packets = packets;
+      delete canvas.objects;
+    }
 
     localStorage.setItem(canvas.id, JSON.stringify(canvas));
   }
@@ -47,14 +53,7 @@ export class SavedCanvasService {
       return placeholder;
     }
 
-    const canvas = JSON.parse(json);
-
-    if (!(canvas.objects instanceof Map)) {
-      console.log(canvas.objects);
-      canvas.objects = new Map();
-    }
-
-    return canvas;
+    return JSON.parse(json);
   }
 
   private async placeholderCanvas(id: string): Promise<SavedCanvas> {
@@ -84,7 +83,48 @@ export class SavedCanvasService {
 
     canvas.title = 'Untitled';
     canvas.image = base64;
-    canvas.objects = new Map<string, CompiledObject>();
+    canvas.packets = [
+      't:o,n:free-line,i:2y6vdfr193cjvb09gt14mg,c:#c2c1c1,w:5.00,b:212.00;119.00^374.00;277.00,p:290.00;171.00^278.00;173.00^271.00;180.00^263.00;195.00^262.00;208.00^265.00;216.00^275.00;224.00^284.00;227.00^305.00;226.00^309.00;224.00^317.00;216.00^321.00;207.00^324.00;193.00^322.00;182.00^320.00;178.00^310.00;169.00^300.00;169.00^293.00;172.00^285.00;173.00^283.00;175.00',
+      't:o,n:free-line,i:dkq4z9elh5w38e0bpz559g,c:#c2c1c1,w:5.00,b:367.00;115.00^523.00;278.00,p:434.00;175.00^430.00;175.00^420.00;186.00^417.00;196.00^417.00;212.00^422.00;222.00^429.00;227.00^443.00;228.00^450.00;226.00^466.00;210.00^473.00;194.00^472.00;183.00^460.00;169.00^452.00;165.00^440.00;166.00^427.00;179.00',
+      't:o,n:free-line,i:hv4v3gr2zennxn1qdryun,c:#c2c1c1,w:5.00,b:301.00;186.00^433.00;343.00,p:351.00;291.00^361.00;270.00^370.00;256.00^377.00;239.00^380.00;236.00^383.00;248.00^383.00;293.00',
+      't:o,n:free-line,i:ye9g14j36qejx1q3cfjsfo,c:#c2c1c1,w:5.00,b:255.00;270.00^490.00;433.00,p:306.00;325.00^306.00;333.00^311.00;347.00^324.00;365.00^344.00;377.00^354.00;380.00^375.00;383.00^404.00;374.00^421.00;359.00^426.00;353.00^429.00;345.00^433.00;340.00^440.00;326.00^440.00;322.00',
+      't:o,n:free-line,i:4qqa8aciqih9b9k3q6e9u,c:#ba2418,w:5.00,b:220.00;162.00^331.00;297.00,p:280.00;212.00^275.00;219.00^274.00;225.00^277.00;230.00^277.00;234.00^271.00;246.00',
+      't:o,n:free-line,i:1414dxwzl9orr1k2nhif8,c:#ba2418,w:5.00,b:243.00;170.00^347.00;298.00,p:295.00;219.00^293.00;225.00^297.00;235.00^295.00;247.00',
+      't:o,n:free-line,i:c6dybhv1utrt90e9oppdvk,c:#ba2418,w:5.00,b:258.00;164.00^363.00;303.00,p:309.00;213.00^308.00;224.00^313.00;235.00^312.00;253.00',
+      't:o,n:free-line,i:nm523mghnw9qdplnejdhb,c:#ba2418,w:5.00,b:374.00;166.00^486.00;301.00,p:436.00;217.00^432.00;220.00^430.00;224.00^429.00;231.00^431.00;243.00^426.00;250.00',
+      't:o,n:free-line,i:n4hcbfc34nh0ucq926feb,c:#ba2418,w:5.00,b:397.00;163.00^507.00;303.00,p:450.00;213.00^447.00;227.00^451.00;234.00^451.00;250.00^454.00;253.00',
+      't:o,n:free-line,i:lqp4qxoxzkop6y7uwakwd,c:#ba2418,w:5.00,b:409.00;161.00^524.00;303.00,p:458.00;210.00^463.00;215.00^466.00;225.00^467.00;236.00^465.00;242.00^473.00;252.00',
+      't:o,n:free-line,i:pe9rbf7c6q7xbv4va4nm3,c:#176baa,w:5.00,b:233.00;140.00^352.00;260.00,p:293.00;196.00^292.00;195.00^289.00;198.00^289.00;202.00^295.00;207.00^300.00;205.00^301.00;194.00^298.00;191.00^294.00;192.00^290.00;197.00^288.00;197.00^293.00;193.00^297.00;193.00^299.00;195.00^299.00;199.00^297.00;202.00^294.00;205.00^290.00;205.00^286.00;199.00^290.00;194.00^293.00;193.00^298.00;195.00^297.00;201.00^292.00;204.00^287.00;203.00^287.00;198.00^291.00;194.00^298.00;194.00^299.00;197.00^292.00;204.00^287.00;201.00^287.00;197.00^294.00;191.00^296.00;191.00^299.00;194.00^300.00;200.00^298.00;204.00^295.00;206.00^286.00;208.00^283.00;202.00^287.00;197.00^291.00;195.00^295.00;194.00^299.00;196.00^300.00;202.00^293.00;206.00^288.00;204.00^286.00;197.00^288.00;192.00^291.00;190.00^296.00;195.00^295.00;201.00^293.00;204.00^289.00;206.00^284.00;204.00^285.00;200.00^288.00;197.00^297.00;194.00^301.00;197.00^302.00;200.00^301.00;207.00^298.00;210.00^294.00;210.00^291.00;208.00^290.00;205.00^290.00;197.00^293.00;194.00^299.00;193.00^301.00;195.00^301.00;204.00^299.00;207.00^291.00;207.00^288.00;204.00^290.00;200.00',
+      't:o,n:free-line,i:2obrgmj71wj4nwsex0p5x5,c:#176baa,w:5.00,b:384.00;134.00^505.00;256.00,p:443.00;187.00^441.00;187.00^439.00;192.00^439.00;200.00^445.00;203.00^448.00;202.00^450.00;199.00^450.00;192.00^446.00;187.00^444.00;187.00^439.00;193.00^438.00;202.00^440.00;204.00^446.00;203.00^451.00;195.00^451.00;191.00^445.00;186.00^443.00;186.00^439.00;198.00^441.00;203.00^447.00;204.00^451.00;198.00^452.00;193.00^450.00;189.00^445.00;188.00^443.00;189.00^442.00;200.00^444.00;203.00^451.00;197.00^451.00;193.00^449.00;190.00^445.00;190.00^443.00;196.00^445.00;198.00^449.00;198.00^452.00;194.00^452.00;192.00^448.00;190.00^447.00;195.00^447.00;186.00^452.00;186.00^454.00;191.00^454.00;198.00^446.00;205.00^440.00;206.00^435.00;201.00^434.00;195.00^441.00;186.00^448.00;184.00^453.00;187.00^455.00;189.00^455.00;196.00^450.00;202.00^441.00;202.00',
+      't:o,n:free-line,i:fmoi5q2m01fo3h5e6ntgg,c:#c6b515,w:5.00,b:195.00;126.00^302.00;233.00,p:245.00;178.00^245.00;176.00^251.00;183.00',
+      't:o,n:free-line,i:6wj7vpf096tpmumlao237i,c:#c6b515,w:5.00,b:200.00;116.00^307.00;225.00,p:250.00;166.00^254.00;169.00^256.00;174.00',
+      't:o,n:free-line,i:azfekcte3lv2q0vva6bvvk,c:#c6b515,w:5.00,b:212.00;107.00^314.00;219.00,p:262.00;156.00^262.00;163.00^264.00;169.00',
+      't:o,n:free-line,i:s6m8ettlbakefrmpgdd8bq,c:#c6b515,w:5.00,b:220.00;105.00^322.00;217.00,p:270.00;154.00^272.00;159.00^272.00;166.00',
+      't:o,n:free-line,i:1k0w80lcdud5qxtjkc7xb9,c:#c6b515,w:5.00,b:232.00;100.00^332.00;214.00,p:282.00;149.00^282.00;163.00',
+      't:o,n:free-line,i:msab4y3mbicdyuaeeiun9,c:#c6b515,w:5.00,b:243.00;97.00^346.00;210.00,p:296.00;146.00^293.00;158.00',
+      't:o,n:free-line,i:97a5qt6xyy5d6hwvwn7cx,c:#c6b515,w:5.00,b:251.00;100.00^354.00;208.00,p:305.00;149.00^302.00;156.00',
+      't:o,n:free-line,i:u4zci97557b3qnc4s46nag,c:#c6b515,w:5.00,b:264.00;102.00^367.00;212.00,p:316.00;152.00^317.00;153.00^314.00;161.00',
+      't:o,n:free-line,i:t2w02h8zgbpso8xovxemmr,c:#c6b515,w:5.00,b:272.00;100.00^378.00;212.00,p:329.00;150.00^323.00;160.00',
+      't:o,n:free-line,i:c8lgp28o1n6573ufydhuks,c:#c6b515,w:5.00,b:277.00;111.00^382.00;220.00,p:333.00;160.00^327.00;168.00',
+      't:o,n:free-line,i:d8ebst8m9sjxvwoojt4rvj,c:#c6b515,w:5.00,b:282.00;118.00^389.00;230.00,p:340.00;168.00^334.00;179.00',
+      't:o,n:free-line,i:l523wl6dozr32ubiem6efg,c:#c6b515,w:5.00,b:358.00;123.00^464.00;230.00,p:408.00;172.00^414.00;180.00',
+      't:o,n:free-line,i:vd6b7x894w8leqv71qx5c,c:#c6b515,w:5.00,b:367.00;113.00^472.00;222.00,p:417.00;163.00^420.00;171.00',
+      't:o,n:free-line,i:ahicy5jqg2rh1cp5zw5qkr,c:#c6b515,w:5.00,b:374.00;109.00^478.00;219.00,p:424.00;159.00^427.00;166.00',
+      't:o,n:free-line,i:219ejb1071eo5b6va5jlq8,c:#c6b515,w:5.00,b:391.00;100.00^493.00;213.00,p:441.00;149.00^442.00;163.00',
+      't:o,n:free-line,i:2fbcz10brrmmvv0oie59yi,c:#c6b515,w:5.00,b:397.00;99.00^501.00;211.00,p:452.00;149.00^447.00;159.00',
+      't:o,n:free-line,i:baelmrqxnmh6gekabfh59,c:#c6b515,w:5.00,b:409.00;98.00^512.00;210.00,p:463.00;147.00^459.00;158.00',
+      't:o,n:free-line,i:yd4t2713i4e5x2ffqhfunp,c:#c6b515,w:5.00,b:416.00;96.00^522.00;207.00,p:473.00;146.00^466.00;157.00',
+      't:o,n:free-line,i:krmhfv47sspp2rra58m23,c:#c6b515,w:5.00,b:422.00;105.00^532.00;214.00,p:483.00;155.00^476.00;159.00^472.00;164.00',
+      't:o,n:free-line,i:6llt4ki0iqogbl2veg52o,c:#c6b515,w:5.00,b:425.00;113.00^535.00;221.00,p:485.00;163.00^478.00;170.00^475.00;171.00',
+      't:o,n:free-line,i:hqrhxeov4hvkog2aq0r96,c:#c6b515,w:5.00,b:430.00;124.00^537.00;226.00,p:488.00;174.00^481.00;176.00',
+      't:o,n:free-line,i:126ddyi5h4girohsv7p1ros,c:#c6b515,w:5.00,b:430.00;131.00^530.00;236.00,p:496.00;180.00^491.00;183.00^481.00;185.00',
+      't:o,n:free-line,i:t7vsks86i5pt0p40nlgqwe,c:#c6b515,w:5.00,b:428.00;142.00^541.00;245.00,p:492.00;192.00^479.00;194.00',
+      't:o,n:free-line,i:opoaecv3wmh5ijcv35gfhc,c:#c6b515,w:5.00,b:426.00;149.00^535.00;253.00,p:486.00;203.00^478.00;200.00',
+      't:o,n:free-line,i:ibfqiy88jpht0bxm25h8kk,c:#27a02b,w:5.00,b:298.00;240.00^409.00;355.00,p:359.00;291.00^358.00;290.00^356.00;292.00^348.00;305.00',
+      't:o,n:free-line,i:9zps7ryk5mkdzaigj3y9j6,c:#27a02b,w:5.00,b:316.00;244.00^417.00;355.00,p:368.00;293.00^366.00;304.00',
+      't:o,n:free-line,i:uhyjwzjpd7g0y3p732tl4o,c:#27a02b,w:5.00,b:321.00;244.00^421.00;358.00,p:371.00;293.00^371.00;306.00',
+      't:o,n:free-line,i:shmwm8sp8khwc408weqhog,c:#27a02b,w:5.00,b:328.00;247.00^432.00;357.00,p:378.00;297.00^381.00;304.00'
+    ];
 
     return canvas;
   }