Reset Collision Inspector V2 layout to template patterns and normalize object scale - PR_26139_008-collision-inspector-template-reset

Author: DavidQ

docs/dev/reports/PR_26139_008-collision-inspector-template-reset_report.md

@@ -0,0 +1,53 @@
+# PR_26139_008-collision-inspector-template-reset
+
+## Scope
+- Rebuilt Collision Inspector V2 shell/body styling around First-Class Tool Starter V2 class patterns.
+- Added Tool Starter panel, accordion, field, and output classes to the Collision Inspector V2 markup.
+- Kept the shared engine collision path and manifest-only Object Vector Studio V2 geometry usage unchanged.
+- Kept the existing A/B rotation wiring and made the controls first-class, visible Tool Starter fields.
+- Formatted Origins output as fixed three-decimal, separate-line text.
+
+## Scale Normalization Rule
+- Collision Inspector V2 uses the loaded manifest `screen.width` and `screen.height` as the canvas intrinsic size and CSS size at zoom `1x`.
+- At Collision Inspector zoom `1x`, one manifest/world unit equals one canvas CSS pixel. Diagnostic zoom is applied only as a canvas transform for inspection and does not mutate object geometry.
+- Asteroids runtime uses the same manifest screen dimensions and the shared Object Vector runtime renderer defaults object `scale` to `1` unless a runtime instance intentionally supplies a scale.
+- Object Vector Studio V2 keeps its authoring grid/view scale separate from runtime geometry: its work surface uses `OBJECT_PREVIEW_DRAWING_SCALE = GRID_STEP` for editing, then maps pointer positions back by dividing by that drawing scale. Export/runtime object geometry remains manifest-unit `objects[].shapes[]` data.
+
+## Layout Decisions
+- Removed the conflicting custom app-shell sizing rules and replaced them with Tool Starter V2 shell, panel, accordion, field, menu, and output patterns.
+- Left panel open accordions use `flex: 1 1 0`, so Manifest and Collision Pair share available vertical space evenly.
+- Right panel open accordions use the same rule, so Live Result, Collision Summary, and Collision Logs share available vertical space evenly.
+- Collision Summary and Live Result remain vertically scrollable within their accordion bodies.
+- The manifest-size canvas is hosted in a scrollable viewport instead of being scaled down by CSS.
+
+## Validation
+- PASS: `node --check tools/collision-inspector-v2/js/CollisionInspectorV2Controls.js`
+- PASS: `node --check tools/collision-inspector-v2/js/CollisionInspectorV2Renderer.js`
+- PASS: `node --check tests/playwright/tools/CollisionInspectorV2.spec.mjs`
+- PASS: `npx playwright test tests/playwright/tools/CollisionInspectorV2.spec.mjs --project=playwright --workers=1 --reporter=list`
+  - Validates Tool Starter layout classes.
+  - Validates left/right accordion equal-space layout.
+  - Validates A and B rotation inputs.
+  - Validates Origins fixed 3-decimal line formatting.
+  - Validates Collision Inspector canvas 1:1 CSS scale and Asteroids runtime canvas 1:1 scale.
+  - Validates Object Vector Studio V2 authoring scale remains separate from runtime manifest-unit scale.
+- PASS: `npm run build:manifest`
+  - This repo does not define a plain `npm run build`; `build:manifest` is the available build script.
+  - Removed generated `docs/build` output after validation.
+- PASS: `git diff --check`
+  - Only CRLF working-copy warnings were reported.
+- FAIL: `npm run test:workspace-v2`
+  - 54 passed, 2 failed.
+  - Failure 1: `validates optional Text to Speech V2 schema contract through Workspace Manager V2 schema` expected `activeContext.tools` to contain `text2speech-V2`.
+  - Failure 2: `tracks Object Vector Studio V2 dirty state through persisted edits and save outcomes` expected a Workspace Manager schema-failure save log, but the save path succeeded.
+  - No tracked files were changed by this validation run.
+
+## Full Samples Smoke Test
+- Skipped. This PR is limited to Collision Inspector V2 template/layout, rotate controls, and diagnostic scale display. It does not broadly change shared runtime sample loading.
+
+## Changed Files
+- `tools/collision-inspector-v2/index.html`
+- `tools/collision-inspector-v2/styles/collisionInspectorV2.css`
+- `tools/collision-inspector-v2/js/CollisionInspectorV2Controls.js`
+- `tools/collision-inspector-v2/js/CollisionInspectorV2Renderer.js`
+- `tests/playwright/tools/CollisionInspectorV2.spec.mjs`

tests/playwright/tools/CollisionInspectorV2.spec.mjs

@@ -46,9 +46,16 @@ test.describe("Collision Inspector V2", () => {
       await expect(page.locator(".tool-starter__header[data-tool-starter-header]")).toBeVisible();
       await expect(page.locator("nav.tool-starter__menu.tool-starter__tool__menu")).toBeVisible();
       await expect(page.locator("nav.tool-starter__menu.tool-starter__workspace__menu")).toBeHidden();
+      await expect(page.locator("main.tool-starter.collision-inspector-v2.app-shell")).toBeVisible();
+      await expect(page.locator(".tool-starter__panel.tool-starter__panel--left.collision-inspector-v2__panel--left")).toBeVisible();
+      await expect(page.locator(".tool-starter__panel.tool-starter__panel--center.collision-inspector-v2__panel--center")).toBeVisible();
+      await expect(page.locator(".tool-starter__panel.tool-starter__panel--right.collision-inspector-v2__panel--right")).toBeVisible();
+      await expect(page.locator(".tool-starter__accordion.collision-inspector-v2__accordion")).toHaveCount(6);
       await expect(page.locator("#collisionModeSelect option")).toHaveText(["Bounds", "Vector", "Pixel/Sprite", "Hybrid"]);
       await expect(page.locator("#loadAsteroidsManifestButton")).toHaveCount(0);
       await expect(page.locator("#collisionManifestInput")).toBeVisible();
+      await expect(page.locator("label[for='objectARotationInput']")).toContainText("Object A Rotate");
+      await expect(page.locator("label[for='objectBRotationInput']")).toContainText("Object B Rotate");
 
       await expect(page.locator("#manifestSummary")).toContainText("Asteroids");
       await expect(page.locator("#manifestSummary")).toContainText("7 objects loaded");
@@ -70,16 +77,48 @@ test.describe("Collision Inspector V2", () => {
         };
       });
       expect(canvasLayout.canvasBelowZoom).toBe(true);
-      expect(canvasLayout.canvasWidth).toBeGreaterThan(100);
-      expect(canvasLayout.canvasHeight).toBeGreaterThan(100);
+      expect(Math.abs(canvasLayout.canvasWidth - 960)).toBeLessThanOrEqual(1);
+      expect(Math.abs(canvasLayout.canvasHeight - 720)).toBeLessThanOrEqual(1);
+      const collisionInspectorScale = await page.locator("#collisionCanvas").evaluate((canvas) => {
+        const rect = canvas.getBoundingClientRect();
+        return {
+          scaleX: rect.width / canvas.width,
+          scaleY: rect.height / canvas.height
+        };
+      });
+      expect(collisionInspectorScale.scaleX).toBeCloseTo(1, 2);
+      expect(collisionInspectorScale.scaleY).toBeCloseTo(1, 2);
+      const runtimeRenderSource = await readFile(join(server.repoRoot, "src", "engine", "rendering", "ObjectVectorRuntimeAssetService.js"), "utf8");
+      const objectVectorStudioSource = await readFile(join(server.repoRoot, "tools", "object-vector-studio-v2", "js", "ToolStarterApp.js"), "utf8");
+      expect(runtimeRenderSource).toContain("const scale = Number.isFinite(options.scale) ? options.scale : 1;");
+      expect(runtimeRenderSource).toContain("context.scale(scale, scale);");
+      expect(objectVectorStudioSource).toContain("const OBJECT_PREVIEW_DRAWING_SCALE = GRID_STEP;");
+      expect(objectVectorStudioSource).toContain("point.x / OBJECT_PREVIEW_DRAWING_SCALE");
+      const asteroidsPage = await page.context().newPage();
+      try {
+        await asteroidsPage.goto(`${server.baseUrl}/games/Asteroids/index.html`, { waitUntil: "domcontentloaded" });
+        await expect(asteroidsPage.locator("#game")).toHaveAttribute("width", "960");
+        await expect(asteroidsPage.locator("#game")).toHaveAttribute("height", "720");
+        const asteroidsScale = await asteroidsPage.locator("#game").evaluate((canvas) => {
+          const rect = canvas.getBoundingClientRect();
+          return {
+            scaleX: rect.width / canvas.width,
+            scaleY: rect.height / canvas.height
+          };
+        });
+        expect(asteroidsScale.scaleX).toBeCloseTo(1, 2);
+        expect(asteroidsScale.scaleY).toBeCloseTo(1, 2);
+      } finally {
+        await asteroidsPage.close();
+      }
       await expect(page.locator("#objectASelect")).toContainText("Asteroids Ship");
       await expect(page.locator("#objectBSelect")).toContainText("Large Asteroid");
       await page.locator("#objectASelect").selectOption("object.asteroids.ship");
       await page.locator("#objectBSelect").selectOption("object.asteroids.large-asteroid");
       await expect(page.locator("#collisionModeSelect")).toHaveValue("vector");
       await expect(page.locator("#collisionResultBadge")).toHaveText("No Collision");
       await expect(page.locator("#overlapState")).toHaveText("false");
-      await expect(page.locator("#originState")).toContainText("A");
+      await expect(page.locator("#originState")).toHaveText("Origins:\nA 360.000,320.000\nB 500.000,320.000");
       await expect(page.locator("#rotationState")).toHaveText("A 0 / B 0");
       await expect(page.locator("#collisionSummary")).toContainText('"enginePath": "src/engine/collision/objectVector.js"');
       await expect(page.locator("#collisionSummary")).toContainText('"objectOrigins"');
@@ -94,17 +133,21 @@ test.describe("Collision Inspector V2", () => {
       const resultOverflow = await page.locator("#resultContent").evaluate((element) => getComputedStyle(element).overflowY);
       expect(["auto", "scroll"]).toContain(resultOverflow);
       const outputLayout = await page.evaluate(() => {
+        const manifest = document.querySelector(".collision-inspector-v2__panel--left .collision-inspector-v2__accordion:nth-of-type(1)").getBoundingClientRect();
+        const pair = document.querySelector(".collision-inspector-v2__panel--left .collision-inspector-v2__accordion:nth-of-type(2)").getBoundingClientRect();
         const result = document.querySelector(".collision-inspector-v2__accordion--result").getBoundingClientRect();
         const summary = document.querySelector(".collision-inspector-v2__accordion--summary").getBoundingClientRect();
         const logs = document.querySelector(".collision-inspector-v2__accordion--logs").getBoundingClientRect();
         const heights = [result.height, summary.height, logs.height];
         return {
+          inputMaxDelta: Math.abs(manifest.height - pair.height),
           maxDelta: Math.max(...heights) - Math.min(...heights),
           resultWidth: result.width,
           summaryWidth: summary.width,
           logsWidth: logs.width
         };
       });
+      expect(outputLayout.inputMaxDelta).toBeLessThanOrEqual(6);
       expect(outputLayout.maxDelta).toBeLessThanOrEqual(6);
       expect(Math.abs(outputLayout.resultWidth - outputLayout.summaryWidth)).toBeLessThanOrEqual(1);
       expect(Math.abs(outputLayout.summaryWidth - outputLayout.logsWidth)).toBeLessThanOrEqual(1);
@@ -114,7 +157,11 @@ test.describe("Collision Inspector V2", () => {
       await page.locator("button[aria-controls='collisionLogContent']").click();
       await expect(page.locator("#collisionLogContent")).toBeVisible();
 
+      await page.locator("#objectARotationInput").fill("45");
+      await expect(page.locator("#rotationState")).toHaveText("A 45 / B 0");
       await page.locator("#objectBRotationInput").fill("180");
+      await expect(page.locator("#rotationState")).toHaveText("A 45 / B 180");
+      await page.locator("#objectARotationInput").fill("0");
       await expect(page.locator("#rotationState")).toHaveText("A 0 / B 180");
 
       await dragCanvasPoint(page, { x: 500, y: 320 }, { x: 360, y: 320 });