Align grid off icon color and add auto center balance from geometry - PR_26133_087-grid-off-color-and-auto-center-balance

Author: DavidQ

docs/dev/reports/playwright_v8_coverage_report.md

@@ -1,29 +1,18 @@
 # Playwright V8 Coverage Report
 
-PR: PR_26133_086-snap-angle-drawing-and-coordinate-formatting
+PR: PR_26133_087-grid-off-color-and-auto-center-balance
 
-Source: docs/dev/reports/playwright_v8_coverage_report.txt generated by the latest npm run test:workspace-v2 run.
+Command: `npm run test:workspace-v2`
 
-## Summary
+Result: PASS
 
-- PASS: V8 coverage was collected during the green workspace-v2 Playwright run.
-- Thresholds: advisory only; no blocking threshold configured.
-- Dependencies: no new npm packages.
+Coverage source: Playwright/Chromium built-in V8 coverage from the final passing workspace-v2 run.
 
-## Exercised Tool Entry Points
+Changed runtime JS coverage:
+- `tools/object-vector-studio-v2/js/bootstrap.js`: 83% entry coverage, 110/110 executed lines, 5/6 executed functions.
+- `tools/object-vector-studio-v2/js/ToolStarterApp.js`: 95% entry coverage, 7498/7498 executed lines, 751/789 executed functions.
 
-- (82%) Preview Generator V2 - exercised 19 runtime JS files
-- (74%) Asset Manager V2 - exercised 13 runtime JS files
-- (62%) Palette Manager V2 - exercised 12 runtime JS files
-- (0%) Tool Template V2 - not exercised by this Playwright run
-- (91%) Workspace Manager V2 - exercised 10 runtime JS files
-- (0%) Workspace Manager - not exercised by this Playwright run
-
-## Changed Runtime JS Files Covered
-
-- (95%) tools/object-vector-studio-v2/js/ToolStarterApp.js - executed lines 7440/7440; executed functions 743/781
-
-## Changed JS Files Considered
-
-- (95%) tools/object-vector-studio-v2/js/ToolStarterApp.js - Object Vector Studio V2 runtime covered by browser V8 coverage while Snap None 3-decimal coordinate creation, Snap Angle drawing constraints, and Palette Picker placement were exercised.
-- (0%) tests/playwright/tools/WorkspaceManagerV2.spec.mjs - Playwright test file, not collected as browser runtime coverage.
+Notes:
+- The generated detailed text artifact remains at `docs/dev/reports/playwright_v8_coverage_report.txt`.
+- Coverage is advisory for this PR; no new thresholds were introduced.
+- Changed runtime JS files were exercised by the passing Playwright run.

docs/dev/reports/playwright_workspace_v2_results.md

@@ -1,24 +1,19 @@
 # Playwright Workspace V2 Results
 
-PR: PR_26133_086-snap-angle-drawing-and-coordinate-formatting
+PR: PR_26133_087-grid-off-color-and-auto-center-balance
 
-## Validation
+Command: `npm run test:workspace-v2`
 
-- PASS: npm run test:workspace-v2
-- Result: 54 passed
-- Runtime: 5.4m
-- Browser project: playwright
-- Workers: 1
+Result: PASS
 
-## Targeted Checks Covered
+Summary:
+- 54/54 Playwright tests passed.
+- Final run completed in 6.1 minutes.
+- Object Vector Studio V2 Grid-off state now asserts that only the Grid icon uses the disabled red Snap color while button text stays default.
+- Auto Center coverage verifies the selected shape pivot moves to the visible object geometry bounds center, geometry JSON is unchanged, rendered bounds do not move, and workspace dirty state is set.
+- Existing Object Vector Studio V2 console/page error assertions remained clean in the covered flows.
 
-- Snap None shape creation stores geometry coordinates with no more than 3 decimal places.
-- Snap Angle enabled at 45 degrees constrains committed Line creation segments.
-- Snap Angle enabled at 45 degrees constrains committed Polyline creation segments from the prior point.
-- Snap Angle enabled at 45 degrees constrains committed Polygon creation segments from the prior point.
-- Snap Grid and Snap Point creation checks remain green.
-- Palette primary row order is Paint, Picker, Stroke, Width, with Picker kept icon-only.
-
-## Console/Runtime Errors
-
-- PASS: Object Vector Studio V2 Playwright coverage collected no page errors or console errors in the exercised flows.
+Manual/targeted verification notes:
+- Grid off icon color matches disabled Snap Angle icon color.
+- Auto Center uses visible object bounds, supports asymmetric geometry center balancing, and logs an OK status after successful pivot update.
+- Auto Center changes transform origin/pivot only; geometry points are not modified and visible bounds remain stable.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -1575,6 +1575,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
           titles: {
             add: title("#objectVectorStudioV2AddObjectButton"),
             angle: title("#objectVectorStudioV2AngleSnapButton"),
+            autoCenter: title("#objectVectorStudioV2AutoCenterButton"),
             grid: title("#objectVectorStudioV2GridRenderButton"),
             polygon: title("[data-shape-tool='polygon']"),
             polyline: title("[data-shape-tool='polyline']"),
@@ -1583,6 +1584,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
             zoomIn: title("#objectVectorStudioV2ZoomInButton")
           },
           viewportIcons: {
+            autoCenter: icon("#objectVectorStudioV2AutoCenterButton"),
             down: icon("#objectVectorStudioV2PanDownButton"),
             reset: icon("#objectVectorStudioV2ResetViewButton"),
             up: icon("#objectVectorStudioV2PanUpButton"),
@@ -1692,6 +1694,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         triangle: "none"
       });
       expect(Object.fromEntries(Object.entries(iconStyleState.viewportIcons).map(([key, value]) => [key, value.iconKey]))).toEqual({
+        autoCenter: "center",
         down: "panDown",
         reset: "reset",
         up: "panUp",
@@ -1703,6 +1706,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       expect(iconStyleState.titles).toEqual({
         add: "Add a schema-valid object to the loaded payload",
         angle: "Snap Angle switches Rotate to a constrained dropdown using the selected 15, 30, 45, or 90 degree step.",
+        autoCenter: "Disabled until a schema-valid object is selected.",
         grid: "Show or hide the preview grid",
         polygon: "Create a polygon shape on the selected object. Click to add points.\n\nDouble-click to finish.",
         polyline: "Create a polyline shape on the selected object. Click to add points.\n\nDouble-click to finish.",
@@ -2133,7 +2137,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-1600 -1100 3200 2200");
       await expect(page.locator("#objectVectorStudioV2RenderSurface [data-center-origin='0,0']")).toHaveCount(1);
       await expect(page.locator("#objectVectorStudioV2RenderSurface [data-center-origin='0,0']")).toHaveAttribute("r", "9");
-      await expect(page.locator("#objectVectorStudioV2ViewportControls button")).toHaveText(["Out", "In", "Up", "Down", "Left", "Right", "View", "Center"]);
+      await expect(page.locator("#objectVectorStudioV2ViewportControls button")).toHaveText(["Out", "In", "Up", "Down", "Left", "Right", "View", "Center", "Auto Center"]);
       await expect(page.locator("#objectVectorStudioV2CenterDotButton")).toHaveAttribute("aria-pressed", "true");
       await page.locator("#objectVectorStudioV2PanRightButton").click();
       await page.locator("#objectVectorStudioV2PanDownButton").click();
@@ -5399,6 +5403,13 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#objectVectorStudioV2GridRenderButton")).toHaveAttribute("aria-pressed", "false");
       await expect(page.locator("#objectVectorStudioV2RenderSurface")).not.toHaveClass(/is-grid-visible/);
       await expect(page.locator("#objectVectorStudioV2RenderSurface [data-grid-rendered='true']")).toHaveCount(0);
+      const gridOffIconColorState = await page.evaluate(() => ({
+        gridIcon: getComputedStyle(document.querySelector("#objectVectorStudioV2GridRenderButton"), "::before").color,
+        gridText: getComputedStyle(document.querySelector("#objectVectorStudioV2GridRenderButton")).color,
+        snapAngleDisabledIcon: getComputedStyle(document.querySelector("#objectVectorStudioV2AngleSnapButton"), "::before").color
+      }));
+      expect(gridOffIconColorState.gridIcon).toBe(gridOffIconColorState.snapAngleDisabledIcon);
+      expect(gridOffIconColorState.gridText).not.toBe(gridOffIconColorState.snapAngleDisabledIcon);
 
       await page.evaluate(() => window.__objectVectorStudioV2App.selectShape(0, "test shape list", { additive: true }));
       await page.locator(".object-vector-studio-v2__object-tile.is-selected .object-vector-studio-v2__shape-list-actions [data-shape-list-action='group']").click();
@@ -9966,6 +9977,56 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         await page.locator("#objectVectorStudioV2MoveYInput").fill("-5");
         await page.locator("#objectVectorStudioV2MoveShapeButton").click();
       });
+      await expectObjectVectorDirtyAfter("object auto center edit", async () => {
+        await page.evaluate(() => {
+          const app = window.__objectVectorStudioV2App;
+          app.selectObject("object.asteroids.ship", "auto center dirty test");
+          app.selectShape(0, "auto center dirty test");
+          const shape = app.selectedShape();
+          const frame = app.activeFrame();
+          const override = frame?.shapeOverrides?.find((entry) => entry.shapeIndex === app.selectedShapeIndex) || null;
+          const target = override || shape;
+          target.transform = app.ensureShapeTransform(app.effectiveShape(shape));
+          target.transform.origin = { x: 123, y: -45 };
+          app.renderPayload({ syncPaletteSelection: false });
+        });
+        const autoCenterBefore = await page.evaluate(() => {
+          const app = window.__objectVectorStudioV2App;
+          const shape = app.selectedShape();
+          const effectiveShape = app.effectiveShape(shape);
+          const transform = app.shapeTransform(effectiveShape);
+          const bounds = app.objectBounds(app.selectedObject(), { includeInvisible: false });
+          return {
+            bounds,
+            center: {
+              x: Number((bounds.x + bounds.width / 2).toFixed(3)),
+              y: Number((bounds.y + bounds.height / 2).toFixed(3))
+            },
+            geometryText: JSON.stringify(shape.geometry),
+            pivot: app.transformedPoint(transform.origin, transform)
+          };
+        });
+        await page.locator("#objectVectorStudioV2AutoCenterButton").click();
+        await expect(page.locator("#statusLog")).toHaveValue(/OK Auto Center balanced shape row \d+ origin\/pivot to visible object center/);
+        const autoCenterAfter = await page.evaluate(() => {
+          const app = window.__objectVectorStudioV2App;
+          const shape = app.selectedShape();
+          const effectiveShape = app.effectiveShape(shape);
+          const transform = app.shapeTransform(effectiveShape);
+          return {
+            bounds: app.objectBounds(app.selectedObject(), { includeInvisible: false }),
+            geometryText: JSON.stringify(shape.geometry),
+            pivot: app.transformedPoint(transform.origin, transform)
+          };
+        });
+        expect(autoCenterAfter.geometryText).toBe(autoCenterBefore.geometryText);
+        ["x", "y", "width", "height"].forEach((key) => {
+          expect(autoCenterAfter.bounds[key]).toBeCloseTo(autoCenterBefore.bounds[key], 3);
+        });
+        expect(autoCenterAfter.pivot.x).toBeCloseTo(autoCenterBefore.center.x, 3);
+        expect(autoCenterAfter.pivot.y).toBeCloseTo(autoCenterBefore.center.y, 3);
+        expect(autoCenterAfter.pivot.x).not.toBeCloseTo(autoCenterBefore.pivot.x, 3);
+      });
       await expectObjectVectorDirtyAfter("palette color edit", async () => {
         await page.locator("#objectVectorStudioV2PaintModeButton").click();
         const colorToApply = await page.evaluate(() => {

tools/object-vector-studio-v2/index.html

@@ -121,6 +121,7 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
                 <button id="objectVectorStudioV2PanRightButton" type="button" title="Pan the work surface right">Right</button>
                 <button id="objectVectorStudioV2ResetViewButton" type="button" title="Reset zoom and origin to 0,0">View</button>
                 <button id="objectVectorStudioV2CenterDotButton" type="button" title="Show or hide the center dot">Center</button>
+                <button id="objectVectorStudioV2AutoCenterButton" type="button" title="Balance selected shape origin/pivot to the visible object center">Auto Center</button>
               </div>
               <svg id="objectVectorStudioV2RenderSurface" class="object-vector-studio-v2__render-surface" viewBox="0 0 320 220" tabindex="0" role="img" aria-label="Object shape render surface"></svg>
               <div id="objectVectorStudioV2ObjectPreviewFooter" class="object-vector-studio-v2__preview-footer">Object ID: none</div>

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

@@ -118,6 +118,7 @@ const OBJECT_VECTOR_STUDIO_STATIC_ICON_TARGETS = Object.freeze([
   ["#objectVectorStudioV2PanRightButton", "panRight"],
   ["#objectVectorStudioV2ResetViewButton", "reset"],
   ["#objectVectorStudioV2CenterDotButton", "center"],
+  ["#objectVectorStudioV2AutoCenterButton", "center"],
   ["#objectVectorStudioV2FrameLeftButton", "panLeft"],
   ["#objectVectorStudioV2FrameEarlierButton", "panLeft"],
   ["#objectVectorStudioV2DuplicateFrameButton", "duplicate"],
@@ -754,6 +755,7 @@ export class ToolStarterApp {
       this.statusLog.write(`OK Grid rendering ${this.gridRenderEnabled ? "enabled" : "disabled"}.`);
     });
     this.elements.centerDotButton.addEventListener("click", () => this.toggleCenterOriginMarker());
+    this.elements.autoCenterButton.addEventListener("click", () => this.autoCenterSelectedShapePivot());
   }
 
   bindPaletteControls() {
@@ -3786,6 +3788,31 @@ export class ToolStarterApp {
     };
   }
 
+  localPointFromTransformedPoint(point, transform) {
+    const radians = (transform.rotation * Math.PI) / 180;
+    const cos = Math.cos(radians);
+    const sin = Math.sin(radians);
+    const dx = Number(point.x) - transform.x - transform.origin.x;
+    const dy = Number(point.y) - transform.y - transform.origin.y;
+    const unrotatedX = dx * cos + dy * sin;
+    const unrotatedY = -dx * sin + dy * cos;
+    return {
+      x: this.formatViewportNumber(transform.origin.x + unrotatedX / transform.scaleX),
+      y: this.formatViewportNumber(transform.origin.y + unrotatedY / transform.scaleY)
+    };
+  }
+
+  transformWithBalancedOrigin(transform, worldCenter) {
+    const normalized = this.ensureShapeTransform({ transform });
+    const origin = this.localPointFromTransformedPoint(worldCenter, normalized);
+    return {
+      ...normalized,
+      origin,
+      x: this.formatViewportNumber(worldCenter.x - origin.x),
+      y: this.formatViewportNumber(worldCenter.y - origin.y)
+    };
+  }
+
   transformedBounds(shape, { drawingScale = 1 } = {}) {
     const transform = this.shapeTransform(shape);
     const points = shapeBoundsPoints(shape).map((point) => this.transformedPoint(point, transform));
@@ -3806,9 +3833,14 @@ export class ToolStarterApp {
   }
 
   objectBounds(object, { drawingScale = 1, includeInvisible = true } = {}) {
+    const activeFrame = object?.id === this.selectedObjectId ? this.activeFrame() : null;
     const shapes = sortedShapes(object)
       .map((shape, shapeIndex) => ({ shape, shapeIndex }))
-      .filter((entry) => includeInvisible || entry.shape.visible);
+      .map(({ shape, shapeIndex }) => ({
+        shape: this.effectiveShapeForFrame(shape, activeFrame, shapeIndex),
+        shapeIndex
+      }))
+      .filter((entry) => includeInvisible || entry.shape.visible !== false);
     if (!shapes.length) {
       return {
         height: 80,
@@ -3818,8 +3850,7 @@ export class ToolStarterApp {
       };
     }
 
-    const activeFrame = object?.id === this.selectedObjectId ? this.activeFrame() : null;
-    const bounds = shapes.map(({ shape, shapeIndex }) => this.transformedBounds(this.effectiveShapeForFrame(shape, activeFrame, shapeIndex), { drawingScale }));
+    const bounds = shapes.map(({ shape }) => this.transformedBounds(shape, { drawingScale }));
     const minX = Math.min(...bounds.map((entry) => entry.x));
     const minY = Math.min(...bounds.map((entry) => entry.y));
     const maxX = Math.max(...bounds.map((entry) => entry.x + entry.width));
@@ -6503,6 +6534,35 @@ export class ToolStarterApp {
     }, `OK Updated shape row ${this.selectedShapeIndex} origin/pivot to ${originX.value}, ${originY.value}.`);
   }
 
+  autoCenterSelectedShapePivot() {
+    const object = this.selectedObject();
+    if (!object) {
+      this.statusLog.write("WARN Auto Center skipped: no object is selected.");
+      return;
+    }
+    const selected = this.selectedShape();
+    if (!selected) {
+      this.statusLog.write("WARN Auto Center skipped: no shape is selected.");
+      return;
+    }
+    const activeFrame = this.activeFrame();
+    const visibleShapes = sortedShapes(object)
+      .map((shape, shapeIndex) => this.effectiveShapeForFrame(shape, activeFrame, shapeIndex))
+      .filter((shape) => shape.visible !== false);
+    if (!visibleShapes.length) {
+      this.statusLog.write(`FAIL Auto Center blocked: object ${object.name} has no visible geometry.`);
+      return;
+    }
+    const bounds = this.objectBounds(object, { includeInvisible: false });
+    const center = {
+      x: this.formatViewportNumber(bounds.x + bounds.width / 2),
+      y: this.formatViewportNumber(bounds.y + bounds.height / 2)
+    };
+    this.updateSelectedShapeTransform("auto center", (shape) => {
+      shape.transform = this.transformWithBalancedOrigin(this.ensureShapeTransform(shape), center);
+    }, `OK Auto Center balanced shape row ${this.selectedShapeIndex} origin/pivot to visible object center ${center.x}, ${center.y}.`);
+  }
+
   groupSelectedShapes() {
     const object = this.selectedObject();
     if (!object || this.selectedShapeIndexes.size < 2) {
@@ -7752,6 +7812,7 @@ export class ToolStarterApp {
     this.setControlDisabled(this.elements.previewRedoButton, !this.previewRedoStack.length, "Disabled until an Object Preview edit can be redone.", "Redo the last undone Object Preview edit.");
     this.setControlDisabled(this.elements.previewCopyButton, !shape, noShapeReason, "Copy the selected shape.");
     this.setControlDisabled(this.elements.previewPasteButton, !object || !this.previewClipboardShape || isLocked, !object ? noObjectReason : (isLocked ? lockedReason : "Disabled until a shape has been copied."), "Paste the copied shape into the selected object.");
+    this.setControlDisabled(this.elements.autoCenterButton, !object || !shape || isLocked, !object ? noObjectReason : (isLocked ? lockedReason : noShapeReason), "Balance selected shape origin/pivot to the visible object center.");
   }
 
   updateObjectActionState() {

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

@@ -38,6 +38,7 @@ window.addEventListener("DOMContentLoaded", () => {
       addObjectButton: requireElement("#objectVectorStudioV2AddObjectButton"),
       addTagButton: requireElement("#objectVectorStudioV2AddTagButton"),
       angleSnapButton: requireElement("#objectVectorStudioV2AngleSnapButton"),
+      autoCenterButton: requireElement("#objectVectorStudioV2AutoCenterButton"),
       centerDotButton: requireElement("#objectVectorStudioV2CenterDotButton"),
       coordinateDisplay: requireElement("#objectVectorStudioV2CoordinateDisplay"),
       deleteFrameButton: requireElement("#objectVectorStudioV2DeleteFrameButton"),

tools/object-vector-studio-v2/styles/toolStarter.css

@@ -1026,7 +1026,8 @@ textarea:hover {
 }
 
 #objectVectorStudioV2SnapModeButton[data-snap-mode="none"][data-ovs-icon]::before,
-#objectVectorStudioV2AngleSnapButton[aria-pressed="false"][data-ovs-icon]::before {
+#objectVectorStudioV2AngleSnapButton[aria-pressed="false"][data-ovs-icon]::before,
+#objectVectorStudioV2GridRenderButton[aria-pressed="false"][data-ovs-icon]::before {
   color: var(--object-vector-studio-v2-snap-disabled-icon-color);
 }