Hi, I am customizing the LinkingTool in order to addLinkData programmatically. I simply implemented the insertLink method of the LinkingTool. However, when I tried to add a link between two nodes, the code worked, but I always got the following error in the chrome console.
I got the same error even tried to select the newly added link programmatically by
myDiagram.model.addLinkData(linkData);
const newLink = myDiagram.findLinkForData(linkData);
newLink.isSelected = true;
Do I have to override the doMouseUp method? Am I doing the correct way? Do you have any sample code that illustrates how to correctly customize the LinkingTool and RelinkingTool?
The complete HTML + JS code is below. Thanks so much for your time!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div
id="myDiagramDiv"
style="border: solid 1px black; width: 100%; height: 700px"
></div>
<script src="../../release/go-debug.js"></script>
<script>
function init() {
const $ = go.GraphObject.make;
const myDiagram = $(go.Diagram, "myDiagramDiv", {
layout: $(go.LayeredDigraphLayout, {
layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource,
layerSpacing: 100,
}),
});
myDiagram.nodeTemplate = $(
go.Node,
"Spot",
$(go.Shape, "RoundedRectangle", {
fill: "white",
width: 100,
height: 30,
portId: "",
fromLinkable: true,
toLinkable: true,
}),
$(
go.TextBlock, // the text label
new go.Binding("text", "key"),
{
verticalAlignment: go.Spot.Center,
textAlign: "center",
},
),
$(go.Shape, "Rectangle", {
fill: null,
stroke: null,
desiredSize: new go.Size(8, 8),
alignment: new go.Spot(0, 0.5, 4, 0),
portId: "Left",
fromSpot: go.Spot.Left,
toSpot: go.Spot.Left,
fromLinkable: false,
toLinkable: true,
}),
$(go.Shape, "Rectangle", {
fill: null,
stroke: null,
desiredSize: new go.Size(8, 8),
alignment: new go.Spot(1, 0.5, -4, 0),
portId: "Right",
fromSpot: go.Spot.Right,
toSpot: go.Spot.Right,
fromLinkable: true,
toLinkable: false,
}),
);
myDiagram.linkTemplate = $(
go.Link, // the whole link panel
{
selectable: true,
},
{ relinkableFrom: true, relinkableTo: true },
$(
go.Shape, // the link shape
{ strokeWidth: 1.5 },
),
$(
go.Shape, // the arrowhead
{ toArrow: "Standard", stroke: null },
),
);
const nodeDataArray = [
{
key: "Alpha",
},
{
key: "Beta",
},
{
key: "Gemma",
},
];
const model = new go.GraphLinksModel();
model.nodeDataArray = nodeDataArray;
myDiagram.model = model;
const ltool = myDiagram.toolManager.linkingTool;
ltool.isForwards = true;
ltool.insertLink = (fromnode, fromport, tonode, toport) => {
console.log(fromnode, fromport, tonode, toport);
const linkData = {
from: fromnode.data.key,
to: tonode.data.key,
fromPort: "Right",
toPort: "Left",
};
myDiagram.model.addLinkData(linkData);
const newLink = myDiagram.findLinkForData(linkData);
newLink.isSelected = true;
};
const rtool = myDiagram.toolManager.relinkingTool;
rtool.isForwards = true;
rtool.reconnectLink = (existinglink, newnode, newport, toend) => {
console.log(existinglink, newnode, newport, toend);
myDiagram.model.removeLinkData(existinglink.data);
let linkData;
if (toend)
linkData = {
from: existinglink.data.from,
fromPort: existinglink.data.fromPort,
to: newnode.data.key,
toPort: newport.portId
};
else
linkData = {
from: newnode.data.key,
fromPort: newport.portId,
to: existinglink.data.to,
toPort: existinglink.data.toPort
};
myDiagram.model.addLinkData(linkData);
}
}
window.addEventListener("DOMContentLoaded", init);
</script>
</body>
</html>