Skip to content

fix: selection box paints above shapes on the unified canvas - #559

Open
bvnaik05 wants to merge 1 commit into
frappe:mainfrom
bvnaik05:fix/selection-box-on-top
Open

fix: selection box paints above shapes on the unified canvas#559
bvnaik05 wants to merge 1 commit into
frappe:mainfrom
bvnaik05:fix/selection-box-on-top

Conversation

@bvnaik05

Copy link
Copy Markdown
Contributor

Problem

When objects are selected, the selection box (dashed outline + resize/rotate handles) could render behind other objects instead of on top of them — specifically on the unified canvas, where an opaque whiteboard object (a sticky note, an image, another shape) drawn after the selected shape would visually cover its selection chrome wherever the two overlapped.

Root cause

SelectionLayer was mounted inside the block-layer template, before WhiteboardLayer. SVG paints in document order, so any whiteboard object painted after it covered the selection outline and handles underneath it.

Three other overlays in the same file (TextEditor, HoverOutline, FlowchartHoverHandles) already carry an identical fix for the identical reason, referencing prior issues #441, #258, #261SelectionLayer itself was simply missed when that pattern was established.

Fix

Consolidate the two scattered SelectionLayer mounts — an unconditional one inside the block-layer template, and a legacy-whiteboard-only fallback after WhiteboardLayer — into a single mount at the very end of the viewport's z-stack, gated for both block mode and a legacy whiteboard (v-if="showBlockLayer || isWhiteboard").

Testing

  • yarn vitest run — 149 files / 1731 tests pass.
  • Extended editorPaintOrder.test.js (the existing house pattern for pinning z-order via source inspection) with two new assertions: SelectionLayer mounts only after WhiteboardLayer, and exactly once.
  • Verified live: placed a shape, then a sticky note overlapping it, selected the shape — the dashed outline and resize handles now render clearly on top of the sticky's opaque fill.

🤖 Generated with Claude Code

SelectionLayer mounted inside the block-layer template, before
WhiteboardLayer — so on the unified canvas an opaque whiteboard object
(a sticky, an image, another shape) drawn later in the SVG covered the
dashed selection outline and resize handles of a shape underneath it.

TextEditor, HoverOutline, and FlowchartHoverHandles already carry this
same fix for the same reason (frappe#441/frappe#258/frappe#261). Consolidate the two
scattered SelectionLayer mounts (an unconditional one in the block
layer, a legacy-whiteboard-only fallback after WhiteboardLayer) into
one mount at the end of the z-stack, gated for both block mode and a
legacy whiteboard.
Copilot AI lite review requested due to automatic review settings August 20, 2026 08:55

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants