Rename Center control and tune opacity input sizing and validation - PR_26133_043-object-transform-center-and-opacity-input-tuning

Author: DavidQ

docs/dev/reports/playwright_v8_coverage_report.md

@@ -1,6 +1,6 @@
-# PR_26133_042 Playwright V8 Coverage Report
+# PR_26133_043 Playwright V8 Coverage Report
 
-Task: PR_26133_042-object-transform-tags-and-palette-layout-tuning
+Task: PR_26133_043-object-transform-center-and-opacity-input-tuning
 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 4729/4729; executed functions 488/517
+(94%) tools/object-vector-studio-v2/js/ToolStarterApp.js - executed lines 4751/4751; executed functions 493/522
 ```
 
 ## Changed Markup/Style/Test Coverage Note
@@ -45,4 +45,4 @@ Markup and CSS changes in `tools/object-vector-studio-v2/index.html` and `tools/
 
 ## PR-Specific Note
 
-The Workspace V2 run exercised Object Vector Studio V2 tag button/chip sizing, Rotate range/input-preservation and wrapped summary behavior, singular scale summary formatting, and Palette Paint/Stroke/Width plus Fill Op/Stroke Op row layout. Coverage remains advisory only.
+The Workspace V2 run exercised Object Vector Studio V2 Center button labeling and recentering behavior, 0-255 opacity input validation, byte-to-normalized opacity conversion for SVG/schema rendering, and opacity input sizing/layout assertions. Coverage remains advisory only.

docs/dev/reports/playwright_workspace_v2_results.md

@@ -1,6 +1,6 @@
-# PR_26133_042 Workspace V2 Playwright Results
+# PR_26133_043 Workspace V2 Playwright Results
 
-Task: PR_26133_042-object-transform-tags-and-palette-layout-tuning
+Task: PR_26133_043-object-transform-center-and-opacity-input-tuning
 Date: 2026-05-15
 
 ## Result
@@ -14,13 +14,13 @@ PASS - `npm run test:workspace-v2` completed successfully.
 
 ## PR-Specific Coverage
 
-- Verified Object tag Add button width is `77px`.
-- Verified selected object tag chips for `bubba` and `player` render as `77px` buttons below the Add tag input row.
-- Verified Rotate input exposes `min=-359` and `max=359`.
-- Verified Rotate keeps the user-entered input value while applying the normalized/wrapped transform rotation.
-- Verified transform summary wraps large/current rotation values into `0..359` and keeps singular same-axis scale text, for example `x 0, y 0, rot 73, scale 0.77`.
-- Verified Palette controls render Paint, Stroke, and Width on the first row, with compact Fill Op and Stroke Op controls on the row below.
+- Verified Object Preview viewport controls now render `Center` instead of `Dot`.
+- Verified Center recenters the preview viewport to origin `0,0`, preserves current zoom, refreshes stale pointer text back to the centered origin display, and keeps the center marker visible.
+- Verified Fill Op and Stroke Op inputs use `min=0`, `max=255`, `step=1`, and width sufficient for 4 visible digits.
+- Verified opacity inputs visibly reject out-of-range values such as `-1` and `256`.
+- Verified valid 0-255 opacity inputs convert to normalized style opacity values for schema/SVG rendering.
+- Verified Fill Op and Stroke Op remain in the compact opacity row below Paint, Stroke, and Width.
 
 ## Manual Verification Equivalent
 
-Targeted Object Vector Studio V2 browser automation covered the requested tag widths/layout, Rotate range and input preservation, wrapped transform summary rotation, compact Palette row split, and no-console-error checks.
+Targeted Object Vector Studio V2 browser automation covered the requested Center label and centering behavior, opacity input sizing/range validation, normalized opacity rendering behavior, Palette opacity row layout, and no-console-error checks.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -1730,11 +1730,13 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         const widthInput = content.querySelector("#objectVectorStudioV2StrokeWidth").getBoundingClientRect();
         const fillOpacityLabel = content.querySelector("label[for='objectVectorStudioV2FillOpacity']").getBoundingClientRect();
         const strokeOpacityLabel = content.querySelector("label[for='objectVectorStudioV2StrokeOpacity']").getBoundingClientRect();
-        const opacityInputs = Array.from(opacityRow.querySelectorAll("input")).map((input) => input.getBoundingClientRect());
+        const opacityInputs = Array.from(opacityRow.querySelectorAll("input"));
+        const opacityInputRects = opacityInputs.map((input) => input.getBoundingClientRect());
         return {
           opacityBelowPrimary: fillOpacityLabel.top >= Math.max(paintButton.bottom, strokeButton.bottom, widthLabel.bottom),
           opacityInline: Math.abs((fillOpacityLabel.top + fillOpacityLabel.height / 2) - (strokeOpacityLabel.top + strokeOpacityLabel.height / 2)) < 4,
-          opacityInputCompact: opacityInputs.every((rect) => Math.round(rect.width) <= 42),
+          opacityInputFitsFourDigits: opacityInputRects.every((rect) => Math.round(rect.width) >= 54),
+          opacityInputRanges: opacityInputs.map((input) => ({ max: input.max, min: input.min, step: input.step, value: input.value })),
           opacityLabels: Array.from(opacityRow.querySelectorAll("label > span")).map((label) => label.textContent.trim()),
           primaryInline: [strokeButton, widthLabel].every((rect) => Math.abs((paintButton.top + paintButton.height / 2) - (rect.top + rect.height / 2)) < 4),
           primaryOrder: Array.from(primaryRow.children).map((element) => element.textContent.trim()),
@@ -1745,7 +1747,11 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       expect(paletteControlLayout).toEqual({
         opacityBelowPrimary: true,
         opacityInline: true,
-        opacityInputCompact: true,
+        opacityInputFitsFourDigits: true,
+        opacityInputRanges: [
+          { max: "255", min: "0", step: "1", value: "255" },
+          { max: "255", min: "0", step: "1", value: "255" }
+        ],
         opacityLabels: ["Fill Op", "Stroke Op"],
         primaryInline: true,
         primaryOrder: ["Paint", "Stroke", "Width"],
@@ -1816,16 +1822,19 @@ 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", "Dot"]);
-      await expect(page.locator("#objectVectorStudioV2CenterDotButton")).toHaveAttribute("aria-pressed", "true");
-      await page.locator("#objectVectorStudioV2CenterDotButton").click();
-      await expect(page.locator("#objectVectorStudioV2CenterDotButton")).toHaveAttribute("aria-pressed", "false");
-      await expect(page.locator("#objectVectorStudioV2RenderSurface [data-center-origin='0,0']")).toHaveCount(0);
-      await expect(page.locator("#statusLog")).toHaveValue(/OK Center dot hidden\./);
+      await expect(page.locator("#objectVectorStudioV2ViewportControls button")).toHaveText(["Out", "In", "Up", "Down", "Left", "Right", "View", "Center"]);
+      await expect(page.locator("#objectVectorStudioV2CenterDotButton")).not.toHaveAttribute("aria-pressed", /.*/);
+      await page.locator("#objectVectorStudioV2PanRightButton").click();
+      await page.locator("#objectVectorStudioV2PanDownButton").click();
+      await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toHaveText("Origin: 2, 2 | Canvas 0,0 centered | Zoom 100%");
+      await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-1580 -1080 3200 2200");
+      await page.locator("#objectVectorStudioV2RenderSurface").hover({ position: { x: 12, y: 12 } });
+      await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toContainText("Pointer");
       await page.locator("#objectVectorStudioV2CenterDotButton").click();
-      await expect(page.locator("#objectVectorStudioV2CenterDotButton")).toHaveAttribute("aria-pressed", "true");
+      await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-1600 -1100 3200 2200");
+      await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toHaveText("Origin: 0, 0 | Canvas 0,0 centered | Zoom 100%");
       await expect(page.locator("#objectVectorStudioV2RenderSurface [data-center-origin='0,0']")).toHaveCount(1);
-      await expect(page.locator("#statusLog")).toHaveValue(/OK Center dot shown\./);
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Viewport centered at origin 0,0; zoom 100% preserved\./);
       await expect(page.locator("#objectVectorStudioV2JsonDetails")).toContainText('"name": "Asteroids Ship"');
       await expect(page.locator("#objectVectorStudioV2JsonDetails")).toContainText('"selectedShape": null');
       await expect(page.locator("#objectVectorStudioV2JsonDetails")).not.toContainText('"palette"');
@@ -2451,18 +2460,34 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await clickPreviewShape(1);
       await expect(page.locator("#objectVectorStudioV2JsonDetails")).toContainText('"fill": "#6fd3ff"');
       await expect(page.locator("#statusLog")).toHaveValue(/OK Applied palette color #6fd3ff from cyan to shape row 1 by render surface click\. Target: paint opacity 1\./);
-      await page.locator("#objectVectorStudioV2FillOpacity").fill("0.5");
+      await page.locator("#objectVectorStudioV2FillOpacity").fill("-1");
       await page.locator("#objectVectorStudioV2FillOpacity").dispatchEvent("change");
-      await expect(page.locator("#objectVectorStudioV2JsonDetails")).toContainText('"fillOpacity": 0.5');
-      await expect(page.locator("#statusLog")).toHaveValue(/OK Applied fill opacity 0\.5 to shape row 1\./);
+      await expect(page.locator("#objectVectorStudioV2FillOpacity")).toHaveAttribute("aria-invalid", "true");
+      await expect(page.locator("#objectVectorStudioV2JsonDetails")).not.toContainText('"fillOpacity": 0.502');
+      await expect(page.locator("#statusLog")).toHaveValue(/FAIL Palette fill opacity rejected: Fill opacity must be a whole number between 0 and 255\./);
+      await page.locator("#objectVectorStudioV2FillOpacity").fill("128");
+      await page.locator("#objectVectorStudioV2FillOpacity").dispatchEvent("change");
+      await expect(page.locator("#objectVectorStudioV2FillOpacity")).not.toHaveAttribute("aria-invalid", "true");
+      await expect(page.locator("#objectVectorStudioV2FillOpacity")).toHaveValue("128");
+      await expect(page.locator("#objectVectorStudioV2JsonDetails")).toContainText('"fillOpacity": 0.502');
+      await expect(page.locator("#objectVectorStudioV2RenderSurface [data-shape-index='1']")).toHaveAttribute("fill-opacity", "0.502");
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Applied fill opacity 0\.502 to shape row 1\./);
       await page.locator("#objectVectorStudioV2StrokeModeButton").click();
       await clickPreviewShape(1);
       await expect(page.locator("#objectVectorStudioV2JsonDetails")).toContainText('"stroke": "#ffffff"');
       await expect(page.locator("#statusLog")).toHaveValue(/OK Applied palette color #ffffff from white to shape row 1 by render surface click\. Target: stroke width 2, opacity 1\./);
-      await page.locator("#objectVectorStudioV2StrokeOpacity").fill("0.65");
+      await page.locator("#objectVectorStudioV2StrokeOpacity").fill("256");
+      await page.locator("#objectVectorStudioV2StrokeOpacity").dispatchEvent("change");
+      await expect(page.locator("#objectVectorStudioV2StrokeOpacity")).toHaveAttribute("aria-invalid", "true");
+      await expect(page.locator("#objectVectorStudioV2JsonDetails")).not.toContainText('"strokeOpacity": 0.651');
+      await expect(page.locator("#statusLog")).toHaveValue(/FAIL Palette stroke opacity rejected: Stroke opacity must be a whole number between 0 and 255\./);
+      await page.locator("#objectVectorStudioV2StrokeOpacity").fill("166");
       await page.locator("#objectVectorStudioV2StrokeOpacity").dispatchEvent("change");
-      await expect(page.locator("#objectVectorStudioV2JsonDetails")).toContainText('"strokeOpacity": 0.65');
-      await expect(page.locator("#statusLog")).toHaveValue(/OK Applied stroke opacity 0\.65 to shape row 1\./);
+      await expect(page.locator("#objectVectorStudioV2StrokeOpacity")).not.toHaveAttribute("aria-invalid", "true");
+      await expect(page.locator("#objectVectorStudioV2StrokeOpacity")).toHaveValue("166");
+      await expect(page.locator("#objectVectorStudioV2JsonDetails")).toContainText('"strokeOpacity": 0.651');
+      await expect(page.locator("#objectVectorStudioV2RenderSurface [data-shape-index='1']")).toHaveAttribute("stroke-opacity", "0.651");
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Applied stroke opacity 0\.651 to shape row 1\./);
       await page.evaluate(() => {
         window.__objectVectorStudioV2App.selectedStrokeColor = "#123456";
         window.__objectVectorStudioV2App.selectedStrokeLabel = "manual rogue";

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

@@ -133,7 +133,7 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
                 <button id="objectVectorStudioV2PanLeftButton" type="button" title="Pan the work surface left">Left</button>
                 <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" aria-pressed="true" title="Hide or show the canvas center dot">Dot</button>
+                <button id="objectVectorStudioV2CenterDotButton" type="button" title="Center canvas origin in the current viewport">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>
@@ -273,11 +273,11 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
               <div class="object-vector-studio-v2__palette-opacity-row">
                 <label class="object-vector-studio-v2__inline-field" for="objectVectorStudioV2FillOpacity">
                   <span>Fill Op</span>
-                  <input id="objectVectorStudioV2FillOpacity" type="number" min="0" max="1" step="0.05" value="1">
+                  <input id="objectVectorStudioV2FillOpacity" type="number" min="0" max="255" step="1" value="255">
                 </label>
                 <label class="object-vector-studio-v2__inline-field" for="objectVectorStudioV2StrokeOpacity">
                   <span>Stroke Op</span>
-                  <input id="objectVectorStudioV2StrokeOpacity" type="number" min="0" max="1" step="0.05" value="1">
+                  <input id="objectVectorStudioV2StrokeOpacity" type="number" min="0" max="255" step="1" value="255">
                 </label>
               </div>
             </div>