Regrouping example with circular groups

GoJS
1

I am new to go.js and I want to create a group which is circular in shape and want to include two more circular nodes dynamically. Can anybody please help me to modify regrouping example with circular shaped groups. (Regrouping Demo)

2

Click-collapsing Groups provides an example of using an ellipse surrounding the Placeholder.

3

Thank you Walter. I could create circular group, But ports are not at the edges of the circle. Can you please help me to solve this.

Below is the code

myDiagram.groupTemplateMap.add(“Timer”,
$(go.Group, “Vertical”,groupStyle(),new go.Binding(“location”, “loc”, go.Point.parse)
<span =“Apple-tab-span” style=“white-space:pre”> .makeTwoWay(go.Point.stringify),
$(go.Panel, “Auto”, { name: “BODY” },
// the background shape for the Group is either a Rectangle or an Ellipse, depending on data.round
$(go.Shape, “Circle”, { fill: “blue”, stroke: “gray”,strokeWidth : 5, minSize : new go.Size(70,70) }),
$(go.Panel,
// this occupies the area covered by the subgraph Parts
$(go.Placeholder, { padding: 5 })
),
makePort(“T”, go.Spot.Top, true, true, true, true), makePort(“L”, go.Spot.Left,
<span =“Apple-tab-span” style=“white-space:pre”> true, true,true, true), makePort(“R”, go.Spot.Right, true, true, true, true),
<span =“Apple-tab-span” style=“white-space:pre”> makePort(“B”, go.Spot.Bottom, true, true, true, true))));

function makePort(name, spot, output, input, outSelfNode, inSelfNode) {
<span =“Apple-tab-span” style=“white-space:pre”> // the port is basically just a small circle that has a white stroke when it is made visible
<span =“Apple-tab-span” style=“white-space:pre”> return $(go.Shape, “Circle”, {
<span =“Apple-tab-span” style=“white-space:pre”> fill : “transparent”,
<span =“Apple-tab-span” style=“white-space:pre”> stroke : null, // this is changed to “white” in the showPorts function
<span =“Apple-tab-span” style=“white-space:pre”> desiredSize : new go.Size(6, 6),
<span =“Apple-tab-span” style=“white-space:pre”> alignment : spot,
<span =“Apple-tab-span” style=“white-space:pre”> alignmentFocus : spot, // align the port on the main Shape
<span =“Apple-tab-span” style=“white-space:pre”> portId : name, // declare this object to be a “port”
<span =“Apple-tab-span” style=“white-space:pre”> fromSpot : spot,
<span =“Apple-tab-span” style=“white-space:pre”> toSpot : spot, // declare where links may connect at this port
<span =“Apple-tab-span” style=“white-space:pre”> fromLinkable : output,
<span =“Apple-tab-span” style=“white-space:pre”> toLinkable : input, // declare whether the user may draw links to/from here
<span =“Apple-tab-span” style=“white-space:pre”> fromLinkableSelfNode: outSelfNode,
<span =“Apple-tab-span” style=“white-space:pre”> toLinkableSelfNode: inSelfNode,
<span =“Apple-tab-span” style=“white-space:pre”> fromLinkableDuplicates: true,
<span =“Apple-tab-span” style=“white-space:pre”> toLinkableDuplicates: true,
<span =“Apple-tab-span” style=“white-space:pre”> cursor : “pointer” // show a different cursor to indicate potential link point
<span =“Apple-tab-span” style=“white-space:pre”> });
<span =“Apple-tab-span” style=“white-space:pre”> }

4

You have put the port elements in the unnamed Panel that is holding the Placeholder rather than in the “BODY” Panel.

Of course if you leave the Placeholder as the only element in a Panel of type “Position”, the Panel is superfluous.