Bindings Explanation

GoJS
1

Hi everyone! I have a question.
I created small demo project in Angular 2+ and I found one feature: if I delete Node from Diagramm - its automaticly deleting this object from Model and I don’t need to think about deleting this object.
When I delete link - it’s not deleting from model automatictly and I have to change model manualy. My way to do this:

this.myDiagramComponent.diagram.addDiagramListener('SelectionDeleting', (e) => {
  e.subject.each(node => {
    if (node instanceof go.Link) {
      const index = this.diagramLinkData.findIndex(link => node.data.key === link.key)
      this.diagramLinkData.splice(index, 1);
    }
  });
});

I don’t understand how to bind Links to Model as Nodes Binded. I didnt find place where to do this.
Please, assist me to understand deeper how it works.

link to project: https://github.com/fed4wet/gojs-angular-basic

2

Look at the linkDataArray property, there is also nodeDataArry, you can associate node and line data

3

I have this.
<gojs-diagram #myDiagram
[initDiagram]=‘initDiagram.bind(this)’
[nodeDataArray]=‘diagramNodeData’
[linkDataArray]=‘diagramLinkData’
[divClassName]=‘diagramDivClassName’
[modelData]=‘diagramModelData’
(modelChange)=‘diagramModelChange($event)’
[skipsDiagramUpdate]=‘skipsDiagramUpdate’>

Its binded in diagram, but no effect if delete without manual deleting;

4

How is your diagramModelChange function defined? If you look at the gojs-angular-basic sample, you can see how that function in that sample syncs up the app data from the data in the GoJS model.

5

@walter
public diagramModelChange(changes: go.IncrementalData): void {
this.skipsDiagramUpdate = true;
this.diagramNodeData = DataSyncService.syncNodeData(changes, this.diagramNodeData);
this.diagramLinkData = DataSyncService.syncLinkData(changes, this.diagramLinkData);
this.diagramModelData = DataSyncService.syncModelData(changes, this.diagramModelData);
};

when I delete Node in event I recieve
{ removedLinkKeys:[
“d2e45060-d763-4f21-a8ed-66eeac4f724a”
“0f9aac10-9b8c-4dff-930a-8fad59e6deab”
“3eb876d2-08c0-412a-8ef1-236af12a1583”],
removedNodeKeys: [0] }

if I delete Link - I recive null, its reason why diagramLinkData isnt syncing;
So, why do I have null when deleting Link in diagramModelChange function?

6

Which version of gojs-angular are you using?

7

@walter
just updated:
“gojs”: “^2.1.39”,
“gojs-angular”: “2.0.1”,

8

Can you show me your initDiagram function? Make sure you are setting your Diagram.model’s linkKeyProperty – if you are not, link data changes will not be caught and merged with your diagramModelChanged function. Look at the initDiagram function in gojs-angular-basic to see how this is done, here (GitHub - NorthwoodsSoftware/gojs-angular-basic: Simple project demonstrating usage of our GoJS/Angular components)

If that is not the issue, can you re-upload your entire project? The repo you linked in your initial post 404’s

9

@ryanj @walter
Hi, guys. Thanks for help.
I found what was wrong.

My Link has userData - > object with fileds.
After I changed this userData I used this:
this.selectedNode.data = _.cloneDeep(this.selectedNode.data) to trigg changes in model;

But after I deleted Link - It was deleting in diagram, but not in model;

What I use now :
Object.keys(result).map(key => {
this.diagram.model.setDataProperty(this.selectedNode.data, key, result[key]);
});