Skip to content

Web: resize the viewer; 3D views turn, move and zoom like the phones - #37

Merged
jlcjak merged 2 commits into
mainfrom
backplane/web-viewer-resize-orbit
Oct 2, 2026
Merged

jlcjak merged 2 commits into
mainfrom
backplane/web-viewer-resize-orbit

Conversation

@jlcjak

@jlcjak jlcjak commented Oct 2, 2026

Copy link
Copy Markdown
Collaborator

Two web viewer fixes: the viewer can be resized, and the 3D views now turn, move and zoom like the phones and the window.

Resize the viewer

  • The line between the thread and the viewer is a handle. It shows the resize cursor, and dragging it sets the viewer's width (the thread keeps at least 360 px, the viewer 320).
  • The width is kept in the browser. A double-click on the handle gives the usual share back.
  • Not on phone-width screens, where the viewer is full screen.

3D controls (solid.js)

The old camera was a turntable. Its pan ignored the tilt, its wheel zoomed at the centre, and a touchpad's two-finger scroll arrived as wheel events, so trying to move the model zoomed it. It now uses the phones' free orbit (Orbit, ported from PlotView.kt):

  • Mouse: left drag turns, and the model under the pointer follows it. Right or middle drag, or shift/ctrl+drag, moves the model in the view plane. Alt+drag rolls. The wheel zooms at the pointer, bounded by the fitted distance. Double-click fits.
  • Touchpad: two fingers move the model and a pinch zooms. The same applies on boards and schematics (plot2d.js).
  • Touch screen: one finger turns; two fingers move, pinch and twist.
  • The hints under the tabs name the new controls.

Tested

  • scripts/check.sh and scripts/test.sh pass.
  • bun test/tools/orbit_test.ts (new, 15 checks):
    • A drag right or down turns the near side with the pointer.
    • Pan follows the pointer.
    • Zoom keeps the point under the pointer.
    • Zoom bounds.
    • The axes stay square after many turns.
    • Touchpad vs. mouse wheel vs. pinch classification.
  • Playwright on a hub with a real board:
    • Resize: the cursor, drag, both limits, kept across a reload, double-click reset.
    • 3D: turn, right-drag pan, zoom at a corner, touchpad pan, pinch, refit.
    • Board: touchpad pan.
    • No page errors.

Note: a touchpad is told from a mouse wheel by its small or sideways steps. A smooth-scrolling mouse with very fine steps could read as a touchpad and pan. Ctrl+wheel still zooms.

🤖 Generated with Claude Code

jlcjak and others added 2 commits October 2, 2026 15:24
The line between the thread and the viewer is a handle: the resize
cursor over it, a drag sets the viewer's width (the thread keeps 360 px,
the viewer 320), kept in the browser; a double-click gives the usual
share back. The 3D canvas redraws at its new size.

Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>
The camera was a turntable whose pan ignored the tilt and whose wheel
zoomed at the centre; a touchpad's two-finger scroll came as wheel
events, so moving the model zoomed it instead. Port the phones' free
orbit: the model under the pointer follows a drag; right or middle (or
shift/ctrl) drag moves it in the view plane; alt rolls; the wheel and a
pinch zoom at the pointer, bounded by the fitted distance. A touchpad's
two fingers move the model, in 3D and on boards and schematics alike;
on a touch screen one finger turns and two move, pinch and twist.

Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>
@jlcjak
jlcjak marked this pull request as ready for review October 2, 2026 14:22
@jlcjak
jlcjak merged commit c3c2a20 into main Oct 2, 2026
4 checks passed
Snaiderbg pushed a commit to Snaiderbg/Backplane that referenced this pull request Oct 9, 2026
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