Anchor Object Preview mouse zoom to pointer and isolate shape tile action clicks - PR_26133_056-object-preview-pointer-zoom-and-shape-tile-actions

Author: DavidQ

docs/dev/reports/playwright_v8_coverage_report.md

@@ -1,6 +1,6 @@
-# PR_26133_055 Playwright V8 Coverage Report
+# PR_26133_056 Playwright V8 Coverage Report
 
-Task: PR_26133_055-shape-tile-group-icon-and-geometry-point-handles
+Task: PR_26133_056-object-preview-pointer-zoom-and-shape-tile-actions
 Date: 2026-05-15
 
 ## Result
@@ -24,7 +24,7 @@ PASS - Coverage reporting was generated during `npm run test:workspace-v2`.
 ## Relevant Runtime Coverage
 
 ```text
-(95%) tools/object-vector-studio-v2/js/ToolStarterApp.js - executed lines 5496/5496; executed functions 576/606
+(95%) tools/object-vector-studio-v2/js/ToolStarterApp.js - executed lines 5583/5583; executed functions 590/621
 ```
 
 ## Guardrail
@@ -35,4 +35,4 @@ PASS - Coverage reporting was generated during `npm run test:workspace-v2`.
 
 ## PR-Specific Note
 
-The Workspace V2 run exercised Object Vector Studio V2 shape tile group indicator layout, preview geometry point handles, line endpoint handles, polygon point drag editing, bounding-box geometry resize, dirty-state tracking, schema validation, and Asteroids runtime object-vector rendering.
+The Workspace V2 run exercised Object Vector Studio V2 pointer-anchored wheel zoom, off-center viewport origin updates, shape tile group/eye/trash action event handling, targeted visibility toggles, shape delete behavior, schema validation, and Asteroids runtime object-vector rendering.

docs/dev/reports/playwright_workspace_v2_results.md

@@ -1,6 +1,6 @@
-# PR_26133_055 Workspace V2 Playwright Results
+# PR_26133_056 Workspace V2 Playwright Results
 
-Task: PR_26133_055-shape-tile-group-icon-and-geometry-point-handles
+Task: PR_26133_056-object-preview-pointer-zoom-and-shape-tile-actions
 Date: 2026-05-15
 
 ## Result
@@ -14,19 +14,18 @@ PASS - `npm run test:workspace-v2` completed successfully.
 
 ## PR-Specific Coverage
 
-- Verified grouped shape tile indicators render at the far right of shape rows while shape index/tool text stays on the left.
-- Verified rectangle corner handles expose geometry-point metadata and still resize geometry through bounding-box corner drag.
-- Verified line endpoint handles expose geometry-point metadata and still update point1/point2 geometry.
-- Verified polygon point handles render on each selected point and dragging a point updates the underlying geometry plus Object Geometry inputs.
-- Verified polygon bounding-box corner dragging adjusts geometry points.
-- Verified geometry handle drags mark Object Vector Studio V2 workspace state dirty after persisted edits.
+- Verified mouse-wheel zoom preserves the world coordinate under the pointer instead of zooming only from canvas center.
+- Verified off-center wheel zoom updates viewport origin and keeps existing zoom limits/display behavior.
+- Verified shape row layout renders as shape label, group button, eye button, and trash button.
+- Verified group/eye/trash controls are sibling buttons and are not nested inside the shape selection button.
+- Verified clicking the group button does not select the shape.
+- Verified clicking the eye action toggles the targeted shape visibility without selecting it.
+- Verified clicking the trash action deletes the targeted shape without selecting it first.
 
 ## Additional Validation
 
-- Focused preview-handle slice passed:
-  `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --project=playwright --workers=1 --reporter=list --grep "preview shapes with mouse actions"` completed with 1 passed, 0 failed.
-- Focused group tile layout slice passed:
+- Focused pointer-zoom/shape-tile layout slice passed:
   `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --project=playwright --workers=1 --reporter=list --grep "layout shell"` completed with 1 passed, 0 failed.
-- Focused dirty-state slice passed:
-  `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --project=playwright --workers=1 --reporter=list --grep "dirty state through persisted edits"` completed with 1 passed, 0 failed.
+- Focused preview delete/action slice passed:
+  `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --project=playwright --workers=1 --reporter=list --grep "preview shapes with mouse actions"` completed with 1 passed, 0 failed.
 - `git diff --check` passed.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -2525,34 +2525,59 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#statusLog")).toHaveValue(/OK Grouped 2 shapes into group-1\./);
       await expect(selectedShapeActions.locator("[data-shape-list-action='ungroup']")).toBeEnabled();
       await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-shape-group-id='group-1']")).toHaveCount(2);
-      const groupIconColors = await page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-shape-group-id='group-1']").evaluateAll((icons) => icons.map((icon) => getComputedStyle(icon).color));
+      const groupIconColors = await page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-shape-group-id='group-1'] .object-vector-studio-v2__shape-group-indicator").evaluateAll((icons) => icons.map((icon) => getComputedStyle(icon).color));
       expect(new Set(groupIconColors).size).toBe(1);
       expect(groupIconColors[0]).not.toBe("");
       const groupIconLayout = await page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] .object-vector-studio-v2__object-tile-shape-row").first().evaluate((row) => {
         const label = row.querySelector(".object-vector-studio-v2__shape-select-label");
+        const visibility = row.querySelector("[data-shape-visibility-index]");
         const deleteButton = row.querySelector("[data-shape-delete-index]");
-        const groupIcon = row.querySelector("[data-shape-group-id='group-1']");
+        const groupButton = row.querySelector("[data-shape-group-id='group-1']");
         const rowRect = row.getBoundingClientRect();
         const labelRect = label.getBoundingClientRect();
+        const visibilityRect = visibility.getBoundingClientRect();
         const deleteRect = deleteButton.getBoundingClientRect();
-        const groupRect = groupIcon.getBoundingClientRect();
+        const groupRect = groupButton.getBoundingClientRect();
         return {
-          groupAfterActions: groupRect.left > deleteRect.right,
-          groupAtFarRight: Math.abs(rowRect.right - groupRect.right) <= 4,
+          actionButtonOrder: Array.from(row.querySelectorAll(".object-vector-studio-v2__shape-inline-actions > button")).map((button) => {
+            if (button.matches("[data-shape-group-id]")) return "group";
+            if (button.matches("[data-shape-visibility-index]")) return "eye";
+            if (button.matches("[data-shape-delete-index]")) return "trash";
+            return "unknown";
+          }),
+          groupAfterLabel: groupRect.left > labelRect.right,
+          groupButtonTag: groupButton.tagName.toLowerCase(),
+          groupBeforeEye: groupRect.right < visibilityRect.left,
           labelStartsLeft: labelRect.left < deleteRect.left,
-          labelText: label.textContent.trim()
+          labelText: label.textContent.trim(),
+          nestedButtons: row.querySelectorAll(".object-vector-studio-v2__shape-select button").length,
+          trashAtFarRight: Math.abs(rowRect.right - deleteRect.right) <= 4
         };
       });
       expect(groupIconLayout).toEqual({
-        groupAfterActions: true,
-        groupAtFarRight: true,
+        actionButtonOrder: ["group", "eye", "trash"],
+        groupAfterLabel: true,
+        groupButtonTag: "button",
+        groupBeforeEye: true,
         labelStartsLeft: true,
-        labelText: "1. Circle"
+        labelText: "1. Circle",
+        nestedButtons: 0,
+        trashAtFarRight: true
       });
       await page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-tile-shape-index='0']").click();
       await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-tile-shape-index='0']")).toHaveAttribute("aria-pressed", "true");
       await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-tile-shape-index='1']")).toHaveAttribute("aria-pressed", "true");
       await expect(page.locator("#statusLog")).toHaveValue(/Multi-select count: 2/);
+      await page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] .object-vector-studio-v2__object-tile-shape-row:has([data-object-tile-shape-index='1']) [data-shape-group-id='group-1']").click();
+      await expect.poll(async () => page.evaluate(() => window.__objectVectorStudioV2App.selectedShapeIndex)).toBe(0);
+      await page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-shape-visibility-index='1']").click();
+      await expect.poll(async () => page.evaluate(() => window.__objectVectorStudioV2App.selectedShapeIndex)).toBe(0);
+      await expect(page.locator("#statusLog")).toHaveValue(/[Ss]hape row 1 visibility set to hidden/);
+      await page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-shape-visibility-index='1']").click();
+      await expect.poll(async () => page.evaluate(() => window.__objectVectorStudioV2App.selectedShapeIndex)).toBe(0);
+      await expect(page.locator("#statusLog")).toHaveValue(/[Ss]hape row 1 visibility set to visible/);
+      await page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-tile-shape-index='1']").click();
+      await expect.poll(async () => page.evaluate(() => window.__objectVectorStudioV2App.selectedShapeIndex)).toBe(1);
       await selectedShapeActions.locator("[data-shape-list-action='ungroup']").click();
       await expect(page.locator("#objectVectorStudioV2JsonDetails")).not.toContainText('"groupId": "group-1"');
       await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-shape-group-id='group-1']")).toHaveCount(0);
@@ -2656,21 +2681,45 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-16000 -11000 32000 22000");
       await page.locator("#objectVectorStudioV2ResetViewButton").click();
       await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-1600 -1100 3200 2200");
-      await page.locator("#objectVectorStudioV2RenderSurface").hover();
+      const wheelAnchor = await page.locator("#objectVectorStudioV2RenderSurface").evaluate((surface) => {
+        const rect = surface.getBoundingClientRect();
+        const clientX = Math.round(rect.left + rect.width * 0.75);
+        const clientY = Math.round(rect.top + rect.height * 0.35);
+        return {
+          before: window.__objectVectorStudioV2App.viewportPointFromClient(clientX, clientY),
+          clientX,
+          clientY
+        };
+      });
+      await page.mouse.move(wheelAnchor.clientX, wheelAnchor.clientY);
       await page.mouse.wheel(0, -240);
       await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toContainText("Zoom 110%");
       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) => ({
-        backgroundImage: getComputedStyle(surface).backgroundImage,
-        gridLineCount: surface.querySelectorAll("[data-grid-rendered='true'] line").length,
-        viewBox: surface.getAttribute("viewBox")
-      }));
+      const zoomedGridState = await page.locator("#objectVectorStudioV2RenderSurface").evaluate((surface, anchor) => {
+        const app = window.__objectVectorStudioV2App;
+        const after = app.viewportPointFromClient(anchor.clientX, anchor.clientY);
+        return {
+          backgroundImage: getComputedStyle(surface).backgroundImage,
+          gridLineCount: surface.querySelectorAll("[data-grid-rendered='true'] line").length,
+          pointerDelta: {
+            x: Math.abs(after.x - anchor.before.x),
+            y: Math.abs(after.y - anchor.before.y)
+          },
+          viewport: { ...app.viewport },
+          viewBox: surface.getAttribute("viewBox")
+        };
+      }, wheelAnchor);
       expect(zoomedGridState.backgroundImage).toBe("none");
       expect(zoomedGridState.gridLineCount).toBeGreaterThan(0);
-      expect(zoomedGridState.viewBox).toBe("-1454.545 -1000 2909.091 2000");
+      expect(zoomedGridState.pointerDelta.x).toBeLessThan(0.001);
+      expect(zoomedGridState.pointerDelta.y).toBeLessThan(0.001);
+      expect(Math.abs(zoomedGridState.viewport.x)).toBeGreaterThan(1);
+      expect(Math.abs(zoomedGridState.viewport.y)).toBeGreaterThan(1);
+      expect(zoomedGridState.viewBox).not.toBe("-1454.545 -1000 2909.091 2000");
       await page.mouse.wheel(0, 240);
       await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toContainText("Zoom 100%");
+      await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-1600 -1100 3200 2200");
       await page.evaluate(() => {
         window.__objectVectorStudioV2App.zoomViewport(0.25);
       });
@@ -3581,7 +3630,10 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         iconKey: "delete",
         iconName: "nf-md-trash_can_outline"
       });
+      await page.evaluate(() => window.__objectVectorStudioV2App.selectShape(0, "trash click selection guard"));
+      await expect.poll(async () => page.evaluate(() => window.__objectVectorStudioV2App.selectedShapeIndex)).toBe(0);
       await page.locator("[data-shape-delete-index='2']").click();
+      await expect.poll(async () => page.evaluate(() => window.__objectVectorStudioV2App.selectedShapeIndex)).toBe(0);
       await expect(page.locator("[data-object-tile-shape-index='2']")).toHaveCount(0);
       await expect(page.locator("[data-object-tile-shape-index='1']")).toHaveCount(1);
       await expect(page.locator("[data-object-tile-shape-index='0']")).toHaveCount(1);