Add two-click text placement wire edit toolbar and clear Paint on right click - PR_26133_073-text-placement-edit-toolbar-and-right-click-paint-clear

Author: DavidQ

docs/dev/reports/playwright_v8_coverage_report.md

@@ -1,6 +1,6 @@
 # Playwright V8 Coverage Report
 
-PR: PR_26133_072-drawing-hint-enter-complete-and-text-restore
+PR: PR_26133_073-text-placement-edit-toolbar-and-right-click-paint-clear
 
 Source: docs/dev/reports/playwright_v8_coverage_report.txt generated by the latest npm run test:workspace-v2 run.
 
@@ -21,10 +21,11 @@ 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 6432/6432; executed functions 651/682
+- (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 6594/6594; executed functions 669/700
 
 ## 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
-- (95%) tools/object-vector-studio-v2/js/ToolStarterApp.js - changed runtime JS file with browser V8 coverage
-- (0%) tools/object-vector-studio-v2/styles/toolStarter.css - CSS file, not collected by browser JavaScript V8 coverage

docs/dev/reports/playwright_workspace_v2_results.md

@@ -1,23 +1,22 @@
 # Playwright Workspace V2 Results
 
-PR: PR_26133_072-drawing-hint-enter-complete-and-text-restore
+PR: PR_26133_073-text-placement-edit-toolbar-and-right-click-paint-clear
 
 ## Validation
 
 - PASS: npm run test:workspace-v2
 - Result: 54 passed
-- Runtime: 5.3m
+- Runtime: 5.1m
 - Browser project: playwright
 - Workers: 1
 
 ## Targeted Checks Covered
 
-- Drawing hint keeps "Double-click / Enter to complete" and renders as a fixed-size HTML overlay outside SVG canvas scaling.
-- Hint follows the pointer with offset and keeps pointer-events disabled.
-- Hint size remains stable at 100%, 300%, and 50% zoom states.
-- Polygon and Polyline Enter completion remain covered through drawing helpers.
-- Polygon double-click completion is explicitly verified.
-- Text preview uses restored normal SVG text style attributes while avoiding dashed preview artifacts for wide stroke width.
+- Text tool uses first click, live preview, and second click commit for schema-valid text placement.
+- Text preview and committed text preserve active stroke color, stroke opacity, stroke width, and transparent fill.
+- Object Preview toolbar enables Undo, Copy, and Paste when valid; Paste uses copied shape data; Undo/Redo restore shape count.
+- Right-click on a shape applies transparent Paint/fill only to the clicked shape and suppresses the browser context menu.
+- Stroke-mode right-click no longer clears stroke.
 
 ## Console/Runtime Errors
 

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -2953,18 +2953,15 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       });
       await page.locator("#objectVectorStudioV2StrokeModeButton").click();
       await rightClickPreviewShape(1);
-      await expect(page.locator("#statusLog")).toHaveValue(/OK Applied transparent stroke to shape row 1 by right-click\./);
-      await expect(page.locator("#objectVectorStudioV2JsonDetails")).toContainText('"stroke": "#00000000"');
-      const shapeOneStyleAfterTransparentStroke = await page.evaluate(() => ({
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Applied transparent fill to shape row 1 by right-click\./);
+      await expect(page.locator("#objectVectorStudioV2JsonDetails")).not.toContainText('"stroke": "#00000000"');
+      const shapeOneStyleAfterSecondRightClick = await page.evaluate(() => ({
         contextMenuPrevented: window.__objectVectorStudioV2ContextMenuPrevented,
         style: { ...window.__objectVectorStudioV2App.selectedShape().style }
       }));
-      expect(shapeOneStyleAfterTransparentStroke).toEqual({
+      expect(shapeOneStyleAfterSecondRightClick).toEqual({
         contextMenuPrevented: true,
-        style: {
-          ...shapeOneStyleAfterTransparentFill.style,
-          stroke: "#00000000"
-        }
+        style: shapeOneStyleAfterTransparentFill.style
       });
       await expect(page.locator("#objectVectorStudioV2FillOpacity")).toHaveValue("128");
       await expect(page.locator("#objectVectorStudioV2StrokeOpacity")).toHaveValue("166");
@@ -2973,7 +2970,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await page.keyboard.press("I");
       await expect(page.locator('[data-shape-tool="picker"]')).toHaveAttribute("aria-pressed", "true");
       await clickPreviewShape(1);
-      await expect(page.locator("#statusLog")).toHaveValue(/OK Picker sampled shape row 1: fill #00000000, stroke #00000000, fill opacity 0\.502, stroke opacity 0\.651, stroke width 2\./);
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Picker sampled shape row 1: fill #00000000, stroke #6fd3ff, fill opacity 0\.502, stroke opacity 0\.651, stroke width 2\./);
       const pickerState = await page.evaluate(() => {
         const app = window.__objectVectorStudioV2App;
         return {
@@ -2995,7 +2992,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         paletteTarget: "stroke",
         selectedFillColor: "#00000000",
         selectedFillOpacity: 0.502,
-        selectedStrokeColor: "#00000000",
+        selectedStrokeColor: "#6fd3ff",
         selectedStrokeOpacity: 0.651,
         shapeStyle: shapeOneStyleBeforePicker,
         strokeInput: "166",
@@ -3661,7 +3658,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await drawObjectVectorShape(page, "circle", [{ x: 20, y: -20 }, { x: 45, y: -20 }]);
       await drawObjectVectorShape(page, "ellipse", [{ x: 60, y: -30 }, { x: 95, y: -5 }]);
       await drawObjectVectorShape(page, "triangle", [{ x: -30, y: 50 }, { x: 10, y: 80 }]);
-      await drawObjectVectorShape(page, "text", [{ x: 50, y: 50 }]);
+      await drawObjectVectorShape(page, "text", [{ x: 50, y: 50 }, { x: 60, y: 62 }]);
       const strokeOnlyCreatedShapes = await page.evaluate(() => {
         const createdTools = ["rectangle", "square", "circle", "ellipse", "triangle", "text"];
         return window.__objectVectorStudioV2App.selectedObject().shapes
@@ -3726,6 +3723,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       const textPreview = await page.locator("#objectVectorStudioV2RenderSurface text.object-vector-studio-v2__drawing-preview").evaluate((preview) => ({
         dash: preview.style.strokeDasharray,
         fill: preview.getAttribute("fill"),
+        fontSize: Number(preview.getAttribute("font-size")),
         stroke: preview.getAttribute("stroke"),
         strokeWidth: Number(preview.getAttribute("stroke-width")),
         text: preview.textContent.trim(),
@@ -3734,19 +3732,49 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       expect(textPreview).toEqual({
         dash: "none",
         fill: "#00000000",
+        fontSize: 60,
         stroke: "#6fd3ff",
         strokeWidth: 20,
         text: "Text",
         tool: "text"
       });
       await clickObjectVectorLogicalPoint(page, 76, 66);
-      const committedTextStyle = await page.evaluate(() => ({ ...window.__objectVectorStudioV2App.selectedShape().style }));
-      expect(committedTextStyle).toMatchObject({
+      const committedText = await page.evaluate(() => ({
+        geometry: { ...window.__objectVectorStudioV2App.selectedShape().geometry },
+        shapeCount: window.__objectVectorStudioV2App.selectedObject().shapes.length,
+        style: { ...window.__objectVectorStudioV2App.selectedShape().style }
+      }));
+      expect(committedText.geometry).toEqual({ fontSize: 6, text: "Text", x: 70, y: 66 });
+      expect(committedText.style).toMatchObject({
         fill: "#00000000",
         stroke: "#6fd3ff",
         strokeOpacity: 1,
         strokeWidth: 20
       });
+      const previewToolbarAfterText = await page.evaluate(() => Array.from(document.querySelectorAll(".object-vector-studio-v2__preview-edit-toolbar button")).map((button) => ({
+        disabled: button.disabled,
+        label: button.textContent.trim()
+      })));
+      expect(previewToolbarAfterText).toEqual([
+        { disabled: false, label: "Undo" },
+        { disabled: true, label: "Redo" },
+        { disabled: false, label: "Copy" },
+        { disabled: true, label: "Paste" }
+      ]);
+      await page.locator("#objectVectorStudioV2PreviewCopyButton").click();
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Copied shape row \d+ to Object Preview clipboard\./);
+      await expect(page.locator("#objectVectorStudioV2PreviewPasteButton")).toBeEnabled();
+      await page.locator("#objectVectorStudioV2PreviewPasteButton").click();
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Pasted copied shape into Drawing Flow\./);
+      await expect.poll(async () => page.evaluate(() => window.__objectVectorStudioV2App.selectedObject().shapes.length)).toBe(committedText.shapeCount + 1);
+      await expect(page.locator("#objectVectorStudioV2PreviewUndoButton")).toBeEnabled();
+      await page.locator("#objectVectorStudioV2PreviewUndoButton").click();
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Undo applied to Object Preview edits\./);
+      await expect.poll(async () => page.evaluate(() => window.__objectVectorStudioV2App.selectedObject().shapes.length)).toBe(committedText.shapeCount);
+      await expect(page.locator("#objectVectorStudioV2PreviewRedoButton")).toBeEnabled();
+      await page.locator("#objectVectorStudioV2PreviewRedoButton").click();
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Redo applied to Object Preview edits\./);
+      await expect.poll(async () => page.evaluate(() => window.__objectVectorStudioV2App.selectedObject().shapes.length)).toBe(committedText.shapeCount + 1);
 
       const shapeCountBeforeDoubleClick = await page.evaluate(() => window.__objectVectorStudioV2App.selectedObject().shapes.length);
       await page.locator('[data-shape-tool="polygon"]').click();

tools/object-vector-studio-v2/index.html

@@ -126,10 +126,10 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
               <div id="objectVectorStudioV2ObjectPreviewFooter" class="object-vector-studio-v2__preview-footer">Object ID: none</div>
               <hr class="object-vector-studio-v2__separator">
               <div class="object-vector-studio-v2__preview-edit-toolbar" aria-label="Object preview edit actions">
-                <button id="objectVectorStudioV2PreviewUndoButton" type="button" disabled title="Undo is not wired for Object Preview edits yet" aria-label="Undo">Undo</button>
-                <button id="objectVectorStudioV2PreviewRedoButton" type="button" disabled title="Redo is not wired for Object Preview edits yet" aria-label="Redo">Redo</button>
-                <button id="objectVectorStudioV2PreviewCopyButton" type="button" disabled title="Copy is not wired for Object Preview edits yet" aria-label="Copy">Copy</button>
-                <button id="objectVectorStudioV2PreviewPasteButton" type="button" disabled title="Paste is not wired for Object Preview edits yet" aria-label="Paste">Paste</button>
+                <button id="objectVectorStudioV2PreviewUndoButton" type="button" disabled title="Undo the last Object Preview edit" aria-label="Undo">Undo</button>
+                <button id="objectVectorStudioV2PreviewRedoButton" type="button" disabled title="Redo the last undone Object Preview edit" aria-label="Redo">Redo</button>
+                <button id="objectVectorStudioV2PreviewCopyButton" type="button" disabled title="Copy the selected shape" aria-label="Copy">Copy</button>
+                <button id="objectVectorStudioV2PreviewPasteButton" type="button" disabled title="Paste the copied shape into the selected object" aria-label="Paste">Paste</button>
               </div>
               <hr class="object-vector-studio-v2__separator">
               <div class="object-vector-studio-v2__animation-controls" aria-label="Animation controls">