OK, I’ve made some assumptions about what you want. Here’s all of the code – you can adapt it for your own requirements. I didn’t bother doing much in the way of styling, since that’s something you can do easily.
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
"undoManager.isEnabled": true,
"linkingTool.isEnabled": false, // invoked explicitly by drawLink function, below
"linkingTool.direction": go.LinkingTool.ForwardsOnly // only draw "from" towards "to"
});
myDiagram.nodeTemplate =
$(go.Node, "Spot",
{
// show the Adornment when a mouseHover event occurs
mouseHover: function(e, obj) {
var node = obj.part;
theHoverAdornment.adornedObject = node;
node.addAdornment("MouseHover", theHoverAdornment);
}
},
$(go.Panel, "Auto",
$(go.Shape,
{ fill: "white", portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer" },
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 8, editable: true },
new go.Binding("text").makeTwoWay())
),
$(go.Shape, "Circle",
{ alignment: go.Spot.Right, width: 5, height: 5, name: "AD" })
);
var ItemHeight = 20;
var ItemSpacing = 10;
var PathWidth = 30;
function computePathPosition(i, shape) {
var numads = shape.part.data.adornments.length;
var totalheight = ItemHeight * numads + ItemSpacing * (numads-1);
var fy = totalheight/2;
var ty = i * (ItemHeight+ItemSpacing) + ItemHeight/2;
var sy = (ty > fy) ? 0 : (fy-ty);
var ey = (ty > fy) ? (ty-fy) : 0;
var fig = new go.PathFigure(0, sy);
fig.add(new go.PathSegment(go.PathSegment.Line, PathWidth/2, sy));
fig.add(new go.PathSegment(go.PathSegment.Line, PathWidth/2, ey));
fig.add(new go.PathSegment(go.PathSegment.Line, PathWidth, ey));
shape.geometry = new go.Geometry().add(fig);
return new go.Point(0, Math.min(fy, ty));
}
function computeBodyPosition(i) {
return new go.Point(PathWidth, i * (ItemHeight+ItemSpacing));
}
var theHoverAdornment =
$(go.Adornment, "Spot",
{
background: "transparent",
// hide the Adornment when the mouse leaves it
mouseLeave: function(e, obj) {
obj.part.adornedPart.removeAdornment("MouseHover");
}
},
$(go.Placeholder),
$(go.Panel, "Position",
new go.Binding("itemArray", "adornments"),
{
name: "ITEMS",
alignment: go.Spot.Right,
alignmentFocus: go.Spot.Left,
itemTemplate:
$(go.Panel, "Position",
// the pretend link to one of the "adornments"
$(go.Shape,
{ name: "PATH", fill: null, strokeDashArray: [4, 3] },
new go.Binding("position", "itemIndex", computePathPosition).ofObject()),
// the pretend node for one of the "adornments"
$(go.Panel, "Spot",
new go.Binding("position", "itemIndex", computeBodyPosition).ofObject(),
{ // drawLink is defined below, to support interactively drawing new links
isActionable: true,
click: drawLink, // click on Button and then click on target node
actionMove: drawLink // drag from Button to the target node
},
$(go.Panel, "Auto",
{ width: 70, height: ItemHeight },
$(go.Shape, "RoundedRectangle",
{ fill: "white", stroke: "purple" }),
$(go.TextBlock,
new go.Binding("text", ""))
),
$(go.Shape, "Circle",
{ alignment: go.Spot.Left, width: 5, height: 5, name: "AD" })
)
)
}
)
);
function drawLink(e, button) {
var node = button.part.adornedPart;
var tool = e.diagram.toolManager.linkingTool;
tool.archetypeLinkData.text = button.panel.data;
tool.startObject = node.port;
e.diagram.currentTool = tool;
tool.doActivate();
}
myDiagram.linkTemplate =
$(go.Link,
{ routing: go.Link.Orthogonal, corner: 10 },
$(go.Shape),
$(go.Shape, { toArrow: "OpenTriangle" }),
$(go.Panel, "Auto",
{ width: 70, height: ItemHeight },
$(go.Shape, "RoundedRectangle",
{ fill: "white", stroke: "purple" }),
$(go.TextBlock,
new go.Binding("text"))
),
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", color: "lightblue", adornments: ["D"] },
{ key: 2, text: "Beta", color: "orange", adornments: ["A", "B", "C"] },
{ key: 3, text: "Gamma", color: "lightgreen", adornments: ["A", "B"] },
{ key: 4, text: "Delta", color: "pink", adornments: ["A", "B", "C", "D", "E"] }
],
[
{ from: 1, to: 2, text: "A" },
{ from: 1, to: 3, text: "A" },
{ from: 3, to: 4, text: "C" }
]);
}
Here’s what it looks like after I hovered over the “Delta” node, clicked on one of the letter “E”, and then moved the mouse up and to the right:
After drawing the link from “Delta” to “Beta”:
You will want to read:
https://gojs.net/latest/intro/linkLabels.html
https://gojs.net/latest/intro/tools.html#LinkingToolAndRelinkingTool
