NorthwoodsSoftware / gojs-angular

A set of Angular components to manage GoJS Diagrams, Palettes, and Overviews
Other
61 stars 16 forks source link

Gojs angular synclinkdata issue #39

Closed BerenOneHand closed 2 years ago

BerenOneHand commented 2 years ago

After I delete a link and the synclinkdata function runs, I receive an error:

image

This seems to happen when there is a change that contains both a removal and a change in link data.

rjohnson465 commented 2 years ago

How can I reproduce this issue? What is your app doing during the model change apart from removing a link?

I just tried running gojs-angular-basic, which uses gojs-angular 2.0.4, and I deleted some links, and I don't see this error.

dawidaksamski commented 2 years ago

@rjohnson465 I've ran into similar issue but with syncNodeData method. My case is that I just replace all nodes on diagram entirely (I supply new nodeDataArray to the gojs-angular component).

Looks like this line causes the error - returning the draft is causing the issue. Same return statement can be found in syncNodeData method.

As a test, I've simply set the removedNodeKeys and removedLinkKeys to undefined and the error don't appear anymore.

rjohnson465 commented 2 years ago

If you're going to completely replace the node / link data arrays, it may make more sense to clear out the model entirely beforehand. That's what DiagramComponent.clear is for.

Generally, however, I would recommend just incrementally adding to or removing from the arrays within a produce call.

I just checked and if I do things this way, there is no error. Is that the case for you?

var appComp = this;
    appComp.myDiagramComponent.clear();
    appComp.state = produce(this.state, draft => {
      draft.diagramNodeData = [
        { id: "Alpha", color: "red", loc: "0 0" }
      ];
      draft.diagramLinkData = [];
    });
dawidaksamski commented 2 years ago

@rjohnson465 I'm using NgRx to store my GraphLinksModel data which then I synchronize with the model in GoJS diagram. I have bidirectional data synchronization so every update of model in GoJS is reflected in the store and any update of the model in the store is reflected in GoJS. Unfortunately, when I get the updated model from the store, I don't know if the model was replaced entirely or not.

That's why I decided to implement custom solution where I'll compare GoJS diagram model and newly received model from the store and based on the differences I'll make appropriate updates in GoJS model. If I encounter a scenario, where either nodeDataArray or linkDataArray is replaced entirely, I'll use the diagram.clear() method.

With my previous comment I just wanted to let you know what's causing the error that @BerenOneHand reported :)

BerenOneHand commented 2 years ago

I am also getting the error on the syncNodeData now. After deleting some steps and links, I have an event handler that modifies data on the nodes attached to deleted links. What this causes is that there is a list of deleted nodes as well as the modified node. The syncNodeData function then modifies the draft as well as return a new one. image

BerenOneHand commented 2 years ago

To reproduce this is easy, have an event handler on delete, in the event handler, change data on the diagram when something is deleted ( like a property on the node data called linkReferences as an array of links that are attached to this node ). Delete a node and a link which is attached to another node. The event will trigger and cause a change as well as a deletion.

BerenOneHand commented 2 years ago

To fix this, you cannot return draft.filter (which returns a brand new array) on removing links. use splice to make your changes ( in both syncNodeData and syncLinkData)

rjohnson465 commented 2 years ago

Thanks for helping me to understand. I just released gojs-angular v2.0.5 which should address this issue.

Let me know if you run into it again after updating.