Re-render diagram with new data (Angular)

GoJS
1

Hi, I am using Gojs in Angular.

The scenario is when one user is viewing diagram X, and someone else is editing this diagram,
I want to re-render the changes for the viewer.

For doing that, I used socket.io for listening to updates of the diagram from the server.
When it has changed, the socket receives the nodeDataArray and linkDataArray.

Then I tried to do something like this:

this.diagramNodeData = socket.nodeDataArray;
this.diagramLingData = socket.linkDataArray;
this.observedDiagram.redraw();

But it is not working well.
Sometimes, the diagram re-rendered but I got an error at the console of "Cannot read property 'layer' of null" and sometimes the view is not refreshed at all.

Can you please tell me how to do it well?
Thanks.

2

Are you using gojs-angular? Have you read GoJS and Angular -- Northwoods Software ?

3

Hi, yes and yes.
I Think that I am missing the part of how to use DataSyncService.
How from nodeDataArray and linkDataArray I am updating the model?

4

You should not be calling redraw.

What is this in your code?

5

it is the diagram component that have nodeDataArray and linkDataArray properties.

Ok, What is the right way to update the diagram data for re-rendering the component?

6

Just setting a DiagramComponent’s @Input property should cause it to update. When you set its nodeDataArray, does it call the mergeChanges function in gojs-angular?

7

Do you mean diagramModelChange? if yes, after setting those properties the function is not called with changes…

8

No, I meant the mergeChanges function in gojs-angular/diagram.component.ts at master · NorthwoodsSoftware/gojs-angular · GitHub

9

This is not an internal function? how can I check if this function was called?

10

Set a breakpoint?

11

How to debug is not what I am asking… I don’t know how to access this file and find this function.
I tried to look for this file in node-modules in gojs-angular folder - but I didn’t found it…

Do you have any example of angular, except the basic sample, that shows how to update data of the diagram?

12

Are your files the latest from GitHub?

13

Yes, my gojs-angular version is 1.0.4

14

In the debugger you should be able to find the loaded .js file compiled from that diagram.component.ts file, which should be in your project somewhere.

15

Hi Walter, that you for your time.
Unfortunately, I didn’t found it. there are other things that we can check?

16

That gojs-angular compiled file must be loaded somehow, somewhere. I don’t know what else to say.

I suppose you could define a “LayoutCompleted” DiagramEvent listener that will be called after the transaction that accepts the new data completes. But that won’t be called if that gojs-angular mergeChanges function or ngDoCheck method isn’t being called.

17

Unfortunately, also LayoutCompleted Event was not called…

18

Which makes sense if ngDoCheck is not being called, but that seems unlikely.

Maybe skipsDiagramUpdate is true when it should be false.

19

Ok, after you mention skipsDiagramUpdate, I checked the diagramModelChange function.
I found that diagramModelChange being calling with changes event with a null value, several times.
(I think it is happening because I have logic that changes the nodes frame color every x seconds due to some logic)

If I surround the function code with If statement with the term that changes will be not null, the following things are happening:

  1. If I am adding/deleting nodes, the LayoutCompleted called and the diagram was re-rendered.

But, I am also getting an error at gojs-angular.js:226 - its trying to remove a node that has a null value and then throws an exception
The code is: dc.diagram.remove(node);

  1. If I just moving nodes to a different location, the LayoutCompleted event not called, the diagram is not re-renderd, and I also have the same error as before.

Any idea why the code acts in that way?
Thank you!!

20

  1. We’re looking at the exception that you’re getting.

  2. So you have the location information on the node data object? Does your node template have a Binding on the Node.location with that data property as a source?