OK, I’ve used your templates, substituting true for this.allowEdit, commenting out the use of this.graphService, and not depending on data.AssetType. Still, everything works as expected.
But I think the padding on the Node makes each Node bigger than it looks, thereby decreasing the room available for links to route without crossing over nodes. Does removing that padding help?
Also, the margin on the TextBlock adds empty space on the bottom of the node, again possibly interfering with routing.
<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2022 by Northwoods Software Corporation. -->
</head>
<body>
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
<button id="myHideButton">Hide some</button><button id="myShowButton">Show all</button>
<script src="go.js"></script>
<script id="code">
const $ = go.GraphObject.make;
const myDiagram =
$(go.Diagram, "myDiagramDiv",
{
layout: $(go.GridLayout,
{ wrappingColumn: 6, spacing: new go.Size(50, 50), isOngoing: false }),
"undoManager.isEnabled": true
});
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{
// padding: 20,
selectionAdorned: false,
cursor: 'pointer',
selectionObjectName: 'SHAPE',
toolTip: $('ToolTip',
$(
go.TextBlock,
{ margin: 4, width: 140 },
new go.Binding('text', '', (data) => data.text)
)
),
mouseDrop: (e, node) => {
this.finishDrop(e, node.containingGroup);
},
doubleClick: (e, node) => {
const selectedNode = e.diagram.selection.first();
if (!selectedNode?.data.inPalette) {
alert(node.key)
// this.graphService.setNodeData({
// ...node.data,
// diagram: e.diagram,
// selectedNode,
// open: true,
// });
}
}
},
new go.Binding('location', 'loc').makeTwoWay(),
$(go.Panel, 'Spot',
$(go.Shape, 'RoundedRectangle',
{
strokeWidth: 1,
width: 80,
height: 80,
stroke: '#cfcfcf',
portId: '',
cursor: 'pointer',
alignment: go.Spot.Center,
alignmentFocus: go.Spot.Bottom,
fromLinkable: true /* this.allowEdit */,
fromLinkableSelfNode: true /* this.allowEdit */,
fromLinkableDuplicates: true /* this.allowEdit */,
toLinkable: true /* this.allowEdit */,
toLinkableSelfNode: false,
toLinkableDuplicates: false,
fill: "lightgray"
},
new go.Binding('fill', 'color').makeTwoWay()
),
$(go.Shape,
{
margin: 0,
fill: 'black',
strokeWidth: 0,
geometryString: "F1 M0 0 L20 0 20 20 0 20z"
},
/* new go.Binding('geometry', 'AssetType', this.geoFunc) */
),
$(go.TextBlock,
{
// margin: 13,
editable: true /* this.allowEdit */,
font: 'bold 13px sans-serif',
opacity: 0.75,
stroke: '#404040',
alignment: go.Spot.BottomCenter,
alignmentFocus: go.Spot.Bottom, //TopCenter,
isMultiline: false,
},
new go.Binding('text', 'text').makeTwoWay()
)
)
);
myDiagram.linkTemplate =
$(go.Link,
{ routing: go.Link.AvoidsNodes, corner: 10 },
new go.Binding("points").makeTwoWay(),
$(go.Shape),
$(go.Shape, { toArrow: "OpenTriangle" })
);
const NUM = 30;
const nda = [];
for (let i = 0; i < NUM; i++) nda.push({ key: i, text: i.toString() });
const lda = [];
for (let i = 0; i < 30; i++) lda.push({ from: Math.floor(Math.random() * NUM), to: Math.floor(Math.random() * NUM) });
myDiagram.model = new go.GraphLinksModel(nda, lda);
document.getElementById("myHideButton").addEventListener("click", e => {
myDiagram.commit(d => {
d.nodes.each(n => n.visible = n.isSelected || Math.random() > 0.1);
});
});
document.getElementById("myShowButton").addEventListener("click", e => {
myDiagram.commit(d => {
d.nodes.each(n => n.visible = true);
d.links.each(l => l.invalidateRoute());
});
});
</script>
</body>
</html>
