Skip to content

Add per-box color support with presets and custom picker#16

Open
RohitRajendran wants to merge 2 commits into
mainfrom
worktree-box-improvements
Open

Add per-box color support with presets and custom picker#16
RohitRajendran wants to merge 2 commits into
mainfrom
worktree-box-improvements

Conversation

@RohitRajendran

Copy link
Copy Markdown
Owner

Summary

  • Boxes can now be color-coded: 5 muted preset colors plus a custom color picker, editable from the properties panel
  • Newly drawn boxes automatically rotate through the 5 presets
  • The custom color swatch always shows a small pencil badge + tooltip so it stays discoverable as editable, even once a custom color is active
  • Existing persisted plans with no color field keep rendering with the original blueprint blue — fully backward compatible, no schema version bump required
  • Fixed a latent bug in sameElement() where the box comparison didn't check color, which would have silently dropped color-only updates (never persisted, no undo entry)
  • Merged in origin/main's Box.heightBox.length rename (Rename box height to length #14), resolving the resulting conflicts in BoxElement.tsx and storage.test.ts

Test plan

  • npm run test — 359 unit tests pass, including new coverage in colors.test.ts, useFloorplanStore.test.ts, storage.test.ts, ColorPicker.test.tsx, and PropertiesPanel.test.tsx
  • npm run test:e2e — 130 e2e tests pass (chromium), including a new e2e/box-color.spec.ts covering color rotation, preset selection, custom color, reload persistence, and legacy-box default
  • npm run type-check, npm run lint, npm run build all clean
  • Manual verification in the browser: legacy sample-plan boxes default to blue, preset switching updates the canvas with a distinct selection halo (box color no longer overridden by selection), new boxes rotate through colors, changes survive a reload

Boxes can now be color-coded: 5 muted presets rotate across newly
drawn boxes, plus a custom color picker in the properties panel.
Existing persisted plans with no color field keep rendering with the
original blueprint blue, so this ships with no schema version bump.
…ents

# Conflicts:
#	src/components/Canvas/BoxElement/BoxElement.tsx
#	src/utils/storage/storage.test.ts
@netlify

netlify Bot commented Jul 7, 2026

Copy link
Copy Markdown

Deploy Preview for snapdraftfloorplans ready!

Name Link
🔨 Latest commit 239ce6f
🔍 Latest deploy log https://app.netlify.com/projects/snapdraftfloorplans/deploys/6a4c4cfb62e507000839af5e
😎 Deploy Preview https://deploy-preview-16--snapdraftfloorplans.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

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