feat(Groups): CollapsibleGroup

[draedful]

No description provided.

[gravity-ui-bot]

Preview is ready.

[draedful]

Less details please

[draedful]

remove it parts

[draedful]

check is this real needs, because Block will remove self hitbox

[Antamansid]

It's unnecessary here. Now, if you work with a story there are groups that open/close at random because of this line, even if you don't touch them

[Antamansid]

As I understand this is breaking change, but hardly anyone signed up for this at all.

[Antamansid]

Can we put it in the state? I see that this has already been done in the connections, but here we have to store data both in the staff and here, and even synchronize them.

[draedful]

Code review (branch vs main)

PR: feat(Groups): CollapsibleGroup — large feature: CollapsibleGroup, port delegation, group-collapse-change events, Evented eventedArea, Block visibility/connection hiding, extensive e2e.

Strengths

• Clear public API (collapse / expand), cancelable group-collapse-change, documented behavior (no built-in dblclick — app wires UX).
• Port delegation design (delegate / undelegate, savedPoint) is coherent; Group drag guard during isDragging avoids rect fighting block bounds.

Issues (confidence ≥80%)

1. Collapsed group drag vs grid snapping: CollapsibleGroup.handleDrag updates collapsedRect with per-frame deltaX/deltaY, while Group.handleDrag moves rect using snapped absolute position from diffX/diffY. If SNAPPING_GRID_SIZE > 1, collapsedRect and rect can diverge after a snap jump.

graph/src/components/canvas/groups/CollapsibleGroup.ts

Lines 268 to 290 in 1c2cbdd

	/**
	* When dragging a collapsed group, also move the collapsedRect.
	*/
	public override handleDrag(diff: DragDiff, context: DragContext): void {
	const state = this.state as T;
	if (state.collapsed && state.collapsedRect) {
	const newCollapsedRect = {
	x: state.collapsedRect.x + diff.deltaX,
	y: state.collapsedRect.y + diff.deltaY,
	width: state.collapsedRect.width,
	height: state.collapsedRect.height,
	};
	// Update collapsedRect in the store so it persists
	this.groupState.updateGroup({
	collapsedRect: newCollapsedRect,
	} as Partial<T>);
	// Move group edge ports — use getRect so port positions stay consistent
	// with where delegatePorts() originally placed them (both use getRect).
	this.updateGroupPortPositions(this.getRect(newCollapsedRect));
	}
	// Let base Group handle the rest (update rect, hitbox, onDragUpdate)
	super.handleDrag(diff, context);
	}

graph/src/components/canvas/groups/Group.ts

Lines 227 to 252 in 1c2cbdd

	public override handleDrag(diff: DragDiff, _context: DragContext): void {
	if (!this.dragStartRect || !this.lastSnappedPos) {
	return;
	}
	const { x: newX, y: newY } = this.snapPosition(
	this.dragStartRect.x + diff.diffX,
	this.dragStartRect.y + diff.diffY
	);
	const deltaX = newX - this.lastSnappedPos.x;
	const deltaY = newY - this.lastSnappedPos.y;
	this.lastSnappedPos = { x: newX, y: newY };
	const rect = {
	x: newX,
	y: newY,
	width: this.state.rect.width,
	height: this.state.rect.height,
	};
	this.setState({ rect });
	this.updateHitBox(rect);
	if (deltaX !== 0 || deltaY !== 0) {
	this.props.onDragUpdate(this.props.id, { deltaX, deltaY });
	}

2. E2E suite collapse, move, expand has setup but no tests — the describe only contains beforeEach; drag-after-collapse scenarios are not executed in CI.

graph/e2e/tests/groups/collapsible-group.spec.ts

Lines 575 to 641 in 1c2cbdd

	// ---------------------------------------------------------------------------
	// Collapse → move group → expand (draggable groups)
	// ---------------------------------------------------------------------------
	test.describe("collapse, move, expand", () => {
	test.beforeEach(async ({ page }) => {
	graphPO = new GraphPageObject(page);
	await graphPO.initialize({
	blocks: BLOCKS,
	connections: CONNECTIONS,
	settings: {
	canDrag: "all",
	canDragCamera: false,
	},
	});
	// Use withBlockGrouping so $groupsBlocksMap is populated (required for updateBlocksOnDrag)
	await graphPO.page.evaluate(
	({ groupRect }) => {
	const { CollapsibleGroup, BlockGroups } = (window as any).GraphModule;
	const graph = window.graph;
	const CollapsibleBlockGroups = BlockGroups.withBlockGrouping({
	groupingFn: (blocks: any[]) => {
	const result: Record<string, any[]> = {};
	blocks.forEach((block: any) => {
	const groupId = block.$state.value.group;
	if (groupId) {
	if (!result[groupId]) result[groupId] = [];
	result[groupId].push(block);
	}
	});
	return result;
	},
	mapToGroups: (_key: string, { rect }: any) => ({
	id: _key,
	rect: {
	x: rect.x - 20,
	y: rect.y - 20,
	width: rect.width + 40,
	height: rect.height + 40,
	},
	component: CollapsibleGroup,
	}),
	});
	graph.addLayer(CollapsibleBlockGroups, { draggable: true, updateBlocksOnDrag: true });
	// Register dblclick handler
	graph.on("dblclick", (event: any) => {
	const target = event.detail?.target;
	if (target instanceof CollapsibleGroup) {
	if (target.isCollapsed()) {
	target.expand();
	} else {
	target.collapse();
	}
	}
	});
	},
	{ groupRect: GROUP_RECT }
	);
	await graphPO.waitForFrames(5);
	});
	});

E2E / DX suggestions (non-blocking)

• Add preventDefault test for expand (symmetry with collapse).
• Cover collapseDirection / default rect placement beyond custom getCollapseRect.
• Optional: React zoomed-in path for collapsed groups if consumers rely on HTML blocks.

🤖 Generated with Claude Code

_{If this review was useful, react with 👍; otherwise 👎.}