Refine point row layout and fix independent point rounding - PR_26133_081-point-row-layout-and-independent-rounding-fix

Author: DavidQ

docs/dev/reports/playwright_workspace_v2_results.md

@@ -1,23 +1,23 @@
 # Playwright Workspace V2 Results
 
-PR: PR_26133_080-point-rounding-and-point-delete-ui-fix
+PR: PR_26133_081-point-row-layout-and-independent-rounding-fix
 
 ## Validation
 
 - PASS: npm run test:workspace-v2
 - Result: 54 passed
-- Runtime: 5.4m
+- Runtime: 5.5m
 - Browser project: playwright
 - Workers: 1
 
 ## Targeted Checks Covered
 
 - Shape Geometry point rows still render exactly one Round checkbox per row.
-- 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.
+- Point rows now use one right-aligned action cell containing Round and the row trash button.
+- Editable point row layout keeps Point, X, Y, and actions in four stable columns.
+- Polygon/polyline point-list shapes no longer inherit shared middle/corner rounding from legacy pointStyle fallback.
+- Checking two middle polyline points and then unchecking one leaves the other middle point rounded.
+- Row trash deletion and invalid delete rejection coverage remain green.
 
 ## Console/Runtime Errors
 

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -3819,6 +3819,40 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         pointRounding: [false, true, false, false],
         strokeLinejoin: "miter"
       });
+      await page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-point-round='true'][data-polygon-point-index='2']").check();
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Updated point 3 rounding to round for shape row \d+\./);
+      const polylineTwoRoundedJoints = await page.locator(`#objectVectorStudioV2RenderSurface [data-shape-index="${polylineIndex}"]`).evaluate((shape) => {
+        const markers = Array.from(document.querySelectorAll("#objectVectorStudioV2RenderSurface [data-point-style-caps='polyline'] [data-point-style-cap]")).map((marker) => marker.dataset.pointStyleCap);
+        return {
+          jointStyle: shape.dataset.pointStyle || "",
+          markers,
+          pointRounding: window.__objectVectorStudioV2App.selectedShape().style.pointRounding,
+          strokeLinejoin: shape.getAttribute("stroke-linejoin")
+        };
+      });
+      expect(polylineTwoRoundedJoints).toEqual({
+        jointStyle: "square",
+        markers: ["point-1", "point-2"],
+        pointRounding: [false, true, true, false],
+        strokeLinejoin: "miter"
+      });
+      await page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-point-round='true'][data-polygon-point-index='1']").uncheck();
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Updated point 2 rounding to square for shape row \d+\./);
+      const polylineIndependentJoint = await page.locator(`#objectVectorStudioV2RenderSurface [data-shape-index="${polylineIndex}"]`).evaluate((shape) => {
+        const markers = Array.from(document.querySelectorAll("#objectVectorStudioV2RenderSurface [data-point-style-caps='polyline'] [data-point-style-cap]")).map((marker) => marker.dataset.pointStyleCap);
+        return {
+          jointStyle: shape.dataset.pointStyle || "",
+          markers,
+          pointRounding: window.__objectVectorStudioV2App.selectedShape().style.pointRounding,
+          strokeLinejoin: shape.getAttribute("stroke-linejoin")
+        };
+      });
+      expect(polylineIndependentJoint).toEqual({
+        jointStyle: "square",
+        markers: ["point-2"],
+        pointRounding: [false, false, true, false],
+        strokeLinejoin: "miter"
+      });
 
       await page.locator('[data-shape-tool="text"]').click();
       await clickObjectVectorLogicalPoint(page, 70, 60);
@@ -4000,6 +4034,23 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       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]);
+      const polygonPointRowLayoutState = await page.locator("#objectVectorStudioV2ShapeGeometryDetails .object-vector-studio-v2__polygon-point-field").first().evaluate((row) => {
+        const actions = row.querySelector(".object-vector-studio-v2__polygon-point-actions");
+        return {
+          actionCellLast: row.lastElementChild === actions,
+          actionJustify: getComputedStyle(actions).justifyContent,
+          columnCount: getComputedStyle(row).gridTemplateColumns.split(" ").length,
+          deleteAfterRound: actions?.lastElementChild?.matches("[data-polygon-point-delete='true']") === true,
+          roundCheckboxes: actions?.querySelectorAll("[data-polygon-point-round='true']").length || 0
+        };
+      });
+      expect(polygonPointRowLayoutState).toEqual({
+        actionCellLast: true,
+        actionJustify: "flex-end",
+        columnCount: 4,
+        deleteAfterRound: true,
+        roundCheckboxes: 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);

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

@@ -923,6 +923,9 @@ export class ToolStarterApp {
       return Array.from({ length: pointCount }, (_, index) => explicit[index] === true);
     }
     const geometryTool = shapeGeometryTool(shape);
+    if (geometryTool === "polygon") {
+      return Array.from({ length: pointCount }, () => false);
+    }
     return Array.from({ length: pointCount }, (_, index) => {
       if (geometryTool === "line" || geometryTool === "polyline") {
         if (index === 0) {
@@ -931,6 +934,9 @@ export class ToolStarterApp {
         if (index === pointCount - 1) {
           return this.pointStyleValue(shape?.style?.endPointStyle ?? shape?.style?.strokeLinecap ?? shape?.style?.pointStyle) === "round";
         }
+        if (geometryTool === "polyline") {
+          return false;
+        }
       }
       return this.pointStyleValue(shape?.style?.pointStyle ?? shape?.style?.strokeLinecap) === "round";
     });
@@ -2344,7 +2350,9 @@ export class ToolStarterApp {
     roundCheckbox.addEventListener("click", (event) => event.stopPropagation());
     roundCheckbox.addEventListener("change", () => this.updateSelectedShapePointRounding(index, roundCheckbox.checked));
     roundLabel.append(roundCaption, roundCheckbox);
-    row.append(roundLabel);
+    const actions = document.createElement("div");
+    actions.className = "object-vector-studio-v2__polygon-point-actions";
+    actions.append(roundLabel);
     if (deletable) {
       const deleteButton = document.createElement("button");
       deleteButton.type = "button";
@@ -2360,8 +2368,9 @@ export class ToolStarterApp {
         event.stopPropagation();
         this.deletePolygonPointRow(index, deleteButton);
       });
-      row.append(deleteButton);
+      actions.append(deleteButton);
     }
+    row.append(actions);
     return row;
   }
 

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 24px;
+  grid-template-columns: 62px minmax(54px, 1fr) minmax(54px, 1fr) minmax(82px, max-content);
   align-items: center;
   gap: 6px;
 }
@@ -1724,6 +1724,14 @@ textarea:hover {
   padding: 5px 7px;
 }
 
+.object-vector-studio-v2__polygon-point-actions {
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 5px;
+}
+
 .object-vector-studio-v2__polygon-point-rounding {
   display: inline-grid;
   grid-template-columns: max-content 14px;