Correct Object Preview canvas fitting and enforce 1 to 1 coordinate grid scaling - PR_26133_003-object-preview-grid-scaling-and-canvas-fit

DavidQ · DavidQ · commit 4ee103870b46 · 2026-05-13T11:53:41.000-04:00
diff --git a/docs/dev/reports/playwright_v8_coverage_report.md b/docs/dev/reports/playwright_v8_coverage_report.md
@@ -1,18 +1,18 @@
-# PR_26133_002 Playwright V8 Coverage Report
+# PR_26133_003 Playwright V8 Coverage Report
 
-Coverage source: `docs/dev/reports/playwright_v8_coverage_report.txt`, refreshed by `npm run test:workspace-v2`.
+Coverage source: `docs/dev/reports/playwright_v8_coverage_report.txt`, refreshed by the final `npm run test:workspace-v2` run.
 
 ## Summary
 
 - Coverage is advisory only; no thresholds are enforced.
 - Workspace Manager V2 entry point: 91%.
-- Object Vector Studio V2 changed runtime files covered:
-  - `tools/object-vector-studio-v2/js/bootstrap.js`: 80%, executed lines 99/99, executed functions 4/5.
+- Object Vector Studio V2 runtime coverage entries from the generated report:
   - `tools/object-vector-studio-v2/js/ToolStarterApp.js`: 90%, executed lines 3270/3270, executed functions 342/378.
+  - `tools/object-vector-studio-v2/js/bootstrap.js`: 80%, executed lines 99/99, executed functions 4/5.
 - The generated report lists no low-coverage changed runtime JS files.
 
 ## Validation Context
 
 - Main command: `npm run test:workspace-v2`.
-- Result: 45 passed.
-- Focused Object Vector Studio V2 layout/preview/palette scenario also passed.
+- Result: 46 passed.
+- Focused Object Vector Studio V2 layout and preview-coordinate scenarios also passed.
diff --git a/docs/dev/reports/playwright_workspace_v2_results.md b/docs/dev/reports/playwright_workspace_v2_results.md
@@ -1,27 +1,27 @@
-# PR_26133_002 Workspace V2 Results
+# PR_26133_003 Workspace V2 Results
 
 ## Command Results
 
 - `node --check tools/object-vector-studio-v2/js/ToolStarterApp.js`: passed.
 - `node --check tools/object-vector-studio-v2/js/bootstrap.js`: passed.
 - `node --check tests/playwright/tools/WorkspaceManagerV2.spec.mjs`: passed.
-- `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --grep "shows Object Vector Studio V2 layout shell"`: 1 passed.
-- `npm run test:workspace-v2`: 45 passed.
+- `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --grep "Object Vector Studio V2 (layout shell|preview coordinates)"`: 2 passed.
+- `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --grep "blocks Workspace Manager V2 Save when the toolState file fails schema validation"`: 1 passed.
+- Final `npm run test:workspace-v2`: 46 passed.
 - `git diff --check`: passed.
 
-## Targeted Object Vector Studio V2 Verification
+## Targeted Object Preview Verification
 
 - Standalone Playwright manual pass reported `consoleErrors: []` and `pageErrors: []`.
-- Selected shape palette sync: rectangle restored cyan `#6fd3ff`; circle restored white `#ffffff`.
-- Centering dot button hid and restored the `data-center-origin="0,0"` marker.
-- Grid/object scale matched 1:1: rectangle `x=-80`, `y=-30`, `width=80`, `height=60`; grid included adjacent 10-unit lines and rectangle boundaries.
-- Grid snap moved a `13,7` edit to `10,10`.
-- Selection chrome measured 3x3 handles and `0.75px` dotted selection stroke.
-- Group action became enabled for multi-selection and assigned `group-1`.
-- Compact preview and palette accordions used `flex-grow: 0` and ended at content height; right rail remained scrollable.
+- Object Preview canvas filled the available work-area width at 1280px and after resizing to 1040px.
+- Render surface aspect ratio stayed aligned with the SVG viewBox: measured `1.4545` before and after resize.
+- Visible grid lines now map to coordinate units 1:1.
+- Asteroids ship points `0,-18`, `14,16`, `0,8`, `-14,16` aligned directly on visible grid lines.
+- Asteroids ship vertical span measured 18 visible grid lines above origin and 16 below origin.
+- Existing zoom viewBox behavior remained covered by the Object Vector Studio V2 layout scenario.
 
 ## Contract Checks
 
-- Object Vector Studio V2 JSON remains palette-free.
 - No sample JSON files were modified.
-- No fallback behavior was added for palette sync or validation paths.
+- No unrelated tool/runtime files were changed.
+- No fallback behavior was added.
diff --git a/tests/playwright/tools/WorkspaceManagerV2.spec.mjs b/tests/playwright/tools/WorkspaceManagerV2.spec.mjs
@@ -1578,6 +1578,9 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       expect(shapeHierarchyDensity.rowHeight).toBeLessThanOrEqual(28);
       const gridObjectScale = await page.locator("#objectVectorStudioV2RenderSurface").evaluate((surface) => {
         const rectangle = surface.querySelector("[data-shape-id='rectangle-1']");
+        const workArea = document.querySelector(".object-vector-studio-v2__work-area");
+        const workAreaStyle = getComputedStyle(workArea);
+        const availableWidth = workArea.clientWidth - Number.parseFloat(workAreaStyle.paddingLeft) - Number.parseFloat(workAreaStyle.paddingRight);
         const verticalLines = Array.from(surface.querySelectorAll("[data-grid-rendered='true'] line"))
           .filter((line) => line.getAttribute("x1") === line.getAttribute("x2"))
           .map((line) => Number(line.getAttribute("x1")));
@@ -1588,21 +1591,23 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         const surfaceRect = surface.getBoundingClientRect();
         return {
           aspectRatioMatchesViewBox: Math.abs((surfaceRect.width / surfaceRect.height) - (viewBox[2] / viewBox[3])) < 0.02,
+          canvasFillsAvailableWidth: Math.abs(surfaceRect.width - availableWidth) <= 2,
           rectangle: {
             height: Number(rectangle.getAttribute("height")),
             width: Number(rectangle.getAttribute("width")),
             x: Number(rectangle.getAttribute("x")),
             y: Number(rectangle.getAttribute("y"))
           },
           rectangleSpansGridLines: verticalLines.includes(-80) && verticalLines.includes(0) && horizontalLines.includes(-30) && horizontalLines.includes(30),
-          stepMatchesSnap: verticalLines.includes(-80) && verticalLines.includes(-70)
+          unitGridSpacing: verticalLines.includes(-80) && verticalLines.includes(-79) && horizontalLines.includes(-30) && horizontalLines.includes(-29)
         };
       });
       expect(gridObjectScale).toEqual({
         aspectRatioMatchesViewBox: true,
+        canvasFillsAvailableWidth: true,
         rectangle: { height: 60, width: 80, x: -80, y: -30 },
         rectangleSpansGridLines: true,
-        stepMatchesSnap: true
+        unitGridSpacing: true
       });
       await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-control='visibility']")).toHaveText("");
       await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-control='lock']")).toHaveText("");
@@ -2043,6 +2048,143 @@ test.describe("Workspace Manager V2 bootstrap", () => {
     }
   });
 
+  test("maps Object Vector Studio V2 preview coordinates directly to visible grid lines", async ({ page }) => {
+    const server = await startRepoServer();
+    const pageErrors = [];
+    const consoleErrors = [];
+
+    page.on("pageerror", (error) => {
+      pageErrors.push(error.message);
+    });
+    page.on("console", (message) => {
+      if (message.type() === "error") {
+        consoleErrors.push(message.text());
+      }
+    });
+
+    await coverageReporter.start(page);
+    try {
+      await page.goto(`${server.baseUrl}/tools/object-vector-studio-v2/index.html`, { waitUntil: "networkidle" });
+      await page.evaluate(() => {
+        sessionStorage.setItem("object-vector-studio-v2.runtimePalette", JSON.stringify({
+          id: "asteroids-ship-grid",
+          swatches: [
+            { id: "white", value: "#ffffff" },
+            { id: "cyan", value: "#6fd3ff" }
+          ]
+        }));
+      });
+      await page.locator("#objectVectorStudioV2ImportJsonInput").setInputFiles({
+        buffer: Buffer.from(JSON.stringify({
+          name: "Asteroids Ship Grid Check",
+          objects: [
+            {
+              id: "object.asteroids.ship-grid",
+              name: "Asteroids Ship Grid Check",
+              shapes: [
+                {
+                  geometry: {
+                    points: [
+                      { x: 0, y: -18 },
+                      { x: 14, y: 16 },
+                      { x: 0, y: 8 },
+                      { x: -14, y: 16 }
+                    ]
+                  },
+                  id: "asteroids-ship-outline",
+                  locked: false,
+                  order: 1,
+                  style: { fill: "#ffffff", stroke: "#6fd3ff", strokeWidth: 1 },
+                  transform: { originX: 0, originY: 0, rotation: 0, scaleX: 1, scaleY: 1, x: 0, y: 0 },
+                  type: "polygon",
+                  visible: true
+                }
+              ]
+            }
+          ],
+          toolId: "object-vector-studio-v2",
+          version: 1
+        }, null, 2)),
+        mimeType: "application/json",
+        name: "asteroids-ship-grid.object-vector.json"
+      });
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Render mode svg-work-surface: rendered Asteroids Ship Grid Check with 1 visible shapes; capture mode none\./);
+
+      const readPreviewScale = async () => page.locator("#objectVectorStudioV2RenderSurface").evaluate((surface) => {
+        const workArea = document.querySelector(".object-vector-studio-v2__work-area");
+        const workAreaStyle = getComputedStyle(workArea);
+        const availableWidth = workArea.clientWidth - Number.parseFloat(workAreaStyle.paddingLeft) - Number.parseFloat(workAreaStyle.paddingRight);
+        const surfaceRect = surface.getBoundingClientRect();
+        const viewBox = surface.getAttribute("viewBox").split(/\s+/).map(Number);
+        const horizontalLines = Array.from(surface.querySelectorAll("[data-grid-rendered='true'] line"))
+          .filter((line) => line.getAttribute("y1") === line.getAttribute("y2"))
+          .map((line) => Number(line.getAttribute("y1")));
+        const verticalLines = Array.from(surface.querySelectorAll("[data-grid-rendered='true'] line"))
+          .filter((line) => line.getAttribute("x1") === line.getAttribute("x2"))
+          .map((line) => Number(line.getAttribute("x1")));
+        const screenPoint = (x, y) => {
+          const point = surface.createSVGPoint();
+          point.x = x;
+          point.y = y;
+          const transformed = point.matrixTransform(surface.getScreenCTM());
+          return { x: transformed.x, y: transformed.y };
+        };
+        const shipPoints = [
+          { x: 0, y: -18 },
+          { x: 14, y: 16 },
+          { x: 0, y: 8 },
+          { x: -14, y: 16 }
+        ];
+        const pointScreens = shipPoints.map((point) => screenPoint(point.x, point.y));
+        const lineScreens = {
+          bottom: screenPoint(0, 16).y,
+          origin: screenPoint(0, 0).y,
+          top: screenPoint(0, -18).y
+        };
+        return {
+          aspectRatioStable: Math.abs((surfaceRect.width / surfaceRect.height) - (viewBox[2] / viewBox[3])) < 0.02,
+          canvasFillsAvailableWidth: Math.abs(surfaceRect.width - availableWidth) <= 2,
+          gridLinesAboveOrigin: horizontalLines.filter((y) => y < 0 && y >= -18).length,
+          gridLinesBelowOrigin: horizontalLines.filter((y) => y > 0 && y <= 16).length,
+          originCentered: Math.abs(lineScreens.origin - (surfaceRect.top + surfaceRect.height / 2)) <= 1,
+          pointsOnVisibleGridLines: shipPoints.every((point) => horizontalLines.includes(point.y) && verticalLines.includes(point.x)),
+          pointScreensMatchGrid: Math.abs(pointScreens[0].y - lineScreens.top) <= 0.01
+            && Math.abs(pointScreens[1].y - lineScreens.bottom) <= 0.01
+            && Math.abs(pointScreens[3].y - lineScreens.bottom) <= 0.01,
+          unitGridSpacing: horizontalLines.includes(-18) && horizontalLines.includes(-17) && horizontalLines.includes(15) && horizontalLines.includes(16),
+          viewBox: surface.getAttribute("viewBox")
+        };
+      });
+
+      const initialPreviewScale = await readPreviewScale();
+      expect(initialPreviewScale).toEqual({
+        aspectRatioStable: true,
+        canvasFillsAvailableWidth: true,
+        gridLinesAboveOrigin: 18,
+        gridLinesBelowOrigin: 16,
+        originCentered: true,
+        pointsOnVisibleGridLines: true,
+        pointScreensMatchGrid: true,
+        unitGridSpacing: true,
+        viewBox: "-160 -110 320 220"
+      });
+
+      await page.setViewportSize({ width: 1040, height: 720 });
+      const resizedPreviewScale = await readPreviewScale();
+      expect(resizedPreviewScale.aspectRatioStable).toBe(true);
+      expect(resizedPreviewScale.canvasFillsAvailableWidth).toBe(true);
+      expect(resizedPreviewScale.gridLinesAboveOrigin).toBe(18);
+      expect(resizedPreviewScale.gridLinesBelowOrigin).toBe(16);
+      expect(resizedPreviewScale.pointsOnVisibleGridLines).toBe(true);
+
+      expect(pageErrors).toEqual([]);
+      expect(consoleErrors).toEqual([]);
+    } finally {
+      await coverageReporter.stop(page);
+      await server.close();
+    }
+  });
+
   test("expands Object Vector Studio V2 asset authoring controls", async ({ page }, testInfo) => {
     const server = await startRepoServer();
     const pageErrors = [];
diff --git a/tools/object-vector-studio-v2/js/ToolStarterApp.js b/tools/object-vector-studio-v2/js/ToolStarterApp.js
@@ -10,7 +10,7 @@ const GRID_RENDER_SESSION_KEY = "object-vector-studio-v2.gridRender";
 const CENTER_ORIGIN_SESSION_KEY = "object-vector-studio-v2.centerOrigin";
 const SVG_NS = "http://www.w3.org/2000/svg";
 const DEFAULT_VIEWPORT = Object.freeze({ height: 220, width: 320, x: 0, y: 0, zoom: 1 });
-const GRID_STEP = 10;
+const GRID_STEP = 1;
 const MAX_ZOOM = 4;
 const MIN_ZOOM = 0.25;
 const ZOOM_STEP = 0.1;
diff --git a/tools/object-vector-studio-v2/styles/toolStarter.css b/tools/object-vector-studio-v2/styles/toolStarter.css
@@ -1258,11 +1258,13 @@ textarea:hover {
 }
 
 .object-vector-studio-v2__render-surface {
-  width: min(100%, 480px);
+  width: 100%;
+  max-width: 100%;
   height: auto;
   min-height: 0;
   aspect-ratio: 16 / 11;
   align-self: stretch;
+  justify-self: stretch;
   border: 1px solid var(--tool-starter-line);
   border-radius: 8px;
   background: rgba(0, 0, 0, 0.16);
@@ -1276,6 +1278,7 @@ textarea:hover {
 .object-vector-studio-v2__svg-grid {
   stroke: rgba(255, 255, 255, 0.18);
   stroke-width: 1;
+  vector-effect: non-scaling-stroke;
   pointer-events: none;
 }
 
