Fix Object Vector V2 zoom anchoring and fullscreen tool layout behavior - PR_26133_101-object-vector-zoom-and-layout-fixes

Author: DavidQ

docs/dev/reports/PR_26133_101-object-vector-zoom-and-layout-fixes_report.md

@@ -0,0 +1,41 @@
+# PR_26133_101 Object Vector Zoom And Layout Fixes
+
+## Scope
+- Read docs/dev/PROJECT_INSTRUCTIONS.md before changes.
+- Preserved the Workspace manifest/schema contract; no schema or workspace manifest structures were changed.
+- Used the integrated PR_26133_100 code state as the prior reference. The PR_100 delta ZIP was requested but was not present under tmp/ at PR_101 start.
+- Limited implementation to Object Vector Studio V2 zoom, Tools/fullscreen layout, object-scale anchoring, and matching workspace-v2 coverage.
+
+## Changes
+- Raised Object Preview MAX_ZOOM from 0.5 to 1.0.
+- Made the Tools accordion compact so its container ends under the Snap/Grid/Words button row instead of stretching.
+- Restored fullscreen right-column vertical scrolling while keeping the column inside the viewport.
+- Fixed Object Transform scale so each new scale value is applied as a relative ratio from the last object-scale preview value. This prevents child shapes such as flame/inner line strokes from drifting away from hull anchor lines during repeated object scale/zoom adjustments.
+- Kept PR_100 object/shape rotation, center marker, and multi-selected shape order behavior intact.
+
+## Playwright Impact
+- Playwright impacted: Yes.
+- Validates Object Vector V2 max zoom clamping/display, compact Tools layout, fullscreen right-column scroll behavior, and non-compounding object-scale origin offsets.
+- Expected pass behavior: zoom clamps to 1.0, Tools content reaches accordion bottom, fullscreen right panel scrolls within the viewport, and repeated object scale changes preserve child shape origin offsets at the requested scale.
+- Expected fail behavior: stale max zoom assertions, stretched Tools accordions, non-scrollable fullscreen right column, or compounded object-scale origin drift fail the workspace-v2 tests.
+
+## Validation
+- PASS: node --check tools/object-vector-studio-v2/js/ToolStarterApp.js
+- PASS: node --check tests/playwright/tools/WorkspaceManagerV2.spec.mjs
+- PASS: git diff --check (CRLF advisory warnings only)
+- PASS: npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --project=playwright --workers=1 --reporter=list -g "shows Object Vector Studio V2 layout shell|expands Object Vector Studio V2 asset authoring controls"
+- PASS: npm run test:workspace-v2 (56 passed)
+
+## Manual Validation
+1. Open Object Vector Studio V2, select an object with multiple child shapes such as the Asteroids ship, and use Object Transform scale/zoom controls repeatedly.
+   - Expected: inner/flame line shapes stay anchored to the hull lines instead of drifting upward.
+2. Use Object Preview zoom controls up to the maximum.
+   - Expected: internal zoom reaches 1.0 and the UI remains responsive.
+3. Open fullscreen mode and scroll the right column.
+   - Expected: the right column remains inside the viewport and scrolls vertically.
+4. Inspect Tools accordion height.
+   - Expected: its bottom sits under the last row of Snap/Grid/Words buttons.
+
+## Out Of Scope
+- Full samples smoke test was skipped per PR_26133_101 instructions.
+- No workspace schema cleanup, manifest restructuring, or sample JSON updates were performed.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -1824,6 +1824,8 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         const labelButton = document.querySelector("#objectVectorStudioV2ToolLabelModeButton");
         const toolsContent = document.querySelector("#objectVectorStudioV2ShapeToolsContent");
         const shapesContent = document.querySelector("#objectVectorStudioV2ShapesContent");
+        const toolsContentRect = toolsContent.getBoundingClientRect();
+        const toolsAccordion = toolsContent.closest(".accordion-v2").getBoundingClientRect();
         const shapesContentRect = shapesContent.getBoundingClientRect();
         const shapesAccordion = shapesContent.closest(".accordion-v2").getBoundingClientRect();
         const leftPanel = document.querySelector(".tool-starter__panel--left");
@@ -1843,6 +1845,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
           textButtonWider: Math.round(rect.width) > Math.round(rect.height),
           toolsButtonLabels,
           toolsContainsShapeButtons: Boolean(toolsContent.querySelector(".object-vector-studio-v2__tool-toggle")),
+          toolsReachesBottom: Math.abs(toolsContentRect.bottom - toolsAccordion.bottom) <= 1,
           visibleIconTopOffsetRange: Math.max(...iconTopOffsets) - Math.min(...iconTopOffsets),
           shapesReachesBottom: Math.abs(shapesContentRect.bottom - shapesAccordion.bottom) <= 1,
           zOrderAbsentBeforeObjectSelection: !document.querySelector(".object-vector-studio-v2__z-order-actions"),
@@ -1857,6 +1860,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         textButtonWider: true,
         toolsButtonLabels: ["Snap Grid", "Snap Angle", "Grid", "Icons"],
         toolsContainsShapeButtons: false,
+        toolsReachesBottom: true,
         visibleIconTopOffsetRange: 0,
         shapesReachesBottom: true,
         zOrderAbsentBeforeObjectSelection: true,
@@ -3431,7 +3435,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
 
       const zoomSource = await readFile("tools/object-vector-studio-v2/js/ToolStarterApp.js", "utf8");
       expect(zoomSource).toContain("const DEFAULT_VIEWPORT = Object.freeze({ height: 220, width: 320, x: 0, y: 0, zoom: 0.1 });");
-      expect(zoomSource).toContain("const MAX_ZOOM = 0.5;");
+      expect(zoomSource).toContain("const MAX_ZOOM = 1.0;");
       expect(zoomSource).toContain("const MIN_ZOOM = 0.01;");
       expect(zoomSource).toContain("const ZOOM_STEP = 0.01;");
       expect(zoomSource).toMatch(/formatZoomPercentage\(\) \{\s+return Math\.round\(this\.viewport\.zoom \* 100\);\s+\}/);
@@ -3456,8 +3460,8 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await page.evaluate(() => {
         window.__objectVectorStudioV2App.zoomViewport(2.5);
       });
-      await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toHaveText("Origin: 0, 0 | Canvas origin 0,0 centered | Zoom 500%");
-      await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-320 -220 640 440");
+      await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toHaveText("Origin: 0, 0 | Canvas origin 0,0 centered | Zoom 1000%");
+      await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-160 -110 320 220");
       await page.evaluate(() => {
         window.__objectVectorStudioV2App.zoomViewport(0);
       });
@@ -3708,6 +3712,17 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       expect(remainingOpenSections.every((entry) => entry.height >= 44)).toBe(true);
       expect(collapsedLayout.find((entry) => entry.title.startsWith("Palette"))?.height).toBeLessThanOrEqual(320);
       await expect(page.locator(".tool-starter__panel--right")).toHaveCSS("overflow-y", "auto");
+      const maxZoomState = await page.evaluate(() => {
+        const app = window.__objectVectorStudioV2App;
+        app.zoomViewport(2);
+        return {
+          display: document.querySelector("#objectVectorStudioV2CoordinateDisplay").textContent,
+          zoom: app.viewport.zoom
+        };
+      });
+      expect(maxZoomState.zoom).toBe(1);
+      expect(maxZoomState.display).toContain("Zoom 1000%");
+      await page.locator("#objectVectorStudioV2ResetViewButton").click();
 
       const summary = page.locator("[data-tool-starter-summary]");
       await summary.click();
@@ -3724,15 +3739,22 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         const left = document.querySelector(".tool-starter__panel--left").getBoundingClientRect();
         const center = document.querySelector(".tool-starter__panel--center").getBoundingClientRect();
         const right = document.querySelector(".tool-starter__panel--right").getBoundingClientRect();
+        const rightPanel = document.querySelector(".tool-starter__panel--right");
         return {
           centerHeight: Math.round(center.height),
           centerWidth: Math.round(center.width),
           leftBeforeCenter: left.right <= center.left,
-          rightAfterCenter: right.left >= center.right
+          rightAfterCenter: right.left >= center.right,
+          rightBottomWithinViewport: right.bottom <= window.innerHeight + 1,
+          rightOverflowY: getComputedStyle(rightPanel).overflowY,
+          rightScrollable: rightPanel.scrollHeight >= rightPanel.clientHeight
         };
       });
       expect(fullscreenLayout.leftBeforeCenter).toBe(true);
       expect(fullscreenLayout.rightAfterCenter).toBe(true);
+      expect(fullscreenLayout.rightBottomWithinViewport).toBe(true);
+      expect(fullscreenLayout.rightOverflowY).toBe("auto");
+      expect(fullscreenLayout.rightScrollable).toBe(true);
       expect(fullscreenLayout.centerWidth).toBeGreaterThan(300);
       expect(fullscreenLayout.centerHeight).toBeGreaterThan(300);
 
@@ -5765,6 +5787,21 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       });
       expect(groupedRotateBackTransforms).toEqual([{ rotation: 15 }, { rotation: 15 }]);
 
+      const objectScaleOriginOffsetsBefore = await page.evaluate(() => {
+        const app = window.__objectVectorStudioV2App;
+        const object = app.selectedObject();
+        const origin = app.objectTransformOrigin(object);
+        const frame = app.activeFrame();
+        return object.shapes.map((shape, shapeIndex) => {
+          const effective = app.effectiveShapeForFrame(shape, frame, shapeIndex);
+          const transform = app.ensureShapeTransform(effective);
+          const originWorld = app.transformedPoint(transform.shapeOrigin, transform);
+          return {
+            x: Number((originWorld.x - origin.x).toFixed(3)),
+            y: Number((originWorld.y - origin.y).toFixed(3))
+          };
+        });
+      });
       await page.locator("#objectVectorStudioV2ObjectScaleUpLargeButton").click();
       await expect(page.locator("#statusLog")).toHaveValue(/OK Object scale preview set to 1\.1 for UFO Template\./);
       const objectScaleAfterLargeStep = await page.evaluate(() => {
@@ -5787,6 +5824,25 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         });
       });
       expect(objectScaleAfterSmallStep).toEqual([{ scaleX: 1.09, scaleY: 1.09 }, { scaleX: 1.09, scaleY: 1.09 }]);
+      const objectScaleOriginOffsetsAfterSmallStep = await page.evaluate(() => {
+        const app = window.__objectVectorStudioV2App;
+        const object = app.selectedObject();
+        const origin = app.objectTransformOrigin(object);
+        const frame = app.activeFrame();
+        return object.shapes.map((shape, shapeIndex) => {
+          const effective = app.effectiveShapeForFrame(shape, frame, shapeIndex);
+          const transform = app.ensureShapeTransform(effective);
+          const originWorld = app.transformedPoint(transform.shapeOrigin, transform);
+          return {
+            x: Number((originWorld.x - origin.x).toFixed(3)),
+            y: Number((originWorld.y - origin.y).toFixed(3))
+          };
+        });
+      });
+      objectScaleOriginOffsetsAfterSmallStep.forEach((offset, index) => {
+        expect(offset.x).toBeCloseTo(Number((objectScaleOriginOffsetsBefore[index].x * 1.09).toFixed(3)), 2);
+        expect(offset.y).toBeCloseTo(Number((objectScaleOriginOffsetsBefore[index].y * 1.09).toFixed(3)), 2);
+      });
 
       await page.evaluate(() => window.__objectVectorStudioV2App.selectShape(0, "shape transform single-shape verification"));
       await expect(page.locator("#objectVectorStudioV2ShapeTransform #objectVectorStudioV2ScaleDownSmallButton")).toBeEnabled();

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

@@ -213,7 +213,7 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
           </div>
         </section>
 
-        <section class="accordion-v2 tool-starter__accordion tool-starter__accordion--fill is-open" data-accordion-v2-open="true">
+        <section class="accordion-v2 tool-starter__accordion tool-starter__accordion--compact is-open" data-accordion-v2-open="true">
           <button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="objectVectorStudioV2ShapeToolsContent">
             <span>Tools</span>
             <span class="accordion-v2__icon" aria-hidden="true">+</span>

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

@@ -13,7 +13,7 @@ const SVG_NS = "http://www.w3.org/2000/svg";
 const DEFAULT_VIEWPORT = Object.freeze({ height: 220, width: 320, x: 0, y: 0, zoom: 0.1 });
 const GRID_STEP = 10;
 const OBJECT_PREVIEW_DRAWING_SCALE = GRID_STEP;
-const MAX_ZOOM = 0.5;
+const MAX_ZOOM = 1.0;
 const MIN_ZOOM = 0.01;
 const ZOOM_STEP = 0.01;
 const TRANSPARENT_STYLE_COLOR = "#00000000";
@@ -525,6 +525,7 @@ export class ToolStarterApp {
     this.previewRedoStack = [];
     this.previewPointerEdit = null;
     this.transformInputValues = new Map();
+    this.objectScalePreviewValues = new Map();
     this.stateControlStateId = "";
     this.pendingAddObjectClick = false;
     this.hiddenObjectIds = new Set();
@@ -2805,7 +2806,7 @@ export class ToolStarterApp {
     const section = document.createElement("section");
     section.className = "object-vector-studio-v2__edit-panel object-vector-studio-v2__edit-panel--transform object-vector-studio-v2__edit-panel--object-transform";
     const origin = this.objectTransformOrigin(object);
-    const objectScaleInput = Number(this.transformInputValue("objectVectorStudioV2ObjectScaleInput", "1"));
+    const objectScaleInput = Number(this.objectScalePreviewValues.get(object.id) ?? 1);
     const objectScale = Number.isFinite(objectScaleInput) && objectScaleInput > 0 ? objectScaleInput : 1;
     section.append(
       this.createObjectOriginControlRow(origin),
@@ -4100,17 +4101,17 @@ export class ToolStarterApp {
     };
   }
 
-  transformWithScaledOriginAroundPivot(transform, pivot, scale) {
+  transformWithRelativeScaleAroundPivot(transform, pivot, scaleRatio) {
     const normalized = this.ensureShapeTransform({ transform });
     const originWorld = this.transformedPoint(normalized.shapeOrigin, normalized);
     const nextOriginWorld = {
-      x: this.formatViewportNumber(pivot.x + (originWorld.x - pivot.x) * scale),
-      y: this.formatViewportNumber(pivot.y + (originWorld.y - pivot.y) * scale)
+      x: this.formatViewportNumber(pivot.x + (originWorld.x - pivot.x) * scaleRatio),
+      y: this.formatViewportNumber(pivot.y + (originWorld.y - pivot.y) * scaleRatio)
     };
     return {
       ...normalized,
-      scaleX: Number(scale.toFixed(3)),
-      scaleY: Number(scale.toFixed(3)),
+      scaleX: this.formatViewportNumber(normalized.scaleX * scaleRatio),
+      scaleY: this.formatViewportNumber(normalized.scaleY * scaleRatio),
       x: this.formatViewportNumber(nextOriginWorld.x - normalized.shapeOrigin.x),
       y: this.formatViewportNumber(nextOriginWorld.y - normalized.shapeOrigin.y)
     };
@@ -7384,20 +7385,54 @@ export class ToolStarterApp {
       this.transformInputValues.set(inputElement.id, inputElement.value);
     }
     this.applySelectedObjectScaleValue(nextScale, {
+      previousScale: input.value,
       okMessage: `OK Object scale preview set to ${this.formatScaleInputValue(nextScale)} for ${this.selectedObject()?.name || "selected object"}.`
     });
   }
 
-  applySelectedObjectScaleValue(scale, { okMessage } = {}) {
+  currentObjectScalePreviewValue(object = this.selectedObject()) {
+    const storedScale = this.objectScalePreviewValues.get(object?.id);
+    return Number.isFinite(storedScale) && storedScale > 0 ? storedScale : 1;
+  }
+
+  applySelectedObjectScaleValue(scale, { okMessage, previousScale } = {}) {
     const origin = this.readObjectOriginInputs();
     if (!origin.ok) {
       this.statusLog.write(`FAIL Invalid object transform rejected: ${origin.error}`);
       return false;
     }
     const object = this.selectedObject();
-    return this.updateSelectedObjectTransforms("scale", (shape) => {
-      shape.transform = this.transformWithScaledOriginAroundPivot(this.ensureShapeTransform(shape), origin.value, scale);
+    const priorScale = Number.isFinite(previousScale) && previousScale > 0
+      ? previousScale
+      : this.currentObjectScalePreviewValue(object);
+    const scaleRatio = scale / priorScale;
+    if (!Number.isFinite(scaleRatio) || scaleRatio <= 0) {
+      this.statusLog.write("FAIL Invalid object transform rejected: scale ratio must be greater than 0.");
+      return false;
+    }
+    const priorStoredScale = object?.id ? this.objectScalePreviewValues.get(object.id) : undefined;
+    const priorInputScale = this.transformInputValues.get("objectVectorStudioV2ObjectScaleInput");
+    const nextScale = this.formatViewportNumber(scale);
+    if (object?.id) {
+      this.objectScalePreviewValues.set(object.id, nextScale);
+      this.transformInputValues.set("objectVectorStudioV2ObjectScaleInput", this.formatScaleInputValue(nextScale));
+    }
+    const committed = this.updateSelectedObjectTransforms("scale", (shape) => {
+      shape.transform = this.transformWithRelativeScaleAroundPivot(this.ensureShapeTransform(shape), origin.value, scaleRatio);
     }, okMessage || `OK Object scale preview set to ${this.formatScaleInputValue(scale)} for ${object?.name || "selected object"}.`, "Object Transform scale failed schema validation");
+    if (!committed && object?.id) {
+      if (priorStoredScale === undefined) {
+        this.objectScalePreviewValues.delete(object.id);
+      } else {
+        this.objectScalePreviewValues.set(object.id, priorStoredScale);
+      }
+      if (priorInputScale === undefined) {
+        this.transformInputValues.delete("objectVectorStudioV2ObjectScaleInput");
+      } else {
+        this.transformInputValues.set("objectVectorStudioV2ObjectScaleInput", priorInputScale);
+      }
+    }
+    return committed;
   }
 
   resizeSelectedObject() {
@@ -7428,12 +7463,18 @@ export class ToolStarterApp {
     }
 
     const nextPayload = this.cloneCurrentPayload();
+    const currentScale = this.currentObjectScalePreviewValue(object);
+    const scaleRatio = input.value / currentScale;
+    if (!Number.isFinite(scaleRatio) || scaleRatio <= 0) {
+      this.statusLog.write("FAIL Resize Geometry rejected for selected object: scale ratio must be greater than 0.");
+      return;
+    }
     try {
       targetIndexes.forEach((shapeIndex) => {
         const baseShape = this.findShapeInPayload(nextPayload, shapeIndex);
         const override = this.frameOverrideInPayload(nextPayload, shapeIndex, { create: false });
         const transformTarget = override?.transform ? { transform: override.transform, geometry: baseShape.geometry } : baseShape;
-        const transform = this.transformWithScaledOriginAroundPivot(this.ensureShapeTransform(transformTarget), origin.value, input.value);
+        const transform = this.transformWithRelativeScaleAroundPivot(this.ensureShapeTransform(transformTarget), origin.value, scaleRatio);
         this.resizeShapeGeometryByTransformScale(baseShape, transform);
         transform.scaleX = 1;
         transform.scaleY = 1;
@@ -7453,6 +7494,7 @@ export class ToolStarterApp {
     }
 
     this.transformInputValues.set("objectVectorStudioV2ObjectScaleInput", "1");
+    this.objectScalePreviewValues.set(object.id, 1);
     this.commitPayloadUpdate(
       nextPayload,
       object.id,

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

@@ -2292,6 +2292,8 @@ html:fullscreen body.tools-platform-surface[data-tool-id="object-vector-studio-v
   justify-self: end;
   width: 360px;
   max-width: 360px;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
 body.tools-platform-surface.tools-platform-fullscreen-active[data-tool-id="object-vector-studio-v2"] .tool-starter__panel--center,