Pinch/scroll zoom + pan for creating links on small text (mobile)#11
Merged
Conversation
Long sentences auto-fit to tiny text, which is hard to tap on mobile. Add an interaction-only magnifier over the preview: - Pinch (touch) or ctrl/trackpad-pinch (desktop) to zoom; drag to pan when zoomed; double-click/tap resets. `touch-action` stays `pan-y` at 1× (page scroll + a clean tap still selects tokens) and switches to `none` when zoomed so one-finger drag pans. - It's a pure viewing transform on a wrapper around the tokens + connector layers, so tokens and links scale together and stay aligned. - Export is fully decoupled: measurements are taken relative to the zoom wrapper and divided by the scale (rounded to hundredths), yielding layout-space coordinates — the exported SVG is byte-identical at any zoom. - At 1× nothing changes (pan only engages above 1×), so no regression. Pure zoom math in src/lib/domain/zoom.ts (unit-tested). Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
Member
Author
|
Consolidated into #10 — this group ships as one deploy (auto-fit is not useful without the zoom that makes small text tappable). |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Stacked on #10 (auto-fit). Base is
feat/autofit-text; retarget tomainonce #10 merges.Context
Auto-fit shrinks long sentences to tiny text, which is hard to tap on mobile to create links. This adds an interaction-only magnifier — it never affects layout or export, only the convenience of tapping small words.
What it does
touch-actionispan-yat 1× (so the page still scrolls and a clean tap still selects a token) and switches tononeabove 1× so one-finger drag pans instead of scrolling. A tap (< 6px movement) never pans, so link creation is unaffected. Dragging the gap sliders is excluded from panning.Why export is safe
The zoom is a pure CSS transform on a wrapper around the tokens + connector SVG layers, so they scale together and stay aligned. Token measurements are taken relative to that wrapper and divided by the scale (rounded to hundredths), which recovers layout-space coordinates independent of the visual transform. Verified: the exported SVG is byte-identical at 1× and zoomed. At 1× nothing changes (pan only engages above 1×), so there's no regression.
Files
src/lib/domain/zoom.ts(+ unit tests: focal zoom is reversible, pan clamped, etc.)AlignmentPreview.svelte(zoom wrapper + pointer/wheel gesture handlers)AlignmentSvg.svelte(measure relative to the wrapper / divide by zoom, round to 1/100)app.css(.preview-zoom)Testing
npm run check, lint, 110 tests green. Playwright (desktop): ctrl-wheel zoom magnifies tokens and connectors track them; the exported SVG is byte-identical before/after zoom; 1× tap still creates links; double-click resets.🤖 Generated with Claude Code