Add mouse wheel zoom to Collision Inspector V2 - PR_26140_053-add-collision-mouse-wheel-zoom

Author: DavidQ

games/Asteroids/game.manifest.json

@@ -229,20 +229,20 @@
               "geometry": {
                 "points": [
                   {
-                    "x": -1.5,
-                    "y": 1.5
+                    "x": -1,
+                    "y": -1
                   },
                   {
-                    "x": 0.5,
-                    "y": 1.5
+                    "x": 1,
+                    "y": -1
                   },
                   {
-                    "x": 0.5,
-                    "y": 3.5
+                    "x": 1,
+                    "y": 1
                   },
                   {
-                    "x": -1.5,
-                    "y": 3.5
+                    "x": -1,
+                    "y": 1
                   }
                 ]
               },
@@ -251,7 +251,16 @@
                 "stroke": "#FFFFFF",
                 "strokeWidth": 2,
                 "fillOpacity": 1,
-                "strokeOpacity": 1
+                "strokeOpacity": 1,
+                "pointRounding": [
+                  false,
+                  false,
+                  false,
+                  false
+                ],
+                "startPointStyle": "square",
+                "endPointStyle": "square",
+                "pointStyle": "square"
               },
               "transform": {
                 "rotation": 0,
@@ -293,8 +302,8 @@
             "bullet"
           ],
           "objectOrigin": {
-            "x": -0.5,
-            "y": 2.5
+            "x": 0,
+            "y": 0
           }
         },
         {

tests/playwright/tools/CollisionInspectorV2.spec.mjs

@@ -288,6 +288,43 @@ 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 wheelZoomState = await page.locator("#collisionCanvas").evaluate((canvas) => {
+        const app = window.__collisionInspectorV2App;
+        const rect = canvas.getBoundingClientRect();
+        const clientX = Math.round(rect.left + rect.width * 0.72);
+        const clientY = Math.round(rect.top + rect.height * 0.44);
+        const before = app.renderer.canvasPoint({ clientX, clientY });
+        const event = new WheelEvent("wheel", {
+          bubbles: true,
+          cancelable: true,
+          clientX,
+          clientY,
+          deltaY: -120
+        });
+        canvas.dispatchEvent(event);
+        const after = app.renderer.canvasPoint({ clientX, clientY });
+        return {
+          after,
+          before,
+          defaultPrevented: event.defaultPrevented,
+          pan: { ...app.renderer.viewportPan },
+          zoom: app.zoom
+        };
+      });
+      expect(wheelZoomState.defaultPrevented).toBe(true);
+      expect(wheelZoomState.zoom).toBe(1.1);
+      expect(Math.abs(wheelZoomState.after.x - wheelZoomState.before.x)).toBeLessThan(0.01);
+      expect(Math.abs(wheelZoomState.after.y - wheelZoomState.before.y)).toBeLessThan(0.01);
+      expect(Math.abs(wheelZoomState.pan.x) + Math.abs(wheelZoomState.pan.y)).toBeGreaterThan(0);
+      await expect(page.locator("#zoomState")).toHaveText("110%");
+      await expect(page.locator("#collisionSummary")).toContainText('"zoom": "110%"');
+      await expect(page.locator("#collisionLog")).toHaveValue(/Canvas zoom set to 110%/);
+      await page.evaluate(() => {
+        window.__collisionInspectorV2App.setZoom(1);
+        window.__collisionInspectorV2App.renderer.resetViewportPan();
+        window.__collisionInspectorV2App.evaluateAndRender();
+      });
+      await expect(page.locator("#zoomState")).toHaveText("100%");
       const viewportPanState = await page.locator("#collisionCanvas").evaluate((canvas) => {
         const app = window.__collisionInspectorV2App;
         const rect = canvas.getBoundingClientRect();

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

@@ -11,6 +11,8 @@ import { deepClone } from "../../../src/shared/utils/jsonUtils.js";
 import {
   clampCollisionZoom,
   COLLISION_ZOOM_DEFAULT,
+  COLLISION_ZOOM_STEP,
+  collisionZoomToPercent,
   OBJECT_LABELS,
   roundNumber
 } from "./constants.js";
@@ -58,6 +60,7 @@ export class CollisionInspectorV2App {
         this.shell.returnToWorkspace();
       },
       onRotationChange: (key, rotation) => this.setRotation(key, rotation),
+      onCanvasWheel: (event) => this.handleCanvasWheel(event),
       onZoomChange: (zoom) => this.setZoom(zoom)
     });
     this.controls.setLaunchMode(this.isWorkspaceLaunch());
@@ -203,6 +206,27 @@ export class CollisionInspectorV2App {
     this.evaluateAndRender();
   }
 
+  handleCanvasWheel(event) {
+    if (!this.hasRenderableManifest() || this.dragState) {
+      return;
+    }
+    const deltaY = Number(event.deltaY) || 0;
+    if (!deltaY) {
+      return;
+    }
+    event.preventDefault();
+    const direction = deltaY < 0 ? 1 : -1;
+    const nextZoom = clampCollisionZoom(Number((this.zoom + direction * COLLISION_ZOOM_STEP).toFixed(3)));
+    if (nextZoom === this.zoom) {
+      return;
+    }
+    this.zoom = nextZoom;
+    this.renderer.setZoomAtClientPoint(this.zoom, event);
+    this.controls.setZoom(this.zoom);
+    this.evaluateAndRender();
+    this.logger.write(`INFO Canvas zoom set to ${collisionZoomToPercent(this.zoom)}%.`);
+  }
+
   resetSimulation({ silent = false } = {}) {
     if (!this.screen || !this.objects.length) {
       this.logger.write("FAIL Load a manifest with root.screen.width, root.screen.height, and Object Vector Studio V2 objects before resetting.");

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

@@ -48,6 +48,9 @@ export class CollisionInspectorV2Controls {
     this.elements.resetButton.addEventListener("click", callbacks.onReset);
     this.elements.returnToWorkspaceButton.addEventListener("click", callbacks.onReturnToWorkspace);
     this.elements.canvas.addEventListener("pointerdown", callbacks.onPointerDown);
+    this.elements.canvas.addEventListener("wheel", (event) => {
+      callbacks.onCanvasWheel?.(event);
+    }, { passive: false });
     this.window.addEventListener("pointermove", callbacks.onPointerMove);
     this.window.addEventListener("pointerup", callbacks.onPointerUp);
   }

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

@@ -38,6 +38,17 @@ export class CollisionInspectorV2Renderer {
     });
   }
 
+  setZoomAtClientPoint(zoom, event) {
+    const before = this.canvasPoint(event);
+    this.setZoom(zoom);
+    const after = this.canvasPoint(event);
+    this.viewportPan = {
+      x: Number((this.viewportPan.x + before.x - after.x).toFixed(6)),
+      y: Number((this.viewportPan.y + before.y - after.y).toFixed(6))
+    };
+    return { ...this.viewportPan };
+  }
+
   clear() {
     const ctx = this.ctx;
     ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

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

@@ -8,6 +8,7 @@ export const OBJECT_LABELS = Object.freeze({
 export const COLLISION_ZOOM_DEFAULT = 1;
 export const COLLISION_ZOOM_MAX = 10;
 export const COLLISION_ZOOM_MIN = 0.1;
+export const COLLISION_ZOOM_STEP = 0.1;
 
 export function labelForObject(object) {
   return `${object?.name || "Object"} (${object?.id || "unknown"})`;