Skip to content

Group layers by board, zoom-to-board navigation, and all-boards export - #9

Merged
daniellee-ux merged 2 commits into
mainfrom
claude/hungry-bassi-19d603
Jul 4, 2026
Merged

daniellee-ux merged 2 commits into
mainfrom
claude/hungry-bassi-19d603

Conversation

@daniellee-ux

Copy link
Copy Markdown
Owner

Summary

Two commits reworking multi-board UX in the editor:

Layers panel (63b34f4)

  • Fix the boards rail layout: the canvas board caption's CSS class (.ox-board-label) collided with the sidebar's board-name class, absolutely positioning the rail's names over the header/thumbnails. The caption is now .ox-board-caption.
  • Clicking a board (rail) now actually navigates: new viewport.fitTo(rect) zooms + centers that board (with headroom for its caption).
  • The LAYERS tree is grouped by board, Figma-style: per-board collapsible sections with sticky headers (name + count). The active board's group auto-expands and others collapse on switch (filter-like), with manual expand/collapse respected — overrides are latched per selection so DOM churn and stale selections can't defeat them, and reset when the board id sequence changes. Cross-board canvas selections force their group open and scroll into view. Single-board designs keep the flat list.

Toolbar + export (39c5c01)

  • Remove the toolbar "Active board" dropdown — the boards rail owns board switching now; the dropdown's remaining job (what does Export target?) moves into the Export menu.
  • Export menu on multi-board designs: current-board items name the board ("PNG — Cover"), plus an all-boards section — "PDF — all boards" (one page per board via exportPdfPages) and "PNG/SVG — all boards (.zip)" (exportZip via fflate, entries named NN-label).
  • Compress PDF rasters (jsPDF compress + FAST): a 4-board PDF drops from 56 MB (raw pixels) to 0.4 MB, lossless; the single-board PDF shares the same path.
  • Pre-bundle jspdf/fflate in dev so a first export can't trigger a mid-session page reload; cap dropdown popovers (max-width + label ellipsis) since menu labels now carry user content.

Verification

  • Driven live in the browser (multi-board fixture): rail click zooms to the board + filters the tree; manual collapse survives canvas DOM churn; cross-board selection opens its group and selects the object; single-board designs unchanged; window.__ox.lint() clean.
  • Export blobs inspected programmatically: zip central directory lists 01-cover…04-outro entries; PDF has 4 pages with correct per-board page boxes; current-board PNG still downloads.
  • npm run typecheck + npx tsc --noEmit -p apps/demo pass.
  • Two adversarial multi-agent review passes ran over the diffs; all confirmed findings are fixed in these commits.

🤖 Generated with Claude Code

daniellee-ux and others added 2 commits July 4, 2026 18:25
…igation

- Fix the layers panel boards rail: the canvas board caption reused the
  sidebar's .ox-board-label class, absolutely positioning the rail's board
  names over the header/thumbnails. The caption is now .ox-board-caption.
- Clicking a board (rail or toolbar select) now navigates: new
  viewport.fitTo(rect) zooms + centers the board (with caption headroom);
  layoutBoards bakes the vertical-centering y so Stage and fitTo share it.
- Group the LAYERS tree by board: per-board collapsible sections with
  sticky headers (name + count). The active board's group auto-expands and
  the others collapse on board switch; manual expand/collapse overrides are
  latched per selection so canvas DOM churn and stale selections can't
  defeat them, and they reset when the board id sequence changes
  (delete/duplicate/reorder). Cross-board canvas selections force their
  group open and scroll into view (clear of the stuck header via
  scroll-margin). Single-board designs keep the flat list.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…bar board dropdown

- Remove the toolbar "Active board" SelectMenu — the layers panel's boards
  rail now owns board switching (same focusBoard path), so the dropdown was
  a duplicate control with worse affordance.
- Its remaining job (saying which board Export targets) moves into the
  Export menu: on multi-board designs items name the active board
  ("PNG — Cover"), and a second section exports every board — "PDF — all
  boards" (one page per board via exportPdfPages) and "PNG/SVG — all boards
  (.zip)" (exportZip via fflate; entries named NN-label).
- Compress PDF rasters (jsPDF compress + FAST addImage): a 4-board PDF
  drops from 56 MB (raw pixels) to 0.4 MB, lossless. Applies to the
  single-board PDF too, which now shares the multi-page path.
- Pre-bundle jspdf/fflate in dev so a first export can't trigger a
  mid-session "new dependency" page reload.
- Cap dropdown popovers (max-width + label ellipsis): menu labels now carry
  user content (board names), which must not stretch the menu across the
  viewport.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@daniellee-ux

Copy link
Copy Markdown
Owner Author

Codex review (codex exec review --base main, codex-cli 0.139.0) verdict:

I did not identify any discrete correctness issues introduced by the changes. The new multi-board focus, grouped layers, and export paths appear consistent with the existing canvas/export architecture, and typechecks pass.

No findings to act on — leaving the PR as-is for merge.

@daniellee-ux
daniellee-ux merged commit 13241c7 into main Jul 4, 2026
1 check passed
@daniellee-ux
daniellee-ux deleted the claude/hungry-bassi-19d603 branch July 5, 2026 03:34
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.

1 participant