Sorry, I was saying, I need both auto Layout group and auto-adjusts connection inside the group. Right now it is seen disconnected.
My LinkTemplate
myDiagram.linkTemplate =
$(go.Link, // the whole link panel
{ selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate },
{ relinkableFrom: true, relinkableTo: true, reshapable: true },
{
routing: go.Link.AvoidsNodes,
curve: go.Link.JumpOver,
corner: 5,
toShortLength: 4
},
new go.Binding("points").makeTwoWay(),
$(go.Shape, // the link path shape
{ isPanelMain: true, strokeWidth: 2 }),
$(go.Shape, // the arrowhead
{ toArrow: "Standard", stroke: null }),
$(go.Panel, "Auto",
new go.Binding("visible", "isSelected").ofObject(),
$(go.Shape, "RoundedRectangle", // the link shape
{ fill: "#F8F8F8", stroke: null }),
$(go.TextBlock,
{
textAlign: "center",
font: "10pt helvetica, arial, sans-serif",
stroke: "#919191",
margin: 2,
minSize: new go.Size(10, NaN),
editable: true
},
new go.Binding("text").makeTwoWay())
)
);
My Group Template
myDiagram.groupTemplate =
$(go.Group, "Auto",
{
background: "transparent",
ungroupable: true,
mouseDragEnter: function (e, grp, prev) { highlightGroup(e, grp, true); },
mouseDragLeave: function (e, grp, next) { highlightGroup(e, grp, false); },
computesBoundsAfterDrag: true,
mouseDrop: finishDrop,
handlesDragDropForMembers: true,
computesBoundsIncludingLocation: true,
layout: makeLayout(false)
},
new go.Binding("layout", "horiz", makeLayout),
new go.Binding("background", "isHighlighted", function (h) {
return h ? "rgba(255,0,0,0.2)" : "transparent";
}).ofObject(),
$(go.Shape, "Rectangle",
{ fill: null, stroke: defaultColor(false), strokeWidth: 2 },
new go.Binding("stroke", "horiz", defaultColor),
new go.Binding("stroke", "color")),
$(go.Panel, "Vertical", // title above Placeholder
$(go.Panel, "Horizontal", // button next to TextBlock
{ stretch: go.GraphObject.Horizontal, background: defaultColor(false) },
new go.Binding("background", "horiz", defaultColor),
new go.Binding("background", "color"),
$("SubGraphExpanderButton",
{ alignment: go.Spot.Right, margin: 5 }),
$(go.TextBlock,
{
alignment: go.Spot.Left,
editable: true,
margin: 5,
font: defaultFont(false),
opacity: 0.75, // allow some color to show through
stroke: "#404040"
},
new go.Binding("text", "viewName").makeTwoWay()),
new go.Binding("font", "horiz", defaultFont),
),
$(go.Placeholder, // becomes zero-sized when Group.isSubGraphExpanded is false
{ row: 1, columnSpan: 2, padding: 10, alignment: go.Spot.TopLeft },
new go.Binding("padding", "isSubGraphExpanded",
function (exp) { return exp ? 10 : 0; }).ofObject())
) // end Vertical Panel
);