“We have a nested node structure. By default, I want to show the OuterClass node, while the remaining nodes should be hidden. When we click on the PanelExpanderButton (nested type) of OuterClass, only the MiddleClass node should be displayed Inside. (nested type row)”
Source Code:
1) Group node Template:
const groupTemplate = $(go.Group, “Auto”,
{
layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
dragComputation: avoidNodeOverlap,
alignment: go.Spot.Center,
selectionAdorned: false,
minSize: new go.Size(100, NaN),
isShadowed: true,
shadowBlur: 2,
shadowOffset: new go.Point(4, 6),
},
new go.Binding(“shadowColor”, “nodedetails”, nd => nd.shadowcolor).makeTwoWay(),
$(go.Shape,
new go.Binding(“figure”, “category”, nd => nd == “Record” ? “Rectangle” : “RoundedRectangle”),
{
stretch: go.GraphObject.Fill,
alignment: go.Spot.Center,
stroke: null,
strokeWidth: 0
},
new go.Binding(“fill”, “nodedetails”, nd => nd.color).makeTwoWay(),
new go.Binding(“strokeDashArray”, “category”, nd => {
if (nd == “Static Class”) return [10, 3];
if (nd == “Abstract Partial Class”) return [4, 1];
return null;
}),
new go.Binding(“stroke”, “”, dottedShapeIsSelected).ofObject(), // Use For Select
new go.Binding(“strokeWidth”, “isSelected”, h => h ? 4 : 2).ofObject(),
new go.Binding(“stroke”, “”, dottedShapeIsHighlighted).ofObject(), // Use For Search
new go.Binding(“strokeWidth”, “isHighlighted”, h => h ? 4.8 : 2).ofObject()
),
$(go.Panel, “Vertical”,
$(go.Panel, “Horizontal”,
{ stretch: go.GraphObject.Horizontal },
$(go.Panel, “Table”,
{
alignment: go.Spot.Left,
columnSpan: 2,
defaultRowSeparatorStrokeWidth: 2,
stretch: go.GraphObject.Horizontal, // Adjusted stretch property
},
new go.Binding(“defaultRowSeparatorStroke”, “nodedetails”, nd => nd.color).makeTwoWay(),
$(go.Panel, “TableRow”,
{
row: 0
},
new go.Binding(“background”, “nodedetails”, nd => nd.color).makeTwoWay(),
$(go.TextBlock,
{
font: “bold 13pt Calibri”,
isMultiline: false,
name: ‘myTextBlock’,
minSize: new go.Size(100, NaN),
margin: 8,
editable: true,
},
new go.Binding(“margin”, “category”, nd => nd === “ErrorMessage” ? new go.Margin(0, 4, 0, 4) : new go.Margin(0, 2, 13, 2)),
new go.Binding(“alignment”, “category”, nd => nd === “ErrorMessage” ? go.Spot.Center : go.Spot.TopLeft),
new go.Binding(“text”, “text”).makeTwoWay()
),
$(go.TextBlock,
{
textAlign: “center”,
margin: new go.Margin(25, 2, 2, 2),
alignment: go.Spot.TopLeft,
},
new go.Binding(“text”, “category”, nd => nd === “ErrorMessage” ? “” : nd)
),
$(go.Panel, “Horizontal”, {
alignment: go.Spot.TopLeft,
},
// Arrow icon
$(go.TextBlock,
{
font: “bold 14.5px FontAwesome”, // Using FontAwesome for the icon
},
new go.Binding(“text”, “parentclass”, isAvailableParentClass),
new go.Binding(“margin”, “parentclass”, x => x == “” ? new go.Margin(0, 0, 0, 0) :
new go.Margin(44, 2, 2, 2)),
),
// Your text block
$(go.TextBlock,
{
minSize: new go.Size(NaN, 10),
textAlign: “left”, // Align text to the left for better readability
isMultiline: true, // Allow multiline text
wrap: go.TextBlock.WrapDesiredSize, // Wrap text according to desired size
font: “12pt Calibri”, // Set font size and style
},
new go.Binding(“text”, “parentclass”, isParentClass),
new go.Binding(“margin”, “parentclass”, x => x == “” ? new go.Margin(0, 0, 0, 0) :
new go.Margin(45, 2, 2, 2))
)
),
$(“PanelExpanderButton”, “PARENTBUTTON”,
{
column: 1,
alignment: go.Spot.TopRight,
click: ParentExpanderbutton,
},
new go.Binding(“visible”, “isdropdownvisible”, setBooleanvalue).makeTwoWay(),
go.GraphObject.make(go.Shape,
{
name: ‘ButtonIcon’,
width: 8,
height: 5,
scale: 0.80,
},
new go.Binding(‘geometryString’, ‘visible’,
(vis) => {
return vis ? ‘F M24.642,18.124l-1.768,1.768L16,13.017,9.124,19.892,7.357,18.124,16,9.481Zm0,0’ : ‘F M24.642,13.874l-1.768-1.768L16,18.981,9.124,12.106,7.357,13.874,16,22.517Zm0,0’
}
).ofObject(‘PARENTBUTTON’)
)
)
),
$(go.Panel, “TableRow”,
{
row: 1,
name: “PARENTBUTTON”,
visible: false,
},
new go.Binding(“background”, “nodedetails”, nd => nd.bgcolor).makeTwoWay(),
$(go.Panel, "Table",
{
alignment: go.Spot.Center,
stretch: go.GraphObject.Horizontal, // Adjusted stretch property
columnSpan: 2,
},
$(go.Panel, "TableRow",
{
row: 0,
name: "FIELD"
},
new go.Binding("background", "nodedetails", nd => nd.color).makeTwoWay(),
$(go.TextBlock, "Fields",
{
column: 0,
font: "bold 11pt Calibri",
alignment: go.Spot.Left,
margin: new go.Margin(3, 0, 3, 3),
},
),
$("PanelExpanderButton", "FIELDEXPANDERBUTTON",
{
column: 1,
click: FillFieldsList,
alignment: go.Spot.TopRight,
margin: new go.Margin(3, 0, 3, 0),
},
go.GraphObject.make(go.Shape,
{
name: 'ButtonIcon',
width: 8,
height: 5,
scale: 0.80,
},
new go.Binding('geometryString', 'visible',
(vis) => {
return vis ? 'F M24.642,18.124l-1.768,1.768L16,13.017,9.124,19.892,7.357,18.124,16,9.481Zm0,0' : 'F M24.642,13.874l-1.768-1.768L16,18.981,9.124,12.106,7.357,13.874,16,22.517Zm0,0'
}
).ofObject('FIELDEXPANDERBUTTON')
)
),
),
$(go.Panel, "TableRow",
{
row: 1,
name: "FIELDEXPANDERBUTTON",
visible: false,
},
$(go.Panel, "Table",
{
columnSpan: 2,
itemTemplate: fieldsTemplate,
alignment: go.Spot.Center,
stretch: go.GraphObject.Horizontal, // Adjusted stretch property
},
new go.Binding("itemArray", "fields"),
new go.Binding("width", "", (obj) => setWidth(obj)).ofObject(),
new go.Binding("defaultRowSeparatorStroke", "nodedetails", nd => nd.rowseparatorcolor).makeTwoWay(),
),
),
$(go.Panel, "TableRow",
{
row: 2,
name: "PROPERTY"
},
new go.Binding("background", "nodedetails", nd => nd.color).makeTwoWay(),
$(go.TextBlock, "Properties",
{
column: 0,
font: "bold 11pt Calibri",
alignment: go.Spot.Left,
margin: new go.Margin(3, 0, 3, 3),
},
),
$("PanelExpanderButton", "PROPERTYEXPANDERBUTTON",
{
column: 1,
alignment: go.Spot.TopRight,
click: FillPropertyList,
margin: new go.Margin(3, 0, 3, 0),
},
go.GraphObject.make(go.Shape,
{
name: 'ButtonIcon',
width: 8,
height: 5,
scale: 0.80,
},
new go.Binding('geometryString', 'visible',
(vis) => {
return vis ? 'F M24.642,18.124l-1.768,1.768L16,13.017,9.124,19.892,7.357,18.124,16,9.481Zm0,0' : 'F M24.642,13.874l-1.768-1.768L16,18.981,9.124,12.106,7.357,13.874,16,22.517Zm0,0'
}
).ofObject('PROPERTYEXPANDERBUTTON')
)
)
),
$(go.Panel, "TableRow",
{
row: 3,
name: "PROPERTYEXPANDERBUTTON",
visible: false,
},
$(go.Panel, "Table",
{
columnSpan: 2,
itemTemplate: propertyTemplate,
stretch: go.GraphObject.Horizontal, // Adjusted stretch property
alignment: go.Spot.Center,
},
new go.Binding("itemArray", "properties"),
new go.Binding("width", "", (obj) => setWidth(obj)).ofObject(),
new go.Binding("defaultRowSeparatorStroke", "nodedetails", nd => nd.rowseparatorcolor).makeTwoWay(),
),
),
$(go.Panel, "TableRow",
{
row: 4,
name: "METHOD",
},
new go.Binding("background", "nodedetails", nd => nd.color).makeTwoWay(),
$(go.TextBlock, "Methods",
{
column: 0,
font: "bold 11pt Calibri",
alignment: go.Spot.Left,
margin: new go.Margin(3, 0, 3, 3),
},
),
$("PanelExpanderButton", "METHODEXPANDERBUTTON",
{
column: 1,
alignment: go.Spot.TopRight,
click: FillMethodList,
margin: new go.Margin(3, 0, 3, 0),
},
go.GraphObject.make(go.Shape,
{
name: 'ButtonIcon',
width: 8,
height: 5,
scale: 0.80,
},
new go.Binding('geometryString', 'visible',
(vis) => {
return vis ? 'F M24.642,18.124l-1.768,1.768L16,13.017,9.124,19.892,7.357,18.124,16,9.481Zm0,0' : 'F M24.642,13.874l-1.768-1.768L16,18.981,9.124,12.106,7.357,13.874,16,22.517Zm0,0'
}
).ofObject('METHODEXPANDERBUTTON')
)
)
),
$(go.Panel, "TableRow",
{
row: 5,
name: "METHODEXPANDERBUTTON",
visible: false,
},
$(go.Panel, "Table",
{
columnSpan: 2,
itemTemplate: methodTemplate,
alignment: go.Spot.Center,
stretch: go.GraphObject.Horizontal, // Adjusted stretch property
},
new go.Binding("itemArray", "methods"),
new go.Binding("width", "", (obj) => setWidth(obj)).ofObject(),
new go.Binding("defaultRowSeparatorStroke", "nodedetails", nd => nd.rowseparatorcolor).makeTwoWay(),
),
),
$(go.Panel, "TableRow",
{
row: 6,
name: "NESTED",
},
new go.Binding("background", "nodedetails", nd => nd.color).makeTwoWay(),
$(go.TextBlock, "Nested Type",
{
column: 0,
font: "bold 11pt Calibri",
alignment: go.Spot.Left,
margin: new go.Margin(3, 0, 3, 3),
},
),
$("PanelExpanderButton", "NESTEDEXPANDERBUTTON",
{
column: 1,
alignment: go.Spot.TopRight,
click: FillNestedList,
margin: new go.Margin(3, 0, 3, 0),
},
go.GraphObject.make(go.Shape,
{
name: 'ButtonIcon',
width: 8,
height: 5,
scale: 0.80,
},
new go.Binding('geometryString', 'visible',
(vis) => {
return vis ? 'F M24.642,18.124l-1.768,1.768L16,13.017,9.124,19.892,7.357,18.124,16,9.481Zm0,0' : 'F M24.642,13.874l-1.768-1.768L16,18.981,9.124,12.106,7.357,13.874,16,22.517Zm0,0'
}
).ofObject('NESTEDEXPANDERBUTTON')
)
)
),
$(go.Panel, "TableRow",
{
row: 7,
name: "NESTEDEXPANDERBUTTON",
visible: false,
},
$(go.Panel, "Table",
{
},
),
)
)
)
)
),
$(go.Placeholder, { padding: 8, margin: 4, alignment: go.Spot.TopLeft })
)
);
2) Node Template: Use the same code/structure as in the group template.
3) Mapping both template here:
4) Set visibility of nested panel button:
