Apply Snap Angle during drawing and limit free coordinates to three decimals - PR_26133_086-snap-angle-drawing-and-coordinate-formatting

Author: DavidQ

docs/dev/reports/playwright_v8_coverage_report.md

@@ -1,6 +1,6 @@
-# Playwright V8 Coverage Report
+# Playwright V8 Coverage Report
 
-PR: PR_26133_085-rounding-radius-rectangle-square-and-palette-picker-placement
+PR: PR_26133_086-snap-angle-drawing-and-coordinate-formatting
 
 Source: docs/dev/reports/playwright_v8_coverage_report.txt generated by the latest npm run test:workspace-v2 run.
 
@@ -21,10 +21,9 @@ Source: docs/dev/reports/playwright_v8_coverage_report.txt generated by the late
 
 ## Changed Runtime JS Files Covered
 
-- (95%) tools/object-vector-studio-v2/js/ToolStarterApp.js - executed lines 7391/7391; executed functions 738/776
+- (95%) tools/object-vector-studio-v2/js/ToolStarterApp.js - executed lines 7440/7440; executed functions 743/781
 
 ## Changed JS Files Considered
 
-- (95%) tools/object-vector-studio-v2/js/ToolStarterApp.js - Object Vector Studio V2 runtime covered by browser V8 coverage while radius-based rectangle/square rounding, Snap Angle UI hiding, and Palette Picker sampling were exercised.
-- (0%) tools/object-vector-studio-v2/styles/toolStarter.css - CSS layout file, not collected as browser JS coverage.
+- (95%) tools/object-vector-studio-v2/js/ToolStarterApp.js - Object Vector Studio V2 runtime covered by browser V8 coverage while Snap None 3-decimal coordinate creation, Snap Angle drawing constraints, and Palette Picker placement were exercised.
 - (0%) tests/playwright/tools/WorkspaceManagerV2.spec.mjs - Playwright test file, not collected as browser runtime coverage.

docs/dev/reports/playwright_workspace_v2_results.md

@@ -1,25 +1,23 @@
-# Playwright Workspace V2 Results
+# Playwright Workspace V2 Results
 
-PR: PR_26133_085-rounding-radius-rectangle-square-and-palette-picker-placement
+PR: PR_26133_086-snap-angle-drawing-and-coordinate-formatting
 
 ## Validation
 
 - PASS: npm run test:workspace-v2
 - Result: 54 passed
-- Runtime: 4.3m
+- Runtime: 5.4m
 - Browser project: playwright
 - Workers: 1
 
 ## Targeted Checks Covered
 
-- Rectangle point rounding now renders through a rounded SVG path and updates when Rounding Radius changes.
-- Square point rounding now renders through the same rounded rectangle path behavior while preserving equal width and height.
-- Invalid negative Rounding Radius values are visibly rejected and do not mutate the selected shape style.
-- Existing arc endpoint rounding and polygon/polyline/triangle point rounding coverage remained green.
-- Snap Angle disabled shows the Rotate numeric textbox while the dropdown and Step selector are hidden.
-- Snap Angle enabled hides the Rotate numeric textbox while showing the constrained dropdown and Step selector.
-- Palette primary row now contains Paint, Stroke, Width, and an icon-only Picker button to the right of Stroke controls.
-- Picker behavior still samples fill, stroke, opacities, and stroke width from a clicked shape without recoloring it.
+- Snap None shape creation stores geometry coordinates with no more than 3 decimal places.
+- Snap Angle enabled at 45 degrees constrains committed Line creation segments.
+- Snap Angle enabled at 45 degrees constrains committed Polyline creation segments from the prior point.
+- Snap Angle enabled at 45 degrees constrains committed Polygon creation segments from the prior point.
+- Snap Grid and Snap Point creation checks remain green.
+- Palette primary row order is Paint, Picker, Stroke, Width, with Picker kept icon-only.
 
 ## Console/Runtime Errors
 

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -2023,7 +2023,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
           opacityLabels: Array.from(opacityRow.querySelectorAll("label > span")).map((label) => label.textContent.trim()),
           opacityOrder: Array.from(opacityRow.children).map((element) => element.textContent.trim().replace(/\s+/g, " ")),
           pickerIconOnly: content.querySelector("#objectVectorStudioV2PalettePickerButton").textContent.trim() === "",
-          pickerRightOfStrokeControls: pickerButton.left >= strokeButton.right && pickerButton.left >= widthLabel.right,
+          pickerBetweenPaintAndStroke: pickerButton.left >= paintButton.right && pickerButton.right <= strokeButton.left,
           primaryInline: [strokeButton, widthLabel, pickerButton].every((rect) => Math.abs((paintButton.top + paintButton.height / 2) - (rect.top + rect.height / 2)) < 4),
           primaryOrder: Array.from(primaryRow.children).map((element) => element.matches("label") ? element.querySelector("span").textContent.trim() : (element.getAttribute("aria-label") || element.textContent).trim()),
           widthInputFitsXxDotX: Math.round(widthInput.width) >= 58,
@@ -2042,9 +2042,9 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         opacityLabels: ["Fill", "Stroke"],
         opacityOrder: ["Opacity", "Fill", "Stroke"],
         pickerIconOnly: true,
-        pickerRightOfStrokeControls: true,
+        pickerBetweenPaintAndStroke: true,
         primaryInline: true,
-        primaryOrder: ["Paint", "Stroke", "Width", "Picker"],
+        primaryOrder: ["Paint", "Picker", "Stroke", "Width"],
         widthInputFitsXxDotX: true,
         widthIsRightOfStroke: true
       });
@@ -3829,6 +3829,78 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await drawObjectVectorShape(page, "line", [{ x: 5.25, y: 6.5 }, { x: 7.75, y: 8.25 }]);
       const unsnappedLine = await page.evaluate(() => window.__objectVectorStudioV2App.selectedShape().geometry);
       expect(unsnappedLine).toEqual({ point1: { x: 5.25, y: 6.5 }, point2: { x: 7.75, y: 8.25 } });
+      await drawObjectVectorShape(page, "line", [{ x: 5.1234, y: 6.5678 }, { x: 7.9876, y: 8.5432 }]);
+      const snapNoneFormattedLine = await page.evaluate(() => {
+        const geometry = window.__objectVectorStudioV2App.selectedShape().geometry;
+        const decimalLength = (value) => {
+          const [, decimals = ""] = String(value).split(".");
+          return decimals.length;
+        };
+        return {
+          geometry,
+          maxDecimals: Math.max(
+            decimalLength(geometry.point1.x),
+            decimalLength(geometry.point1.y),
+            decimalLength(geometry.point2.x),
+            decimalLength(geometry.point2.y)
+          )
+        };
+      });
+      expect(snapNoneFormattedLine.geometry.point1.x).toBeCloseTo(5.123, 3);
+      expect(snapNoneFormattedLine.geometry.point1.y).toBeCloseTo(6.568, 3);
+      expect(snapNoneFormattedLine.geometry.point2.x).toBeCloseTo(7.988, 3);
+      expect(snapNoneFormattedLine.geometry.point2.y).toBeCloseTo(8.543, 3);
+      expect(snapNoneFormattedLine.maxDecimals).toBeLessThanOrEqual(3);
+
+      await page.locator("#objectVectorStudioV2AngleSnapButton").click();
+      await expect(page.locator("#objectVectorStudioV2AngleSnapButton")).toHaveAttribute("aria-pressed", "true");
+      await page.locator("#objectVectorStudioV2SnapAngleStepSelect").selectOption("45");
+      await drawObjectVectorShape(page, "line", [{ x: 0, y: 0 }, { x: 10, y: 3 }]);
+      await drawObjectVectorShape(page, "polyline", [{ x: 20, y: 0 }, { x: 30, y: 3 }, { x: 38, y: 10 }]);
+      await drawObjectVectorShape(page, "polygon", [{ x: -30, y: 0 }, { x: -20, y: 3 }, { x: -12, y: 11 }, { x: -30, y: 14 }]);
+      const angleSnappedDrawing = await page.evaluate(() => {
+        const app = window.__objectVectorStudioV2App;
+        const shapeByTool = (tool) => [...app.selectedObject().shapes].reverse().find((shape) => shape.tool === tool);
+        const pointsForShape = (shape) => shape.tool === "line" ? [shape.geometry.point1, shape.geometry.point2] : shape.geometry.points;
+        const decimalLength = (value) => {
+          const [, decimals = ""] = String(value).split(".");
+          return decimals.length;
+        };
+        const segmentSnapsToStep = (start, end, step) => {
+          const dx = end.x - start.x;
+          const dy = end.y - start.y;
+          const degrees = ((Math.atan2(dy, dx) * 180 / Math.PI) % 360 + 360) % 360;
+          const nearest = Math.round(degrees / step) * step;
+          const wrappedDelta = Math.abs(((degrees - nearest + 540) % 360) - 180);
+          return wrappedDelta < 0.05;
+        };
+        const collect = (tool) => {
+          const shape = shapeByTool(tool);
+          const points = pointsForShape(shape);
+          const coordinates = points.flatMap((point) => [point.x, point.y]);
+          return {
+            geometry: shape.geometry,
+            maxDecimals: Math.max(...coordinates.map(decimalLength)),
+            segmentAnglesSnapped: points.slice(1).map((point, index) => segmentSnapsToStep(points[index], point, 45))
+          };
+        };
+        return {
+          angleStep: app.angleSnapStep,
+          line: collect("line"),
+          polygon: collect("polygon"),
+          polyline: collect("polyline")
+        };
+      });
+      expect(angleSnappedDrawing.angleStep).toBe(45);
+      expect(angleSnappedDrawing.line.segmentAnglesSnapped).toEqual([true]);
+      expect(angleSnappedDrawing.polyline.segmentAnglesSnapped).toEqual([true, true]);
+      expect(angleSnappedDrawing.polygon.segmentAnglesSnapped).toEqual([true, true, true]);
+      expect(angleSnappedDrawing.line.maxDecimals).toBeLessThanOrEqual(3);
+      expect(angleSnappedDrawing.polyline.maxDecimals).toBeLessThanOrEqual(3);
+      expect(angleSnappedDrawing.polygon.maxDecimals).toBeLessThanOrEqual(3);
+      await page.locator("#objectVectorStudioV2AngleSnapButton").click();
+      await expect(page.locator("#objectVectorStudioV2AngleSnapButton")).toHaveAttribute("aria-pressed", "false");
+
       await page.locator("#objectVectorStudioV2SnapModeButton").click();
       await expect(page.locator("#objectVectorStudioV2SnapModeButton")).toHaveText("Snap Grid");
       await expect(page.locator("#objectVectorStudioV2SnapModeButton")).toHaveAttribute("data-snap-mode", "grid");

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

@@ -177,6 +177,9 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
                   <span class="object-vector-studio-v2__palette-mode-swatch" data-palette-mode-swatch="paint" aria-hidden="true"></span>
                   <span class="object-vector-studio-v2__palette-mode-label">Paint</span>
                 </button>
+                <button id="objectVectorStudioV2PalettePickerButton" class="object-vector-studio-v2__palette-picker-button" type="button" aria-pressed="false" data-shape-tool="picker" title="Sample a shape style into Palette controls" aria-label="Picker">
+                  <span class="object-vector-studio-v2__shape-icon object-vector-studio-v2__shape-icon--picker" aria-hidden="true"></span>
+                </button>
                 <button id="objectVectorStudioV2StrokeModeButton" type="button" aria-pressed="false">
                   <span class="object-vector-studio-v2__palette-mode-swatch" data-palette-mode-swatch="stroke" aria-hidden="true"></span>
                   <span class="object-vector-studio-v2__palette-mode-label">Stroke</span>
@@ -185,9 +188,6 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
                   <span>Width</span>
                   <input id="objectVectorStudioV2StrokeWidth" type="number" min="0.1" step="0.1" value="2">
                 </label>
-                <button id="objectVectorStudioV2PalettePickerButton" class="object-vector-studio-v2__palette-picker-button" type="button" aria-pressed="false" data-shape-tool="picker" title="Sample a shape style into Palette controls" aria-label="Picker">
-                  <span class="object-vector-studio-v2__shape-icon object-vector-studio-v2__shape-icon--picker" aria-hidden="true"></span>
-                </button>
               </div>
               <div class="object-vector-studio-v2__palette-opacity-row">
                 <span class="object-vector-studio-v2__palette-opacity-heading">Opacity</span>

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

@@ -3324,6 +3324,13 @@ export class ToolStarterApp {
     return nearest?.point || null;
   }
 
+  normalizeDrawingPoint(point) {
+    return {
+      x: this.formatViewportNumber(point?.x || 0),
+      y: this.formatViewportNumber(point?.y || 0)
+    };
+  }
+
   snapCanvasPoint(point, options = {}) {
     if (this.snapMode === "grid") {
       return {
@@ -3340,7 +3347,54 @@ export class ToolStarterApp {
         };
       }
     }
-    return point;
+    return this.normalizeDrawingPoint(point);
+  }
+
+  supportsDrawingAngleSnap(tool) {
+    return ["line", "polygon", "polyline"].includes(tool);
+  }
+
+  drawingAngleSnapAnchor(drawing) {
+    if (!drawing || !this.supportsDrawingAngleSnap(drawing.tool)) {
+      return null;
+    }
+    if (drawing.flow === "two-click") {
+      return drawing.start || null;
+    }
+    if (drawing.flow === "points") {
+      return drawing.points.at(-1) || null;
+    }
+    return null;
+  }
+
+  snapPointToDrawingAngle(anchor, point) {
+    const normalizedAnchor = this.normalizeDrawingPoint(anchor);
+    const normalizedPoint = this.normalizeDrawingPoint(point);
+    const dx = normalizedPoint.x - normalizedAnchor.x;
+    const dy = normalizedPoint.y - normalizedAnchor.y;
+    const distance = Math.hypot(dx, dy);
+    if (!distance) {
+      return normalizedPoint;
+    }
+    const degrees = Math.atan2(dy, dx) * 180 / Math.PI;
+    const snappedDegrees = this.snapAngle(degrees);
+    const radians = snappedDegrees * Math.PI / 180;
+    return {
+      x: this.formatViewportNumber(normalizedAnchor.x + Math.cos(radians) * distance),
+      y: this.formatViewportNumber(normalizedAnchor.y + Math.sin(radians) * distance)
+    };
+  }
+
+  snapDrawingPoint(point, drawing, options = {}) {
+    const snappedPoint = this.snapCanvasPoint(point, options);
+    if (!this.angleSnapEnabled) {
+      return this.normalizeDrawingPoint(snappedPoint);
+    }
+    const anchor = this.drawingAngleSnapAnchor(drawing);
+    if (!anchor) {
+      return this.normalizeDrawingPoint(snappedPoint);
+    }
+    return this.snapPointToDrawingAngle(anchor, snappedPoint);
   }
 
   createSvgShape(shape, { drawingScale = 1 } = {}) {
@@ -4290,7 +4344,7 @@ export class ToolStarterApp {
     }
     event.preventDefault();
     event.stopPropagation();
-    const point = this.snapCanvasPoint(this.pointerPreviewPoint(event));
+    const point = this.snapDrawingPoint(this.pointerPreviewPoint(event), drawing);
     this.drawingPreviewPoint = point;
     this.drawingHintClientPoint = { x: event.clientX, y: event.clientY };
     if (drawing.flow === "points") {
@@ -4328,7 +4382,7 @@ export class ToolStarterApp {
     if (drawing.flow === "two-click" && !drawing.start) {
       return;
     }
-    const point = this.snapCanvasPoint(this.pointerPreviewPoint(event));
+    const point = this.snapDrawingPoint(this.pointerPreviewPoint(event), drawing);
     if (drawing.preview && Math.abs(point.x - drawing.preview.x) < 0.001 && Math.abs(point.y - drawing.preview.y) < 0.001) {
       return;
     }