I think so. If you give us some time, we can try it.
Sure. Thank you!
<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<script id="code">
go.Shape.defineFigureGenerator("Port", function(shape, w, h) {
var geo = new go.Geometry();
var cpOffset = 4 * ((Math.sqrt(2) - 1) / 3) * .5;
var fig = new go.PathFigure(0, 0, true);
geo.add(fig);
fig.add(new go.PathSegment(go.PathSegment.Line, .5 * w, 0));
fig.add(new go.PathSegment(go.PathSegment.Bezier, w, .5 * h, (.5 + cpOffset) * w, 0, w, (.5 - cpOffset) * h));
fig.add(new go.PathSegment(go.PathSegment.Bezier, .5 * w, h, w, (.5 + cpOffset) * h, (.5 + cpOffset) * w, h));
fig.add(new go.PathSegment(go.PathSegment.Line, 0, h));
return geo;
});
function init() {
var $ = go.GraphObject.make;
var temporaryLink =
$(go.Link,
$(go.Shape, { stroke: "blue", strokeWidth: 2 }),
$(go.Shape,
{ segmentIndex: -1, segmentOffset: new go.Point(10/2, 0),
figure: "Port", fill: "gray", strokeWidth: 0, width: 10, height: 12 })
);
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center, // for v1.*
"undoManager.isEnabled": true,
"linkingTool.temporaryLink": temporaryLink,
"relinkingTool.temporaryLink": temporaryLink,
"ModelChanged": function(e) { // just for demonstration purposes,
if (e.isTransactionFinished) { // show the model data in the page's TextArea
document.getElementById("mySavedModel").textContent = e.model.toJson();
}
}
});
function portStyle(input) {
return {
figure: "Port",
width: 10, height: 12,
fill: input ? "white" : "gray",
strokeWidth: input ? 1 : 0,
stroke: "gray",
alignment: input ? new go.Spot(0, 0.5, -0.51, 0) : new go.Spot(1, 0.5, -0.51, 0),
alignmentFocus: input ? go.Spot.Left : go.Spot.Left,
portId: input ? "in" : "out",
fromLinkable: !input,
toLinkable: input,
fromSpot: go.Spot.Right,
toSpot: go.Spot.Left
}
}
function updatePort(node, link, port) {
var input = port.toLinkable; // a bit of a hack to decide if a port is for input or not
var connected = node.findLinksConnected(port.portId).count > 0;
if (input && !connected) {
port.fill = "white";
port.strokeWidth = 1;
port.alignment = input ? new go.Spot(0, 0.5, -port.strokeWidth/2, 0) : go.Spot.Left;
} else {
port.fill = "gray";
port.strokeWidth = 0;
port.alignment = input ? go.Spot.Left : go.Spot.Right;
}
}
myDiagram.nodeTemplate =
$(go.Node, "Spot",
{ locationObjectName: "BODY", selectionObjectName: "BODY" },
{ linkConnected: updatePort, linkDisconnected: updatePort },
$(go.Panel, "Auto", { name: "BODY", width: 100, height: 50 },
$(go.Shape, { fill: "white", stroke: "gray" }),
$(go.TextBlock, { editable: true },
new go.Binding("text").makeTwoWay())
),
$(go.Shape, portStyle(true)),
$(go.Shape, portStyle(false))
);
myDiagram.linkTemplate =
$(go.Link,
{ relinkableFrom: true, relinkableTo: true },
$(go.Shape))
myDiagram.model = $(go.GraphLinksModel,
{
linkFromPortIdProperty: "fromPort",
linkToPortIdProperty: "toPort",
nodeDataArray:
[
{ key: 1, text: "Alpha" },
{ key: 2, text: "Beta" },
],
linkDataArray:
[
{ from: 1, fromPort: "out", to: 2, toPort: "in" }
]
});
}
</script>
</head>
<body onload="init()">
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
<textarea id="mySavedModel" style="width:100%;height:250px"></textarea>
</body>
</html>
This, after making a copy of the “Beta” node and starting to draw a new link to it, results in:
Works perfectly. Thank you for the assistance.