So, I have group nodes and regular nodes in my palette. I am able to drag the regular nodes (whether they are children of a group node or standalones) and EXPANDED group nodes over to the diagram with no issue. However, it is when a group node is NOT expanded that the drag from the palette over to the diagram will push the diagram and existing nodes over.
Here is what the group node looks like:
const paletteGroupNode = $(
go.Group,
'Vertical',
{
layout: $(go.TreeLayout,
{ angle: 0, arrangement: go.TreeLayout.ArrangementVertical, alignment: go.TreeLayout.AlignmentStart, isRealtime: false }),
isSubGraphExpanded: false,
selectable: true,
background: 'rgba(0, 159, 219, 0.25)',
},
new go.Binding('isSubGraphExpanded', 'isExpanded').makeTwoWay(),
new go.Binding('copyable', '', (data: any) => data.state !== GoJsNodeState.Copied),
// Main content of the node
$(
go.Panel,
'Auto',
$(
go.Shape,
'RoundedRectangle',
new go.Binding('fill', 'state', (state: any) =>
state === GoJsNodeState.Copied
? '#ccc'
: state === GoJsNodeState.Palette || state === GoJsNodeState.Diagram
? '#56B37A'
: null
),
new go.Binding('stroke', 'state', (state: any) =>
state === GoJsNodeState.Copied
? '#ccc'
: state === GoJsNodeState.Palette || state === GoJsNodeState.Diagram
? '#56B37A'
: null
),
{
width: 200,
minSize: new go.Size(200, 35),
maxSize: new go.Size(200, 35),
strokeWidth: 1,
alignment: go.Spot.Center,
}
),
$(go.Panel, 'Horizontal', { stretch: go.GraphObject.Horizontal, alignment: go.Spot.Left },
paletteGroupTemplateIcon,
$(
go.TextBlock,
{
margin: new go.Margin(5, 10, 0, 5),
width: 135,
maxSize: new go.Size(135, 30),
overflow: go.TextBlock.OverflowEllipsis,
row: 3,
wrap: go.TextBlock.WrapDesiredSize,
textAlign: 'center',
font: 'bold 10pt Barlow, sans-serif',
stroke: 'white',
},
new go.Binding('text', 'title')
),
$('SubGraphExpanderButton', {
alignment: go.Spot.Right,
alignmentFocus: go.Spot.Left,
width: 20,
height: 20,
}) // end SubGraphExpanderButton
)// end Horizontal Panel
), // end main panel
$(go.Placeholder,
{
padding: new go.Margin(5, 0),
alignment: go.Spot.Top,
},
) // end placeholder
); // end paletteGroupNode
- I have tried disabling the diagram’s panningTool which didn’t change anything. I’ve also tried setting the autoScrollRegion to 0 which did not solve this current problem (but it did solve a different issue where dragging and holding the same group node near the edge of the diagram sends the diagram/existing nodes flying to the right).
The Palette uses a TreeLayout and the Diagram uses a custom TreeLayout (since there is no “import” node in the diagram in the gif above, it just acts as a regular TreeLayout, but the issue still exists with the 3rd node in).
Running out of ideas on what the problem may be.
Note: Everything seems to be working fine and how I want it, aside from this tiny (but very noticeable) visual bug.