Hey walter, Thanks for the replay. I guess using subgroup will be scalable for future features. I was able to achieve it with sub group, below is snap of actual (Please ignore yellow marking)
Though i am facing aligning the sub group to normal nodes, can you help me in this regard. (Undesired space is marked with blue color and red background is subgroup)
i am using table layout, and below is complete code for group template
$(go.Diagram, {
contentAlignment: go.Spot.TopLeft,
layout: $(TableLayout, $(go.RowColumnDefinition, { row: 1, height: 50 }), // fixed size column headers
$(go.RowColumnDefinition, { column: 1, width: 50 })),
// disallow nodes to be dragged to the diagram's background
mouseDrop: e => {
e.diagram.currentTool.doCancel();
},
// a clipboard copied node is pasted into the original node's group (i.e. lane).
// automatically re-layout the swim lanes after dragging the selection
"SelectionMoved": relayoutDiagram, // this DiagramEvent listener is
"SelectionCopied": relayoutDiagram, // defined above
"toolManager.hoverDelay": 300,
"commandHandler.doKeyDown": () => { },
isReadOnly: this.props.isReadOnly,
model: $(go.GraphLinksModel,
{
linkKeyProperty: 'key', // IMPORTANT! must be defined for merges and data sync when using GraphLinksModel
// positive keys for nodes
makeUniqueKeyFunction: (m, data) => {
let k = data.key || 1;
while (m.findNodeDataForKey(k)) k++;
data.key = k;
return k;
},
// negative keys for links
makeUniqueLinkKeyFunction: (m, data) => {
let k = data.key || -1;
while (m.findLinkDataForKey(k)) k--;
data.key = k;
return k;
}
})
});
const makeGroupLayout = (isSubGraph) => {
return $(go.GridLayout, // automatically lay out the lane's subgraph
{
wrappingColumn: 1,
cellSize: isSubGraph ? new go.Size(0, 0) : new go.Size(50, 50),
spacing: isSubGraph ? new go.Size(0, 10) : new go.Size(50, 50),
comparer: reorderBasedOnLoc,
alignment: go.Spot.Left
});
}
diagram.groupTemplate = // for cells
$(go.Group, "Auto",
{
layerName: "Background", avoidable: false,
stretch: go.GraphObject.Fill,
selectable: false,
computesBoundsAfterDrag: true,
computesBoundsIncludingLocation: true,
layout: makeGroupLayout(false),
handlesDragDropForMembers: true, // don't need to define handlers on member Nodes and Links
mouseDragEnter: (e, group, prev) => { group.isHighlighted = true; },
mouseDragLeave: (e, group, next) => { group.isHighlighted = false; },
mouseDrop: (e, group) => {
// drop logic
},
new go.Binding('layout', '', ({ isSubGraph }) => makeGroupLayout(isSubGraph)),
new go.Binding("row"),
new go.Binding("column", "col"),
new go.Binding('background', '', ({ isSubGraph }) => isSubGraph ? 'red' : 'transparent'),
// the group is normally unseen -- it is completely transparent except when given a color or when highlighted
$(go.Shape,
{
fill: "transparent", stroke: "transparent",
strokeWidth: 25,
stretch: go.GraphObject.Fill
},
new go.Binding("fill", "color")),
$(go.Panel, 'Vertical', {},
new go.Binding('alignment', '', ({ isSubGraph }) => isSubGraph ?
go.Spot.Left : new go.Spot(0, 0, 25, 25)),
new go.Binding('padding', ({ isSubGraph }) => isSubGraph ?
new go.Margin(0, 0) : new go.Margin(0, 25, 25, 0)),
$(go.Placeholder))
);
