We want to show a circular shape relative to the shape beside it. Both of these would be the part of same node. The node width is dynamic in nature and is decided by the size of content inside it. How do we calculate the position of circle so that it fits right where the previous shape ends.
In the above image, size of Branch 1 is dynamic, how do we show that orange circle beside it.
Note: these both constitute a single node
When you have two elements and want to control their relative positions and/or sizes, that is the responsibility of the Panel that holds them both.
There are several possible answers, depending on the nature of the relative positioning that you want.
The simplest is to use a “Horizontal” Panel:
myDiagram.nodeTemplate =
$(go.Node, "Horizontal",
$(go.TextBlock, { editable: true },
new go.Binding("text").makeTwoWay()),
$(go.Shape, "Circle",
{
width: 18, height: 18,
fill: "transparent", stroke: "orange", strokeWidth: 2
})
);
More generally you could use a “Spot” Panel:
myDiagram.nodeTemplate =
$(go.Node, "Spot",
$(go.TextBlock, { editable: true },
new go.Binding("text").makeTwoWay()),
$(go.Shape, "Circle",
{
alignment: go.Spot.TopRight, alignmentFocus: go.Spot.TopLeft,
width: 18, height: 18,
fill: "transparent", stroke: "orange", strokeWidth: 2
})
);
Learn more about Panels at: GoJS Panels -- Northwoods Software