Fix Object Vector V2 snap-to-grid point dragging and coordinate mapping - PR_26133_103-object-vector-snap-drag-fix

Author: DavidQ

docs/dev/reports/PR_26133_103-object-vector-snap-drag-fix_report.md

@@ -0,0 +1,64 @@
+# PR_26133_103 Object Vector Snap Drag Fix
+
+## Scope
+- Read `docs/dev/PROJECT_INSTRUCTIONS.md` before implementation.
+- Used `tmp/PR_26133_102-object-vector-scale-anchor-fix_delta.zip` as the prior reference.
+- Kept changes limited to Object Vector Studio V2 snap/drag coordinate correction and focused Workspace V2 coverage.
+
+## Implementation
+- Fixed geometry point drag snapping so handle movement is target-based instead of `original point + snapped pointer delta`.
+- Geometry point and line endpoint drags now:
+  - preserve the pointer grab offset from the transformed handle point,
+  - snap the intended handle target through Snap Grid / Snap Point / Snap None,
+  - convert the snapped world/object point back through the original shape transform with `localPointFromTransformedPoint`,
+  - update the underlying local geometry so the visible grabbed point lands on the exact snap target.
+- This corrects off-grid start overshoot and transformed shape scale/zoom mapping drift.
+- Point coordinate UI rows now render fixed three-decimal values such as `47.000` for snapped whole-number coordinates while stored geometry remains numeric.
+
+## Playwright Impact
+Playwright impacted: Yes.
+
+Validated behavior:
+- Snap Grid point drag from an off-grid polygon point lands exactly on whole-number coordinates.
+- Dragged polygon point row displays snapped coordinates as fixed three-decimal values.
+- Scaled line endpoint drag converts cursor movement through the shape transform so the rendered endpoint lands exactly on the snapped target.
+- Existing preview coordinate grid mapping, mouse editing, and dirty-state flows continue to pass.
+
+Expected pass behavior:
+- The dragged point tracks the cursor target and snaps without overshoot.
+- Transformed/scaled endpoints visually land on the snapped grid coordinate.
+- Workspace V2 suite remains green.
+
+Expected fail behavior:
+- A regression would leave polygon point values offset from the snap point, or a scaled line endpoint rendered away from the snapped target.
+
+## Validation
+- PASS: `node --check tools\object-vector-studio-v2\js\ToolStarterApp.js`
+- PASS: `node --check tests\playwright\tools\WorkspaceManagerV2.spec.mjs`
+- PASS: targeted Object Vector V2 snap/drag validation:
+  - `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --project=playwright --workers=1 --reporter=list -g "edits Object Vector Studio V2 preview shapes with mouse actions and tile delete controls|maps Object Vector Studio V2 preview coordinates directly to visible grid lines"`
+  - Result: 2 passed.
+- PASS: targeted dirty-state validation:
+  - `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --project=playwright --workers=1 --reporter=list -g "tracks Object Vector Studio V2 dirty state through persisted edits and save outcomes"`
+  - Result: 1 passed.
+- PASS: `npm run test:workspace-v2`
+  - Result: 56 passed.
+- PASS: `git diff --check -- tools/object-vector-studio-v2/js/ToolStarterApp.js tests/playwright/tools/WorkspaceManagerV2.spec.mjs`
+  - Only CRLF warning for the existing WorkspaceManagerV2 Playwright test file.
+
+## Manual Validation Steps
+1. Open Object Vector Studio V2 and select an object with polygon or line geometry.
+2. Set Snap mode to Snap Grid.
+3. Drag an off-grid polygon point handle to a nearby grid intersection.
+4. Verify the geometry point lands on the exact snapped coordinate and the point row shows values like `47.000` / `10.000`.
+5. Scale a shape, then drag a line endpoint handle.
+6. Verify the rendered endpoint tracks the cursor and lands exactly on the snapped target instead of moving too far or too little.
+
+## Full Samples Smoke Test
+Skipped per PR_26133_103 instructions; this change is scoped to Object Vector Studio V2 snap/drag behavior.
+
+## PR103 Delta Stat vs PR102 ZIP Baseline
+```
+tools/object-vector-studio-v2/js/ToolStarterApp.js: +54 -20
+tests/playwright/tools/WorkspaceManagerV2.spec.mjs: +73 -16
+```

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -147,6 +147,28 @@ async function dragObjectVectorLogicalPoints(page, start, end) {
   }, { endPoint, startPoint });
 }
 
+async function dragObjectVectorHandleToLogicalPoint(page, selector, start, end) {
+  const startPoint = await objectVectorLogicalClientPoint(page, start.x, start.y);
+  const endPoint = await objectVectorLogicalClientPoint(page, end.x, end.y);
+  await page.evaluate(({ endPoint, selector, startPoint }) => {
+    const handle = document.querySelector(selector);
+    if (!handle) {
+      throw new Error(`Missing Object Vector handle: ${selector}`);
+    }
+    const pointerInit = {
+      bubbles: true,
+      button: 0,
+      buttons: 1,
+      cancelable: true,
+      pointerId: 1,
+      pointerType: "mouse"
+    };
+    handle.dispatchEvent(new PointerEvent("pointerdown", { ...pointerInit, clientX: startPoint.x, clientY: startPoint.y }));
+    window.dispatchEvent(new PointerEvent("pointermove", { ...pointerInit, clientX: endPoint.x, clientY: endPoint.y }));
+    window.dispatchEvent(new PointerEvent("pointerup", { ...pointerInit, buttons: 0, clientX: endPoint.x, clientY: endPoint.y }));
+  }, { endPoint, selector, startPoint });
+}
+
 async function mouseDragObjectVectorLogicalPoints(page, start, end) {
   const startPoint = await objectVectorLogicalClientPoint(page, start.x, start.y);
   const endPoint = await objectVectorLogicalClientPoint(page, end.x, end.y);
@@ -4544,10 +4566,10 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         x: row.querySelector("[data-polygon-point-axis='x']").value,
         y: row.querySelector("[data-polygon-point-axis='y']").value
       })))).toEqual([
-        { label: "Point 1", rounded: false, x: "0", y: "-18" },
-        { label: "Point 2", rounded: false, x: "14", y: "16" },
-        { label: "Point 3", rounded: false, x: "0", y: "8" },
-        { label: "Point 4", rounded: false, x: "-14", y: "16" }
+        { label: "Point 1", rounded: false, x: "0.000", y: "-18.000" },
+        { label: "Point 2", rounded: false, x: "14.000", y: "16.000" },
+        { label: "Point 3", rounded: false, x: "0.000", y: "8.000" },
+        { label: "Point 4", rounded: false, x: "-14.000", y: "16.000" }
       ]);
       const polygonPointListLayout = await page.locator("#objectVectorStudioV2ShapeGeometryDetails .object-vector-studio-v2__polygon-point-list").evaluate((list) => ({
         headingMarginBottom: Number.parseFloat(getComputedStyle(list.previousElementSibling).marginBottom),
@@ -4679,11 +4701,11 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         y: row.querySelector("[data-polygon-point-axis='y']").value,
         selected: row.dataset.polygonPointActionSelected === "true"
       })))).toEqual([
-        { label: "Point 1", rounded: false, x: "0", y: "-18", selected: false },
-        { label: "Point 2", rounded: true, x: "14", y: "16", selected: false },
-        { label: "Point 3", rounded: true, x: "14", y: "16", selected: false },
-        { label: "Point 4", rounded: false, x: "0", y: "8", selected: false },
-        { label: "Point 5", rounded: false, x: "-14", y: "16", selected: false }
+        { label: "Point 1", rounded: false, x: "0.000", y: "-18.000", selected: false },
+        { label: "Point 2", rounded: true, x: "14.000", y: "16.000", selected: false },
+        { label: "Point 3", rounded: true, x: "14.000", y: "16.000", selected: false },
+        { label: "Point 4", rounded: false, x: "0.000", y: "8.000", selected: false },
+        { label: "Point 5", rounded: false, x: "-14.000", y: "16.000", selected: false }
       ]);
       await expect(page.locator("#statusLog")).toHaveValue(/OK Added copied point after point 2 for shape row 0\./);
       await expect.poll(() => page.evaluate(() => window.__objectVectorStudioV2App.selectedShape().geometry.points.length)).toBe(5);
@@ -4699,10 +4721,10 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         y: row.querySelector("[data-polygon-point-axis='y']").value,
         selected: row.dataset.polygonPointActionSelected === "true"
       })))).toEqual([
-        { label: "Point 1", rounded: false, x: "0", y: "-18", selected: false },
-        { label: "Point 2", rounded: true, x: "14", y: "16", selected: false },
-        { label: "Point 3", rounded: false, x: "0", y: "8", selected: false },
-        { label: "Point 4", rounded: false, x: "-14", y: "16", selected: false }
+        { label: "Point 1", rounded: false, x: "0.000", y: "-18.000", selected: false },
+        { label: "Point 2", rounded: true, x: "14.000", y: "16.000", selected: false },
+        { label: "Point 3", rounded: false, x: "0.000", y: "8.000", selected: false },
+        { label: "Point 4", rounded: false, x: "-14.000", y: "16.000", selected: false }
       ]);
       await expect.poll(() => page.locator("#objectVectorStudioV2ShapeGeometryDetails .object-vector-studio-v2__polygon-point-field").evaluateAll((rows) => rows.every((row) => row.dataset.polygonPointActionSelected !== "true"))).toBe(true);
       await expect(page.locator("#statusLog")).toHaveValue(/OK Deleted point 3 from shape row 0\./);
@@ -5241,14 +5263,49 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       expect(lineAfterEndpoint.geometry.point2.y).not.toBe(lineBeforeEndpoint.geometry.point2.y);
       await expect(page.locator("#statusLog")).toHaveValue(/OK Moved line end for shape row 1\./);
 
+      const scaledLineStart = await page.evaluate(() => {
+        const app = window.__objectVectorStudioV2App;
+        const line = app.selectedObject().shapes[1];
+        line.geometry.point2 = { x: -10.4, y: 30.4 };
+        line.transform = { shapeOrigin: { x: 0, y: 0 }, rotation: 0, scaleX: 2, scaleY: 2, x: 0, y: 0 };
+        app.setSnapMode("grid", "Snap Grid");
+        app.selectShape(1, "scaled snap drag validation");
+        return app.transformedPoint(line.geometry.point2, line.transform);
+      });
+      await dragObjectVectorHandleToLogicalPoint(page, "#objectVectorStudioV2RenderSurface [data-line-endpoint='end']", scaledLineStart, { x: -15.2, y: 55.8 });
+      const scaledLineSnapDrag = await page.evaluate(() => {
+        const app = window.__objectVectorStudioV2App;
+        const line = app.selectedObject().shapes[1];
+        return {
+          geometryPoint: line.geometry.point2,
+          renderedPoint: app.transformedPoint(line.geometry.point2, line.transform)
+        };
+      });
+      expect(scaledLineSnapDrag).toEqual({
+        geometryPoint: { x: -7.5, y: 28 },
+        renderedPoint: { x: -15, y: 56 }
+      });
+
       await page.locator("#objectVectorStudioV2RenderSurface [data-shape-index='2']").click();
       await expect(page.locator("#objectVectorStudioV2RenderSurface [data-geometry-point-kind='polygon-point']")).toHaveCount(4);
+      await page.evaluate(() => {
+        const app = window.__objectVectorStudioV2App;
+        const polygon = app.selectedObject().shapes[2];
+        polygon.geometry.points[1] = { x: 42.4, y: 12.4 };
+        app.setSnapMode("grid", "Snap Grid");
+        app.selectShape(2, "off-grid point snap validation");
+      });
+      await dragObjectVectorHandleToLogicalPoint(page, "#objectVectorStudioV2RenderSurface [data-geometry-point-handle='polygon-1']", { x: 42.4, y: 12.4 }, { x: 47.2, y: 9.7 });
+      const polygonSnapDrag = await shapeSnapshot(2);
+      expect(polygonSnapDrag.geometry.points[1]).toEqual({ x: 47, y: 10 });
+      await expect(page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-point-index='1'][data-polygon-point-axis='x']")).toHaveValue("47.000");
+      await expect(page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-point-index='1'][data-polygon-point-axis='y']")).toHaveValue("10.000");
       const polygonBeforePointDrag = await shapeSnapshot(2);
       await dragLocator("#objectVectorStudioV2RenderSurface [data-geometry-point-handle='polygon-1']", 24, -16);
       const polygonAfterPointDrag = await shapeSnapshot(2);
       expect(polygonAfterPointDrag.geometry.points[1].x).not.toBe(polygonBeforePointDrag.geometry.points[1].x);
       expect(polygonAfterPointDrag.geometry.points[1].y).not.toBe(polygonBeforePointDrag.geometry.points[1].y);
-      await expect(page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-point-index='1'][data-polygon-point-axis='x']")).toHaveValue(String(polygonAfterPointDrag.geometry.points[1].x));
+      await expect(page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-point-index='1'][data-polygon-point-axis='x']")).toHaveValue(polygonAfterPointDrag.geometry.points[1].x.toFixed(3));
       await expect(page.locator("#statusLog")).toHaveValue(/OK Moved geometry point 2 for shape row 2\./);
       const polygonBeforeBoundsDrag = await shapeSnapshot(2);
       await dragLocator("#objectVectorStudioV2RenderSurface [data-resize-handle='se']", 18, 14);
@@ -10836,8 +10893,8 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         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("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-point-index='0'][data-polygon-point-axis='x']")).toHaveValue(String(livePoint.x));
-        await expect(page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-point-index='0'][data-polygon-point-axis='y']")).toHaveValue(String(livePoint.y));
+        await expect(page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-point-index='0'][data-polygon-point-axis='x']")).toHaveValue(livePoint.x.toFixed(3));
+        await expect(page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-point-index='0'][data-polygon-point-axis='y']")).toHaveValue(livePoint.y.toFixed(3));
         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();