Track future Object Vector architecture and refine tool order and live point editing - PR_26133_062-object-vector-future-notes-tool-sort-and-live-point-edit

Author: DavidQ

docs/dev/reports/playwright_v8_coverage_report.md

@@ -1,6 +1,6 @@
-# PR_26133_061 Playwright V8 Coverage Report
+# PR_26133_062 Playwright V8 Coverage Report
 
-Task: PR_26133_061-shape-tools-square-and-icon-alignment
+Task: PR_26133_062-object-vector-future-notes-tool-sort-and-live-point-edit
 Date: 2026-05-15
 
 ## Result
@@ -25,7 +25,7 @@ PASS - Coverage reporting was generated during `npm run test:workspace-v2`.
 
 ```text
 (94%) src/engine/rendering/ObjectVectorRuntimeAssetService.js - executed lines 1131/1131; executed functions 111/118
-(95%) tools/object-vector-studio-v2/js/ToolStarterApp.js - executed lines 5710/5710; executed functions 601/632
+(95%) tools/object-vector-studio-v2/js/ToolStarterApp.js - executed lines 5731/5731; executed functions 605/636
 ```
 
 ## Guardrail
@@ -36,4 +36,4 @@ PASS - Coverage reporting was generated during `npm run test:workspace-v2`.
 
 ## PR-Specific Note
 
-The Workspace V2 run exercised Object Vector Studio V2 Square tool creation, schema validation for `tool: "square"` shapes backed by rectangle geometry, one-size Square geometry editing, Shape/Tools Nerd Font icon mapping and alignment, and Asteroids runtime object-vector rendering.
+The Workspace V2 run exercised Object Vector Studio V2 Shape/Tools ordering, Angle Snap UI/status behavior, live geometry point-handle editing before mouseup, Object Geometry input refresh during drag, workspace dirty tracking during drag, schema validation, and Asteroids runtime object-vector rendering.

docs/dev/reports/playwright_workspace_v2_results.md

@@ -1,6 +1,6 @@
-# PR_26133_061 Workspace V2 Playwright Results
+# PR_26133_062 Workspace V2 Playwright Results
 
-Task: PR_26133_061-shape-tools-square-and-icon-alignment
+Task: PR_26133_062-object-vector-future-notes-tool-sort-and-live-point-edit
 Date: 2026-05-15
 
 ## Result
@@ -14,14 +14,14 @@ PASS - `npm run test:workspace-v2` completed successfully.
 
 ## PR-Specific Coverage
 
-- Verified the new Square tool renders in Shape/Tools and creates a schema-valid `tool: "square"` shape backed by rectangle geometry.
-- Verified Square geometry uses one `Size` input and applies equal width/height values.
-- Verified Oval/Ellipse, Circle, Arc, and Square use the requested Nerd Font icon names.
-- Verified Shape/Tools icon spacing stays aligned with text labels visible and in icon-only mode.
+- Verified `possible.future.adds.txt` contains the Object Vector atomic-object, future World Vector/Scene instancing, Object/World separation, and future 3D point3d/camera/projection/mesh notes.
+- Verified Shape/Tools order is Select first, alphabetical middle, and Text last.
+- Verified Angle Snap UI documents current behavior: enabled Angle Snap rounds the Rotate action's entered delta to 15 degree increments; disabled uses the raw entered delta.
+- Verified point-handle dragging updates geometry, Object Geometry inputs, preview geometry, selection handle position, and workspace dirty state before mouseup.
 - Verified Object Vector Studio V2 and Asteroids runtime scenarios completed without page or console errors.
 
 ## Additional Validation
 
-- Focused Shape/Tools layout and Square creation slice passed:
-  `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --project=playwright --workers=1 --reporter=list --grep "layout shell|square shapes"` completed with 2 passed, 0 failed.
+- Focused Shape/Tools, Square creation, and dirty-state live edit slices passed:
+  `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --project=playwright --workers=1 --reporter=list --grep "layout shell|square shapes|dirty state"` completed with 3 passed, 0 failed.
 - `git diff --check` passed. The command reported existing Windows LF-to-CRLF warnings for touched files and no whitespace errors.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -1308,7 +1308,16 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await page.locator("#objectVectorStudioV2ObjectNameInput").fill("Blocked Object");
       await page.locator("#objectVectorStudioV2AddObjectButton").click();
       await expect(page.locator("#statusLog")).toHaveValue(/FAIL Add object blocked: load a schema-valid Object Vector Studio V2 payload before adding objects\./);
-      await expect(page.locator(".object-vector-studio-v2__tool-toggle")).toHaveText(["Select", "Triangle", "Rectangle", "Square", "Circle", "Ellipse", "Line", "Polygon", "Arc", "Text"]);
+      await expect(page.locator(".object-vector-studio-v2__tool-toggle")).toHaveText(["Select", "Arc", "Circle", "Ellipse", "Line", "Polygon", "Rectangle", "Square", "Triangle", "Text"]);
+      const futureNotes = await readFile("tools/object-vector-studio-v2/possible.future.adds.txt", "utf8");
+      expect(futureNotes).toContain("Object Vector Studio V2 should stay focused on reusable atomic vector objects.");
+      expect(futureNotes).toContain("Future World Vector or Scene layers should instance Object Vector objects");
+      expect(futureNotes).toContain("Keep Object Vector and World Vector separate");
+      expect(futureNotes).toContain("Future 3D vector workflows can build from Object Vector concepts");
+      expect(futureNotes).toContain("point3d");
+      expect(futureNotes).toContain("camera");
+      expect(futureNotes).toContain("projection");
+      expect(futureNotes).toContain("mesh");
       await expect(page.locator(".object-vector-studio-v2__shape-icon--triangle")).toBeVisible();
       await expect(page.locator(".object-vector-studio-v2__shape-icon--arc")).toBeVisible();
       const iconStyleState = await page.evaluate(async () => {
@@ -1384,6 +1393,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
           },
           titles: {
             add: title("#objectVectorStudioV2AddObjectButton"),
+            angle: title("#objectVectorStudioV2AngleSnapButton"),
             grid: title("#objectVectorStudioV2GridRenderButton"),
             rename: title("#objectVectorStudioV2RenameObjectButton"),
             shape: title("[data-shape-tool='rectangle']"),
@@ -1484,11 +1494,18 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       expect(iconStyleState.viewportIcons.zoomOut.iconName).toBe("nf-oct-zoom_out");
       expect(iconStyleState.titles).toEqual({
         add: "Add a schema-valid object to the loaded payload",
+        angle: "When enabled, the Rotate action rounds the entered rotation delta to 15 degree increments.",
         grid: "Show or hide the preview grid",
         rename: "Disabled until a schema-valid object is selected.",
         shape: "Create a rectangle shape on the selected object",
         zoomIn: "Zoom the work surface in"
       });
+      await page.locator("#objectVectorStudioV2AngleSnapButton").click();
+      await expect(page.locator("#objectVectorStudioV2AngleSnapButton")).toHaveAttribute("aria-pressed", "true");
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Angle snap enabled: Rotate action rounds entered rotation delta to 15 degree increments\./);
+      await page.locator("#objectVectorStudioV2AngleSnapButton").click();
+      await expect(page.locator("#objectVectorStudioV2AngleSnapButton")).toHaveAttribute("aria-pressed", "false");
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Angle snap disabled: Rotate action uses raw entered rotation delta\./);
 
       await page.locator('[data-shape-tool="rectangle"]').click();
       await expect(page.locator('[data-shape-tool="rectangle"]')).toHaveAttribute("aria-pressed", "true");
@@ -8723,9 +8740,29 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         await page.locator("#objectVectorStudioV2ApplyGeometryButton").click();
       });
       await expectObjectVectorDirtyAfter("object geometry point handle drag edit", async () => {
-        await expect(page.locator("#objectVectorStudioV2RenderSurface [data-geometry-point-handle='polygon-0']")).toHaveCount(1);
+        const handle = page.locator("#objectVectorStudioV2RenderSurface [data-geometry-point-handle='polygon-0']");
+        await expect(handle).toHaveCount(1);
         const pointBefore = await page.evaluate(() => ({ ...window.__objectVectorStudioV2App.selectedShape().geometry.points[0] }));
-        await dragPreviewLocator("#objectVectorStudioV2RenderSurface [data-geometry-point-handle='polygon-0']", 18, 12);
+        const pointsBefore = await page.locator("#objectVectorStudioV2RenderSurface [data-shape-index='0']").getAttribute("points");
+        const handleBoxBefore = await handle.boundingBox();
+        expect(handleBoxBefore).not.toBeNull();
+        const x = handleBoxBefore.x + handleBoxBefore.width / 2;
+        const y = handleBoxBefore.y + handleBoxBefore.height / 2;
+        await page.mouse.move(x, y);
+        await page.mouse.down();
+        await page.mouse.move(x + 18, y + 12, { steps: 4 });
+        await expect.poll(async () => page.evaluate(() => ({ ...window.__objectVectorStudioV2App.selectedShape().geometry.points[0] }))).not.toEqual(pointBefore);
+        const livePoint = await page.evaluate(() => ({ ...window.__objectVectorStudioV2App.selectedShape().geometry.points[0] }));
+        await expect(page.locator("#objectVectorStudioV2ObjectDetails [data-polygon-point-index='0'][data-polygon-point-axis='x']")).toHaveValue(String(livePoint.x));
+        await expect(page.locator("#objectVectorStudioV2ObjectDetails [data-polygon-point-index='0'][data-polygon-point-axis='y']")).toHaveValue(String(livePoint.y));
+        await expect.poll(async () => page.locator("#objectVectorStudioV2RenderSurface [data-shape-index='0']").getAttribute("points")).not.toBe(pointsBefore);
+        await expect.poll(async () => {
+          const box = await handle.boundingBox();
+          return box ? { x: Math.round(box.x), y: Math.round(box.y) } : null;
+        }).not.toEqual({ x: Math.round(handleBoxBefore.x), y: Math.round(handleBoxBefore.y) });
+        const dirtyWhileDragging = await readObjectVectorWorkspaceSession(page);
+        expect(dirtyWhileDragging.dirty.isDirty).toBe(true);
+        await page.mouse.up();
         const pointAfter = await page.evaluate(() => ({ ...window.__objectVectorStudioV2App.selectedShape().geometry.points[0] }));
         expect(pointAfter).not.toEqual(pointBefore);
       });

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

@@ -182,17 +182,9 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
                 <span class="object-vector-studio-v2__shape-icon object-vector-studio-v2__shape-icon--select" aria-hidden="true"></span>
                 <span class="object-vector-studio-v2__tool-label">Select</span>
               </button>
-              <button class="object-vector-studio-v2__tool-toggle" type="button" aria-pressed="false" data-shape-tool="triangle" title="Create a triangle shape on the selected object">
-                <span class="object-vector-studio-v2__shape-icon object-vector-studio-v2__shape-icon--triangle" aria-hidden="true"></span>
-                <span class="object-vector-studio-v2__tool-label">Triangle</span>
-              </button>
-              <button class="object-vector-studio-v2__tool-toggle" type="button" aria-pressed="false" data-shape-tool="rectangle" title="Create a rectangle shape on the selected object">
-                <span class="object-vector-studio-v2__shape-icon object-vector-studio-v2__shape-icon--rectangle" aria-hidden="true"></span>
-                <span class="object-vector-studio-v2__tool-label">Rectangle</span>
-              </button>
-              <button class="object-vector-studio-v2__tool-toggle" type="button" aria-pressed="false" data-shape-tool="square" title="Create a square shape on the selected object">
-                <span class="object-vector-studio-v2__shape-icon object-vector-studio-v2__shape-icon--square" aria-hidden="true"></span>
-                <span class="object-vector-studio-v2__tool-label">Square</span>
+              <button class="object-vector-studio-v2__tool-toggle" type="button" aria-pressed="false" data-shape-tool="arc" title="Create an arc shape on the selected object">
+                <span class="object-vector-studio-v2__shape-icon object-vector-studio-v2__shape-icon--arc" aria-hidden="true"></span>
+                <span class="object-vector-studio-v2__tool-label">Arc</span>
               </button>
               <button class="object-vector-studio-v2__tool-toggle" type="button" aria-pressed="false" data-shape-tool="circle" title="Create a circle shape on the selected object">
                 <span class="object-vector-studio-v2__shape-icon object-vector-studio-v2__shape-icon--circle" aria-hidden="true"></span>
@@ -210,9 +202,17 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
                 <span class="object-vector-studio-v2__shape-icon object-vector-studio-v2__shape-icon--polygon" aria-hidden="true"></span>
                 <span class="object-vector-studio-v2__tool-label">Polygon</span>
               </button>
-              <button class="object-vector-studio-v2__tool-toggle" type="button" aria-pressed="false" data-shape-tool="arc" title="Create an arc shape on the selected object">
-                <span class="object-vector-studio-v2__shape-icon object-vector-studio-v2__shape-icon--arc" aria-hidden="true"></span>
-                <span class="object-vector-studio-v2__tool-label">Arc</span>
+              <button class="object-vector-studio-v2__tool-toggle" type="button" aria-pressed="false" data-shape-tool="rectangle" title="Create a rectangle shape on the selected object">
+                <span class="object-vector-studio-v2__shape-icon object-vector-studio-v2__shape-icon--rectangle" aria-hidden="true"></span>
+                <span class="object-vector-studio-v2__tool-label">Rectangle</span>
+              </button>
+              <button class="object-vector-studio-v2__tool-toggle" type="button" aria-pressed="false" data-shape-tool="square" title="Create a square shape on the selected object">
+                <span class="object-vector-studio-v2__shape-icon object-vector-studio-v2__shape-icon--square" aria-hidden="true"></span>
+                <span class="object-vector-studio-v2__tool-label">Square</span>
+              </button>
+              <button class="object-vector-studio-v2__tool-toggle" type="button" aria-pressed="false" data-shape-tool="triangle" title="Create a triangle shape on the selected object">
+                <span class="object-vector-studio-v2__shape-icon object-vector-studio-v2__shape-icon--triangle" aria-hidden="true"></span>
+                <span class="object-vector-studio-v2__tool-label">Triangle</span>
               </button>
               <button class="object-vector-studio-v2__tool-toggle" type="button" aria-pressed="false" data-shape-tool="text" title="Create a text shape on the selected object">
                 <span class="object-vector-studio-v2__shape-icon object-vector-studio-v2__shape-icon--text" aria-hidden="true"></span>
@@ -222,7 +222,7 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
             <hr class="object-vector-studio-v2__separator">
             <div class="object-vector-studio-v2__snap-actions" aria-label="Snap controls">
               <button id="objectVectorStudioV2GridSnapButton" type="button" aria-pressed="false" title="Snap move and resize edits to the grid">Grid Snap</button>
-              <button id="objectVectorStudioV2AngleSnapButton" type="button" aria-pressed="false" title="Snap rotation edits to 15 degree increments">Angle Snap</button>
+              <button id="objectVectorStudioV2AngleSnapButton" type="button" aria-pressed="false" title="When enabled, the Rotate action rounds the entered rotation delta to 15 degree increments.">Angle Snap</button>
               <button id="objectVectorStudioV2GridRenderButton" type="button" aria-pressed="false" title="Show or hide the preview grid">Grid</button>
               <button id="objectVectorStudioV2ToolLabelModeButton" type="button" aria-pressed="false" title="Toggle shape tool labels between icon-only and icon plus text">Icon/Text</button>
             </div>