Move link from shape to shape

Hey,

When I drag a link that already connected to shape and try to move it to
other shape the link not able to connected.
I attach image that for explanation:

  1. The current diagram state.
  2. I try to move the link from C to 12121 to other shape name New - but is not working
  3. Its work when I take new link from C and connected it to new shape (in image is called Action)

my nodeTemplateMap:
myDiagram.nodeTemplateMap.add(“Condition”,
GoJs(go.Node, “Spot”, nodeStyle(),
GoJs(go.Panel, “Auto”,
GoJs(go.Shape, “Diamond”,
{
minSize: new go.Size(160, 80), fill: “#76b7e8”, stroke: ‘black’, strokeWidth: 1
}),
GoJs(go.TextBlock, “Condition”,
{ font: “bold 11pt Open Sans” },
new go.Binding(“stroke”, “isValid”, function (val) {
if (val) {
return “black”;
}
return “red”;
}),
new go.Binding(“text”, “designerDisplayName”)),
{ // this tooltip Adornment is shared by all nodes
toolTip:
GoJs(go.Adornment, “Auto”,
GoJs(go.Shape, { fill: “#FFFFCC” }),
GoJs(go.TextBlock, { margin: 4 },
new go.Binding(“text”, “”, nodeInfo))
)
}
),
makePort(“T”, go.Spot.Top, true, true),
makePort(“L”, go.Spot.Left, true, true),
makePort(“R”, go.Spot.Right, true, true),
makePort(“B”, go.Spot.Bottom, true, true)
));
myDiagram.nodeTemplateMap.add(“Action”,
GoJs(go.Node, “Spot”, nodeStyle(),
GoJs(go.Panel, “Auto”,
GoJs(go.Shape, “Rectangle”,
{ minSize: new go.Size(160, 80), fill: “#76b7e8”, stroke: ‘#002699’, strokeWidth: 3 }),
GoJs(go.Picture, “…/…/images/release.png”,
{ width: 25, height: 25, alignment: go.Spot.TopLeft, margin: new go.Margin(5, 0, 0, 5), visible: false },
new go.Binding(“visible”, “isReleaseFromRejectionStage”)),
GoJs(go.TextBlock, “Action”,
{ font: “bold 11pt Open Sans” },
new go.Binding(“stroke”, “isValid”, function (val) {
if (val) {
return “black”;
}
return “red”;
}),
new go.Binding(“text”, “designerDisplayName”)),
{ // this tooltip Adornment is shared by all nodes
toolTip:
GoJs(go.Adornment, “Auto”,
GoJs(go.Shape, { fill: “#FFFFCC” }),
GoJs(go.TextBlock, { margin: 4 },
new go.Binding(“text”, “”, nodeInfo))
)
}
),
makePort(“T”, go.Spot.Top, true, true),
makePort(“L”, go.Spot.Left, true, true),
makePort(“R”, go.Spot.Right, true, true),
makePort(“B”, go.Spot.Bottom, true, true)
));

linkTemplate:
myDiagram.linkTemplate =
GoJs(go.Link, // the whole link panel
{
routing: go.Link.AvoidsNodes,
curve: go.Link.JumpOver,
corner: 5, toShortLength: 4,
relinkableFrom: true,
relinkableTo: true,
reshapable: true,
resegmentable: true,
// mouse-overs subtly highlight links:
mouseEnter: function (e, link) { link.findObject(“HIGHLIGHT”).stroke = “rgba(30,144,255,0.2)”; },
mouseLeave: function (e, link) { link.findObject(“HIGHLIGHT”).stroke = “transparent”; }
},
GoJs(go.Shape, // the highlight shape, normally transparent
{ isPanelMain: true, strokeWidth: 8, stroke: “transparent”, name: “HIGHLIGHT” }),
GoJs(go.Shape, // the link path shape
{ isPanelMain: true, stroke: “gray”, strokeWidth: 2 }),
GoJs(go.Shape, // the arrowhead
{ toArrow: “standard”, stroke: null, fill: “gray” }),
GoJs(go.Panel, “Auto”, // the link label, normally not visible
{ visible: true, name: “LABEL”, segmentIndex: 2, segmentFraction: 0.5 },
GoJs(go.Shape, “RoundedRectangle”, // the label shape
{ fill: “#F8F8F8”, stroke: null, visible: false }, new go.Binding(“visible”, “text”, function (val) {
return val !== ‘’;
})),
GoJs(go.TextBlock, // the label
{
textAlign: “center”,
font: “10pt Open Sans”,
stroke: “#333333
},
new go.Binding(“text”, “text”))
)
);

Thanks,
Daniel Tshuva

The normal way for users to reconnect one end of a Link is to set Link.relinkableTo and/or Link.relinkableFrom to true (which you have already done). Then users can select the Link and drag the diamond-shaped relinking handle to reconnect that end of the link to whatever valid node/port they like. http://gojs.net/latest/api/symbols/RelinkingTool.html

Note that it is possible for users to drag links, but doing so disconnects both ends of the dragged link and then the user can connect one end by dropping the link. They can connect both ends simultaneously if the target ports happen to be the “right” distance apart. See the Draggable Link sample, http://gojs.net/latest/samples/draggableLink.html

I find what the problem you need 2 things:

  1. In diagram model you need to set linkFromPortIdProperty(for example fromPort) & linkToPortIdProperty(for example to Port)
  2. In linkDataArray you need to have 2 properties linkFromPortIdProperty (fromPort) & linkToPortIdProperty(toPort) and set them a value (not empty)