refactor(canvas): promote collapsed to first-class NodeData field + edge rewire

Three follow-ups to PR #158 review:

1. Promote collapsed to NodeData.collapsed
   The flag was previously stashed inside NodeData.custom_colors, which is
   a colors/style object — semantically wrong. Move it to a first-class
   boolean on NodeData. Persistence keeps the existing API shape: serialize
   writes it into the custom_colors blob (alongside width/height/z_order,
   matching how groupRect already stashes layout metadata), and deserialize
   hoists it back. Legacy saves from the original PR shape load correctly.

2. Re-route cross-zone edges to the collapsed ancestor
   Previously any edge touching a hidden node was dropped, so a Zigbee
   coordinator outside a collapsed mesh lost all visible links to it.
   rewireEdgesForCollapse now walks each endpoint up the parentId chain to
   its nearest visible ancestor, surfaces a single stub edge on the
   collapsed zone, de-dupes parallel rewires (a 20-device mesh becomes one
   stub, not twenty), and drops edges that would self-loop on a zone or
   reference an orphan.

3. Revert package-lock.json churn
   The 63-line diff from the original PR was npm-version drift (libc
   arrays stripped from optional deps), unrelated to the feature.

Tests:
- canvasStore.collapse: updated to assert on data.collapsed.
- collapseFilter: 8 cases for visibility + 7 for edge rewire, covering
  cross-boundary, nested collapse, sibling self-loop, mesh dedup, and
  orphan endpoints.
- canvasSerializer.collapse: round-trip + legacy-shape compat.

This commit is contained in:

Pouzor

2026-05-29 01:34:21 +02:00

parent 517486ff79

commit 20e1820a4e

11 changed files with 299 additions and 95 deletions

									
										frontend/src/components/canvas/nodes/GroupRectNode.tsx
									
		+1
		-1
	
												View File
												
				@@ -42,7 +42,7 @@ export function GroupRectNode({ id, data, selected }: NodeProps<Node<NodeData>>)

				  const [hovered, setHovered] = useState(false)

				  const rc = data.custom_colors ?? {}

				  const isCollapsed = rc.collapsed ?? false

				  const isCollapsed = data.collapsed ?? false

				  const borderColor = rc.border ?? '#00d4ff'

				  const borderStyle = rc.border_style ?? 'solid'

				  const borderWidth = rc.border_width ?? 2