Canvas unification — Phase 4c: select & move frames

[vibhavkatre]

What & why

Make the mind map / flowchart frames first-class objects on the unified canvas: click to select (dashed outline), drag to reposition (updates the frame origin, one undo step). Completes the "frames/containers" model.

Changes

• DiagramCanvas.vue: per-frame content bbox (mmBox from mind-map positions, fcBox from flowchartContentBounds); a selectable/draggable hit-rect per frame; live drag via window listeners folding a delta into the rendered origin, commit on pointer-up; clear frame selection on empty-surface press.
• useDiagramStore.js: moveFrame(kind, dx, dy) repositions a frame's origin (one undo step).
• Fix: frame content is now genuinely non-interactive. The viewport's [&_*]:pointer-events-auto utility was re-enabling every descendant (mind-map "+" handles fired through the frame); a .unified-frame-content { pointer-events: none !important } rule overrides it so the frame's hit-rect owns the press.

Testing

• Build ✅ · 101 unit tests ✅.
• Live app ✅ — a mind-map frame selects (blue dashed outline, no stray node handles) and drags, moving its origin by exactly the drag delta ({500,350} → {660,446}), committed as one undo step; no page errors (screenshots).

Phase 4 status

With 4a (frame model), 4b (render frames), 4c (select+move), 4d (Insert menu) merged, the canvas unification is functionally complete: one canvas with block shapes, whiteboard ink, and movable mind-map/flowchart frames you add from an Insert menu. Follow-up (future): in-frame node editing on the unified canvas (currently frames are read-only there; edit them as a dedicated single-type doc).

🤖 Generated with Claude Code

[greptile-apps]

Confidence Score: 3/5

The frame-selection drag logic is solid, but the flowchart content remains interactable through the hit-rect, leaving the stated pointer-events fix incomplete for that frame type.

The mind-map frame gets the !important CSS override via .unified-frame-content, but FlowchartLayer is only wrapped in an inline style that silences the wrapper element while Tailwind's [&_*]:pointer-events-auto re-enables all descendants. Flowchart node handles can still fire through the frame, which is the exact regression the PR describes fixing.

frontend/src/components/canvas/DiagramCanvas.vue — the flowchart frame content wrapper needs the .unified-frame-content class instead of the inline style.

_{Reviews (1): Last reviewed commit: "Frappe Draw: canvas unification phase 4c..." | Re-trigger Greptile}

[greptile-apps]

The flowchart content uses an inline style="pointer-events: none" on the wrapper <g>, but inline styles only silence that one element — descendants of FlowchartLayer are still re-enabled by the viewport's [&_*]:pointer-events-auto Tailwind utility. The PR's own CSS fix (.unified-frame-content * { pointer-events: none !important }) is applied correctly to the mind-map wrapper but completely missed for the flowchart, so flowchart node handles and buttons still fire through the frame hit-rect.

Suggested change

	<g style="pointer-events: none">
	<FlowchartLayer :flowchart="store.state.flowchart" />
	</g>
	<g class="unified-frame-content">
	<FlowchartLayer :flowchart="store.state.flowchart" />
	</g>