Add canvas drag pan to vector and collision tools - PR_26140_052-add-vector-canvas-drag-pan

Author: DavidQ

tests/playwright/tools/CollisionInspectorV2.spec.mjs

@@ -288,6 +288,60 @@ test.describe("Collision Inspector V2", () => {
       await expect(page.locator("#collisionZoomInput")).toHaveAttribute("step", "10");
       await expect(page.locator("#collisionZoomInput")).toHaveValue("100");
       await expect(page.locator("#zoomState")).toHaveText("100%");
+      const viewportPanState = await page.locator("#collisionCanvas").evaluate((canvas) => {
+        const app = window.__collisionInspectorV2App;
+        const rect = canvas.getBoundingClientRect();
+        const scaleX = rect.width / canvas.width;
+        const scaleY = rect.height / canvas.height;
+        const clientPoint = (point) => ({
+          clientX: rect.left + point.x * scaleX,
+          clientY: rect.top + point.y * scaleY
+        });
+        const pointerInit = {
+          bubbles: true,
+          button: 0,
+          buttons: 1,
+          cancelable: true,
+          pointerId: 52,
+          pointerType: "mouse"
+        };
+        const before = { ...app.renderer.viewportPan };
+        canvas.dispatchEvent(new PointerEvent("pointerdown", { ...pointerInit, ...clientPoint({ x: 80, y: 80 }) }));
+        window.dispatchEvent(new PointerEvent("pointermove", { ...pointerInit, ...clientPoint({ x: 150, y: 110 }) }));
+        const draggingClassDuringPan = canvas.classList.contains("is-dragging");
+        window.dispatchEvent(new PointerEvent("pointerup", { ...pointerInit, buttons: 0, ...clientPoint({ x: 150, y: 110 }) }));
+        return {
+          after: { ...app.renderer.viewportPan },
+          before,
+          draggingClassDuringPan
+        };
+      });
+      expect(viewportPanState.draggingClassDuringPan).toBe(true);
+      expect(viewportPanState.after.x).toBeLessThan(viewportPanState.before.x);
+      expect(viewportPanState.after.y).toBeLessThan(viewportPanState.before.y);
+      await expect(page.locator("#collisionLog")).toHaveValue(/Panned viewport/);
+      await expect(page.locator("#zoomState")).toHaveText("100%");
+      const postPanHit = await page.locator("#collisionCanvas").evaluate((canvas) => {
+        const app = window.__collisionInspectorV2App;
+        const pan = app.renderer.viewportPan;
+        const rect = canvas.getBoundingClientRect();
+        const viewportPoint = app.renderer.transform.worldPointToViewportPoint({
+          x: app.instances.b.x - pan.x,
+          y: app.instances.b.y - pan.y
+        });
+        const clientX = rect.left + (viewportPoint.x / canvas.width) * rect.width;
+        const clientY = rect.top + (viewportPoint.y / canvas.height) * rect.height;
+        const point = app.renderer.canvasPoint({ clientX, clientY });
+        return {
+          hit: app.renderer.hitObjectAt(point, app.lastResult),
+          point
+        };
+      });
+      expect(postPanHit.hit).toBe("b");
+      await page.evaluate(() => {
+        window.__collisionInspectorV2App.renderer.resetViewportPan();
+        window.__collisionInspectorV2App.evaluateAndRender();
+      });
       const aspectRatio = await page.locator("#collisionCanvas").evaluate((canvas) => {
         const rect = canvas.getBoundingClientRect();
         return rect.width / rect.height;

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -2327,6 +2327,44 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-1600 -1100 3200 2200");
       await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toHaveText("Origin: 0, 0 | Canvas origin 0,0 centered | Zoom 100%");
       await expect(page.locator("#objectVectorStudioV2RenderSurface [data-center-origin='0,0']")).toHaveCount(0);
+      const dragPanState = await page.locator("#objectVectorStudioV2RenderSurface").evaluate((surface) => {
+        const app = window.__objectVectorStudioV2App;
+        const rect = surface.getBoundingClientRect();
+        const start = {
+          clientX: rect.left + rect.width * 0.5,
+          clientY: rect.top + rect.height * 0.5
+        };
+        const end = {
+          clientX: start.clientX + 72,
+          clientY: start.clientY + 36
+        };
+        const pointerInit = {
+          bubbles: true,
+          button: 0,
+          buttons: 1,
+          cancelable: true,
+          pointerId: 41,
+          pointerType: "mouse"
+        };
+        const before = { ...app.viewport };
+        surface.dispatchEvent(new PointerEvent("pointerdown", { ...pointerInit, ...start }));
+        window.dispatchEvent(new PointerEvent("pointermove", { ...pointerInit, ...end }));
+        const panningClassDuringDrag = surface.classList.contains("is-canvas-panning");
+        window.dispatchEvent(new PointerEvent("pointerup", { ...pointerInit, buttons: 0, ...end }));
+        return {
+          after: { ...app.viewport },
+          before,
+          panningClassDuringDrag,
+          viewBox: surface.getAttribute("viewBox")
+        };
+      });
+      expect(dragPanState.panningClassDuringDrag).toBe(true);
+      expect(dragPanState.after.x).toBeLessThan(dragPanState.before.x);
+      expect(dragPanState.after.y).toBeLessThan(dragPanState.before.y);
+      expect(dragPanState.viewBox).not.toBe("-1600 -1100 3200 2200");
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Viewport drag-pan set to/);
+      await page.locator("#objectVectorStudioV2ResetViewButton").click();
+      await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-1600 -1100 3200 2200");
       await page.locator("#objectVectorStudioV2CenterDotButton").click();
       await expect(page.locator("#objectVectorStudioV2RenderSurface [data-center-origin='0,0']")).toHaveCount(1);
       await expect(page.locator("#objectVectorStudioV2CenterDotButton")).toHaveAttribute("aria-pressed", "true");

tools/collision-inspector-v2/js/CollisionInspectorV2App.js

@@ -148,6 +148,7 @@ export class CollisionInspectorV2App {
     this.screen = { width: screenResult.width, height: screenResult.height };
     this.controls.setViewportSize(this.screen.width, this.screen.height);
     this.renderer.setViewportSize(this.screen.width, this.screen.height);
+    this.renderer.resetViewportPan();
     this.controls.setObjectOptions(this.objects);
     this.resetSimulation({ silent: true });
     const gameName = manifest?.game?.name || manifest?.name || manifest?.gameId || "Loaded manifest";
@@ -249,10 +250,22 @@ export class CollisionInspectorV2App {
       return;
     }
     const point = this.renderer.canvasPoint(event);
-    const key = this.renderer.hitObjectAt(point, this.lastResult) || "a";
+    const key = this.renderer.hitObjectAt(point, this.lastResult);
+    if (!key) {
+      this.dragState = {
+        lastClient: { x: Number(event.clientX) || 0, y: Number(event.clientY) || 0 },
+        mode: "pan",
+        moved: false
+      };
+      this.renderer.setDragging(true);
+      this.renderer.capturePointer(event.pointerId);
+      event.preventDefault();
+      return;
+    }
     this.dragState = {
       key,
-      lastPoint: point
+      lastPoint: point,
+      mode: "object"
     };
     this.renderer.setDragging(true);
     this.renderer.capturePointer(event.pointerId);
@@ -263,6 +276,20 @@ export class CollisionInspectorV2App {
     if (!this.dragState) {
       return;
     }
+    if (this.dragState.mode === "pan") {
+      const clientX = Number(event.clientX) || 0;
+      const clientY = Number(event.clientY) || 0;
+      const deltaX = clientX - this.dragState.lastClient.x;
+      const deltaY = clientY - this.dragState.lastClient.y;
+      this.dragState.lastClient = { x: clientX, y: clientY };
+      if (deltaX || deltaY) {
+        this.dragState.moved = true;
+        this.renderer.panViewportByClientDelta(deltaX, deltaY);
+        this.evaluateAndRender();
+      }
+      event.preventDefault();
+      return;
+    }
     const point = this.renderer.canvasPoint(event);
     const delta = {
       x: point.x - this.dragState.lastPoint.x,
@@ -279,6 +306,16 @@ export class CollisionInspectorV2App {
     if (!this.dragState) {
       return;
     }
+    if (this.dragState.mode === "pan") {
+      const pan = { ...this.renderer.viewportPan };
+      const moved = this.dragState.moved;
+      this.dragState = null;
+      this.renderer.setDragging(false);
+      if (moved) {
+        this.logger.write(`INFO Panned viewport to ${roundNumber(pan.x)}, ${roundNumber(pan.y)}.`);
+      }
+      return;
+    }
     const key = this.dragState.key;
     this.dragState = null;
     this.renderer.setDragging(false);

tools/collision-inspector-v2/js/CollisionInspectorV2Renderer.js

@@ -13,6 +13,7 @@ export class CollisionInspectorV2Renderer {
     this.ctx = canvas.getContext("2d");
     this.transform = createWorldScreenTransform();
     this.zoom = COLLISION_ZOOM_DEFAULT;
+    this.viewportPan = { x: 0, y: 0 };
   }
 
   setViewportSize(width, height) {
@@ -47,15 +48,41 @@ export class CollisionInspectorV2Renderer {
   canvasPoint(event) {
     const rect = this.canvas.getBoundingClientRect();
     const screenPoint = this.transform.clientPointToScreenPoint(event, rect);
-    return this.transform.screenPointToWorldWithUserZoom(screenPoint);
+    const worldPoint = this.transform.screenPointToWorldWithUserZoom(screenPoint);
+    return {
+      x: worldPoint.x + this.viewportPan.x,
+      y: worldPoint.y + this.viewportPan.y
+    };
+  }
+
+  panViewportByClientDelta(deltaX, deltaY) {
+    const rect = this.canvas.getBoundingClientRect();
+    if (!rect.width || !rect.height) {
+      return { ...this.viewportPan };
+    }
+    const screenDeltaX = (Number(deltaX) / rect.width) * this.canvas.width;
+    const screenDeltaY = (Number(deltaY) / rect.height) * this.canvas.height;
+    this.viewportPan = {
+      x: Number((this.viewportPan.x - screenDeltaX / this.zoom).toFixed(3)),
+      y: Number((this.viewportPan.y - screenDeltaY / this.zoom).toFixed(3))
+    };
+    return { ...this.viewportPan };
+  }
+
+  resetViewportPan() {
+    this.viewportPan = { x: 0, y: 0 };
   }
 
   setDragging(isDragging) {
     this.canvas.classList.toggle("is-dragging", isDragging);
   }
 
   capturePointer(pointerId) {
-    this.canvas.setPointerCapture?.(pointerId);
+    try {
+      this.canvas.setPointerCapture?.(pointerId);
+    } catch {
+      // Pointer capture is best-effort for synthetic validation events.
+    }
   }
 
   hitObjectAt(point, result) {
@@ -79,6 +106,7 @@ export class CollisionInspectorV2Renderer {
     ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
     ctx.save();
     this.transform.applyViewportTransform(ctx);
+    ctx.translate(-this.viewportPan.x, -this.viewportPan.y);
     this.drawGrid(ctx);
     this.drawGeometry(ctx, result.geometryA, {
       fill: "rgba(13, 148, 136, 0.18)",

tools/object-vector-studio-v2/js/ToolStarterApp.js

@@ -534,6 +534,7 @@ export class ToolStarterApp {
     this.gridRenderEnabled = true;
     this.centerOriginVisible = this.window.sessionStorage?.getItem(CENTER_ORIGIN_SESSION_KEY) !== "0";
     this.schemaReady = false;
+    this.viewportPan = null;
     this.viewport = { ...DEFAULT_VIEWPORT };
   }
 
@@ -1033,12 +1034,14 @@ export class ToolStarterApp {
     this.elements.renderSurface.addEventListener("dblclick", (event) => this.finishMultiPointDrawing("double-click", event));
     this.window.addEventListener("pointermove", (event) => this.updatePreviewPointerEdit(event));
     this.window.addEventListener("pointermove", (event) => this.updateDrawingPreview(event));
+    this.window.addEventListener("pointermove", (event) => this.updateViewportPan(event));
     this.elements.renderSurface.addEventListener("wheel", (event) => {
       event.preventDefault();
       this.zoomViewportByStepAtPointer(event.deltaY < 0 ? ZOOM_STEP : -ZOOM_STEP, event);
     }, { passive: false });
     this.window.addEventListener("pointerup", (event) => {
       this.isPaintDragging = false;
+      this.finishViewportPan(event);
       this.finishPreviewPointerEdit(event);
     });
   }
@@ -4761,6 +4764,9 @@ export class ToolStarterApp {
       if (this.startPreviewObjectMove(event)) {
         return;
       }
+      if (this.startViewportPan(event)) {
+        return;
+      }
       this.deselectShape("empty canvas");
     }
   }
@@ -4789,10 +4795,23 @@ export class ToolStarterApp {
     return !targetIndexes.some((shapeIndex) => sortedShapes(object)[shapeIndex]?.locked);
   }
 
+  canPanViewportFromEmptyCanvas() {
+    return !this.activeDrawing
+      && !this.previewPointerEdit
+      && this.activeTool === "select"
+      && this.selectedShapeIndex < 0
+      && !this.selectedShapeIndexes.size
+      && !this.directSelectedShapeIndexes.size
+      && !this.canDragSelectedObjectFromEmptyCanvas();
+  }
+
   updateRenderSurfaceCursorState() {
     const draggingObject = this.previewPointerEdit?.mode === "move-object";
+    const panningViewport = Boolean(this.viewportPan);
     this.elements.renderSurface.classList.toggle("is-empty-canvas-object-drag-ready", this.canDragSelectedObjectFromEmptyCanvas());
     this.elements.renderSurface.classList.toggle("is-empty-canvas-object-dragging", draggingObject);
+    this.elements.renderSurface.classList.toggle("is-canvas-pan-ready", this.canPanViewportFromEmptyCanvas());
+    this.elements.renderSurface.classList.toggle("is-canvas-panning", panningViewport);
   }
 
   deselectShape(sourceLabel = "selection") {
@@ -5092,6 +5111,80 @@ export class ToolStarterApp {
     return true;
   }
 
+  startViewportPan(event) {
+    if (event.button !== 0 || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey || !this.canPanViewportFromEmptyCanvas()) {
+      return false;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    this.viewportPan = {
+      dragThresholdMet: false,
+      pointerId: event.pointerId,
+      startClient: {
+        x: Number(event.clientX) || 0,
+        y: Number(event.clientY) || 0
+      },
+      startViewport: { ...this.viewport }
+    };
+    try {
+      this.elements.renderSurface.setPointerCapture?.(event.pointerId);
+    } catch {
+      // Pointer capture is best-effort for synthetic validation events.
+    }
+    this.updateRenderSurfaceCursorState();
+    return true;
+  }
+
+  updateViewportPan(event) {
+    const pan = this.viewportPan;
+    if (!pan || event.buttons !== 1) {
+      return;
+    }
+    const clientX = Number(event.clientX) || 0;
+    const clientY = Number(event.clientY) || 0;
+    const distance = Math.hypot(clientX - pan.startClient.x, clientY - pan.startClient.y);
+    if (!pan.dragThresholdMet && distance < PREVIEW_DRAG_START_THRESHOLD_PX) {
+      return;
+    }
+    pan.dragThresholdMet = true;
+    const bounds = this.elements.renderSurface.getBoundingClientRect();
+    if (!bounds.width || !bounds.height) {
+      return;
+    }
+    const viewWidth = DEFAULT_VIEWPORT.width / pan.startViewport.zoom;
+    const viewHeight = DEFAULT_VIEWPORT.height / pan.startViewport.zoom;
+    const viewportX = Number((pan.startViewport.x - ((clientX - pan.startClient.x) / bounds.width) * viewWidth).toFixed(3));
+    const viewportY = Number((pan.startViewport.y - ((clientY - pan.startClient.y) / bounds.height) * viewHeight).toFixed(3));
+    if (viewportX === this.viewport.x && viewportY === this.viewport.y) {
+      return;
+    }
+    this.viewport.x = viewportX;
+    this.viewport.y = viewportY;
+    this.updateViewport();
+    this.updateCoordinateDisplay(event);
+  }
+
+  finishViewportPan(event) {
+    const pan = this.viewportPan;
+    if (!pan) {
+      return false;
+    }
+    this.viewportPan = null;
+    try {
+      this.elements.renderSurface.releasePointerCapture?.(pan.pointerId);
+    } catch {
+      // Pointer capture is best-effort for synthetic validation events.
+    }
+    this.updateRenderSurfaceCursorState();
+    if (!pan.dragThresholdMet) {
+      this.deselectShape("empty canvas");
+      return true;
+    }
+    this.updateCoordinateDisplay(event);
+    this.statusLog.write(`OK Viewport drag-pan set to ${this.viewport.x}, ${this.viewport.y}.`);
+    return true;
+  }
+
   startPreviewSelectionBoundsMove(event) {
     this.startPreviewShapeMove(event, this.selectedShapeIndex, { fromSelectionBounds: true });
   }

tools/object-vector-studio-v2/styles/toolStarter.css

@@ -1505,11 +1505,13 @@ textarea:hover {
   cursor: crosshair;
 }
 
-.object-vector-studio-v2__render-surface.is-empty-canvas-object-drag-ready {
+.object-vector-studio-v2__render-surface.is-empty-canvas-object-drag-ready,
+.object-vector-studio-v2__render-surface.is-canvas-pan-ready {
   cursor: grab;
 }
 
-.object-vector-studio-v2__render-surface.is-empty-canvas-object-dragging {
+.object-vector-studio-v2__render-surface.is-empty-canvas-object-dragging,
+.object-vector-studio-v2__render-surface.is-canvas-panning {
   cursor: grabbing;
 }