Add per point rounding and constrain snap icon coloring while wiring Snap Angle - PR_26133_077-point-rounding-snap-icon-color-and-snap-angle-wiring

Author: DavidQ

docs/dev/reports/playwright_v8_coverage_report.md

@@ -1,6 +1,6 @@
 # Playwright V8 Coverage Report
 
-PR: PR_26133_076-snap-angle-disabled-colors-and-point-style-refinement
+PR: PR_26133_077-point-rounding-snap-icon-color-and-snap-angle-wiring
 
 Source: docs/dev/reports/playwright_v8_coverage_report.txt generated by the latest npm run test:workspace-v2 run.
 
@@ -21,11 +21,9 @@ 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 6855/6855; executed functions 689/720
+- (96%) tools/object-vector-studio-v2/js/ToolStarterApp.js - executed lines 6933/6933; executed functions 712/745
 
 ## Changed JS Files Considered
 
-- (83%) tools/object-vector-studio-v2/js/bootstrap.js - changed runtime JS file with browser V8 coverage
 - (96%) tools/object-vector-studio-v2/js/ToolStarterApp.js - changed runtime JS file with browser V8 coverage
 - (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,23 +1,23 @@
 # Playwright Workspace V2 Results
 
-PR: PR_26133_076-snap-angle-disabled-colors-and-point-style-refinement
+PR: PR_26133_077-point-rounding-snap-icon-color-and-snap-angle-wiring
 
 ## Validation
 
 - PASS: npm run test:workspace-v2
 - Result: 54 passed
-- Runtime: 4.6m
+- Runtime: 5.2m
 - Browser project: playwright
 - Workers: 1
 
 ## Targeted Checks Covered
 
-- 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.
+- Shape Geometry point rows render Round checkboxes and no longer render the prior Start/Joints/End dropdown model.
+- Point rows default square; checked point rows persist `style.pointRounding` and render round joins/markers.
+- Polygon/polyline point lists size naturally without an internal scrollbar.
+- Snap color behavior is scoped to Snap button glyphs: Snap None uses the red disabled tone, Snap Point matches point snap circles, and non-Snap icons keep default colors.
+- Future notes include spline as a tracked possible geometry addition.
+- Snap Angle rotate application is logged visibly as active or disabled, and enabled Snap Angle constrains Rotate to the snap increment.
 
 ## Console/Runtime Errors
 

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -16,6 +16,10 @@ Architecture notes from recent discussion:
   - Most likely next geometry addition.
   - Would support connected open point sequences without requiring polygon closure.
 
+- spline
+  - Possible future addition for smooth point-driven curves.
+  - Would need explicit control-point, interpolation, and runtime tessellation contracts before implementation.
+
 - path
   - Possible future addition for richer vector authoring.
   - Would require a stricter schema/editor contract before implementation.

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

@@ -56,7 +56,7 @@ button {
 
 .object-vector-studio-v2 {
   --object-vector-studio-v2-icon-scale: 1.75;
-  --object-vector-studio-v2-disabled-icon-color: #64748b;
+  --object-vector-studio-v2-snap-disabled-icon-color: #ef4444;
   --object-vector-studio-v2-snap-point-color: #fbbf24;
 }
 
@@ -67,11 +67,6 @@ button:disabled {
   box-shadow: none;
 }
 
-button:disabled[data-ovs-icon],
-button:disabled [data-ovs-icon] {
-  color: var(--object-vector-studio-v2-disabled-icon-color) !important;
-}
-
 button:focus-visible,
 input:focus-visible,
 select:focus-visible,
@@ -1022,17 +1017,17 @@ textarea:hover {
   transform: none;
 }
 
-.object-vector-studio-v2__tool-toggle:not(.is-active):not([aria-pressed="true"]) .object-vector-studio-v2__shape-icon[data-ovs-icon],
-.object-vector-studio-v2__snap-actions button[aria-pressed="false"][data-ovs-icon] {
-  color: var(--object-vector-studio-v2-disabled-icon-color);
+.object-vector-studio-v2__snap-actions button[data-ovs-icon]::before {
+  color: inherit;
 }
 
-#objectVectorStudioV2SnapModeButton[data-snap-mode="point"][data-ovs-icon] {
+#objectVectorStudioV2SnapModeButton[data-snap-mode="point"][data-ovs-icon]::before {
   color: var(--object-vector-studio-v2-snap-point-color);
 }
 
-#objectVectorStudioV2SnapModeButton[data-snap-mode="none"][data-ovs-icon] {
-  color: var(--object-vector-studio-v2-disabled-icon-color);
+#objectVectorStudioV2SnapModeButton[data-snap-mode="none"][data-ovs-icon]::before,
+#objectVectorStudioV2AngleSnapButton[aria-pressed="false"][data-ovs-icon]::before {
+  color: var(--object-vector-studio-v2-snap-disabled-icon-color);
 }
 
 .object-vector-studio-v2__shape-icon[data-ovs-icon] {
@@ -1621,9 +1616,9 @@ textarea:hover {
 .object-vector-studio-v2__polygon-point-list {
   display: grid;
   gap: 5px;
-  max-height: 138px;
-  overflow-y: auto;
-  padding-right: 2px;
+  max-height: none;
+  overflow: visible;
+  padding-right: 0;
 }
 
 .object-vector-studio-v2__edit-panel--polygon {
@@ -1652,50 +1647,6 @@ textarea:hover {
   line-height: 1.1;
 }
 
-.object-vector-studio-v2__point-style-controls {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  min-width: 0;
-}
-
-.object-vector-studio-v2__point-style-heading {
-  flex: 0 0 auto;
-  color: var(--tool-starter-muted);
-  font-size: 0.76rem;
-  font-weight: 800;
-  white-space: nowrap;
-}
-
-.object-vector-studio-v2__point-style-fields {
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  flex-wrap: nowrap;
-}
-
-.object-vector-studio-v2__point-style-field {
-  display: inline-grid;
-  grid-template-columns: max-content minmax(58px, 1fr);
-  align-items: center;
-  gap: 4px;
-  color: var(--tool-starter-muted);
-  font-size: 0.72rem;
-  font-weight: 800;
-}
-
-.object-vector-studio-v2__point-style-field select {
-  min-width: 0;
-  width: 72px;
-  min-height: 24px;
-  padding: 2px 4px;
-}
-
-.object-vector-studio-v2__point-style-field select:disabled {
-  color: var(--object-vector-studio-v2-disabled-icon-color);
-}
-
 .object-vector-studio-v2__edit-panel--geometry .object-vector-studio-v2__edit-grid {
   gap: 4px 6px;
 }
@@ -1723,7 +1674,7 @@ textarea:hover {
 
 .object-vector-studio-v2__polygon-point-field {
   display: grid;
-  grid-template-columns: 62px minmax(0, 1fr) minmax(0, 1fr) 22px;
+  grid-template-columns: 62px minmax(0, 1fr) minmax(0, 1fr) max-content 22px;
   align-items: center;
   gap: 6px;
 }
@@ -1768,6 +1719,17 @@ textarea:hover {
   min-width: 0;
 }
 
+.object-vector-studio-v2__polygon-point-rounding {
+  display: inline-grid;
+  grid-template-columns: max-content 14px;
+  align-items: center;
+  gap: 3px;
+  color: var(--tool-starter-muted);
+  font-size: 0.7rem;
+  font-weight: 800;
+}
+
+.object-vector-studio-v2__polygon-point-rounding input,
 .object-vector-studio-v2__polygon-point-toggle input {
   width: 14px;
   height: 14px;

tools/object-vector-studio-v2/possible.future.adds.txt

@@ -274,9 +274,9 @@
           "fill": "#ffffff",
           "stroke": "#ffffff",
           "strokeWidth": 3,
-          "pointStyle": "round",
-          "startPointStyle": "round",
-          "endPointStyle": "round",
+          "pointStyle": "square",
+          "startPointStyle": "square",
+          "endPointStyle": "square",
           "fillOpacity": 1,
           "strokeOpacity": 1
         },
@@ -448,9 +448,9 @@
         "fill": "#ffffff",
         "stroke": "#ffffff",
         "strokeWidth": 3,
-        "pointStyle": "round",
-        "startPointStyle": "round",
-        "endPointStyle": "round",
+        "pointStyle": "square",
+        "startPointStyle": "square",
+        "endPointStyle": "square",
         "fillOpacity": 1,
         "strokeOpacity": 1
       },
@@ -481,6 +481,12 @@
           "type": "string",
           "enum": ["round", "square"]
         },
+        "pointRounding": {
+          "type": "array",
+          "items": {
+            "type": "boolean"
+          }
+        },
         "fillOpacity": {
           "type": "number",
           "minimum": 0,

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

@@ -187,9 +187,9 @@
           "fill": "#ffffff",
           "stroke": "#ffffff",
           "strokeWidth": 3,
-          "pointStyle": "round",
-          "startPointStyle": "round",
-          "endPointStyle": "round",
+          "pointStyle": "square",
+          "startPointStyle": "square",
+          "endPointStyle": "square",
           "fillOpacity": 1,
           "strokeOpacity": 1
         },
@@ -421,9 +421,9 @@
         "fill": "#ffffff",
         "stroke": "#ffffff",
         "strokeWidth": 3,
-        "pointStyle": "round",
-        "startPointStyle": "round",
-        "endPointStyle": "round",
+        "pointStyle": "square",
+        "startPointStyle": "square",
+        "endPointStyle": "square",
         "fillOpacity": 1,
         "strokeOpacity": 1
       },
@@ -456,6 +456,12 @@
           "type": "string",
           "enum": ["round", "square"]
         },
+        "pointRounding": {
+          "type": "array",
+          "items": {
+            "type": "boolean"
+          }
+        },
         "fillOpacity": {
           "type": "number",
           "minimum": 0,