Restore Object Preview grid step and scale object drawing to coordinate grid counts - PR_26133_004-object-preview-object-scale-grid-step-restore

Author: DavidQ

docs/dev/reports/playwright_v8_coverage_report.md

@@ -1,4 +1,4 @@
-# PR_26133_003 Playwright V8 Coverage Report
+# PR_26133_004 Playwright V8 Coverage Report
 
 Coverage source: `docs/dev/reports/playwright_v8_coverage_report.txt`, refreshed by the final `npm run test:workspace-v2` run.
 
@@ -7,12 +7,13 @@ Coverage source: `docs/dev/reports/playwright_v8_coverage_report.txt`, refreshed
 - Coverage is advisory only; no thresholds are enforced.
 - Workspace Manager V2 entry point: 91%.
 - 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/ToolStarterApp.js`: 91%, executed lines 3304/3304, executed functions 346/381.
   - `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.
+- The generated report lists `tools/object-vector-studio-v2/js/ToolStarterApp.js` as a changed JS file with browser V8 coverage.
 
 ## Validation Context
 
 - Main command: `npm run test:workspace-v2`.
 - Result: 46 passed.
 - Focused Object Vector Studio V2 layout and preview-coordinate scenarios also passed.
+- Manual Object Preview probe confirmed restored 10-unit grid spacing, 10x object drawing scale, zoom/pan/reset behavior, and no console/runtime errors.

docs/dev/reports/playwright_workspace_v2_results.md

@@ -1,27 +1,27 @@
-# PR_26133_003 Workspace V2 Results
+# PR_26133_004 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 "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.
+- `npm run test:workspace-v2`: 46 passed.
+- `git diff --check`: passed with the existing LF-to-CRLF working-copy warning for `tests/playwright/tools/WorkspaceManagerV2.spec.mjs`.
 
 ## Targeted Object Preview Verification
 
-- Standalone Playwright manual pass reported `consoleErrors: []` and `pageErrors: []`.
-- 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.
+- Standalone Playwright manual probe reported `consoleErrors: []` and `pageErrors: []`.
+- Object Preview grid rendered with 10-unit visible spacing.
+- Object Preview shape drawing used 10x preview scale while preserving persisted object coordinates.
+- Asteroids ship source points `0,-18`, `14,16`, `0,8`, `-14,16` rendered as `0,-180`, `140,160`, `0,80`, `-140,160`.
+- At 25% zoom, the Asteroids ship measured 18 visible grid lines above origin and 16 visible grid lines below origin.
+- Object Preview canvas filled available horizontal work-area width and kept the SVG viewBox aspect ratio stable.
+- Zoom, pan, and reset view remained functional: panned viewBox `-620 -440 1280 880`, reset viewBox `-160 -110 320 220`.
 
 ## Contract Checks
 
+- `const GRID_STEP = 10;` is restored in Object Preview.
+- Canvas side-to-side fit and aspect-ratio behavior from the prior PR are preserved.
 - No sample JSON files were modified.
 - No unrelated tool/runtime files were changed.
 - No fallback behavior was added.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -1592,22 +1592,27 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         return {
           aspectRatioMatchesViewBox: Math.abs((surfaceRect.width / surfaceRect.height) - (viewBox[2] / viewBox[3])) < 0.02,
           canvasFillsAvailableWidth: Math.abs(surfaceRect.width - availableWidth) <= 2,
+          gridStepRestored: Math.min(...verticalLines.filter((x) => x > 0)) === 10 && Math.min(...horizontalLines.filter((y) => y > 0)) === 10,
           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),
-          unitGridSpacing: verticalLines.includes(-80) && verticalLines.includes(-79) && horizontalLines.includes(-30) && horizontalLines.includes(-29)
+          rectangleUsesPreviewDrawingScale: Number(rectangle.getAttribute("x")) === -800
+            && Number(rectangle.getAttribute("y")) === -300
+            && Number(rectangle.getAttribute("width")) === 800
+            && Number(rectangle.getAttribute("height")) === 600,
+          unitGridSpacingRemoved: !verticalLines.includes(-79) && !horizontalLines.includes(-29)
         };
       });
       expect(gridObjectScale).toEqual({
         aspectRatioMatchesViewBox: true,
         canvasFillsAvailableWidth: true,
-        rectangle: { height: 60, width: 80, x: -80, y: -30 },
-        rectangleSpansGridLines: true,
-        unitGridSpacing: true
+        gridStepRestored: true,
+        rectangle: { height: 600, width: 800, x: -800, y: -300 },
+        rectangleUsesPreviewDrawingScale: true,
+        unitGridSpacingRemoved: 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("");
@@ -1707,13 +1712,21 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       });
       expect(selectionChrome).toEqual({ handleHeight: 3, handleWidth: 3, selectionStrokeWidth: "0.75px" });
 
-      await page.locator("#objectVectorStudioV2RenderSurface [data-shape-id='circle-2']").click({ modifiers: ["Shift"] });
+      const clickPreviewShape = async (shapeId, eventInit = {}) => {
+        await page.locator(`#objectVectorStudioV2RenderSurface [data-shape-id='${shapeId}']`).dispatchEvent("click", {
+          bubbles: true,
+          cancelable: true,
+          ...eventInit
+        });
+      };
+
+      await clickPreviewShape("circle-2", { shiftKey: true });
       await expect(page.locator("#objectVectorStudioV2RenderSurface [data-shape-id='rectangle-1']")).toHaveClass(/is-selected/);
       await expect(page.locator("#objectVectorStudioV2RenderSurface [data-shape-id='circle-2']")).toHaveClass(/is-selected/);
       await expect(page.locator("[data-palette-color='#ffffff']")).toHaveClass(/is-selected/);
       await expect(page.locator("#statusLog")).toHaveValue(/Multi-select count: 2/);
       await expect(page.locator("#objectVectorStudioV2JsonDetails")).toContainText('"selectedShapeIds"');
-      await page.locator("#objectVectorStudioV2RenderSurface [data-shape-id='rectangle-1']").click();
+      await clickPreviewShape("rectangle-1");
       await expect(page.locator("[data-palette-color='#6fd3ff']")).toHaveClass(/is-selected/);
       await expect(page.locator("#objectVectorStudioV2ObjectDetails")).toContainText("Rectangle Geometry");
       const reviewLayoutState = await page.evaluate(() => {
@@ -1798,24 +1811,24 @@ test.describe("Workspace Manager V2 bootstrap", () => {
 
       await page.keyboard.press("F");
       await page.locator("[data-palette-color='#6fd3ff']").click();
-      await page.locator("#objectVectorStudioV2RenderSurface [data-shape-id='circle-2']").click();
+      await clickPreviewShape("circle-2");
       await expect(page.locator("#objectVectorStudioV2JsonDetails")).toContainText('"fill": "#6fd3ff"');
       await expect(page.locator("#statusLog")).toHaveValue(/OK Applied palette color #6fd3ff from cyan to shape circle-2 by render surface click\. Target: paint\./);
       await page.keyboard.press("S");
-      await page.locator("#objectVectorStudioV2RenderSurface [data-shape-id='circle-2']").click();
+      await clickPreviewShape("circle-2");
       await expect(page.locator("#objectVectorStudioV2JsonDetails")).toContainText('"stroke": "#ffffff"');
       await expect(page.locator("#statusLog")).toHaveValue(/OK Applied palette color #ffffff from white to shape circle-2 by render surface click\. Target: stroke width 2\./);
       await page.evaluate(() => {
         window.__objectVectorStudioV2App.selectedStrokeColor = "#123456";
         window.__objectVectorStudioV2App.selectedStrokeLabel = "manual rogue";
         window.__objectVectorStudioV2App.activeTool = "stroke";
       });
-      await page.locator("#objectVectorStudioV2RenderSurface [data-shape-id='circle-2']").click();
+      await clickPreviewShape("circle-2");
       await expect(page.locator("#statusLog")).toHaveValue(/FAIL Palette color application rejected: #123456 is not in the loaded palette\./);
       await expect(page.locator("#objectVectorStudioV2JsonDetails")).not.toContainText("#123456");
       await page.locator("[data-palette-color='#ffffff']").click();
       await page.keyboard.press("I");
-      await page.locator("#objectVectorStudioV2RenderSurface [data-shape-id='circle-2']").click();
+      await clickPreviewShape("circle-2");
       await expect(page.locator("#statusLog")).toHaveValue(/OK Sampled stroke color #ffffff from shape circle-2\./);
       await page.keyboard.press("X");
       await expect(page.locator("#statusLog")).toHaveValue(/OK Swapped fill and stroke colors/);
@@ -2109,6 +2122,12 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         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\./);
+      await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-160 -110 320 220");
+      for (let index = 0; index < 8; index += 1) {
+        await page.locator("#objectVectorStudioV2ZoomOutButton").click();
+      }
+      await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toContainText("Zoom 25%");
+      await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-640 -440 1280 880");
 
       const readPreviewScale = async () => page.locator("#objectVectorStudioV2RenderSurface").evaluate((surface) => {
         const workArea = document.querySelector(".object-vector-studio-v2__work-area");
@@ -2129,29 +2148,38 @@ test.describe("Workspace Manager V2 bootstrap", () => {
           const transformed = point.matrixTransform(surface.getScreenCTM());
           return { x: transformed.x, y: transformed.y };
         };
-        const shipPoints = [
+        const sourceShipPoints = [
           { x: 0, y: -18 },
           { x: 14, y: 16 },
           { x: 0, y: 8 },
           { x: -14, y: 16 }
         ];
+        const shipPoints = sourceShipPoints.map((point) => ({ x: point.x * 10, y: point.y * 10 }));
+        const drawnPoints = surface.querySelector("[data-shape-id='asteroids-ship-outline']").getAttribute("points")
+          .split(/\s+/)
+          .map((entry) => {
+            const [x, y] = entry.split(",").map(Number);
+            return { x, y };
+          });
         const pointScreens = shipPoints.map((point) => screenPoint(point.x, point.y));
         const lineScreens = {
-          bottom: screenPoint(0, 16).y,
+          bottom: screenPoint(0, 160).y,
           origin: screenPoint(0, 0).y,
-          top: screenPoint(0, -18).y
+          top: screenPoint(0, -180).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,
+          drawnPoints,
+          gridLinesAboveOrigin: horizontalLines.filter((y) => y < 0 && y >= -180).length,
+          gridLinesBelowOrigin: horizontalLines.filter((y) => y > 0 && y <= 160).length,
+          gridStepRestored: Math.min(...verticalLines.filter((x) => x > 0)) === 10 && Math.min(...horizontalLines.filter((y) => y > 0)) === 10,
           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),
+          unitGridSpacingRemoved: !horizontalLines.includes(-18) && !horizontalLines.includes(-17) && !horizontalLines.includes(15) && !horizontalLines.includes(16),
           viewBox: surface.getAttribute("viewBox")
         };
       });
@@ -2160,22 +2188,36 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       expect(initialPreviewScale).toEqual({
         aspectRatioStable: true,
         canvasFillsAvailableWidth: true,
+        drawnPoints: [
+          { x: 0, y: -180 },
+          { x: 140, y: 160 },
+          { x: 0, y: 80 },
+          { x: -140, y: 160 }
+        ],
         gridLinesAboveOrigin: 18,
         gridLinesBelowOrigin: 16,
+        gridStepRestored: true,
         originCentered: true,
         pointsOnVisibleGridLines: true,
         pointScreensMatchGrid: true,
-        unitGridSpacing: true,
-        viewBox: "-160 -110 320 220"
+        unitGridSpacingRemoved: true,
+        viewBox: "-640 -440 1280 880"
       });
 
+      await page.locator("#objectVectorStudioV2PanRightButton").click();
+      await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-620 -440 1280 880");
+      await page.locator("#objectVectorStudioV2PanLeftButton").click();
+      await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-640 -440 1280 880");
       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.gridStepRestored).toBe(true);
       expect(resizedPreviewScale.pointsOnVisibleGridLines).toBe(true);
+      await page.locator("#objectVectorStudioV2ResetViewButton").click();
+      await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-160 -110 320 220");
 
       expect(pageErrors).toEqual([]);
       expect(consoleErrors).toEqual([]);