Diagram Event Listener with LocalStorageCommandHandler

GoJS
1

Hello! Previously in my code, I had an event listener for when the ClipboardChanged, which worked as expected:

diagram.addDiagramListener('ClipboardChanged', e => {
      console.log("clipboard: ", e.subject.toArray());
      setClipboardDataArray(e.subject.toArray());
    });

However, I needed to add the functionality to copy between diagrams, so I added the commandHandler: new LocalStorageCommandHandler() on the diagram initialization.
Now, this diagram listener is never ‘called’. Doing some research shows the event listener is based upon the commandHandler in this case, which is getting over-written by the LocalStorage version (in my case, this is a direct copy and no changes have been made for my implementation). Is there a way to get this addDiagramListener to work with the LocalStorage version?
Thanks in advance!

2

If the diagrams are in the same HTML document, then you don’t need to use localStorage for the clipboard, because all of the diagrams in the same HTML document are sharing the same JavaScript code and state.

You only need to use localStorage when copying between frames/windows or across time.

Still, we should change the LocalStorageCommandHandler.copyToClipboard to also call Diagram.raiseDiagramEvent:

  override copyToClipboard(coll: go.Iterable<go.Part>): void {
    try {
      if (coll === null) {
        window.localStorage.setItem(this.StorageKey, '');
        window.localStorage.setItem(this.FormatKey, '');
      } else {
        const clipdiag = new go.Diagram(); // create a temporary Diagram
        // copy from this diagram to the temporary diagram some properties that affects copying:
        clipdiag.isTreePathToChildren = this.diagram.isTreePathToChildren;
        clipdiag.toolManager.draggingTool.dragsLink =
          this.diagram.toolManager.draggingTool.dragsLink;
        // create a model like this one but with no data
        clipdiag.model = this.diagram.model.copy();
        // copy the given Parts into this temporary Diagram
        this.diagram.copyParts(coll, clipdiag, false);

        window.localStorage.setItem(this.StorageKey, clipdiag.model.toJson());
        window.localStorage.setItem(this.FormatKey, clipdiag.model.dataFormat);
      }
      // add this call:
      this.diagram.raiseDiagramEvent('ClipboardChanged', coll);
    } catch (ex) {
      // fallback implementation
      super.copyToClipboard(coll);
    }
  }

You can do this in your copy of the code, for now.

3

Ah yes! The diagrams are across frames, so the native copy/paste doesn’t work. This change did resolve my issues, so thank you!

What did you mean by ‘for now’? Is this change not going to work in the near future?

4

If you copied the code, of course it will continue to work.

If you copy the code again sometime in the future, you won’t have to add that line.

Thanks for reporting the bug in that extension.

1 Like