Refine snap colors point style controls and angled square cap rendering - PR_26133_076-snap-angle-disabled-colors-and-point-style-refinement

Author: DavidQ

docs/dev/reports/playwright_v8_coverage_report.md

@@ -1,6 +1,6 @@
 # Playwright V8 Coverage Report
 
-PR: PR_26133_075-shape-geometry-rounding-and-terminology-normalization
+PR: PR_26133_076-snap-angle-disabled-colors-and-point-style-refinement
 
 Source: docs/dev/reports/playwright_v8_coverage_report.txt generated by the latest npm run test:workspace-v2 run.
 
@@ -22,7 +22,7 @@ Source: docs/dev/reports/playwright_v8_coverage_report.txt generated by the late
 ## Changed Runtime JS Files Covered
 
 - (83%) tools/object-vector-studio-v2/js/bootstrap.js - executed lines 109/109; executed functions 5/6
-- (96%) tools/object-vector-studio-v2/js/ToolStarterApp.js - executed lines 6825/6825; executed functions 688/719
+- (96%) tools/object-vector-studio-v2/js/ToolStarterApp.js - executed lines 6855/6855; executed functions 689/720
 
 ## Changed JS Files Considered
 

docs/dev/reports/playwright_workspace_v2_results.md

@@ -1,23 +1,23 @@
 # Playwright Workspace V2 Results
 
-PR: PR_26133_075-shape-geometry-rounding-and-terminology-normalization
+PR: PR_26133_076-snap-angle-disabled-colors-and-point-style-refinement
 
 ## Validation
 
 - PASS: npm run test:workspace-v2
 - Result: 54 passed
-- Runtime: 5.3m
+- Runtime: 4.6m
 - Browser project: playwright
 - Workers: 1
 
 ## Targeted Checks Covered
 
-- Object Vector Studio V2 UI and tests use Shape Geometry terminology instead of Object Geometry.
-- Palette no longer exposes the old End stroke control; stroke width remains in Palette.
-- Shape Geometry renders Point Style for closed cornered shapes and Start/End Point Style for open-ended shapes.
-- Closed shape point style changes update rendered joins, and open-ended line styles render separate start/end point cap markers.
-- Group summary remains below the point-style controls in Shape Geometry.
-- Existing polygon/polyline creation, Enter completion, and runtime error coverage remain green.
+- Snap control naming uses Snap Angle, including title, button text, aria label, and status log output.
+- Inactive Shape/Tools and Snap Angle icons share one disabled/inactive color; Snap None uses the same color.
+- Snap Point button color matches visible point snap target circles.
+- Shape Geometry Point Style UI renders Start, Joints, and End controls, with line/arc joints disabled and polyline joints wired.
+- Angled square line caps render as rotated markers aligned to the line angle instead of detached axis-aligned rectangles.
+- Palette accordion/content sizing collapses to the control content without the old empty bottom space.
 
 ## Console/Runtime Errors
 

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -1520,6 +1520,10 @@ test.describe("Workspace Manager V2 bootstrap", () => {
             render: icon("#objectVectorStudioV2GridRenderButton"),
             snap: icon("#objectVectorStudioV2SnapModeButton")
           },
+          inactiveIconColors: {
+            inactiveRectangle: getComputedStyle(document.querySelector("[data-shape-tool='rectangle'] .object-vector-studio-v2__shape-icon")).color,
+            snapAngle: getComputedStyle(document.querySelector("#objectVectorStudioV2AngleSnapButton")).color
+          },
           modeButtons: {
             paint: {
               iconOrder: getComputedStyle(document.querySelector("#objectVectorStudioV2PaintModeButton"), "::before").order,
@@ -1684,20 +1688,22 @@ 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: "Angle Snap is wired to Object Transform Rotate. Enable it before pressing Rotate to round the entered rotation delta to 15 degree increments.",
+        angle: "Snap Angle is wired to Object Transform Rotate. Enable it before pressing Rotate to round the entered rotation delta to 15 degree increments.",
         grid: "Show or hide the preview grid",
         polygon: "Create a polygon shape on the selected object. Click to add points.\n\nDouble-click to finish.",
         polyline: "Create a polyline shape on the selected object. Click to add points.\n\nDouble-click to finish.",
         rename: "Disabled until a schema-valid object is selected.",
         shape: "Create a rectangle shape on the selected object",
         zoomIn: "Zoom the work surface in"
       });
+      expect(new Set(Object.values(iconStyleState.inactiveIconColors)).size).toBe(1);
+      await expect(page.locator("#objectVectorStudioV2AngleSnapButton")).toHaveText("Snap Angle");
       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 expect(page.locator("#statusLog")).toHaveValue(/OK Snap angle 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 expect(page.locator("#statusLog")).toHaveValue(/OK Snap angle disabled: Rotate action uses raw entered rotation delta\./);
 
       await drawDefaultObjectVectorShape(page, "rectangle");
       await expect(page.locator('[data-shape-tool="rectangle"]')).toHaveAttribute("aria-pressed", "true");
@@ -2225,8 +2231,10 @@ test.describe("Workspace Manager V2 bootstrap", () => {
           noApplyButton: !details.querySelector("#objectVectorStudioV2ApplyGeometryButton"),
           noHelperText: !details.textContent.includes("Editable fields below"),
           noSelectedShapeText: !details.textContent.includes("Selected Shape"),
+          pointStyleHeading: details.querySelector(".object-vector-studio-v2__point-style-heading")?.textContent.trim() || "",
           pointStyleBeforeGroup: Boolean(pointStyleControls && groupSummary && (pointStyleControls.compareDocumentPosition(groupSummary) & Node.DOCUMENT_POSITION_FOLLOWING)),
           pointStyleControls: Array.from(details.querySelectorAll("[data-shape-point-style-field]")).map((control) => ({
+            disabled: control.disabled,
             label: control.closest("label").querySelector("span").textContent.trim(),
             value: control.value
           })),
@@ -2237,15 +2245,16 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       expect(shapeGeometryOrder.noApplyButton).toBe(true);
       expect(shapeGeometryOrder.noHelperText).toBe(true);
       expect(shapeGeometryOrder.noSelectedShapeText).toBe(true);
+      expect(shapeGeometryOrder.pointStyleHeading).toBe("Point Style:");
       expect(shapeGeometryOrder.pointStyleBeforeGroup).toBe(true);
-      expect(shapeGeometryOrder.pointStyleControls).toEqual([{ label: "Point Style", value: "round" }]);
+      expect(shapeGeometryOrder.pointStyleControls).toEqual([{ disabled: false, label: "Joints", value: "round" }]);
       expect(shapeGeometryOrder.summaryItems).toEqual([
         "Rectangle Geometry",
         "Group",
         "None"
       ]);
       await page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-shape-point-style-field='pointStyle']").selectOption("square");
-      await expect(page.locator("#statusLog")).toHaveValue(/OK Updated Point Style to square for shape row 0\./);
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Updated Joints to square for shape row 0\./);
       const rectanglePointStyleRender = await page.locator("#objectVectorStudioV2RenderSurface [data-shape-index='0']").evaluate((shape) => ({
         pointStyle: shape.dataset.pointStyle,
         strokeLinejoin: shape.getAttribute("stroke-linejoin")
@@ -3685,6 +3694,11 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#objectVectorStudioV2SnapModeButton")).toHaveAttribute("data-snap-mode", "point");
       await expect(page.locator("#objectVectorStudioV2SnapModeButton")).toHaveAttribute("aria-pressed", "true");
       await expect(page.locator("#objectVectorStudioV2RenderSurface .object-vector-studio-v2__snap-target")).not.toHaveCount(0);
+      const snapPointColorState = await page.evaluate(() => ({
+        buttonColor: getComputedStyle(document.querySelector("#objectVectorStudioV2SnapModeButton")).color,
+        targetStroke: getComputedStyle(document.querySelector("#objectVectorStudioV2RenderSurface .object-vector-studio-v2__snap-target")).stroke
+      }));
+      expect(snapPointColorState.buttonColor).toBe(snapPointColorState.targetStroke);
       await drawObjectVectorShape(page, "line", [{ x: 1.3, y: 2.2 }, { x: 4.2, y: 4.1 }]);
       const pointSnappedLine = await page.evaluate(() => window.__objectVectorStudioV2App.selectedShape().geometry);
       expect(pointSnappedLine).toEqual({ point1: { x: 1, y: 2 }, point2: { x: 4, y: 4 } });
@@ -3693,6 +3707,11 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#objectVectorStudioV2SnapModeButton")).toHaveText("Snap None");
       await expect(page.locator("#objectVectorStudioV2SnapModeButton")).toHaveAttribute("data-snap-mode", "none");
       await expect(page.locator("#objectVectorStudioV2SnapModeButton")).toHaveAttribute("aria-pressed", "false");
+      const snapNoneColorState = await page.evaluate(() => ({
+        disabledIconColor: getComputedStyle(document.querySelector("#objectVectorStudioV2AngleSnapButton")).color,
+        snapNoneColor: getComputedStyle(document.querySelector("#objectVectorStudioV2SnapModeButton")).color
+      }));
+      expect(snapNoneColorState.snapNoneColor).toBe(snapNoneColorState.disabledIconColor);
       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 } });
@@ -3732,7 +3751,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await page.locator("#objectVectorStudioV2StrokeWidth").dispatchEvent("change");
       await page.locator('[data-shape-tool="line"]').click();
       await clickObjectVectorLogicalPoint(page, -40, -50);
-      await moveObjectVectorLogicalPoint(page, { x: -10, y: -50 });
+      await moveObjectVectorLogicalPoint(page, { x: -10, y: -30 });
       const wideStrokePreview = await page.locator("#objectVectorStudioV2RenderSurface .object-vector-studio-v2__drawing-preview").evaluate((preview) => ({
         dash: preview.style.strokeDasharray,
         strokeLinecap: preview.style.strokeLinecap,
@@ -3745,7 +3764,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       expect(wideStrokeDash[0]).toBeGreaterThan(5);
       expect(wideStrokeDash[0]).toBeLessThan(220);
       expect(wideStrokeDash[1]).toBeGreaterThan(4);
-      await clickObjectVectorLogicalPoint(page, -10, -50);
+      await clickObjectVectorLogicalPoint(page, -10, -30);
       const wideStrokeLine = await page.evaluate(() => {
         const app = window.__objectVectorStudioV2App;
         return {
@@ -3760,15 +3779,17 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         strokeWidth: 20
       });
       const openPointStyleControls = await page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-shape-point-style-field]").evaluateAll((controls) => controls.map((control) => ({
+        disabled: control.disabled,
         label: control.closest("label").querySelector("span").textContent.trim(),
         value: control.value
       })));
       expect(openPointStyleControls).toEqual([
-        { label: "Start Point Style", value: "round" },
-        { label: "End Point Style", value: "round" }
+        { disabled: false, label: "Start", value: "round" },
+        { disabled: true, label: "Joints", value: "round" },
+        { disabled: false, label: "End", value: "round" }
       ]);
       await page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-shape-point-style-field='endPointStyle']").selectOption("square");
-      await expect(page.locator("#statusLog")).toHaveValue(/OK Updated End Point Style to square for shape row \d+\./);
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Updated End to square for shape row \d+\./);
       const wideStrokeLineAfterPointStyle = await page.evaluate(() => {
         const app = window.__objectVectorStudioV2App;
         return JSON.parse(JSON.stringify(app.selectedShape().style));
@@ -3790,12 +3811,26 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       const splitPointCaps = await page.locator(`#objectVectorStudioV2RenderSurface [data-point-style-caps='line'] [data-point-style-cap]`).evaluateAll((caps) => caps.map((cap) => ({
         endpoint: cap.dataset.pointStyleCap,
         pointStyle: cap.dataset.pointStyle,
-        tag: cap.tagName.toLowerCase()
+        tag: cap.tagName.toLowerCase(),
+        transform: cap.getAttribute("transform") || ""
       })));
-      expect(splitPointCaps).toEqual([
-        { endpoint: "start", pointStyle: "round", tag: "circle" },
-        { endpoint: "end", pointStyle: "square", tag: "rect" }
-      ]);
+      expect(splitPointCaps[0]).toMatchObject({ endpoint: "start", pointStyle: "round", tag: "circle", transform: "" });
+      expect(splitPointCaps[1]).toMatchObject({ endpoint: "end", pointStyle: "square", tag: "rect" });
+      expect(splitPointCaps[1].transform).toMatch(/^rotate\((?!0(?:\\.0+)? )/);
+
+      await page.locator('[data-shape-tool="polyline"]').click();
+      await clickObjectVectorLogicalPoint(page, 10, -40);
+      await clickObjectVectorLogicalPoint(page, 20, -20);
+      await clickObjectVectorLogicalPoint(page, 40, -40);
+      await page.keyboard.press("Enter");
+      await expect(page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-shape-point-style-field]")).toHaveCount(3);
+      await page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-shape-point-style-field='pointStyle']").selectOption("square");
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Updated Joints to square for shape row \d+\./);
+      const polylineJoinStyle = await page.locator(`#objectVectorStudioV2RenderSurface [data-shape-index="${await page.evaluate(() => window.__objectVectorStudioV2App.selectedShapeIndex)}"]`).evaluate((shape) => ({
+        jointStyle: shape.dataset.pointStyle || "",
+        strokeLinejoin: shape.getAttribute("stroke-linejoin")
+      }));
+      expect(polylineJoinStyle).toEqual({ jointStyle: "square", strokeLinejoin: "miter" });
 
       await page.locator('[data-shape-tool="text"]').click();
       await clickObjectVectorLogicalPoint(page, 70, 60);

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

@@ -269,7 +269,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="objectVectorStudioV2SnapModeButton" type="button" aria-pressed="true" title="Snap drawing and point dragging to grid intersections">Snap Grid</button>
-              <button id="objectVectorStudioV2AngleSnapButton" type="button" aria-pressed="false" title="Angle Snap is wired to Object Transform Rotate. Enable it before pressing Rotate to round the entered rotation delta to 15 degree increments.">Angle Snap</button>
+              <button id="objectVectorStudioV2AngleSnapButton" type="button" aria-pressed="false" title="Snap Angle is wired to Object Transform Rotate. Enable it before pressing Rotate to round the entered rotation delta to 15 degree increments.">Snap Angle</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>