Skip to content

Fit isketch to phones and tablets - #83

Merged
raj-khan merged 2 commits into
mainfrom
fl-81-phones
Sep 27, 2026
Merged

raj-khan merged 2 commits into
mainfrom
fl-81-phones

Conversation

@raj-khan

Copy link
Copy Markdown
Owner

FL-81.

  • Layout below 768px: the tool bar docks at the bottom; the menu is one button; undo and redo join the top bar; view controls shrink to fit and zoom; the minimap hides; the library, text pane, details drawer and dialogs rise as bottom sheets; toasts sit above the tools. Nothing scrolls sideways at 360px.
  • Touch: 44px targets on phones and coarse pointers. Pinch to zoom and two-finger pan are handled in the capture phase (useTwoFingers), because Vue Flow's zoom never sees a gesture that starts on a shape (d3-drag stops the touch), and on a phone shapes cover most of the screen.
  • Context menu on a 500ms long press (iOS sends no contextmenu) or a right click: Open details, Rename, Duplicate, Delete; Edit label and Remove for a connection.
  • Pen: a stylus's pressure is kept per point (x,y,p) and drawn as a filled outline with perfect-freehand, in the app and the SVG renderer; once a stylus has drawn, touch never draws (palm rejection).
  • Viewer: a link opened on a phone shows the diagram fitted and read-only, with Copy for AI and Edit.
  • Tests: Playwright phone (Pixel 7) and tablet (Galaxy Tab S4 landscape) projects run e2e/mobile/touch.spec.js, using CDP for real two-finger and long-press touches. e2e 119 passed, vitest 247, lint and typecheck; checked by screenshot at 360px, Pixel 7 and tablet.

Points keep a stylus's pressure as x,y,p, drawn as a filled outline with
perfect-freehand in the app and in SVG. Once a stylus has drawn, touch
never draws.
Below 768px the tool bar docks at the bottom and panels become sheets.
Two fingers pinch and pan anywhere, a long press or right click opens a
context menu, and a link opened on a phone shows a fitted read-only view.
Phone and tablet Playwright projects run the touch specs.
@raj-khan
raj-khan merged commit 4162447 into main Sep 27, 2026
4 checks passed
@raj-khan
raj-khan deleted the fl-81-phones branch September 27, 2026 13:11
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