Rename Auto Center to Auto Origin and align pivot terminology - PR_26133_089-auto-origin-terminology-final-polish

Author: DavidQ

docs/dev/reports/playwright_v8_coverage_report.md

@@ -1,6 +1,6 @@
 # Playwright V8 Coverage Report
 
-PR: PR_26133_088-select-all-rotate-auto-center-placement-and-copy-icon
+PR: PR_26133_089-auto-origin-terminology-final-polish
 
 Command: `npm run test:workspace-v2`
 
@@ -9,10 +9,10 @@ Result: PASS
 Coverage source: Playwright/Chromium built-in V8 coverage from the final passing workspace-v2 run.
 
 Changed runtime JS coverage:
-- `tools/object-vector-studio-v2/js/bootstrap.js`: 83% entry coverage, 109/109 executed lines, 5/6 executed functions.
 - `tools/object-vector-studio-v2/js/ToolStarterApp.js`: 95% entry coverage, 7574/7574 executed lines, 771/809 executed functions.
 
 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.
+- The changed runtime JS file was exercised by the passing Playwright run.
+- `tools/object-vector-studio-v2/js/bootstrap.js` remains covered by the run but is not changed by PR089.

docs/dev/reports/playwright_workspace_v2_results.md

@@ -1,21 +1,22 @@
 # Playwright Workspace V2 Results
 
-PR: PR_26133_088-select-all-rotate-auto-center-placement-and-copy-icon
+PR: PR_26133_089-auto-origin-terminology-final-polish
 
 Command: `npm run test:workspace-v2`
 
 Result: PASS
 
 Summary:
 - 54/54 Playwright tests passed.
-- Final run completed in 5.7 minutes.
-- Select All / explicit selected-set Rotate coverage verifies the full selected shape set rotates around the selected-set bounds center while preserving relative shape positions.
-- Single-shape Rotate and existing grouped-shape Rotate coverage remain in place and passed.
-- Auto Center now renders in Object Transform under Scale and continues to update the selected shape origin/pivot without changing geometry or moving visible bounds.
-- Copy now uses the `nf-fa-copy` Nerd Font glyph.
+- Final run completed in 5.5 minutes.
+- Object Transform now shows `Auto Origin` directly under the Origin X/Y/Apply row.
+- The origin-balancing action no longer uses Auto Center or Balance Center wording.
+- Auto Origin coverage verifies origin/pivot recalculation from visible object bounds without changing geometry or moving visible bounds, and dirty state is set through the existing transform update path.
+- Select All rotation behavior from PR088 remains covered and passing.
+- Copy icon remains `nf-fa-copy`.
 - Existing console/page error assertions remained clean in the covered flows.
 
 Manual/targeted verification notes:
-- Object Transform layout shows Scale, then Auto Center, then the transform summary.
-- Auto Center logs OK after successful center/pivot balancing and marks the workspace dirty through the existing transform update path.
-- Selected-set rotation updates preview/bounds immediately after Rotate.
+- Origin controls remain grouped together: Origin row followed immediately by Auto Origin.
+- Preview Center dot control remains separate and unchanged.
+- Auto Origin logs an OK status after successful origin/pivot update.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -2187,37 +2187,41 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#objectVectorStudioV2ObjectTransform .object-vector-studio-v2__transform-summary")).toHaveText("x 0, y 0, rot 0, scale 1");
       await expect(page.locator("#objectVectorStudioV2ObjectTransform #objectVectorStudioV2MoveShapeButton")).toHaveCount(1);
       const transformSummaryLayout = await page.locator("#objectVectorStudioV2ObjectTransform").evaluate((panel) => {
+        const originRow = panel.querySelector(".object-vector-studio-v2__transform-control-row--origin");
+        const rotateRow = panel.querySelector(".object-vector-studio-v2__transform-control-row--rotate");
         const scaleRow = panel.querySelector(".object-vector-studio-v2__scale-control-row");
-        const autoCenterRow = panel.querySelector(".object-vector-studio-v2__transform-control-row--auto-center");
-        const autoCenterButton = panel.querySelector("#objectVectorStudioV2AutoCenterButton");
+        const autoOriginRow = panel.querySelector(".object-vector-studio-v2__transform-control-row--auto-origin");
+        const autoOriginButton = panel.querySelector("#objectVectorStudioV2AutoOriginButton");
         const summary = panel.querySelector(".object-vector-studio-v2__transform-summary");
         const summaryStyle = getComputedStyle(summary);
         return {
-          autoCenterAfterScale: Boolean(scaleRow && autoCenterRow && (scaleRow.compareDocumentPosition(autoCenterRow) & Node.DOCUMENT_POSITION_FOLLOWING)),
-          autoCenterButtonText: autoCenterButton?.textContent.trim() || "",
-          autoCenterTitle: autoCenterButton?.title || "",
-          summaryAfterAutoCenter: Boolean(autoCenterRow && summary && (autoCenterRow.compareDocumentPosition(summary) & Node.DOCUMENT_POSITION_FOLLOWING)),
+          autoOriginAfterOrigin: Boolean(originRow && autoOriginRow && (originRow.compareDocumentPosition(autoOriginRow) & Node.DOCUMENT_POSITION_FOLLOWING)),
+          autoOriginBeforeRotate: Boolean(autoOriginRow && rotateRow && (autoOriginRow.compareDocumentPosition(rotateRow) & Node.DOCUMENT_POSITION_FOLLOWING)),
+          autoOriginButtonText: autoOriginButton?.textContent.trim() || "",
+          autoOriginTitle: autoOriginButton?.title || "",
+          autoOriginUsesCenterWord: Boolean(autoOriginRow?.textContent.includes("Center") || autoOriginButton?.title.includes("Center")),
           summaryAfterScale: Boolean(scaleRow && summary && (scaleRow.compareDocumentPosition(summary) & Node.DOCUMENT_POSITION_FOLLOWING)),
           summaryCentered: summaryStyle.textAlign === "center",
           summaryStartsWithoutTransform: !summary.textContent.trim().startsWith("Transform"),
-          summaryTopAtBottom: summary.getBoundingClientRect().top >= autoCenterRow.getBoundingClientRect().bottom
+          summaryTopAtBottom: summary.getBoundingClientRect().top >= scaleRow.getBoundingClientRect().bottom
         };
       });
       expect(transformSummaryLayout).toEqual({
-        autoCenterAfterScale: true,
-        autoCenterButtonText: "Auto Center",
-        autoCenterTitle: "Balance Center",
-        summaryAfterAutoCenter: true,
+        autoOriginAfterOrigin: true,
+        autoOriginBeforeRotate: true,
+        autoOriginButtonText: "Auto Origin",
+        autoOriginTitle: "Auto Origin",
+        autoOriginUsesCenterWord: false,
         summaryAfterScale: true,
         summaryCentered: true,
         summaryStartsWithoutTransform: true,
         summaryTopAtBottom: true
       });
       const transformIconState = await page.locator("#objectVectorStudioV2ObjectTransform").evaluate((panel) => ({
-        autoCenter: {
-          iconKey: panel.querySelector("#objectVectorStudioV2AutoCenterButton").dataset.ovsIconKey,
-          iconName: panel.querySelector("#objectVectorStudioV2AutoCenterButton").dataset.ovsIconName,
-          title: panel.querySelector("#objectVectorStudioV2AutoCenterButton").title
+        autoOrigin: {
+          iconKey: panel.querySelector("#objectVectorStudioV2AutoOriginButton").dataset.ovsIconKey,
+          iconName: panel.querySelector("#objectVectorStudioV2AutoOriginButton").dataset.ovsIconName,
+          title: panel.querySelector("#objectVectorStudioV2AutoOriginButton").title
         },
         resize: {
           iconKey: panel.querySelector("#objectVectorStudioV2ResizeShapeButton").dataset.ovsIconKey,
@@ -2227,7 +2231,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         scaleActionRemoved: panel.querySelector("#objectVectorStudioV2ScaleShapeButton") === null
       }));
       expect(transformIconState).toEqual({
-        autoCenter: { iconKey: "center", iconName: "nf-fa-dot_circle_o", title: "Balance Center" },
+        autoOrigin: { iconKey: "center", iconName: "nf-fa-dot_circle_o", title: "Auto Origin" },
         resize: { iconKey: "resize", iconName: "nf-md-resize", title: "Resize Geometry" },
         scaleActionRemoved: true
       });
@@ -2371,6 +2375,19 @@ test.describe("Workspace Manager V2 bootstrap", () => {
           visibleInputIds: ["objectVectorStudioV2OriginXInput", "objectVectorStudioV2OriginYInput"],
           visibleSelectIds: []
         },
+        {
+          allOneLine: true,
+          axisLabels: [],
+          buttonId: "objectVectorStudioV2AutoOriginButton",
+          buttonText: "Auto Origin",
+          buttonTitle: "Auto Origin",
+          inputIds: [],
+          label: "Origin",
+          rowType: "auto-origin",
+          selectIds: [],
+          visibleInputIds: [],
+          visibleSelectIds: []
+        },
         {
           allOneLine: true,
           axisLabels: [],
@@ -2383,19 +2400,6 @@ test.describe("Workspace Manager V2 bootstrap", () => {
           selectIds: ["objectVectorStudioV2RotateSnapSelect", "objectVectorStudioV2SnapAngleStepSelect"],
           visibleInputIds: ["objectVectorStudioV2RotateInput"],
           visibleSelectIds: []
-        },
-        {
-          allOneLine: true,
-          axisLabels: [],
-          buttonId: "objectVectorStudioV2AutoCenterButton",
-          buttonText: "Auto Center",
-          buttonTitle: "Balance Center",
-          inputIds: [],
-          label: "Center",
-          rowType: "auto-center",
-          selectIds: [],
-          visibleInputIds: [],
-          visibleSelectIds: []
         }
       ]);
       await expect(page.locator("#objectVectorStudioV2RotateInput")).toHaveAttribute("min", "-359");
@@ -10074,11 +10078,11 @@ 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 expectObjectVectorDirtyAfter("object auto origin 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");
+          app.selectObject("object.asteroids.ship", "auto origin dirty test");
+          app.selectShape(0, "auto origin dirty test");
           const shape = app.selectedShape();
           const frame = app.activeFrame();
           const override = frame?.shapeOverrides?.find((entry) => entry.shapeIndex === app.selectedShapeIndex) || null;
@@ -10087,7 +10091,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
           target.transform.origin = { x: 123, y: -45 };
           app.renderPayload({ syncPaletteSelection: false });
         });
-        const autoCenterBefore = await page.evaluate(() => {
+        const autoOriginBefore = await page.evaluate(() => {
           const app = window.__objectVectorStudioV2App;
           const shape = app.selectedShape();
           const effectiveShape = app.effectiveShape(shape);
@@ -10103,9 +10107,9 @@ test.describe("Workspace Manager V2 bootstrap", () => {
             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(() => {
+        await page.locator("#objectVectorStudioV2AutoOriginButton").click();
+        await expect(page.locator("#statusLog")).toHaveValue(/OK Auto Origin updated shape row \d+ origin\/pivot from visible object bounds/);
+        const autoOriginAfter = await page.evaluate(() => {
           const app = window.__objectVectorStudioV2App;
           const shape = app.selectedShape();
           const effectiveShape = app.effectiveShape(shape);
@@ -10116,13 +10120,13 @@ test.describe("Workspace Manager V2 bootstrap", () => {
             pivot: app.transformedPoint(transform.origin, transform)
           };
         });
-        expect(autoCenterAfter.geometryText).toBe(autoCenterBefore.geometryText);
+        expect(autoOriginAfter.geometryText).toBe(autoOriginBefore.geometryText);
         ["x", "y", "width", "height"].forEach((key) => {
-          expect(autoCenterAfter.bounds[key]).toBeCloseTo(autoCenterBefore.bounds[key], 3);
+          expect(autoOriginAfter.bounds[key]).toBeCloseTo(autoOriginBefore.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);
+        expect(autoOriginAfter.pivot.x).toBeCloseTo(autoOriginBefore.center.x, 3);
+        expect(autoOriginAfter.pivot.y).toBeCloseTo(autoOriginBefore.center.y, 3);
+        expect(autoOriginAfter.pivot.x).not.toBeCloseTo(autoOriginBefore.pivot.x, 3);
       });
       await expectObjectVectorDirtyAfter("palette color edit", async () => {
         await page.locator("#objectVectorStudioV2PaintModeButton").click();

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

@@ -2667,9 +2667,9 @@ export class ToolStarterApp {
       heading,
       this.createMoveControlRow(),
       this.createOriginControlRow(transform),
+      this.createAutoOriginControlRow(),
       this.createRotateControlRow(),
-      this.createScaleControlRow(transform),
-      this.createAutoCenterControlRow()
+      this.createScaleControlRow(transform)
     );
     return section;
   }
@@ -2878,21 +2878,21 @@ export class ToolStarterApp {
     return row;
   }
 
-  createAutoCenterControlRow() {
+  createAutoOriginControlRow() {
     const row = document.createElement("div");
-    row.className = "object-vector-studio-v2__transform-control-row object-vector-studio-v2__transform-control-row--auto-center";
-    row.dataset.transformControlRow = "auto-center";
+    row.className = "object-vector-studio-v2__transform-control-row object-vector-studio-v2__transform-control-row--auto-origin";
+    row.dataset.transformControlRow = "auto-origin";
     const label = document.createElement("span");
     label.className = "object-vector-studio-v2__transform-control-label";
-    label.textContent = "Center";
+    label.textContent = "Origin";
     row.append(
       label,
       this.createTransformActionButton({
-        handler: () => this.autoCenterSelectedShapePivot(),
+        handler: () => this.autoOriginSelectedShapePivot(),
         iconKey: "center",
-        id: "objectVectorStudioV2AutoCenterButton",
-        label: "Auto Center",
-        title: "Balance Center"
+        id: "objectVectorStudioV2AutoOriginButton",
+        label: "Auto Origin",
+        title: "Auto Origin"
       })
     );
     return row;
@@ -6613,33 +6613,33 @@ export class ToolStarterApp {
     }, `OK Updated shape row ${this.selectedShapeIndex} origin/pivot to ${originX.value}, ${originY.value}.`);
   }
 
-  autoCenterSelectedShapePivot() {
+  autoOriginSelectedShapePivot() {
     const object = this.selectedObject();
     if (!object) {
-      this.statusLog.write("WARN Auto Center skipped: no object is selected.");
+      this.statusLog.write("WARN Auto Origin skipped: no object is selected.");
       return;
     }
     const selected = this.selectedShape();
     if (!selected) {
-      this.statusLog.write("WARN Auto Center skipped: no shape is selected.");
+      this.statusLog.write("WARN Auto Origin 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.`);
+      this.statusLog.write(`FAIL Auto Origin 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) => {
+    this.updateSelectedShapeTransform("auto origin", (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}.`);
+    }, `OK Auto Origin updated shape row ${this.selectedShapeIndex} origin/pivot from visible object bounds ${center.x}, ${center.y}.`);
   }
 
   groupSelectedShapes() {

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

@@ -1856,7 +1856,7 @@ textarea:hover {
   grid-template-columns: 50px minmax(54px, 1fr) minmax(54px, max-content) max-content;
 }
 
-.object-vector-studio-v2__transform-control-row--auto-center {
+.object-vector-studio-v2__transform-control-row--auto-origin {
   grid-template-columns: 50px minmax(0, 1fr);
 }