Separate point rounding checkbox from point delete trash action - PR_26133_080-point-rounding-and-point-delete-ui-fix

Author: DavidQ

docs/dev/reports/playwright_v8_coverage_report.md

@@ -1,6 +1,6 @@
 # Playwright V8 Coverage Report
 
-PR: PR_26133_079-independent-middle-joint-rounding
+PR: PR_26133_080-point-rounding-and-point-delete-ui-fix
 
 Source: docs/dev/reports/playwright_v8_coverage_report.txt generated by the latest npm run test:workspace-v2 run.
 
@@ -21,7 +21,7 @@ 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 6964/6964; executed functions 711/746
+- (95%) tools/object-vector-studio-v2/js/ToolStarterApp.js - executed lines 7002/7002; executed functions 711/749
 
 ## Changed JS Files Considered
 

docs/dev/reports/playwright_workspace_v2_results.md

@@ -1,22 +1,23 @@
 # Playwright Workspace V2 Results
 
-PR: PR_26133_079-independent-middle-joint-rounding
+PR: PR_26133_080-point-rounding-and-point-delete-ui-fix
 
 ## Validation
 
 - PASS: npm run test:workspace-v2
 - Result: 54 passed
-- Runtime: 5.8m
+- Runtime: 5.4m
 - Browser project: playwright
 - Workers: 1
 
 ## Targeted Checks Covered
 
 - Shape Geometry point rows still render exactly one Round checkbox per row.
-- Checking one middle polyline point now renders only that point's round marker.
-- Other middle joints remain square/miter and are not globally rounded.
-- Start and end point rounding behavior remains independent.
-- No global Start/Joints/End or Joints point-style controls are used for point rounding.
+- The global Delete Point(s) action no longer renders.
+- Editable point rows render a row-end trash button for deleting only that point.
+- Rounding checkboxes update only point rounding and do not delete rows.
+- Row trash deletion preserves independent rounding state for remaining points.
+- Deleting a point that would violate minimum geometry count is visibly rejected.
 
 ## Console/Runtime Errors
 

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -3994,12 +3994,15 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         sectionGap: Number.parseFloat(getComputedStyle(list.closest(".object-vector-studio-v2__edit-panel--polygon")).gap)
       }));
       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-side-action]")).toHaveText(["Add Point"]);
+      await expect(page.locator("#objectVectorStudioV2ShapeGeometryDetails")).not.toContainText("Delete Point(s)");
       await expect(page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-point-round='true']")).toHaveCount(4);
+      await expect(page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-point-delete='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\./);
+      await expect(page.locator("#objectVectorStudioV2ShapeGeometryDetails .object-vector-studio-v2__polygon-point-field")).toHaveCount(4);
       const roundedPointRender = await page.locator("#objectVectorStudioV2RenderSurface").evaluate((surface) => {
         const shape = surface.querySelector("[data-shape-index='0']");
         const marker = surface.querySelector("[data-point-style-caps='polygon'] [data-point-style-cap='point-1']");
@@ -4033,13 +4036,26 @@ 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(page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-point-delete='true']")).toHaveCount(5);
       await expect.poll(() => page.evaluate(() => window.__objectVectorStudioV2App.schemaService.validatePayload(window.__objectVectorStudioV2App.currentPayload).ok)).toBe(true);
-      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 page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-point-delete='true'][data-polygon-point-index='2']").click();
       await expect(page.locator("#objectVectorStudioV2ShapeGeometryDetails .object-vector-studio-v2__polygon-point-field")).toHaveCount(4);
+      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.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 }
+      ]);
       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(page.locator("#statusLog")).toHaveValue(/OK Deleted point 3 from shape row 0\./);
       await expect.poll(() => page.evaluate(() => window.__objectVectorStudioV2App.selectedShape().geometry.points.length)).toBe(4);
+      await expect.poll(() => page.evaluate(() => window.__objectVectorStudioV2App.selectedShape().style.pointRounding)).toEqual([false, true, false, false]);
       await expect.poll(() => page.evaluate(() => window.__objectVectorStudioV2App.schemaService.validatePayload(window.__objectVectorStudioV2App.currentPayload).ok)).toBe(true);
       await page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-point-index='1'][data-polygon-point-axis='y']").fill("17");
       await page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-point-index='1'][data-polygon-point-axis='y']").dispatchEvent("change");
@@ -4186,11 +4202,9 @@ 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 .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 page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-point-delete='true'][data-polygon-point-index='0']").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(page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-point-delete='true'][data-polygon-point-index='0']")).toHaveAttribute("aria-invalid", "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\./);
 

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

@@ -2211,6 +2211,7 @@ export class ToolStarterApp {
       const pointRounding = this.shapePointRoundingValues(shape);
       shape.geometry.points.forEach((point, index) => {
         grid.append(this.createPolygonPointRow(point, index, {
+          deletable: editablePolygon,
           rounded: pointRounding[index] === true,
           selectable: editablePolygon
         }));
@@ -2289,7 +2290,7 @@ export class ToolStarterApp {
     });
   }
 
-  createPolygonPointRow(point, index, { rounded = false, selectable = true } = {}) {
+  createPolygonPointRow(point, index, { deletable = true, rounded = false, selectable = true } = {}) {
     const row = document.createElement("div");
     row.className = "object-vector-studio-v2__polygon-point-field";
     row.dataset.polygonPointIndex = String(index);
@@ -2298,7 +2299,7 @@ export class ToolStarterApp {
       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.title = "Select this point row for Add Point.";
       row.addEventListener("click", (event) => this.handlePolygonPointRowSelection(event, row));
       row.addEventListener("keydown", (event) => {
         if (event.key === "Enter" || event.key === " ") {
@@ -2344,24 +2345,36 @@ export class ToolStarterApp {
     roundCheckbox.addEventListener("change", () => this.updateSelectedShapePointRounding(index, roundCheckbox.checked));
     roundLabel.append(roundCaption, roundCheckbox);
     row.append(roundLabel);
+    if (deletable) {
+      const deleteButton = document.createElement("button");
+      deleteButton.type = "button";
+      deleteButton.className = "object-vector-studio-v2__polygon-point-delete";
+      deleteButton.dataset.polygonPointDelete = "true";
+      deleteButton.dataset.polygonPointIndex = String(index);
+      deleteButton.setAttribute("aria-label", `Delete point ${index + 1}`);
+      deleteButton.title = `Delete point ${index + 1}`;
+      this.applyIconGlyph(deleteButton, "delete");
+      deleteButton.addEventListener("pointerdown", (event) => event.stopPropagation());
+      deleteButton.addEventListener("click", (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        this.deletePolygonPointRow(index, deleteButton);
+      });
+      row.append(deleteButton);
+    }
     return row;
   }
 
   createPolygonSideActions() {
     const actions = document.createElement("div");
     actions.className = "object-vector-studio-v2__polygon-side-actions";
-    [
-      ["add", "Add Point", "add", () => this.addPolygonSideRow()],
-      ["delete", "Delete Point(s)", "delete", () => this.deletePolygonPointRows()]
-    ].forEach(([action, label, iconKey, handler]) => {
-      const button = document.createElement("button");
-      button.type = "button";
-      button.dataset.polygonSideAction = action;
-      button.textContent = label;
-      this.applyIconGlyph(button, iconKey);
-      button.addEventListener("click", handler);
-      actions.append(button);
-    });
+    const button = document.createElement("button");
+    button.type = "button";
+    button.dataset.polygonSideAction = "add";
+    button.textContent = "Add Point";
+    this.applyIconGlyph(button, "add");
+    button.addEventListener("click", () => this.addPolygonSideRow());
+    actions.append(button);
     return actions;
   }
 
@@ -6159,7 +6172,7 @@ export class ToolStarterApp {
     });
   }
 
-  deletePolygonPointRows() {
+  deletePolygonPointRow(pointIndex, sourceButton = null) {
     const selected = this.selectedShape();
     if (!selected || !["polygon", "polyline"].includes(shapeGeometryTool(selected))) {
       this.statusLog.write("WARN Delete point skipped: no editable point-list shape is selected.");
@@ -6171,33 +6184,38 @@ export class ToolStarterApp {
     }
     const geometry = this.readCurrentPolygonGeometry(selected);
     if (!geometry.ok) {
+      this.markPolygonPointDeleteInvalid(sourceButton, geometry.error);
       this.statusLog.write(`FAIL Delete point rejected for shape row ${this.selectedShapeIndex}: ${geometry.error}`);
       return;
     }
-    const checkedIndexes = this.checkedPolygonPointIndexes();
-    if (!checkedIndexes.length) {
-      const message = "select at least one polygon point to delete.";
-      this.markPolygonSideActionInvalid("delete", message);
-      this.clearPolygonPointSelections();
+    const normalizedIndex = Number(pointIndex);
+    if (!Number.isInteger(normalizedIndex) || normalizedIndex < 0 || normalizedIndex >= geometry.value.points.length) {
+      const message = `point ${normalizedIndex + 1} is not available.`;
+      this.markPolygonPointDeleteInvalid(sourceButton, message);
       this.statusLog.write(`FAIL Delete point rejected for shape row ${this.selectedShapeIndex}: ${message}`);
       return;
     }
-    const checkedSet = new Set(checkedIndexes);
-    const nextPoints = geometry.value.points.filter((_, index) => !checkedSet.has(index));
-    const nextPointRounding = this.currentPointRoundingRows(geometry.value.points.length).filter((_, index) => !checkedSet.has(index));
     const minPointCount = shapeGeometryTool(selected) === "polyline" ? 2 : 4;
+    if (geometry.value.points.length - 1 < minPointCount) {
+      const message = `${shapeGeometryTool(selected)} must keep at least ${minPointCount} points.`;
+      this.markPolygonPointDeleteInvalid(sourceButton, message);
+      this.statusLog.write(`FAIL Delete point rejected for shape row ${this.selectedShapeIndex}: ${message}`);
+      return;
+    }
+    const nextPoints = geometry.value.points.filter((_, index) => index !== normalizedIndex);
+    const nextPointRounding = this.currentPointRoundingRows(geometry.value.points.length).filter((_, index) => index !== normalizedIndex);
     if (nextPoints.length < minPointCount) {
       const message = `${shapeGeometryTool(selected)} must keep at least ${minPointCount} points.`;
-      this.markPolygonSideActionInvalid("delete", message);
-      this.clearPolygonPointSelections();
+      this.markPolygonPointDeleteInvalid(sourceButton, message);
       this.statusLog.write(`FAIL Delete point rejected for shape row ${this.selectedShapeIndex}: ${message}`);
       return;
     }
     this.rebuildPolygonPointList(nextPoints, nextPointRounding);
     this.clearPolygonPointSelections();
     this.clearPolygonSideActionValidity();
+    this.clearPolygonPointDeleteValidity();
     this.applyShapeGeometryEdits({
-      okMessage: `OK Deleted ${checkedIndexes.length} point${checkedIndexes.length === 1 ? "" : "s"} from shape row ${this.selectedShapeIndex}.`
+      okMessage: `OK Deleted point ${normalizedIndex + 1} from shape row ${this.selectedShapeIndex}.`
     });
   }
 
@@ -6220,6 +6238,23 @@ export class ToolStarterApp {
     });
   }
 
+  markPolygonPointDeleteInvalid(sourceButton, message) {
+    if (!sourceButton) {
+      return;
+    }
+    sourceButton.dataset.validationState = "invalid";
+    sourceButton.setAttribute("aria-invalid", "true");
+    sourceButton.title = message;
+  }
+
+  clearPolygonPointDeleteValidity() {
+    this.elements.shapeGeometryDetails.querySelectorAll("[data-polygon-point-delete='true']").forEach((button) => {
+      delete button.dataset.validationState;
+      button.removeAttribute("aria-invalid");
+      button.title = `Delete point ${Number(button.dataset.polygonPointIndex) + 1}`;
+    });
+  }
+
   currentPointRoundingRows(expectedCount = null) {
     const checkboxes = Array.from(this.elements.shapeGeometryDetails.querySelectorAll("[data-polygon-point-round='true']"));
     const pointRounding = checkboxes
@@ -6297,6 +6332,11 @@ export class ToolStarterApp {
       if (roundCheckbox) {
         roundCheckbox.setAttribute("aria-label", `Round point ${index + 1}`);
       }
+      const deleteButton = row.querySelector("[data-polygon-point-delete='true']");
+      if (deleteButton) {
+        deleteButton.setAttribute("aria-label", `Delete point ${index + 1}`);
+        deleteButton.title = `Delete point ${index + 1}`;
+      }
     });
   }
 

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

@@ -1674,7 +1674,7 @@ textarea:hover {
 
 .object-vector-studio-v2__polygon-point-field {
   display: grid;
-  grid-template-columns: 62px minmax(0, 1fr) minmax(0, 1fr) max-content;
+  grid-template-columns: 62px minmax(0, 1fr) minmax(0, 1fr) max-content 24px;
   align-items: center;
   gap: 6px;
 }
@@ -1741,6 +1741,18 @@ textarea:hover {
   accent-color: var(--tool-starter-accent);
 }
 
+.object-vector-studio-v2__polygon-point-delete {
+  width: 24px;
+  height: 24px;
+  min-height: 24px;
+  padding: 0 !important;
+  color: var(--tool-starter-danger);
+}
+
+.object-vector-studio-v2__polygon-point-delete[data-ovs-icon]::before {
+  font-size: 0.92rem;
+}
+
 .object-vector-studio-v2__polygon-side-actions {
   display: flex;
   flex-wrap: wrap;