Here’s an example selection Adornment that aligns its Shape to center on an element of the Adornment.adornedObject whose GraphObject.name is a data bound name. In this case the optional name is stored as the data.a
property value. You will probably have different requirements.
<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2022 by Northwoods Software Corporation. -->
</head>
<body>
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
<textarea id="mySavedModel" style="width:100%;height:250px"></textarea>
<script src="https://unpkg.com/gojs"></script>
<script src="https://unpkg.com/gojs/extensions/HyperlinkText.js"></script>
<script id="code">
const $ = go.GraphObject.make;
const myDiagram =
$(go.Diagram, "myDiagramDiv",
{
layout: $(go.TreeLayout, { angle: 90 }),
"undoManager.isEnabled": true,
"ModelChanged": e => { // just for demonstration purposes,
if (e.isTransactionFinished) { // show the model data in the page's TextArea
document.getElementById("mySavedModel").textContent = e.model.toJson();
}
}
});
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{
width: 150, height: 100,
isShadowed: true
},
$(go.Shape,
{ fill: "white", stroke: "lightgray" },
new go.Binding("fill", "color", c => go.Brush.darkenBy(c, 0.05))),
$(go.Shape, "Ellipse",
{ fill: "white", stroke: "lightgray", stretch: go.GraphObject.Fill },
new go.Binding("figure"),
new go.Binding("fill", "color")),
$(go.Panel, "Table",
$("HyperlinkText",
function(node) { return `https://gojs.net/latest/api/symbols/${node.data.name}.html`; },
$(go.TextBlock,
{ name: "LINK", stroke: "dodgerblue", isUnderline: true },
new go.Binding("text", "name")),
{ row: 0, margin: 4 }),
$(go.TextBlock, { row: 1, name: "TEXT" },
new go.Binding("text", "country")),
$(go.Picture, "https://upload.wikimedia.org/wikipedia/commons/e/e4/Infobox_info_icon.svg",
{ row: 2, name: "ICON",
width: 24, height: 24,
click: (e, pic) => window.open(`some url for ${pic.part.data.name}`)
})
)
);
myDiagram.nodeTemplate.selectionAdornmentTemplate =
$(go.Adornment, "Spot",
$(go.Placeholder),
$(go.Shape, "Circle",
{ width: 20, height: 20, fill: null, stroke: "magenta" },
new go.Binding("alignment", "a", (name, shape) => {
const obj = shape.part.adornedObject;
let focus = obj.findObject(name);
if (!focus) focus = obj;
const oc = obj.getDocumentPoint(go.Spot.Center);
const fc = focus.getDocumentPoint(go.Spot.Center);
return new go.Spot(0.5, 0.5, fc.x-oc.x, fc.y-oc.y);
}))
)
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, name: "Diagram", color: "lightgoldenrodyellow", country: "United States", a: "ICON" },
{ key: 2, name: "Node", color: "khaki", country: "United Kingdom", figure: "Triangle", a: "LINK" }
],
[
{ from: 1, to: 2 }
]);
</script>
</body>
</html>