Merge pull request #90 from markrai/enhancement/infinite-wall-pan-zoom

Enhancement/infinite wall pan zoom

Author: markrai

CHANGELOG.md

@@ -2,6 +2,29 @@
 
 > **Upgrades:** No breaking changes in **3.7.x** / **3.8.x** / **3.9.x** / **3.10.x** / **3.11.x** / **3.12.x** / **3.13.x** / **3.14.x** / **3.15.x** / **3.16.x** / **3.17.x** unless noted below.
 
+## [3.17.4] - 2026-06-02
+
+### Added
+
+- **Wall pan and zoom** - The sticky-note wall is now an infinite canvas (Mural-style): scroll to pan, Ctrl/Cmd+scroll (or trackpad pinch) to zoom, middle-drag or Space+drag to pan. A **fit view** control (⊡ button or **F**) recenters on all notes. Pan/zoom is remembered per board in the browser (`localStorage`); no server or data migration changes—existing note positions are unchanged at the default view.
+
+### Improvements
+
+- **Wall coordinates** - Notes can be placed at negative canvas coordinates (matching the server’s ±100000 bound). Drag, resize, marquee select, edge preview, and create-at-pointer all use a shared screen-to-canvas transform so gestures stay correct at any zoom.
+- **Wall keyboard pan** - **Arrow keys** pan the canvas (hold **Shift** for larger steps), complementing scroll-wheel, middle-drag, and Space+drag for users without horizontal scroll or a middle button. Suppressed while editing a note or when focus is in an input/button.
+
+### Fixed
+
+- **Wall fit view** - Fit-to-notes can zoom out below the manual zoom floor (`FIT_ZOOM_MIN`) so widely spread notes actually fit on screen; manual zoom still bottoms out at 0.2× for legibility.
+- **Wall viewport persistence** - Saved and loaded pan/zoom clamp pan against the stored zoom (not a stale module zoom), so reload after low-zoom sessions restores a consistent view.
+- **Wall pan while closing** - Middle-drag and Space+drag document listeners are torn down if the wall closes mid-gesture, preventing ghost panning or surprise viewport state on the next open.
+- **Wall wheel pan on Firefox** - Scroll-wheel deltas are normalized for line/page `deltaMode` so pan and zoom speed match pixel-mode wheels in Chromium.
+
+### Documentation
+
+- **`docs/wall.md`** - Pan, zoom, and fit-view controls.
+- **`docs/wall-viewport-manual-checklist.md`** - Manual browser sign-off checklist for pan/zoom (real-browser verification; Vitest/jsdom alone is not sufficient for layout transforms).
+
 ## [3.17.3] - 2026-06-01
 
 ### Changed

README.md

@@ -1,7 +1,7 @@
 <p align="center">
   <img width="372" src="internal/httpapi/web/githublogo.png" alt="scrumboy logo" />
   <br />
-  <img src="https://img.shields.io/badge/version-v3.17.3-blue" alt="version" />
+  <img src="https://img.shields.io/badge/version-v3.17.4-blue" alt="version" />
   <a href="LICENSE">
     <img src="https://img.shields.io/badge/license-AGPL--v3-orange" alt="license" />
   </a>

docs/wall-viewport-manual-checklist.md

@@ -0,0 +1,25 @@
+# Wall pan/zoom — manual browser verification
+
+Run each scenario in a real browser (Chromium/Firefox) at **zoom ≠ 1** and with at least one note at **negative canvas coordinates** (e.g. x: -200, y: -150).
+
+| # | Scenario | Pass criteria |
+|---|----------|---------------|
+| 1 | Create note (right-click canvas) | Note appears under cursor |
+| 2 | Drag single note | Resting position matches pointer; PATCH persists |
+| 3 | Multi-select drag | All selected notes move together |
+| 4 | Resize (corner handle) | Size changes correctly at non-1 zoom |
+| 5 | Marquee select | Box selects geometrically correct notes |
+| 6 | Edge create (Shift+drag) | Connects intended notes |
+| 7 | Edge preview | Preview line follows cursor |
+| 8 | Trash delete | Drag-to-trash hit-test works when panned/zoomed |
+| 9 | Fit view (⊡ or **F**) | All notes visible; recovers from off-screen pan |
+| 10 | Reload | Pan/zoom restored from localStorage |
+| 11 | Corrupt storage | Clear key or set invalid JSON → wall opens at origin without error |
+| 12 | Negative coords | Note at negative x/y reachable and editable |
+| 13 | Edit suppression | Wheel / Space+drag do nothing while editing note text |
+| 14 | Input suppression | Wheel does nothing when focus in textarea/button |
+| 15 | Teardown | Close wall → Space pan not stuck; page scroll normal |
+| 16 | Arrow-key pan | Arrow keys pan the canvas; Shift = larger steps; page behind modal does not scroll |
+| 17 | Arrow suppression | Arrow keys move the caret (no pan) while editing note text or with focus in an input/button |
+
+Navigation reference: wheel = pan, Ctrl/Cmd+wheel = zoom, middle-drag / Space+drag / arrow keys = pan.

docs/wall.md

@@ -21,6 +21,9 @@ Sticky-note board for durable projects. Open it from the board topbar (desktop o
 - **Exit multi-select on canvas** - **Click** empty space (no drag).
 - **Move a group** - With multiple notes selected, drag one of them; all selected notes move together. Selection clears when you release the drag.
 - **Delete several at once** - Drag the group over the trash; one confirmation lists how many notes will be deleted.
+- **Pan the canvas** - Scroll wheel, **middle-mouse drag**, hold **Space** and drag on empty canvas, or use the **arrow keys** (hold **Shift** for larger steps).
+- **Zoom** - **Ctrl**+scroll (Windows/Linux) or **⌘**+scroll (Mac). Pinch-to-zoom on trackpads uses the same modifier.
+- **Fit view** - Click the **⊡** button (top-right, beside close) or press **F** while the wall is open. Recenters on all notes (or origin when empty). Your pan/zoom per board is remembered in the browser.
 
 ## Disabling the wall
 

internal/httpapi/web/dist/dialogs/wall-drag-controller.js

@@ -19,6 +19,7 @@ import { clampDim, updateEdgesForNote, MAX_NOTE_HEIGHT, MAX_NOTE_WIDTH, MIN_NOTE
 import { DRAG_TRANSIENT_COALESCE_MS, TRANSIENT_COALESCE_MS } from "./wall-postbaby-constants.js";
 import { postTransient } from "./wall-api.js";
 import { getMounted, setDragActive } from "./wall-state.js";
+import { MAX_CANVAS_COORD, canvasDelta, clampCanvasCoord, getViewportState, getWallContent, } from "./wall-viewport.js";
 // Phase 0 debug counters. Lifetime-accumulating across all drags in the
 // current session; reset via __resetDragCounters() in tests. Per-drag deltas
 // are also emitted via console.debug when window.__scrumboyWallDebug is true.
@@ -103,6 +104,7 @@ export function updateTrashHoverAny(participants) {
 export function isOverTrash(noteEl) {
     if (!wallTrash)
         return false;
+    // Screen-space OK: trash is a fixed viewport overlay; compare screen rects.
     const a = noteEl.getBoundingClientRect();
     const b = wallTrash.getBoundingClientRect();
     return !(a.right < b.left || a.left > b.right || a.bottom < b.top || a.top > b.bottom);
@@ -119,10 +121,8 @@ export function beginDrag(opts) {
         return;
     const surfaceRect = surface.getBoundingClientRect();
     const noteRect = noteEl.getBoundingClientRect();
-    // shiftX/shiftY: offset from pointer-down position to the primary note's
-    // top-left, measured within the surface. Using the original downX/downY
-    // (rather than current pointer position) preserves the visual feel of
-    // Postbaby's `shiftX = clientX - rect.left` so the note doesn't jump.
+    const { panX, panY, zoom: z } = getViewportState();
+    // shiftX/shiftY: screen-space offset from pointer to note top-left at pointerdown.
     const shiftX = downX - noteRect.left;
     const shiftY = downY - noteRect.top;
     const isGroup = state.selected.has(noteId) && state.selected.size > 1;
@@ -204,25 +204,32 @@ export function beginDrag(opts) {
             return;
         animationFrameId = requestAnimationFrame(() => {
             animationFrameId = null;
-            const rawX = lastClientX - surfaceRect.left - shiftX;
-            const rawY = lastClientY - surfaceRect.top - shiftY;
+            const screenNoteLeft = lastClientX - shiftX;
+            const screenNoteTop = lastClientY - shiftY;
+            const rawX = (screenNoteLeft - surfaceRect.left - panX) / z;
+            const rawY = (screenNoteTop - surfaceRect.top - panY) / z;
             let minDeltaX = rawX - primary.x;
             let minDeltaY = rawY - primary.y;
             for (const p of participants) {
-                if (p.startX + minDeltaX < 0)
-                    minDeltaX = -p.startX;
-                if (p.startY + minDeltaY < 0)
-                    minDeltaY = -p.startY;
+                if (p.startX + minDeltaX < -MAX_CANVAS_COORD)
+                    minDeltaX = -MAX_CANVAS_COORD - p.startX;
+                if (p.startY + minDeltaY < -MAX_CANVAS_COORD)
+                    minDeltaY = -MAX_CANVAS_COORD - p.startY;
+                if (p.startX + minDeltaX > MAX_CANVAS_COORD)
+                    minDeltaX = MAX_CANVAS_COORD - p.startX;
+                if (p.startY + minDeltaY > MAX_CANVAS_COORD)
+                    minDeltaY = MAX_CANVAS_COORD - p.startY;
             }
             let edgeCallsThisTick = 0;
             for (const p of participants) {
-                const nx = p.startX + minDeltaX;
-                const ny = p.startY + minDeltaY;
+                const nx = clampCanvasCoord(p.startX + minDeltaX);
+                const ny = clampCanvasCoord(p.startY + minDeltaY);
                 p.el.style.left = `${Math.round(nx)}px`;
                 p.el.style.top = `${Math.round(ny)}px`;
                 storeTransientPosition(p.id, nx, ny);
-                if (wallSurface) {
-                    updateEdgesForNote(wallSurface, p.id, nx + p.el.offsetWidth / 2, ny + p.el.offsetHeight / 2);
+                const edgeRoot = getWallContent() ?? wallSurface;
+                if (edgeRoot) {
+                    updateEdgesForNote(edgeRoot, p.id, nx + p.el.offsetWidth / 2, ny + p.el.offsetHeight / 2);
                     edgeCallsThisTick += 1;
                 }
             }
@@ -281,8 +288,9 @@ export function beginDrag(opts) {
             for (const p of participants) {
                 p.el.style.left = `${Math.round(p.startX)}px`;
                 p.el.style.top = `${Math.round(p.startY)}px`;
-                if (wallSurface) {
-                    updateEdgesForNote(wallSurface, p.id, p.startX + p.el.offsetWidth / 2, p.startY + p.el.offsetHeight / 2);
+                const edgeRoot = getWallContent() ?? wallSurface;
+                if (edgeRoot) {
+                    updateEdgesForNote(edgeRoot, p.id, p.startX + p.el.offsetWidth / 2, p.startY + p.el.offsetHeight / 2);
                 }
             }
             opts.onDropOnTrash(participants.map((p) => p.id), isGroup);
@@ -321,8 +329,8 @@ export function startResize(opts) {
     const origH = note.height;
     const onMove = (mv) => {
         mv.preventDefault();
-        const dw = mv.clientX - startX;
-        const dh = mv.clientY - startY;
+        const dw = canvasDelta(mv.clientX - startX);
+        const dh = canvasDelta(mv.clientY - startY);
         const w = clampDim(origW + dw, MIN_NOTE_WIDTH, MAX_NOTE_WIDTH);
         const h = clampDim(origH + dh, MIN_NOTE_HEIGHT, MAX_NOTE_HEIGHT);
         noteEl.style.width = `${Math.round(w)}px`;

internal/httpapi/web/dist/dialogs/wall-realtime.js

@@ -17,6 +17,7 @@
 //   - `startRealtime({ slug, onApplyDoc, onApplyTransient })` returns a
 //     `stop()` handle that unsubscribes from the event bus.
 import { wallDialog, wallSurface } from "../dom/elements.js";
+import { getWallContent } from "./wall-viewport.js";
 import { on, off } from "../events.js";
 import { showToast } from "../utils.js";
 import { updateEdgesForNote } from "./wall-rendering.js";
@@ -116,7 +117,10 @@ export function applyTransient(payload, noteElementById) {
         return;
     el.style.left = `${Math.round(x)}px`;
     el.style.top = `${Math.round(y)}px`;
-    updateEdgesForNote(wallSurface, noteId, x + el.offsetWidth / 2, y + el.offsetHeight / 2);
+    const edgeRoot = getWallContent() ?? wallSurface;
+    if (edgeRoot) {
+        updateEdgesForNote(edgeRoot, noteId, x + el.offsetWidth / 2, y + el.offsetHeight / 2);
+    }
 }
 let currentDebounceHandle = null;
 export function startRealtime(opts) {

internal/httpapi/web/dist/dialogs/wall-rendering.js

@@ -15,6 +15,7 @@
 // orchestration, event wiring, and teardown.
 import { HEX_COLOR_RE, sanitizeHexColor } from "../utils.js";
 import { colorIndexFromHex } from "./wall-postbaby-constants.js";
+import { screenToCanvas } from "./wall-viewport.js";
 const DEFAULT_NOTE_COLOR = "#ffd966";
 // Clamp to the same limits the backend enforces. Keep in sync with
 // internal/store/wall.go (clampNoteDim / validateWallColor).
@@ -279,7 +280,9 @@ export function getNoteCenterFromElement(surface, noteEl) {
             cy: noteEl.offsetTop + noteEl.offsetHeight / 2,
         };
     }
+    // Screen-space fallback: convert note center through the active viewport
+    // transform (offsetLeft path above is canvas-local when parent is .wall-content).
     const a = noteEl.getBoundingClientRect();
-    const s = surface.getBoundingClientRect();
-    return { cx: a.left - s.left + a.width / 2, cy: a.top - s.top + a.height / 2 };
+    const c = screenToCanvas(a.left + a.width / 2, a.top + a.height / 2);
+    return { cx: c.x, cy: c.y };
 }

internal/httpapi/web/dist/dialogs/wall-test-harness.js

@@ -1,4 +1,5 @@
 // Shared test helpers for the wall feature's interaction tests.
+import { ensureWallContent, initWallViewport, teardownWallViewport } from "./wall-viewport.js";
 //
 // These helpers are **non-hoisted** by design: any `vi.hoisted` / `vi.mock`
 // call must stay in the test file itself so that vitest wires the module
@@ -18,14 +19,17 @@ export function installDialogPolyfill() {
         },
     });
 }
-export function setupWallDom(refs) {
+export function setupWallDom(refs, slug = "test-wall") {
+    teardownWallViewport();
     document.body.innerHTML = "";
     refs.wallDialogEl.innerHTML = "";
     refs.wallSurfaceEl.innerHTML = "";
     refs.wallDialogEl.appendChild(refs.wallSurfaceEl);
     document.body.appendChild(refs.wallDialogEl);
     document.body.appendChild(refs.closeWallBtnEl);
     document.body.appendChild(refs.wallTrashEl);
+    const content = ensureWallContent(refs.wallSurfaceEl);
+    initWallViewport(refs.wallSurfaceEl, content, slug);
 }
 export function makeNote(overrides = {}) {
     return {