Move object tile delete to compact right-side action icon stack - PR_26133_016-object-tile-action-icon-cleanup

Author: DavidQ

docs/dev/reports/playwright_v8_coverage_report.md

@@ -1,4 +1,4 @@
-# PR_26133_014 Playwright V8 Coverage Report
+# PR_26133_016 Playwright V8 Coverage Report
 
 Coverage source: `docs/dev/reports/playwright_v8_coverage_report.txt`, refreshed by the final `npm run test:workspace-v2` run.
 
@@ -7,12 +7,12 @@ Coverage source: `docs/dev/reports/playwright_v8_coverage_report.txt`, refreshed
 - Coverage is advisory only; no thresholds are enforced.
 - Workspace Manager V2 entry point: 91%.
 - Object Vector Studio V2 runtime coverage entries from the generated report:
-  - `tools/object-vector-studio-v2/js/ToolStarterApp.js`: 92%, executed lines 3701/3701, executed functions 395/428.
+  - `tools/object-vector-studio-v2/js/ToolStarterApp.js`: 92%, executed lines 3737/3737, executed functions 400/434.
 - The generated report lists `tests/playwright/tools/WorkspaceManagerV2.spec.mjs` as changed JS not collected by browser runtime coverage.
 
 ## Validation Context
 
 - Main command: `npm run test:workspace-v2`.
 - Result: 47 passed.
-- Focused Object Vector Studio V2 layout, preview coordinate, animation-state, and asset-authoring scenarios passed.
-- Coverage includes the runtime paths for cleaned Object Details summary rendering and explicit selected-shape color labeling. Tag-row layout, Polygon Geometry spacing, and removal of duplicate/helper text are covered by Playwright layout/text assertions.
+- Focused Object Vector Studio V2 layout, preview coordinate, mouse-editing, animation-state, and asset-authoring scenarios passed as part of the workspace-v2 run.
+- Coverage includes the runtime paths for object tile rendering, compact icon controls, runtime lock/visibility controls, and targeted object tile deletion.

docs/dev/reports/playwright_workspace_v2_results.md

@@ -1,22 +1,20 @@
-# PR_26133_014 Workspace V2 Results
+# PR_26133_016 Workspace V2 Results
 
 ## Command Results
 
 - `node --check tools/object-vector-studio-v2/js/ToolStarterApp.js`: passed.
 - `node --check tests/playwright/tools/WorkspaceManagerV2.spec.mjs`: passed.
-- `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --grep "Object Vector Studio V2 (layout shell|preview coordinates|animation states|asset authoring controls)"`: 4 passed.
 - `npm run test:workspace-v2`: 47 passed.
 - `git diff --check`: passed with LF-to-CRLF working-copy warnings for touched files.
 
 ## Targeted Object Vector Studio V2 Verification
 
-- Confirmed Object Tag input and Add button render inline with no visible `Tag` label text.
-- Confirmed Polygon Geometry section spacing is reduced to 5px, including section gap, point-list gap, and heading margins.
-- Confirmed Object Details no longer renders the helper text or duplicate `Selected Shape` summary text.
-- Confirmed Object Details keeps concise shape/group metadata without the duplicate selected-shape heading.
-- Confirmed selected shape color is labeled as `Fill Color`, `Stroke Color`, or `Transparent Color` so transparent/background state is not confused with the selected color.
-- Confirmed Object Vector Studio V2 geometry editing and animation detail states remain covered by the targeted workspace-v2 slice.
-- Confirmed targeted Object Vector Studio tests reported no console/page errors.
+- Confirmed object tile Delete renders as a textless X icon button at the far right of each object tile.
+- Confirmed object tile actions are stacked compactly in order: Show/Hide, Lock, Delete.
+- Confirmed object tile action buttons use the reduced 26px control size.
+- Confirmed Delete is disabled while the object is runtime-locked, while existing Show/Hide and Lock behavior remains intact.
+- Confirmed tile Delete removes only the targeted object tile; the Shield Pickup tile delete removed `object.asteroids.shield-pickup` while preserving `object.asteroids.object-1`.
+- Confirmed workspace-v2 Object Vector Studio V2 scenarios reported no console/page errors.
 
 ## Scope Checks
 

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -1704,10 +1704,36 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         rectangleUsesPreviewDrawingScale: true,
         unitGridSpacingRemoved: true
       });
+      const objectTileActionLayout = await page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1']").evaluate((tile) => {
+        const controls = Array.from(tile.querySelectorAll("[data-object-control]"));
+        const rects = controls.map((control) => control.getBoundingClientRect());
+        const deleteButton = tile.querySelector("[data-object-control='delete']");
+        const deleteRect = deleteButton.getBoundingClientRect();
+        const tileRect = tile.getBoundingClientRect();
+        return {
+          allTextEmpty: controls.every((control) => control.textContent.trim() === ""),
+          controlOrder: controls.map((control) => control.dataset.objectControl),
+          deleteAtFarRight: Math.abs(tileRect.right - deleteRect.right) <= 12,
+          deleteTitle: deleteButton.title,
+          iconSizes: rects.map((rect) => Math.round(Math.max(rect.width, rect.height))),
+          stacked: rects.every((rect, index) => index === 0
+            || (Math.abs(rect.left - rects[index - 1].left) <= 1 && rect.top > rects[index - 1].top))
+        };
+      });
+      expect(objectTileActionLayout).toEqual({
+        allTextEmpty: true,
+        controlOrder: ["visibility", "lock", "delete"],
+        deleteAtFarRight: true,
+        deleteTitle: "Delete this object",
+        iconSizes: [26, 26, 26],
+        stacked: true
+      });
       await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-control='visibility']")).toHaveText("");
       await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-control='lock']")).toHaveText("");
+      await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-control='delete']")).toHaveText("");
       await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-control='visibility'] .object-vector-studio-v2__tile-icon--eye")).toHaveCount(1);
       await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-control='lock'] .object-vector-studio-v2__tile-icon--lock")).toHaveCount(1);
+      await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-control='delete'] .object-vector-studio-v2__tile-icon--delete")).toHaveCount(1);
       await page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-control='visibility']").click();
       await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1']")).toHaveClass(/is-hidden/);
       await expect(page.locator("#objectVectorStudioV2RenderSurface [data-shape-id]")).toHaveCount(0);
@@ -1716,11 +1742,13 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-control='lock']").click();
       await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1']")).toHaveClass(/is-locked/);
       await expect(page.locator("#objectVectorStudioV2RenameObjectButton")).toBeDisabled();
+      await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-control='delete']")).toBeDisabled();
       await page.locator('[data-shape-tool="line"]').click();
       await expect(page.locator("#objectVectorStudioV2ObjectsCount")).toHaveText("(18 obj, 2 shapes)");
       await expect(page.locator("#statusLog")).toHaveValue(/WARN Create line blocked: object Asteroids Ship is locked for this runtime session\./);
       await page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-control='lock']").click();
       await expect(page.locator("#objectVectorStudioV2RenameObjectButton")).toBeEnabled();
+      await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object.asteroids.object-1'] [data-object-control='delete']")).toBeEnabled();
 
       const forceLeftPanelScroll = async () => page.evaluate(() => {
         const leftPanel = document.querySelector(".tool-starter__panel--left");
@@ -2081,11 +2109,11 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#objectVectorStudioV2JsonDetails")).toContainText('"shapes": []');
       await expect(page.locator("#statusLog")).toHaveValue(/OK Added object Shield Pickup with object\/game\/name id object\.asteroids\.shield-pickup\./);
 
-      await page.locator("#objectVectorStudioV2DeleteObjectButton").click();
+      await page.locator('[data-object-id="object.asteroids.shield-pickup"] [data-object-control="delete"]').click();
       await expect(page.locator("#objectVectorStudioV2ObjectsCount")).toHaveText("(18 obj, 2 shapes)");
       await expect(page.locator('[data-object-id="object.asteroids.shield-pickup"]')).toHaveCount(0);
       await expect(page.locator('[data-object-id="object.asteroids.object-1"]')).toHaveAttribute("aria-pressed", "true");
-      await expect(page.locator("#statusLog")).toHaveValue(/OK Deleted object Shield Pickup\./);
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Deleted object Shield Pickup from object tile delete\./);
 
       const leftAccordionLayout = await page.locator(".tool-starter__panel--left > .accordion-v2").evaluateAll((sections) => (
         sections.map((section) => {

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

@@ -940,7 +940,8 @@ export class ToolStarterApp {
       controls.className = "object-vector-studio-v2__object-tile-controls";
       controls.append(
         this.createObjectTileControl(object, "visibility"),
-        this.createObjectTileControl(object, "lock")
+        this.createObjectTileControl(object, "lock"),
+        this.createObjectTileControl(object, "delete")
       );
       tile.append(selectButton, controls);
       tile.addEventListener("click", () => {
@@ -980,17 +981,29 @@ export class ToolStarterApp {
     button.className = "object-vector-studio-v2__object-tile-control";
     button.type = "button";
     const isVisibility = kind === "visibility";
-    const isActive = isVisibility ? !this.isObjectHidden(object.id) : this.isObjectLocked(object.id);
+    const isDelete = kind === "delete";
+    const isLocked = this.isObjectLocked(object.id);
+    const isActive = isVisibility ? !this.isObjectHidden(object.id) : !isDelete && isLocked;
     button.dataset.objectControl = kind;
     button.dataset.objectControlId = object.id;
-    button.setAttribute("aria-pressed", String(isActive));
-    button.setAttribute("aria-label", isVisibility ? `${isActive ? "Hide" : "Show"} object ${object.name}` : `${isActive ? "Unlock" : "Lock"} object ${object.name}`);
-    button.append(this.createIconSpan(isVisibility ? "eye" : "lock", isActive));
-    button.title = isVisibility ? "Toggle object visibility" : "Toggle runtime object lock";
+    if (isDelete) {
+      button.classList.add("object-vector-studio-v2__object-tile-control--delete");
+      button.setAttribute("aria-label", `Delete object ${object.name}`);
+      button.append(this.createIconSpan("delete", true));
+      button.title = isLocked ? "Unlock object before deleting" : "Delete this object";
+      button.disabled = isLocked;
+    } else {
+      button.setAttribute("aria-pressed", String(isActive));
+      button.setAttribute("aria-label", isVisibility ? `${isActive ? "Hide" : "Show"} object ${object.name}` : `${isActive ? "Unlock" : "Lock"} object ${object.name}`);
+      button.append(this.createIconSpan(isVisibility ? "eye" : "lock", isActive));
+      button.title = isVisibility ? "Toggle object visibility" : "Toggle runtime object lock";
+    }
     button.addEventListener("click", (event) => {
       event.stopPropagation();
       if (isVisibility) {
         this.toggleObjectVisibility(object.id);
+      } else if (isDelete) {
+        this.deleteObjectById(object.id, "object tile delete");
       } else {
         this.toggleObjectLock(object.id);
       }
@@ -2618,6 +2631,31 @@ export class ToolStarterApp {
     this.commitPayloadUpdate(nextPayload, selectedObjectId, selectedShapeId, `OK Deleted object ${selected.name}.`, "Delete object failed schema validation");
   }
 
+  deleteObjectById(objectId, sourceLabel) {
+    const selected = this.currentPayload?.objects.find((object) => object.id === objectId);
+    if (!selected) {
+      this.statusLog.write(`WARN Delete object skipped: object id ${objectId || "unknown"} is not available.`);
+      return;
+    }
+    if (this.isObjectLocked(selected.id)) {
+      this.statusLog.write(`WARN Delete object blocked: object ${selected.name} is locked for this runtime session.`);
+      return;
+    }
+
+    const nextPayload = this.cloneCurrentPayload();
+    nextPayload.objects = nextPayload.objects.filter((object) => object.id !== selected.id);
+    const selectedObjectStillExists = nextPayload.objects.some((object) => object.id === this.selectedObjectId);
+    const nextSelectedObject = selectedObjectStillExists
+      ? nextPayload.objects.find((object) => object.id === this.selectedObjectId)
+      : nextPayload.objects[0] || null;
+    const selectedObjectId = nextSelectedObject?.id || "";
+    const selectedShapeStillExists = nextSelectedObject?.shapes.some((shape) => shape.id === this.selectedShapeId);
+    const selectedShapeId = selectedShapeStillExists ? this.selectedShapeId : nextSelectedObject ? sortedShapes(nextSelectedObject)[0]?.id || "" : "";
+    this.hiddenObjectIds.delete(selected.id);
+    this.lockedObjectIds.delete(selected.id);
+    this.commitPayloadUpdate(nextPayload, selectedObjectId, selectedShapeId, `OK Deleted object ${selected.name} from ${sourceLabel}.`, "Delete object failed schema validation");
+  }
+
   flattenSelectedObject() {
     const selected = this.selectedObject();
     if (!selected) {

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

@@ -960,25 +960,31 @@ textarea:hover {
 }
 
 .object-vector-studio-v2__object-tile-controls {
-  align-self: end;
+  align-self: center;
+  justify-self: end;
   position: relative;
   z-index: 2;
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
-  justify-content: end;
-  gap: 4px;
+  justify-content: center;
+  align-items: center;
+  gap: 2px;
 }
 
 .object-vector-studio-v2__object-tile-control {
   position: relative;
   z-index: 3;
-  width: 34px;
-  height: 34px;
-  min-height: 34px;
+  width: 26px;
+  height: 26px;
+  min-height: 26px;
   padding: 0 !important;
 }
 
+.object-vector-studio-v2__object-tile-control--delete {
+  color: var(--tool-starter-danger);
+}
+
 .object-vector-studio-v2__object-tile-shapes {
   grid-column: 1 / -1;
   display: grid;