Skip to content

feat: mobile selection UX and two-finger box rotation#8

Merged
RohitRajendran merged 9 commits intomainfrom
feat/mobile-selection-rotation
Mar 25, 2026
Merged

feat: mobile selection UX and two-finger box rotation#8
RohitRajendran merged 9 commits intomainfrom
feat/mobile-selection-rotation

Conversation

@RohitRajendran
Copy link
Copy Markdown
Owner

Summary

  • Two-finger twist rotation — select a box on mobile, then twist two fingers to rotate it in 5° increments; the entire gesture undoes in a single step
  • Mobile selection bar — on mobile, tapping an element shows a compact action bar at the toolbar slot (Undo, Redo, Edit, Delete) instead of immediately opening the properties panel, which was covering the canvas and blocking the rotation gesture
  • Edit/Cancel/Done flow — tapping Edit opens the properties panel; Cancel silently reverts all changes made during that editing session; Done commits them
  • Toolbar hides when the selection bar is visible, replacing it in the same slot
  • Delete button hidden from the properties panel on mobile (lives in the selection bar instead)
  • Fix e.evt undefined crash when dragging a wall endpoint on touch
  • Add mobile-web-app-capable meta tag alongside the deprecated Apple variant
  • Raise Vite chunk size warning limit to silence false positive for this PWA

Test plan

  • Draw a box on mobile, tap to select — selection bar appears, toolbar hides
  • Two-finger twist rotates the box; single Cmd+Z restores original rotation
  • Tap Edit → properties panel opens, bar shows Cancel/Done; Cancel reverts changes
  • Tap Delete in selection bar — element removed
  • Undo/Redo buttons in selection bar work after rotation
  • Tap empty canvas — selection bar hides, toolbar reappears
  • Draw a wall, select it, drag an endpoint — no crash
  • Desktop behavior unchanged (panel opens on first click, no selection bar)
  • npm run test:e2e passes (144 tests)

Add propertiesPanelOpen boolean to useToolStore (default false) with
setPropertiesPanelOpen action; reset on clearSelection and setActiveTool.

Add snapshotForUndo and updateElementSilent to useFloorplanStore to
support single-checkpoint undo for gestures and revert-on-cancel for
the mobile properties panel.
Detect the angle between two touch points and apply the delta to the
selected box's rotation on each touchmove frame, snapped to 5°
increments. A single snapshotForUndo checkpoint is taken at touchstart
so the entire gesture undoes in one step. The properties panel is
hidden during the gesture and restored on touchend.

Also update mobile onSelect logic so first tap selects without opening
the panel; second tap (or desktop) opens it.
On mobile (≤730px), selecting one element shows a compact action bar
at the toolbar slot instead of immediately opening the properties panel.
The bar provides Undo, Redo, Edit, and Delete actions.

Tapping Edit opens the properties panel and switches the bar to a
Cancel/Done mode. Cancel silently restores the element to its
pre-edit snapshot; Done commits changes. The toolbar is hidden
whenever the bar is visible.
Toolbar: hide via display:none (preserving keyboard shortcuts) whenever
MobileSelectionBar is visible on mobile; add data-testid for targeting.

PropertiesPanel: gate render on propertiesPanelOpen flag; hide the
Delete button on mobile since it lives in MobileSelectionBar instead.
New tests cover: mobile selection bar visibility, toolbar hide/show,
Edit→Cancel/Done flow with change revert, Delete, Undo/Redo in bar,
two-finger twist rotation, single-step undo for rotation gesture, and
pinch-zoom unaffected when no box is selected.

Optimizations: replace waitForTimeout(100) with expect.poll, extract
shared box-draw+select beforeEach in Box drawing describe, nest iPhone
SE viewport tests under a shared beforeEach, merge short 2-test groups
into single tests (tool switching, canvas shortcuts, measure escape,
arrow keys), and extract drawTwoBoxesAndMarqueeSelect helper.
Konva can fire dragend without an attached native event on touch,
making e.evt undefined. Use optional chaining (e.evt?.shiftKey) in
all six call sites across WallElement, BoxElement, and DrawingCanvas.
@netlify
Copy link
Copy Markdown

netlify bot commented Mar 25, 2026

Deploy Preview for snapdraftfloorplans ready!

Name Link
🔨 Latest commit c903a30
🔍 Latest deploy log https://app.netlify.com/projects/snapdraftfloorplans/deploys/69c34b82fd77d00008d9dce8
😎 Deploy Preview https://deploy-preview-8--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.

@RohitRajendran RohitRajendran merged commit 3826536 into main Mar 25, 2026
6 checks passed
@RohitRajendran RohitRajendran deleted the feat/mobile-selection-rotation branch March 25, 2026 03:03
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