Diagram jumps when dragging collapsed group node from the palette to the diagram


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 = $(
			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
				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 },
						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
				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.

Before you do any drag-and-drops, could you check in the debugger what the Node.locations are for the hidden members of the collapsed Group in the Palette? I’m wondering if those nodes have (NaN, NaN) locations or whether they have real locations that have an x value that is greatly different from the Group.location that you can see in the Palette.

When the group is collapsed, the children have NaN values for location, and an _isFrozen value of true. When expanded, a child shows location being { x: 0, y: 303, _isFrozen: false }.

The group’s location when expanded is { x: 0, y: 298 }, while the collapsed location becomes { x: 100.5, y: 298 }.

I see that the x value is drastically shifted when the group is collapsed, but I’m wondering why that’s the case, and what would be the recommended solution if not just explicitly setting these values?

Is your Group.layout in the target Diagram also an instance of TreeLayout? How is it different from the Palette’s Group’s layout? How is it defined? Do you have any layout event listeners?

[EDIT] Hmmm, we’re looking into this.

The palette and the diagram use the same defined group node which uses a TreeLayout, and there are no added layout event listeners created

Yes, there’s something odd going on in that case. We’re investigating.

We have fixed this and it will be out with the next release, probably in a week or so.

Sweet, thanks so much!