Compact Object Transform controls into one-line rows and clean summary text - PR_26133_040-object-transform-one-line-control-layout

Author: DavidQ

docs/dev/reports/playwright_v8_coverage_report.md

@@ -1,6 +1,6 @@
-# PR_26133_038 Playwright V8 Coverage Report
+# PR_26133_040 Playwright V8 Coverage Report
 
-Task: PR_26133_038-object-transform-scale-resize-geometry
+Task: PR_26133_040-object-transform-one-line-control-layout
 Date: 2026-05-15
 
 ## Result
@@ -26,7 +26,7 @@ PASS - Coverage reporting was generated during `npm run test:workspace-v2`.
 ## Changed Runtime JS Coverage
 
 ```text
-(94%) tools/object-vector-studio-v2/js/ToolStarterApp.js - executed lines 4646/4646; executed functions 479/510
+(94%) tools/object-vector-studio-v2/js/ToolStarterApp.js - executed lines 4709/4709; executed functions 487/516
 ```
 
 ## Changed Test Coverage Note
@@ -43,4 +43,4 @@ PASS - Coverage reporting was generated during `npm run test:workspace-v2`.
 
 ## PR-Specific Note
 
-The Workspace V2 run exercised Object Vector Studio V2 live scale preview, scale step buttons, Resize Geometry baking, scale reset, schema validation, transformed selection bounds refresh, and supported shape-tool geometry rewrite paths. Coverage remains advisory only.
+The Workspace V2 run exercised Object Vector Studio V2 one-line Move, Origin, Rotate, and Scale transform controls, transform summary rendering, preserved transform actions, and Object Transform no-console-error paths. Coverage remains advisory only.

docs/dev/reports/playwright_workspace_v2_results.md

@@ -1,6 +1,6 @@
-# PR_26133_038 Workspace V2 Playwright Results
+# PR_26133_040 Workspace V2 Playwright Results
 
-Task: PR_26133_038-object-transform-scale-resize-geometry
+Task: PR_26133_040-object-transform-one-line-control-layout
 Date: 2026-05-15
 
 ## Result
@@ -14,15 +14,13 @@ PASS - `npm run test:workspace-v2` completed successfully.
 
 ## PR-Specific Coverage
 
-- Verified Object Transform scale controls render on one line in the requested order:
-  `Scale [--] [-] [scale input] [+] [++] [Resize]`.
-- Verified the Resize button keeps visible text `Resize` and tooltip/title `Resize Geometry`.
-- Verified invalid scale input is visibly rejected and does not write `scaleX: 0`.
-- Verified live scale input updates the Object Preview, JSON details, and transform summary.
-- Verified `--`, `-`, `+`, and `++` buttons step scale by 0.10, 0.01, 0.01, and 0.10 respectively.
-- Verified Resize Geometry bakes current scale into rectangle geometry, resets scale to 1, and updates transformed selection bounds.
-- Added coverage for Resize Geometry across polygon, triangle, line, rectangle, circle, ellipse, arc, and text shapes.
+- Verified Object Transform Move controls render on one line as `Move X [input] Y [input] [Move]`.
+- Verified Object Transform Origin controls render on one line as `Origin X [input] Y [input] [Apply]`.
+- Verified Object Transform Rotate controls render on one line as `Rotate [input] [Rotate]`.
+- Verified existing Scale controls remain one line as `Scale [--] [-] [scale input] [+] [++] [Resize]`.
+- Verified Move, Origin Apply, and Rotate buttons continue to update the selected shape transform.
+- Verified transform summary is horizontally centered and no longer starts with `Transform`.
 
 ## Manual Verification Equivalent
 
-Targeted Object Vector Studio V2 browser automation covered the requested scale layout, live preview, geometry resize, transformed bounds refresh, invalid input rejection, and no-console-error checks.
+Targeted Object Vector Studio V2 browser automation covered the requested transform row layouts, preserved transform actions, centered summary text, retained Scale row layout, and no-console-error checks.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -1812,17 +1812,25 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#objectVectorStudioV2ObjectDetails")).not.toContainText("Transform");
       await expect(page.locator("#objectVectorStudioV2ObjectDetails #objectVectorStudioV2MoveShapeButton")).toHaveCount(0);
       await expect(page.locator("#objectVectorStudioV2ObjectTransform")).not.toContainText("Selected Shape:");
-      await expect(page.locator("#objectVectorStudioV2ObjectTransform .object-vector-studio-v2__transform-summary")).toHaveText("Transform x 0, y 0, rot 0, scale 1 x 1");
+      await expect(page.locator("#objectVectorStudioV2ObjectTransform .object-vector-studio-v2__transform-summary")).toHaveText("x 0, y 0, rot 0, scale 1 x 1");
       await expect(page.locator("#objectVectorStudioV2ObjectTransform #objectVectorStudioV2MoveShapeButton")).toHaveCount(1);
       const transformSummaryLayout = await page.locator("#objectVectorStudioV2ObjectTransform").evaluate((panel) => {
-        const actions = panel.querySelector(".object-vector-studio-v2__shape-actions");
+        const scaleRow = panel.querySelector(".object-vector-studio-v2__scale-control-row");
         const summary = panel.querySelector(".object-vector-studio-v2__transform-summary");
+        const summaryStyle = getComputedStyle(summary);
         return {
-          summaryAfterActions: Boolean(actions && summary && (actions.compareDocumentPosition(summary) & Node.DOCUMENT_POSITION_FOLLOWING)),
-          summaryTopAtBottom: summary.getBoundingClientRect().top >= actions.getBoundingClientRect().bottom
+          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 >= scaleRow.getBoundingClientRect().bottom
         };
       });
-      expect(transformSummaryLayout).toEqual({ summaryAfterActions: true, summaryTopAtBottom: true });
+      expect(transformSummaryLayout).toEqual({
+        summaryAfterScale: true,
+        summaryCentered: true,
+        summaryStartsWithoutTransform: true,
+        summaryTopAtBottom: true
+      });
       const transformIconState = await page.locator("#objectVectorStudioV2ObjectTransform").evaluate((panel) => ({
         resize: {
           iconKey: panel.querySelector("#objectVectorStudioV2ResizeShapeButton").dataset.ovsIconKey,
@@ -1872,24 +1880,57 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         "Group",
         "None"
       ]);
-      const transformFieldLayout = await page.locator("#objectVectorStudioV2ObjectTransform").evaluate((panel) => (
-        Array.from(panel.querySelectorAll(".object-vector-studio-v2__edit-field--inline")).map((field) => {
-          const label = field.querySelector("span");
-          const input = field.querySelector("input");
-          const labelRect = label.getBoundingClientRect();
-          const inputRect = input.getBoundingClientRect();
+      const transformControlLayout = await page.locator("#objectVectorStudioV2ObjectTransform").evaluate((panel) => (
+        Array.from(panel.querySelectorAll(".object-vector-studio-v2__transform-control-row")).map((row) => {
+          const children = Array.from(row.children);
+          const centers = children.map((child) => {
+            const rect = child.getBoundingClientRect();
+            return Math.round(rect.top + rect.height / 2);
+          });
+          const button = row.querySelector("button");
           return {
-            inline: Math.abs((labelRect.top + labelRect.height / 2) - (inputRect.top + inputRect.height / 2)) < 4 && labelRect.right <= inputRect.left,
-            label: label.textContent.trim()
+            allOneLine: centers.every((center) => Math.abs(center - centers[0]) <= 2),
+            axisLabels: Array.from(row.querySelectorAll(".object-vector-studio-v2__transform-axis-field > span")).map((element) => element.textContent.trim()),
+            buttonId: button?.id || "",
+            buttonText: button?.textContent.trim() || "",
+            buttonTitle: button?.title || "",
+            inputIds: Array.from(row.querySelectorAll("input")).map((input) => input.id),
+            label: row.querySelector(".object-vector-studio-v2__transform-control-label")?.textContent.trim() || "",
+            rowType: row.dataset.transformControlRow
           };
         })
       ));
-      expect(transformFieldLayout).toEqual([
-        { inline: true, label: "Move X" },
-        { inline: true, label: "Move Y" },
-        { inline: true, label: "Rotate" },
-        { inline: true, label: "Origin X" },
-        { inline: true, label: "Origin Y" }
+      expect(transformControlLayout).toEqual([
+        {
+          allOneLine: true,
+          axisLabels: ["X", "Y"],
+          buttonId: "objectVectorStudioV2MoveShapeButton",
+          buttonText: "Move",
+          buttonTitle: "",
+          inputIds: ["objectVectorStudioV2MoveXInput", "objectVectorStudioV2MoveYInput"],
+          label: "Move",
+          rowType: "move"
+        },
+        {
+          allOneLine: true,
+          axisLabels: ["X", "Y"],
+          buttonId: "objectVectorStudioV2ApplyOriginButton",
+          buttonText: "Apply",
+          buttonTitle: "Apply Origin",
+          inputIds: ["objectVectorStudioV2OriginXInput", "objectVectorStudioV2OriginYInput"],
+          label: "Origin",
+          rowType: "origin"
+        },
+        {
+          allOneLine: true,
+          axisLabels: [],
+          buttonId: "objectVectorStudioV2RotateShapeButton",
+          buttonText: "Rotate",
+          buttonTitle: "",
+          inputIds: ["objectVectorStudioV2RotateInput"],
+          label: "Rotate",
+          rowType: "rotate"
+        }
       ]);
       const transformBeforeInvalid = await page.evaluate(() => window.__objectVectorStudioV2App.selectedShape().transform);
       await page.locator("#objectVectorStudioV2MoveXInput").fill("");
@@ -2234,6 +2275,12 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await page.locator("#objectVectorStudioV2RotateShapeButton").click();
       await expect(page.locator("#objectVectorStudioV2JsonDetails")).toContainText('"rotation": 15');
       await expect(page.locator("#statusLog")).toHaveValue(/OK Rotated shape row 0 by 15 degrees\./);
+      await page.locator("#objectVectorStudioV2OriginXInput").fill("2");
+      await page.locator("#objectVectorStudioV2OriginYInput").fill("-3");
+      await page.locator("#objectVectorStudioV2ApplyOriginButton").click();
+      const originAfterApply = await page.evaluate(() => window.__objectVectorStudioV2App.selectedShape().transform.origin);
+      expect(originAfterApply).toEqual({ x: 2, y: -3 });
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Updated shape row 0 origin\/pivot to 2, -3\./);
 
       await page.locator("#objectVectorStudioV2ScaleInput").fill("0");
       await expect(page.locator("#objectVectorStudioV2ScaleInput")).toHaveAttribute("aria-invalid", "true");
@@ -2243,7 +2290,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#objectVectorStudioV2ScaleInput")).not.toHaveAttribute("aria-invalid", "true");
       await expect(page.locator("#statusLog")).toHaveValue(/OK Scale preview set to 1\.2 for shape row 0\./);
       await expect(page.locator("#objectVectorStudioV2JsonDetails")).toContainText('"scaleX": 1.2');
-      await expect(page.locator("#objectVectorStudioV2ObjectTransform .object-vector-studio-v2__transform-summary")).toHaveText("Transform x 10, y 10, rot 15, scale 1.2 x 1.2");
+      await expect(page.locator("#objectVectorStudioV2ObjectTransform .object-vector-studio-v2__transform-summary")).toHaveText("x 10, y 10, rot 15, scale 1.2 x 1.2");
       const selectionBeforeScaleStep = await page.locator("#objectVectorStudioV2RenderSurface [data-selection-bounds='0']").evaluate((box) => ({
         height: Number(box.getAttribute("height")),
         width: Number(box.getAttribute("width"))
@@ -2295,7 +2342,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         }
       });
       await expect(page.locator("#objectVectorStudioV2ScaleInput")).toHaveValue("1");
-      await expect(page.locator("#objectVectorStudioV2ObjectTransform .object-vector-studio-v2__transform-summary")).toHaveText("Transform x 10, y 10, rot 15, scale 1 x 1");
+      await expect(page.locator("#objectVectorStudioV2ObjectTransform .object-vector-studio-v2__transform-summary")).toHaveText("x 10, y 10, rot 15, scale 1 x 1");
       await expect(page.locator("#statusLog")).toHaveValue(/OK Resize Geometry applied scale 1\.2 to shape row 0; transform scale reset to 1\./);
 
       await page.locator("#objectVectorStudioV2BringForwardButton").click();
@@ -3646,12 +3693,12 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await page.locator("#objectVectorStudioV2MoveYInput").fill("7");
       await page.locator("#objectVectorStudioV2MoveShapeButton").click();
       await expect(page.locator("#statusLog")).toHaveValue(/OK Moved shape row 0 by 10, 10\./);
-      await expect(page.locator("#objectVectorStudioV2ObjectTransform .object-vector-studio-v2__transform-summary")).toHaveText("Transform x 10, y 10, rot 0, scale 1 x 1");
+      await expect(page.locator("#objectVectorStudioV2ObjectTransform .object-vector-studio-v2__transform-summary")).toHaveText("x 10, y 10, rot 0, scale 1 x 1");
       await page.locator("#objectVectorStudioV2MoveXInput").fill("-5");
       await page.locator("#objectVectorStudioV2MoveYInput").fill("-5");
       await page.locator("#objectVectorStudioV2MoveShapeButton").click();
       await expect(page.locator("#statusLog")).toHaveValue(/OK Moved shape row 0 by -10, -10\./);
-      await expect(page.locator("#objectVectorStudioV2ObjectTransform .object-vector-studio-v2__transform-summary")).toHaveText("Transform x 0, y 0, rot 0, scale 1 x 1");
+      await expect(page.locator("#objectVectorStudioV2ObjectTransform .object-vector-studio-v2__transform-summary")).toHaveText("x 0, y 0, rot 0, scale 1 x 1");
 
       await page.locator("#objectVectorStudioV2CopyJsonButton").click();
       const copiedPayload = await page.evaluate(() => JSON.parse(sessionStorage.getItem("object-vector-studio-v2.authoring-copied-json")));