Error While using the this.canvasWhiteboardService.drawCanvas(update) method from the package

[kpratikoc]

core.js:6228 ERROR TypeError: Cannot read property 'isVisible' of undefined at CanvasWhiteboardComponent._swapCompletedShapeToActualCanvas (ng2-canvas-whiteboard.js:1570) at CanvasWhiteboardComponent._draw (ng2-canvas-whiteboard.js:1544) at ng2-canvas-whiteboard.js:1667 at Array.forEach (<anonymous>) at CanvasWhiteboardComponent.drawUpdates (ng2-canvas-whiteboard.js:1662) at SafeSubscriber._next (ng2-canvas-whiteboard.js:1036) at SafeSubscriber.__tryOrUnsub (Subscriber.js:183) at SafeSubscriber.next (Subscriber.js:122) at Subscriber._next (Subscriber.js:72) at Subscriber.next (Subscriber.js:49)

I am storing the batch updates on the session storage and while trying to fetch the data from the session which raised the above error.
Can anyone help me ASAP? thanks

[Peshou]

Hi, can you double check that you are correctly saving and serializing the data in the sessionStorage (most probably via JSON.stringify and JSON.parse).

Be sure that you have the data you want to draw available, maybe the objects you are reading are null/undefined. Console.log them before invoking the draw method.

Also, Maybe there is a boolean property that was not serialized/parsed correctly so that's why there is an error.

Try it out and tell me the results

[kpratikoc]

I have used an array to store all the updated from the canvas, did JSON.stringify([Array of updates]) while storing the items to the session storage.

While fetching the data from the storage; I get the desired data (type of object) before invoking the draw method.

log of the data on the console before invoking the data:
[100 … 199] 100: Array(1) 0: UUID: "f6e1386c-22b6-ee31-867f-fb6bdfafbb57" type: 1 x: 0.2773687900641026 y: 0.32374118338557994 __proto__: Object length: 1 __proto__: Array(0) 101: Array(1) 0: UUID: "f6e1386c-22b6-ee31-867f-fb6bdfafbb57" type: 1 x: 0.26775340544871795 y: 0.3253085815047022 __proto__: Object length: 1 __proto__: Array(0) 102: [{…}]
but the error is still the same

[Peshou]

Hi, maybe the stringification/parsing is not correct, or maybe we should open an issue.

In the meantime, I created a sample demo in which I could save the updates to the session storage, and have a different button to load them, parse them and apply them to the canvas, which seemed to work, so maybe you can try it out and tell me if it helps with your use-case.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  @ViewChild(CanvasWhiteboardComponent) canvasWhiteboardComponent: CanvasWhiteboardComponent;

  constructor(private canvasWhiteboardService: CanvasWhiteboardService) {
  }

  saveToStorage(): void {
    // Get the current full update history
    const updates: Array<CanvasWhiteboardUpdate> = this.canvasWhiteboardComponent.getDrawingHistory();
    // Stringify the updates, which will return an Array<string>
    const stringifiedUpdatesArray: Array<string> = updates.map(update => update.stringify());
    // Stringify the Array<string> to get a "string", so we are now ready to put this item in the storage
    const stringifiedStorageUpdates: string = JSON.stringify(stringifiedUpdatesArray);
    // Save the item in storage of choice
    sessionStorage.setItem('canvasWhiteboardDrawings', stringifiedStorageUpdates);
  }

  loadFromStorage(): void {
    // Get the "string" from the storage
    const canvasDrawingsJson: string = sessionStorage.getItem('canvasWhiteboardDrawings');
    // Null check
    if (canvasDrawingsJson != null) {
      // Parse the string, and get an Array<string>
      const parsedStorageUpdates: Array<string> = JSON.parse(canvasDrawingsJson);
      // Parse each string inside the Array<string>, and get an Array<CanvasWhiteboardUpdate>
      const updates: Array<CanvasWhiteboardUpdate> = parsedStorageUpdates.map(updateJSON =>
        CanvasWhiteboardUpdate.deserializeJson(updateJSON));
      // Draw the updates onto the canvas
      this.canvasWhiteboardService.drawCanvas(updates);
    }
  }
}

[kpratikoc]

thanks a ton. It worked perfectly

[kpratikoc]

the saving and loading method works fine for the initial time. when we close the whiteboard and reopen it, add some more drawing data to the canvas. the following error occurs while re-saving the data to the session storage. also, the save functionality does not work after re-opening the whiteboard component.

whiteboard-canvas.component.html:7 ERROR TypeError: this.x.toFixed is not a function at CanvasWhiteboardUpdate.stringify (ng2-canvas-whiteboard.js:61) at whiteboard-canvas.component.ts:39 at Array.map (<anonymous>) at WhiteboardCanvasComponent.saveToStorage (whiteboard-canvas.component.ts:39) at Object.handleEvent (whiteboard-canvas.component.html:7) at handleEvent (core.js:46169) at callWithDebugContext (core.js:47826) at Object.debugHandleEvent [as handleEvent] (core.js:47435) at dispatchEvent (core.js:31513) at core.js:45091 View_WhiteboardCanvasComponent_0 @ whiteboard-canvas.component.html:7 logError @ core.js:47740 handleError @ core.js:6281 dispatchEvent @ core.js:31517 (anonymous) @ core.js:45091 (anonymous) @ platform-browser.js:963 invokeTask @ zone-evergreen.js:399 onInvokeTask @ core.js:41621 invokeTask @ zone-evergreen.js:398 runTask @ zone-evergreen.js:167 invokeTask @ zone-evergreen.js:480 invokeTask @ zone-evergreen.js:1621 globalZoneAwareCallback @ zone-evergreen.js:1647 whiteboard-canvas.component.html:7 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 7, nodeDef: {…}, elDef: {…}, elView: {…}}