Hi, I’ve run into an interesting bug when on initial page load it seems that animations on node deletion are disabled. Interestingly, after I refresh the page the animations are functioning properly. In both cases even if the animations are not working the nodes will still move to the target location.
This is likely a strange Angular behavior on my end but I wanted to post the behavior here just in case it is GoJS that is causing the problems.
I tested two different scenarios:
(1) I navigated to a different page and back to the Visual
(2) I press F5 and the page fully resets
(1) When I navigated to a different page and back the GoJS visual was still functioning where I could move nodes and delete them. Upon deletion the visual changes properly but instead of the change happening gradually with an animation it happens instantly.
(2) When the page fully resets the visual functions normally. Nodes can still be moved and deleted but when a node is deleted the gradual change/move of the nodes as the visual adjusts occurs.
Note: Scenario 1 also reflects the behavior of the website on first load after the website is compiled with “ng serve”
If you set a trace point in your initDiagram code, can you notice a difference in when it is called depending on how you refresh the page? I’m wondering if the component is being re-rendered or not in some circumstances.
I think I just figured out the error. Let me double check and Ill send the details.
public ngAfterViewInit() {
if (this.observedDiagram) return;
this.observedDiagram = this.myDiagramComponent.diagram;
this.cdr.detectChanges(); // IMPORTANT: without this, Angular will throw ExpressionChangedAfterItHasBeenCheckedError (dev mode only)
const appComp: ComponentName = this;
// listener for inspector
this.myDiagramComponent.diagram.addDiagramListener('ChangedSelection', function (e) {
if (e.diagram.selection.count === 0) {
appComp.selectedNode = null;
}
const node = e.diagram.selection.first();
if (node instanceof go.Node) {
appComp.selectedNode = node;
} else {
appComp.selectedNode = null;
}
});
//setTimeout(() => {
// this.generateData()
//});
} // end ngAfterViewInit
If you look at the bottom couple lines here I am calling a data generation function to add information to the diagram Node and Link data. The function forces an update by setting the following flag to be false:
I encapsulate everything in a timeout so that the Diagram can finish loading before the data is generated to somewhat simulate an API call for the data. When I removed that segment everything worked properly on the first page load.
Im guessing there is a different way that I should approach this?
