Fix Shape Geometry point rounding to one independent checkbox per point - PR_26133_078-point-rounding-checkbox-correction

Author: DavidQ

docs/dev/reports/playwright_v8_coverage_report.md

@@ -1,6 +1,6 @@
 # Playwright V8 Coverage Report
 
-PR: PR_26133_077-point-rounding-snap-icon-color-and-snap-angle-wiring
+PR: PR_26133_078-point-rounding-checkbox-correction
 
 Source: docs/dev/reports/playwright_v8_coverage_report.txt generated by the latest npm run test:workspace-v2 run.
 
@@ -21,9 +21,9 @@ Source: docs/dev/reports/playwright_v8_coverage_report.txt generated by the late
 
 ## Changed Runtime JS Files Covered
 
-- (96%) tools/object-vector-studio-v2/js/ToolStarterApp.js - executed lines 6933/6933; executed functions 712/745
+- (95%) tools/object-vector-studio-v2/js/ToolStarterApp.js - executed lines 6968/6968; executed functions 717/751
 
 ## Changed JS Files Considered
 
-- (96%) tools/object-vector-studio-v2/js/ToolStarterApp.js - changed runtime JS file with browser V8 coverage
+- (95%) 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,6 +1,6 @@
 # Playwright Workspace V2 Results
 
-PR: PR_26133_077-point-rounding-snap-icon-color-and-snap-angle-wiring
+PR: PR_26133_078-point-rounding-checkbox-correction
 
 ## Validation
 
@@ -12,12 +12,12 @@ PR: PR_26133_077-point-rounding-snap-icon-color-and-snap-angle-wiring
 
 ## Targeted Checks Covered
 
-- 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.
+- Shape Geometry point rows now render exactly one checkbox per row.
+- The remaining checkbox is the Round control; unchecked rows render square and checked rows render round.
+- The old second point-selection checkbox was removed from polygon/polyline/triangle point rows.
+- Add/Delete point row targeting now uses row selection state instead of an extra checkbox.
+- No global Start/Joints/End or Joints point-style controls remain.
+- Independent per-point rounding coverage remains in place for open and closed multi-point geometry.
 
 ## Console/Runtime Errors
 

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -3982,7 +3982,8 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       expect(polygonPointListLayout).toEqual({ headingMarginBottom: 0, headingMarginTop: 0, listGap: 5, maxHeight: "none", overflowY: "visible", sectionGap: 5 });
       await expect(page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-side-action]")).toHaveText(["Add Point", "Delete Point(s)"]);
       await expect(page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-point-round='true']")).toHaveCount(4);
-      await expect(page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-point-select='true']")).toHaveCount(4);
+      await expect(page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-point-select='true']")).toHaveCount(0);
+      await expect.poll(() => page.locator("#objectVectorStudioV2ShapeGeometryDetails .object-vector-studio-v2__polygon-point-field").evaluateAll((rows) => rows.map((row) => row.querySelectorAll("input[type='checkbox']").length))).toEqual([1, 1, 1, 1]);
       await page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-point-round='true'][data-polygon-point-index='1']").check();
       await expect(page.locator("#statusLog")).toHaveValue(/OK Updated point 2 rounding to round for shape row 0\./);
       const roundedPointRender = await page.locator("#objectVectorStudioV2RenderSurface").evaluate((surface) => {
@@ -4001,14 +4002,14 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         pointRounding: [false, true, false, false],
         strokeLinejoin: "miter"
       });
-      await page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-point-select='true'][data-polygon-point-index='1']").check();
+      await page.locator("#objectVectorStudioV2ShapeGeometryDetails .object-vector-studio-v2__polygon-point-label").nth(1).click();
       await page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-side-action='add']").click();
       await expect.poll(() => page.locator("#objectVectorStudioV2ShapeGeometryDetails .object-vector-studio-v2__polygon-point-field").evaluateAll((rows) => rows.map((row) => ({
         label: row.querySelector(".object-vector-studio-v2__polygon-point-label").textContent.trim(),
         rounded: row.querySelector("[data-polygon-point-round='true']").checked,
         x: row.querySelector("[data-polygon-point-axis='x']").value,
         y: row.querySelector("[data-polygon-point-axis='y']").value,
-        selected: row.querySelector("[data-polygon-point-select='true']").checked
+        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 },
@@ -4019,10 +4020,10 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#statusLog")).toHaveValue(/OK Added point to shape row 0\./);
       await expect.poll(() => page.evaluate(() => window.__objectVectorStudioV2App.selectedShape().geometry.points.length)).toBe(5);
       await expect.poll(() => page.evaluate(() => window.__objectVectorStudioV2App.schemaService.validatePayload(window.__objectVectorStudioV2App.currentPayload).ok)).toBe(true);
-      await page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-point-select='true'][data-polygon-point-index='2']").check();
+      await page.locator("#objectVectorStudioV2ShapeGeometryDetails .object-vector-studio-v2__polygon-point-label").nth(2).click();
       await page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-side-action='delete']").click();
       await expect(page.locator("#objectVectorStudioV2ShapeGeometryDetails .object-vector-studio-v2__polygon-point-field")).toHaveCount(4);
-      await expect.poll(() => page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-point-select='true']").evaluateAll((checkboxes) => checkboxes.every((checkbox) => !checkbox.checked))).toBe(true);
+      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 1 point from shape row 0\./);
       await expect.poll(() => page.evaluate(() => window.__objectVectorStudioV2App.selectedShape().geometry.points.length)).toBe(4);
       await expect.poll(() => page.evaluate(() => window.__objectVectorStudioV2App.schemaService.validatePayload(window.__objectVectorStudioV2App.currentPayload).ok)).toBe(true);
@@ -4171,12 +4172,12 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       expect(resizedPreviewScale.pointsOnVisibleGridLines).toBe(true);
       await page.locator("#objectVectorStudioV2ResetViewButton").click();
       await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-1600 -1100 3200 2200");
-      await page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-point-select='true'][data-polygon-point-index='0']").check();
-      await page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-point-select='true'][data-polygon-point-index='1']").check();
+      await page.locator("#objectVectorStudioV2ShapeGeometryDetails .object-vector-studio-v2__polygon-point-label").nth(0).click({ modifiers: ["Control"] });
+      await page.locator("#objectVectorStudioV2ShapeGeometryDetails .object-vector-studio-v2__polygon-point-label").nth(1).click({ modifiers: ["Control"] });
       await page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-side-action='delete']").click();
       await expect(page.locator("#objectVectorStudioV2ShapeGeometryDetails .object-vector-studio-v2__polygon-point-field")).toHaveCount(4);
       await expect(page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-side-action='delete']")).toHaveAttribute("aria-invalid", "true");
-      await expect.poll(() => page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-point-select='true']").evaluateAll((checkboxes) => checkboxes.every((checkbox) => !checkbox.checked))).toBe(true);
+      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(/FAIL Delete point rejected for shape row 0: polygon must keep at least 4 points\./);
 
       expect(pageErrors).toEqual([]);
@@ -4361,6 +4362,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#objectVectorStudioV2ShapeGeometryDetails")).not.toContainText(/Shape\s*polygon-\d+ \(triangle\)/);
       await expect(page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-side-action]")).toHaveCount(0);
       await expect(page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-point-select='true']")).toHaveCount(0);
+      await expect.poll(() => page.locator("#objectVectorStudioV2ShapeGeometryDetails .object-vector-studio-v2__polygon-point-field").evaluateAll((rows) => rows.map((row) => row.querySelectorAll("input[type='checkbox']").length))).toEqual([1, 1, 1]);
 
       expect(pageErrors).toEqual([]);
       expect(consoleErrors).toEqual([]);

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

@@ -2292,6 +2292,21 @@ export class ToolStarterApp {
   createPolygonPointRow(point, index, { rounded = false, selectable = true } = {}) {
     const row = document.createElement("div");
     row.className = "object-vector-studio-v2__polygon-point-field";
+    row.dataset.polygonPointIndex = String(index);
+    if (selectable) {
+      row.dataset.polygonPointSelectable = "true";
+      row.setAttribute("role", "button");
+      row.setAttribute("tabindex", "0");
+      row.setAttribute("aria-pressed", "false");
+      row.title = "Select this point row for Add Point or Delete Point(s).";
+      row.addEventListener("click", (event) => this.handlePolygonPointRowSelection(event, row));
+      row.addEventListener("keydown", (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          this.togglePolygonPointRowSelection(row, event);
+        }
+      });
+    }
     const caption = document.createElement("span");
     caption.className = "object-vector-studio-v2__polygon-point-label";
     caption.textContent = `Point ${index + 1}`;
@@ -2325,20 +2340,10 @@ export class ToolStarterApp {
     roundCheckbox.dataset.polygonPointRound = "true";
     roundCheckbox.dataset.polygonPointIndex = String(index);
     roundCheckbox.setAttribute("aria-label", `Round point ${index + 1}`);
+    roundCheckbox.addEventListener("click", (event) => event.stopPropagation());
     roundCheckbox.addEventListener("change", () => this.updateSelectedShapePointRounding(index, roundCheckbox.checked));
     roundLabel.append(roundCaption, roundCheckbox);
     row.append(roundLabel);
-    if (selectable) {
-      const selectLabel = document.createElement("label");
-      selectLabel.className = "object-vector-studio-v2__polygon-point-toggle";
-      const checkbox = document.createElement("input");
-      checkbox.type = "checkbox";
-      checkbox.dataset.polygonPointSelect = "true";
-      checkbox.dataset.polygonPointIndex = String(index);
-      checkbox.setAttribute("aria-label", `Select point ${index + 1}`);
-      selectLabel.append(checkbox);
-      row.append(selectLabel);
-    }
     return row;
   }
 
@@ -2360,6 +2365,39 @@ export class ToolStarterApp {
     return actions;
   }
 
+  handlePolygonPointRowSelection(event, row) {
+    if (event.target.closest("input, button, select, textarea, label")) {
+      return;
+    }
+    this.togglePolygonPointRowSelection(row, event);
+  }
+
+  togglePolygonPointRowSelection(row, event = null) {
+    if (!row?.dataset || row.dataset.polygonPointSelectable !== "true") {
+      return;
+    }
+    const shouldExtend = Boolean(event?.ctrlKey || event?.metaKey || event?.shiftKey);
+    if (!shouldExtend) {
+      this.elements.shapeGeometryDetails.querySelectorAll("[data-polygon-point-action-selected='true']").forEach((candidate) => {
+        if (candidate !== row) {
+          delete candidate.dataset.polygonPointActionSelected;
+          candidate.classList.remove("is-action-selected");
+          candidate.setAttribute("aria-pressed", "false");
+        }
+      });
+    }
+    const isSelected = row.dataset.polygonPointActionSelected === "true";
+    if (isSelected) {
+      delete row.dataset.polygonPointActionSelected;
+      row.classList.remove("is-action-selected");
+      row.setAttribute("aria-pressed", "false");
+      return;
+    }
+    row.dataset.polygonPointActionSelected = "true";
+    row.classList.add("is-action-selected");
+    row.setAttribute("aria-pressed", "true");
+  }
+
   createShapeTransformControls(shape) {
     const section = document.createElement("section");
     section.className = "object-vector-studio-v2__edit-panel object-vector-studio-v2__edit-panel--transform";
@@ -6172,14 +6210,16 @@ export class ToolStarterApp {
   }
 
   checkedPolygonPointIndexes() {
-    return Array.from(this.elements.shapeGeometryDetails.querySelectorAll("[data-polygon-point-select='true']"))
-      .map((checkbox) => checkbox.checked ? Number(checkbox.dataset.polygonPointIndex) : null)
+    return Array.from(this.elements.shapeGeometryDetails.querySelectorAll("[data-polygon-point-action-selected='true']"))
+      .map((row) => Number(row.dataset.polygonPointIndex))
       .filter((index) => Number.isInteger(index));
   }
 
   clearPolygonPointSelections() {
-    this.elements.shapeGeometryDetails.querySelectorAll("[data-polygon-point-select='true']").forEach((checkbox) => {
-      checkbox.checked = false;
+    this.elements.shapeGeometryDetails.querySelectorAll("[data-polygon-point-action-selected='true']").forEach((row) => {
+      delete row.dataset.polygonPointActionSelected;
+      row.classList.remove("is-action-selected");
+      row.setAttribute("aria-pressed", "false");
     });
   }
 
@@ -6256,14 +6296,11 @@ export class ToolStarterApp {
       row.querySelectorAll("[data-polygon-point-index]").forEach((input) => {
         input.dataset.polygonPointIndex = String(index);
       });
+      row.dataset.polygonPointIndex = String(index);
       const roundCheckbox = row.querySelector("[data-polygon-point-round='true']");
       if (roundCheckbox) {
         roundCheckbox.setAttribute("aria-label", `Round point ${index + 1}`);
       }
-      const checkbox = row.querySelector("[data-polygon-point-select='true']");
-      if (checkbox) {
-        checkbox.setAttribute("aria-label", `Select point ${index + 1}`);
-      }
     });
   }
 

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

@@ -1674,11 +1674,22 @@ textarea:hover {
 
 .object-vector-studio-v2__polygon-point-field {
   display: grid;
-  grid-template-columns: 62px minmax(0, 1fr) minmax(0, 1fr) max-content 22px;
+  grid-template-columns: 62px minmax(0, 1fr) minmax(0, 1fr) max-content;
   align-items: center;
   gap: 6px;
 }
 
+.object-vector-studio-v2__polygon-point-field[data-polygon-point-selectable="true"] {
+  cursor: pointer;
+  border-radius: 6px;
+}
+
+.object-vector-studio-v2__polygon-point-field.is-action-selected {
+  background: color-mix(in srgb, var(--tool-starter-accent) 16%, transparent);
+  outline: 1px solid color-mix(in srgb, var(--tool-starter-accent) 48%, transparent);
+  outline-offset: 2px;
+}
+
 .object-vector-studio-v2__polygon-point-label {
   color: var(--tool-starter-muted);
   font-size: 0.82rem;
@@ -1713,12 +1724,6 @@ textarea:hover {
   padding: 5px 7px;
 }
 
-.object-vector-studio-v2__polygon-point-toggle {
-  display: inline-grid;
-  place-items: center;
-  min-width: 0;
-}
-
 .object-vector-studio-v2__polygon-point-rounding {
   display: inline-grid;
   grid-template-columns: max-content 14px;
@@ -1729,8 +1734,7 @@ textarea:hover {
   font-weight: 800;
 }
 
-.object-vector-studio-v2__polygon-point-rounding input,
-.object-vector-studio-v2__polygon-point-toggle input {
+.object-vector-studio-v2__polygon-point-rounding input {
   width: 14px;
   height: 14px;
   margin: 0;