I’ve added a subgraph to my diagram.
Collapsing the graph works just fine. But then when I click on the expand button, nothing happens and there is the following exception in the console :
This is the template (taken from tutorial)
dia.groupTemplate =
$(go.Group, 'Auto',
{ layout: $(go.TreeLayout) },
$(go.Shape, 'Rectangle', { fill: 'orange', stroke: 'darkorange' }),
$(go.Panel, 'Table',
{ margin: 0.5 }, // avoid overlapping border with table contents
$(go.RowColumnDefinition, { row: 0, background: 'white' }), // header is white
$('SubGraphExpanderButton', { row: 0, column: 0, margin: 3 }),
$(go.TextBlock, // title is centered in header
{
row: 0, column: 1, font: 'bold 14px Sans-Serif', stroke: 'darkorange',
textAlign: 'center', stretch: go.GraphObject.Horizontal
},
new go.Binding('text')),
$(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',
exp => exp ? 10 : 0).ofObject())
)
);
data :
public diagramNodeData: Array<go.ObjectData> =
[
{
key: 'Alpha', label: 'Alpha', color: 'lightblue', arr: [1, 2],
expression: 'taskPropertySet.myProperty > 10', location: '-290 0', group: 'Group'
},
{ key: 'Gamma', label: 'Gamma', color: 'lightgreen', location: '-119.5 0', group: 'Group' },
{ key: 'Group', isGroup: true, text: 'GROUP' },
{ key: 'PaletteDecisionNode', color: 'firebrick', figure: 'Diamond', label: 'Decision', location: '110 0' },
{ key: 'PaletteTaskNode', color: 'blueviolet', figure: 'RoundedRectangle', label: 'Task', location: '330 0' },
{ key: 'PaletteTaskNode2', color: 'blueviolet', figure: 'RoundedRectangle', label: 'Task', location: '110 150' }
];
public diagramLinkData: Array<go.ObjectData> = [
{ key: -1, from: 'Alpha', to: 'Test', fromPort: 'r', toPort: '1' },
{
key: -2, from: 'Alpha', to: 'Gamma', fromPort: 'b', toPort: 't',
points: [-169.5, 30.25, -159.5, 30.25, -144.5, 30.25, -144.5, 30.25, -129.5, 30.25, -119.5, 30.25]
},
{ key: -3, from: 'Test', to: 'Test' },
{ key: -4, from: 'Gamma', to: 'Delta', fromPort: 'r', toPort: 'l' },
{ key: -5, from: 'Delta', to: 'Alpha', fromPort: 't', toPort: 'r' },
{
from: 'Gamma', to: 'PaletteDecisionNode', fromPort: 'R', toPort: '', key: -6,
points: [1, 30.25, 11, 30.25, 11, 30.25, 11, 30.25, 100, 30.25, 110, 30.25]
},
{
from: 'PaletteDecisionNode', to: 'PaletteTaskNode', fromPort: 'R', toPort: 'L', key: -7,
points: [230.5, 30.25, 240.5, 30.25, 280.25, 30.25, 280.25, 30.25, 320, 30.25, 330, 30.25], text: 'NO'
},
{
from: 'PaletteDecisionNode', to: 'PaletteTaskNode2', fromPort: 'B', toPort: 'T', key: -8,
points: [170.25, 60.5, 170.25, 70.5, 170.25, 105.25, 170.25, 105.25, 170.25, 140, 170.25, 150], text: 'YES\n\n'
}
];