Hey there, I'm currently working on a workflow editor and renderer using Angular and GoJS. Everything seems to be in order, except for this one pesky bug that's bothering me. When the page first loads, the links don't avoid nodes properly. However, as soon as you interact with the diagram or navigate back and forth between pages, the links start behaving as expected. Any ideas why this is happening?
Check out the issue with links not avoiding nodes correctly here
Below is the portion of the code that I think might be causing this problem. If anyone has any insights or solutions, I would really appreciate the help.
constructor(private templatesService: TemplatesService,
private router: Router,
private route: ActivatedRoute,
private projectsService: ProjectsService) { this.initDiagram(); }
...
ngOnInit() {
// Fetch data
this.load();
setTimeout(() => { this.load(); });
}
ngAfterViewInit() {
// Data loaded, show graph on page
this._diagram.div = this._diagramRef.nativeElement;
this.scaleDiagramDivToHeightOf(window, -50);
if (this.route.data['value']['label'] === 'design' ||
this.route.data['value']['label'] === 'design-proto') {
this.initDiagramDesign();
this.initPalette();
}
this._diagram.requestUpdate();
}
initDiagram() {
this._diagram.commandHandler.defaultScale = 1.0;
const that = this;
this._diagram = new go.Diagram();
this._diagram.initialContentAlignment = go.Spot.TopCenter;
this._diagram.allowDrop = this.editMode;
this._diagram.isReadOnly = !this.editMode;
this._diagram.toolManager.draggingTool = new GuidedDraggingTool();
this._diagram.undoManager.isEnabled = true;
this._diagram.layout = $(go.TreeLayout, {
angle: 90,
nodeSpacing: 10,
layerSpacing: 25,
layerStyle: go.TreeLayout.LayerUniform,
arrangement: go.TreeLayout.ArrangementHorizontal
});
this._diagram.nodeTemplateMap.add(""...
this._diagram.linkTemplate =
$(go.Link,
{
routing: go.Link.AvoidsNodes,
curve: go.Link.JumpOver,
corner: 10, toShortLength: 4,
relinkableFrom: true,
relinkableTo: true,
reshapable: true,
resegmentable: true,
selectionAdorned: false,
},
$(go.Shape,
{ isPanelMain: true, strokeWidth: 8, stroke: "transparent", name: "HIGHLIGHT" }),
$(go.Shape,
{ isPanelMain: true, stroke: "gray", strokeWidth: 2 },
new go.Binding("stroke", "isSelected", function (sel) { return sel ? "dodgerblue" : "gray"; }).ofObject()),
$(go.Shape,
{ toArrow: "standard", strokeWidth: 0, fill: "gray" }),
$(go.Panel, "Auto",
{ visible: false, name: "LABEL", segmentIndex: 2, segmentFraction: 0.5 },
new go.Binding("visible", "visible").makeTwoWay(),
$(go.Shape, "RoundedRectangle",
{ fill: "#F8F8F8", strokeWidth: 0 }),
$(go.TextBlock, "Yes",
{
textAlign: "center",
font: "10pt helvetica, arial, sans-serif",
stroke: "#333333",
editable: true
},
new go.Binding("text").makeTwoWay())
)
);
this._diagram.layout.invalidateLayout();
}
load() {
...fetch data from backend...
}