Hi, I tried to specify the shape of the temporaryLink of linkingTool and relinkingTool.
The code snippet is below:
"linkingTool.temporaryLink": $(
go.Link,
{
layerName: "Tool",
curve: go.Link.Bezier,
curviness: 50,
routing: go.Link.AvoidsNodes,
},
$(go.Shape, { stroke: "#01778E", strokeWidth: 2 }),
$(
go.Shape, // the arrowhead
{ toArrow: "Standard", fill: "#01778E", stroke: null },
),
),
"relinkingTool.temporaryLink": $(
go.Link,
{
layerName: "Tool",
curve: go.Link.Bezier,
curviness: 50,
routing: go.Link.AvoidsNodes,
},
$(go.Shape, { stroke: "#01778E", strokeWidth: 2 }),
$(
go.Shape, // the arrowhead
{ toArrow: "Standard", fill: "#01778E", stroke: null },
),
),
Note that both have the same link template. However only the linkingTool temporaryLink now has curve, not the one from the relinkingTool.
temporaryLink from linkingTool (working!)
temporaryLink from relinkingTool (not working :( )
How can I make the relinkingTool temporaryLink has curve as well? Thanks so much for your time!
I am putting the complete HTML + JS code below.
<!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,
}),
"linkingTool.temporaryLink": $(
go.Link,
{
layerName: "Tool",
curve: go.Link.Bezier,
curviness: 50,
routing: go.Link.AvoidsNodes,
},
$(go.Shape, { stroke: "#01778E", strokeWidth: 2 }),
$(
go.Shape, // the arrowhead
{ toArrow: "Standard", fill: "#01778E", stroke: null },
),
),
"relinkingTool.temporaryLink": $(
go.Link,
{
layerName: "Tool",
curve: go.Link.Bezier,
curviness: 50,
routing: go.Link.AvoidsNodes,
},
$(go.Shape, { stroke: "#01778E", strokeWidth: 2 }),
$(
go.Shape, // the arrowhead
{ toArrow: "Standard", fill: "#01778E", stroke: null },
),
),
});
myDiagram.nodeTemplate = $(
go.Node,
$(
go.Panel,
"Position",
$(go.Shape, "RoundedRectangle", {
fill: "white",
width: 100,
height: 30,
portId: "",
fromLinkable: true,
toLinkable: true,
}),
$(
go.TextBlock, // the text label
new go.Binding("text", "key"),
),
),
);
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 linkDataArray = [
{
from: "Alpha",
to: "Beta",
fromPort: "Right",
toPort: "Left",
},
];
const model = new go.GraphLinksModel();
model.nodeDataArray = nodeDataArray;
model.linkDataArray = linkDataArray;
myDiagram.model = model;
}
window.addEventListener("DOMContentLoaded", init);
</script>
</body>
</html>