Normalize Object Preview zoom display so internal 10 percent reads as user 100 percent - PR_26133_006-object-preview-zoom-display-normalization

Author: DavidQ

docs/dev/reports/playwright_v8_coverage_report.md

@@ -1,4 +1,4 @@
-# PR_26133_005 Playwright V8 Coverage Report
+# PR_26133_006 Playwright V8 Coverage Report
 
 Coverage source: `docs/dev/reports/playwright_v8_coverage_report.txt`, refreshed by the final `npm run test:workspace-v2` run.
 
@@ -16,4 +16,4 @@ Coverage source: `docs/dev/reports/playwright_v8_coverage_report.txt`, refreshed
 - 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 logical pointer/origin display, unchanged visual scale, and no console/runtime errors.
+- Manual Object Preview probe confirmed normalized zoom display, unchanged visual scale, and no console/runtime errors.

docs/dev/reports/playwright_workspace_v2_results.md

@@ -1,27 +1,28 @@
-# PR_26133_005 Workspace V2 Results
+# PR_26133_006 Workspace V2 Results
 
 ## Command Results
 
 - `node --check tools/object-vector-studio-v2/js/ToolStarterApp.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 after correcting the pointer-event test probe.
+- `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --grep "Object Vector Studio V2 (layout shell|preview coordinates)"`: 2 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 probe reported `consoleErrors: []` and `pageErrors: []`.
-- Object Preview visuals remained unchanged: grid step `10`, viewBox `-640 -440 1280 880` at 25% zoom, and Asteroids ship drawn points `0,-180`, `140,160`, `0,80`, `-140,160`.
-- Pointer display now reports logical coordinates: grid-space `-140,-160` displays as `Pointer -14, -16 | Canvas origin 0,0 centered | Zoom 25%`.
-- Canvas origin display now reports logical coordinates: panning right displays `Origin: 2, 0 | Canvas 0,0 centered | Zoom 25%`.
-- Reset view displays `Origin: 0, 0 | Canvas 0,0 centered | Zoom 100%`.
-- Zoom display remains logical viewport zoom and is not multiplied by `GRID_STEP`.
+- Object Preview visuals remained unchanged: grid step `10`, viewBox `-640 -440 1280 880` at internal 25%, and Asteroids ship drawn points `0,-180`, `140,160`, `0,80`, `-140,160`.
+- Internal zoom `0.1` displayed as `Zoom 100%`.
+- Internal zoom `0.095` displayed as `Zoom 95%`.
+- Zoom buttons continued changing the internal zoom/viewBox the same way: one zoom out from reset displayed `Zoom 900%`, one zoom in back to reset displayed `Zoom 1000%`, and internal 25% displayed `Zoom 250%`.
+- Pointer and origin coordinate normalization from PR_26133_005 remains intact.
 
 ## Contract Checks
 
-- `const GRID_STEP = 10;` remains unchanged.
-- Object rendering scale was not changed.
-- Grid rendering was not changed.
-- Canvas sizing was not changed.
+- Visual rendering was not changed.
+- Canvas size was not changed.
+- Grid size was not changed.
+- Object drawing scale was not changed.
+- Pointer/origin coordinate normalization was not changed.
 - No unrelated tool/runtime files were changed.
 - No fallback behavior was added.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -1838,20 +1838,32 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#statusLog")).toHaveValue(/OK Shape\/Tools mode selected from keyboard: select\./);
 
       await page.locator("#objectVectorStudioV2ZoomInButton").click();
-      await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toContainText("Zoom 110%");
+      await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toContainText("Zoom 1100%");
       await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-145.455 -100 290.909 200");
       await page.locator("#objectVectorStudioV2PanRightButton").click();
       await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-125.455 -100 290.909 200");
-      await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toHaveText("Origin: 2, 0 | Canvas 0,0 centered | Zoom 110%");
+      await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toHaveText("Origin: 2, 0 | Canvas 0,0 centered | Zoom 1100%");
       await page.locator("#objectVectorStudioV2ResetViewButton").click();
       await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-160 -110 320 220");
+      await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toHaveText("Origin: 0, 0 | Canvas 0,0 centered | Zoom 1000%");
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Viewport reset to 1000% at origin 0,0\./);
+      await page.evaluate(() => {
+        window.__objectVectorStudioV2App.viewport.zoom = 0.1;
+        window.__objectVectorStudioV2App.updateViewport();
+      });
       await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toHaveText("Origin: 0, 0 | Canvas 0,0 centered | Zoom 100%");
-      await expect(page.locator("#statusLog")).toHaveValue(/OK Viewport reset to 100% at origin 0,0\./);
+      await page.evaluate(() => {
+        window.__objectVectorStudioV2App.viewport.zoom = 0.095;
+        window.__objectVectorStudioV2App.updateViewport();
+      });
+      await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toHaveText("Origin: 0, 0 | Canvas 0,0 centered | Zoom 95%");
+      await page.locator("#objectVectorStudioV2ResetViewButton").click();
+      await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-160 -110 320 220");
       await page.locator("#objectVectorStudioV2RenderSurface").hover();
       for (let index = 0; index < 40; index += 1) {
         await page.mouse.wheel(0, -240);
       }
-      await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toContainText("Zoom 400%");
+      await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toContainText("Zoom 4000%");
       await expect(page.locator("#objectVectorStudioV2RenderSurface [data-grid-rendered='true']")).toHaveCount(1);
       await expect(page.locator("#objectVectorStudioV2RenderSurface [data-center-origin='0,0']")).toHaveCount(1);
       const zoomedGridState = await page.locator("#objectVectorStudioV2RenderSurface").evaluate((surface) => ({
@@ -1865,7 +1877,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       for (let index = 0; index < 60; index += 1) {
         await page.mouse.wheel(0, 240);
       }
-      await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toContainText("Zoom 25%");
+      await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toContainText("Zoom 250%");
       await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-640 -440 1280 880");
       await page.locator("#objectVectorStudioV2ResetViewButton").click();
 
@@ -2127,7 +2139,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       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("#objectVectorStudioV2CoordinateDisplay")).toContainText("Zoom 250%");
       await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-640 -440 1280 880");
 
       const readPreviewScale = async () => page.locator("#objectVectorStudioV2RenderSurface").evaluate((surface) => {
@@ -2207,10 +2219,10 @@ test.describe("Workspace Manager V2 bootstrap", () => {
 
       await page.locator("#objectVectorStudioV2PanRightButton").click();
       await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-620 -440 1280 880");
-      await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toHaveText("Origin: 2, 0 | Canvas 0,0 centered | Zoom 25%");
+      await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toHaveText("Origin: 2, 0 | Canvas 0,0 centered | Zoom 250%");
       await page.locator("#objectVectorStudioV2PanLeftButton").click();
       await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-640 -440 1280 880");
-      await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toHaveText("Origin: 0, 0 | Canvas 0,0 centered | Zoom 25%");
+      await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toHaveText("Origin: 0, 0 | Canvas 0,0 centered | Zoom 250%");
       const examplePointerScreen = await page.locator("#objectVectorStudioV2RenderSurface").evaluate((surface) => {
         const point = surface.createSVGPoint();
         point.x = -140;
@@ -2223,7 +2235,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         clientX: examplePointerScreen.x,
         clientY: examplePointerScreen.y
       });
-      await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toHaveText("Pointer -14, -16 | Canvas origin 0,0 centered | Zoom 25%");
+      await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toHaveText("Pointer -14, -16 | Canvas origin 0,0 centered | Zoom 250%");
       await page.setViewportSize({ width: 1040, height: 720 });
       const resizedPreviewScale = await readPreviewScale();
       expect(resizedPreviewScale.aspectRatioStable).toBe(true);

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

@@ -12,7 +12,7 @@ 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 OBJECT_PREVIEW_DRAWING_SCALE = GRID_STEP;
-const MAX_ZOOM = 4;
+const MAX_ZOOM = 1;
 const MIN_ZOOM = 0.25;
 const ZOOM_STEP = 0.1;
 
@@ -660,7 +660,7 @@ export class ToolStarterApp {
     this.elements.objectPreviewFooter.textContent = "Object ID: none";
     this.elements.jsonDetails.textContent = "{}";
     this.renderFrameTimeline();
-    this.elements.coordinateDisplay.textContent = "Origin: 0, 0 | Canvas 0,0 centered | Zoom 100%";
+    this.elements.coordinateDisplay.textContent = `Origin: 0, 0 | Canvas 0,0 centered | Zoom ${this.formatZoomPercentage()}%`;
     this.elements.renderSurface.replaceChildren();
     this.renderSvgGrid();
     this.renderCenterOriginMarker();
@@ -1884,7 +1884,7 @@ export class ToolStarterApp {
   }
 
   formatZoomPercentage() {
-    return Math.round(this.viewport.zoom * 100);
+    return Math.round(this.viewport.zoom * 100 * GRID_STEP);
   }
 
   zoomViewportByStep(step) {
@@ -1900,7 +1900,7 @@ export class ToolStarterApp {
     this.viewport.zoom = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, Number(nextZoom.toFixed(3))));
     this.updateViewport();
     this.renderWorkSurface();
-    this.statusLog.write(`OK Viewport zoom set to ${Math.round(this.viewport.zoom * 100)}%.`);
+    this.statusLog.write(`OK Viewport zoom set to ${this.formatZoomPercentage()}%.`);
   }
 
   panViewport(x, y) {
@@ -1913,7 +1913,7 @@ export class ToolStarterApp {
   resetViewport() {
     this.viewport = { ...DEFAULT_VIEWPORT };
     this.updateViewport();
-    this.statusLog.write("OK Viewport reset to 100% at origin 0,0.");
+    this.statusLog.write(`OK Viewport reset to ${this.formatZoomPercentage()}% at origin 0,0.`);
   }
 
   updateCoordinateDisplay(event) {