Keep drawing hint screen sized restore Enter completion and revert text placement behavior - PR_26133_072-drawing-hint-enter-complete-and-text-restore

Author: DavidQ

docs/dev/reports/playwright_v8_coverage_report.md

@@ -1,6 +1,6 @@
 # Playwright V8 Coverage Report
 
-PR: PR_26133_071-preview-hint-stroke-width-and-text-placement-fixes
+PR: PR_26133_072-drawing-hint-enter-complete-and-text-restore
 
 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 6410/6410; executed functions 649/680
+- (95%) tools/object-vector-studio-v2/js/ToolStarterApp.js - executed lines 6432/6432; executed functions 651/682
 
 ## Changed JS Files Considered
 

docs/dev/reports/playwright_workspace_v2_results.md

@@ -1,23 +1,23 @@
 # Playwright Workspace V2 Results
 
-PR: PR_26133_071-preview-hint-stroke-width-and-text-placement-fixes
+PR: PR_26133_072-drawing-hint-enter-complete-and-text-restore
 
 ## Validation
 
 - PASS: npm run test:workspace-v2
 - Result: 54 passed
-- Runtime: 5.2m
+- Runtime: 5.3m
 - Browser project: playwright
 - Workers: 1
 
 ## Targeted Checks Covered
 
-- Polygon drawing shows a cursor-following "Double-click / Enter to complete" hint with pointer-events disabled.
-- Polygon and Polyline keep existing multi-point completion behavior.
-- Stroke width 20 drawing previews use proportional dash spacing instead of the small default dash pattern.
-- Completed wide-stroke shapes render solid and immediately keep the active Stroke Width.
-- Text placement preview renders readable text instead of a wide stroked blob.
-- Committed text keeps transparent fill plus active stroke color, opacity, and width under current style rules.
+- 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.
 
 ## Console/Runtime Errors
 

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -114,6 +114,20 @@ async function mouseClickObjectVectorLogicalPoint(page, x, y, options = {}) {
   await page.mouse.click(point.x, point.y, options);
 }
 
+async function doubleClickObjectVectorLogicalPoint(page, x, y) {
+  const point = await objectVectorLogicalClientPoint(page, x, y);
+  await page.evaluate((clientPoint) => {
+    const surface = document.querySelector("#objectVectorStudioV2RenderSurface");
+    surface.dispatchEvent(new MouseEvent("dblclick", {
+      bubbles: true,
+      button: 0,
+      cancelable: true,
+      clientX: clientPoint.x,
+      clientY: clientPoint.y
+    }));
+  }, point);
+}
+
 async function dragObjectVectorLogicalPoints(page, start, end) {
   const startPoint = await objectVectorLogicalClientPoint(page, start.x, start.y);
   const endPoint = await objectVectorLogicalClientPoint(page, end.x, end.y);
@@ -3487,30 +3501,52 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await page.locator('[data-shape-tool="polygon"]').click();
       await expect(page.locator("#statusLog")).toHaveValue(/OK Drawing mode selected: Polygon\. Click to add points\.\n\nDouble-click to finish\./);
       await moveObjectVectorLogicalPoint(page, { x: -30, y: -20 });
-      await expect(page.locator("#objectVectorStudioV2RenderSurface .object-vector-studio-v2__drawing-hint")).toHaveText("Double-click / Enter to complete");
-      const polygonHintState = await page.locator("#objectVectorStudioV2RenderSurface .object-vector-studio-v2__drawing-hint").evaluate((hint) => {
-        const text = hint.querySelector("text");
+      await expect(page.locator("#objectVectorStudioV2WorkArea .object-vector-studio-v2__drawing-hint")).toHaveText("Double-click / Enter to complete");
+      const polygonHintState = await page.locator("#objectVectorStudioV2WorkArea .object-vector-studio-v2__drawing-hint").evaluate((hint) => {
         const app = window.__objectVectorStudioV2App;
+        const rect = hint.getBoundingClientRect();
         return {
-          hintX: Number(text.getAttribute("x")),
-          hintY: Number(text.getAttribute("y")),
+          fontSize: getComputedStyle(hint).fontSize,
+          height: Math.round(rect.height),
+          hintX: Math.round(rect.left),
+          hintY: Math.round(rect.top),
           pointerEvents: getComputedStyle(hint).pointerEvents,
-          pointerX: app.drawingPreviewPoint.x * 10,
-          pointerY: app.drawingPreviewPoint.y * 10,
-          textPointerEvents: getComputedStyle(text).pointerEvents
+          pointerX: Math.round(app.drawingHintClientPoint.x),
+          pointerY: Math.round(app.drawingHintClientPoint.y)
         };
       });
       expect(polygonHintState.pointerEvents).toBe("none");
-      expect(polygonHintState.textPointerEvents).toBe("none");
       expect(polygonHintState.hintX).toBeGreaterThan(polygonHintState.pointerX);
       expect(polygonHintState.hintY).toBeGreaterThan(polygonHintState.pointerY);
       await moveObjectVectorLogicalPoint(page, { x: -25, y: -15 });
-      const movedPolygonHint = await page.locator("#objectVectorStudioV2RenderSurface .object-vector-studio-v2__drawing-hint text").evaluate((text) => ({
-        x: Number(text.getAttribute("x")),
-        y: Number(text.getAttribute("y"))
+      const movedPolygonHint = await page.locator("#objectVectorStudioV2WorkArea .object-vector-studio-v2__drawing-hint").evaluate((hint) => ({
+        x: Math.round(hint.getBoundingClientRect().left),
+        y: Math.round(hint.getBoundingClientRect().top)
       }));
       expect(movedPolygonHint.x).toBeGreaterThan(polygonHintState.hintX);
       expect(movedPolygonHint.y).toBeGreaterThan(polygonHintState.hintY);
+      const zoomHintStates = await page.locator("#objectVectorStudioV2WorkArea .object-vector-studio-v2__drawing-hint").evaluate((hint) => {
+        const app = window.__objectVectorStudioV2App;
+        const collect = (zoom) => {
+          app.viewport.zoom = zoom;
+          app.updateViewport();
+          app.renderWorkSurface();
+          const nextHint = document.querySelector("#objectVectorStudioV2WorkArea .object-vector-studio-v2__drawing-hint");
+          const rect = nextHint.getBoundingClientRect();
+          return {
+            fontSize: getComputedStyle(nextHint).fontSize,
+            height: Math.round(rect.height),
+            zoom
+          };
+        };
+        const states = [collect(0.1), collect(0.3), collect(0.05)];
+        app.viewport.zoom = 0.1;
+        app.updateViewport();
+        app.renderWorkSurface();
+        return states;
+      });
+      expect(zoomHintStates.map((state) => state.fontSize)).toEqual(["12px", "12px", "12px"]);
+      expect(new Set(zoomHintStates.map((state) => state.height)).size).toBe(1);
       await page.locator('[data-shape-tool="polyline"]').click();
       await expect(page.locator("#statusLog")).toHaveValue(/OK Drawing mode selected: Polyline\. Click to add points\.\n\nDouble-click to finish\./);
       await page.locator('[data-shape-tool="rectangle"]').click();
@@ -3688,19 +3724,21 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await clickObjectVectorLogicalPoint(page, 70, 60);
       await moveObjectVectorLogicalPoint(page, { x: 76, y: 66 });
       const textPreview = await page.locator("#objectVectorStudioV2RenderSurface text.object-vector-studio-v2__drawing-preview").evaluate((preview) => ({
-        fill: preview.style.fill || preview.getAttribute("fill"),
-        stroke: preview.style.stroke,
-        strokeWidth: preview.style.strokeWidth,
+        dash: preview.style.strokeDasharray,
+        fill: preview.getAttribute("fill"),
+        stroke: preview.getAttribute("stroke"),
+        strokeWidth: Number(preview.getAttribute("stroke-width")),
         text: preview.textContent.trim(),
         tool: preview.dataset.drawingPreviewTool
       }));
-      expect(textPreview.fill).toMatch(/#6fd3ff|rgb\(111, 211, 255\)/);
-      expect(textPreview).toMatchObject({
-        stroke: "none",
+      expect(textPreview).toEqual({
+        dash: "none",
+        fill: "#00000000",
+        stroke: "#6fd3ff",
+        strokeWidth: 20,
         text: "Text",
         tool: "text"
       });
-      expect(["0", "0px"]).toContain(textPreview.strokeWidth);
       await clickObjectVectorLogicalPoint(page, 76, 66);
       const committedTextStyle = await page.evaluate(() => ({ ...window.__objectVectorStudioV2App.selectedShape().style }));
       expect(committedTextStyle).toMatchObject({
@@ -3710,6 +3748,16 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         strokeWidth: 20
       });
 
+      const shapeCountBeforeDoubleClick = await page.evaluate(() => window.__objectVectorStudioV2App.selectedObject().shapes.length);
+      await page.locator('[data-shape-tool="polygon"]').click();
+      await clickObjectVectorLogicalPoint(page, 80, -40);
+      await clickObjectVectorLogicalPoint(page, 95, -40);
+      await clickObjectVectorLogicalPoint(page, 95, -25);
+      await clickObjectVectorLogicalPoint(page, 80, -25);
+      await doubleClickObjectVectorLogicalPoint(page, 80, -25);
+      await expect.poll(async () => page.evaluate(() => window.__objectVectorStudioV2App.selectedObject().shapes.length)).toBe(shapeCountBeforeDoubleClick + 1);
+      await expect(page.locator("#statusLog")).toHaveValue(/OK Created polygon shape on Drawing Flow from double-click\./);
+
       expect(pageErrors).toEqual([]);
       expect(consoleErrors).toEqual([]);
     } finally {

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

@@ -489,6 +489,7 @@ export class ToolStarterApp {
     this.isPaintDragging = false;
     this.activeDrawing = null;
     this.drawingPreviewPoint = null;
+    this.drawingHintClientPoint = null;
     this.previewPointerEdit = null;
     this.transformInputValues = new Map();
     this.stateControlStateId = "";
@@ -2441,6 +2442,7 @@ export class ToolStarterApp {
   renderWorkSurface() {
     const object = this.selectedObject();
     this.elements.renderSurface.classList.toggle("is-drawing-mode", Boolean(this.activeDrawing));
+    this.removeDrawingHint();
     this.elements.renderSurface.replaceChildren();
     this.renderSvgGrid();
     if (!object) {
@@ -2698,34 +2700,52 @@ export class ToolStarterApp {
   renderDrawingHint() {
     const drawing = this.activeDrawing;
     if (!drawing || !["polygon", "polyline"].includes(drawing.tool) || !this.drawingPreviewPoint) {
+      this.removeDrawingHint();
       return;
     }
-    const point = {
-      x: Number(this.scaleDrawingValue(this.drawingPreviewPoint.x, OBJECT_PREVIEW_DRAWING_SCALE)),
-      y: Number(this.scaleDrawingValue(this.drawingPreviewPoint.y, OBJECT_PREVIEW_DRAWING_SCALE))
+    const workArea = this.elements.renderSurface.closest(".object-vector-studio-v2__work-area");
+    if (!workArea) {
+      return;
+    }
+    const clientPoint = this.drawingHintClientPoint || this.clientPointFromDrawingPoint(this.drawingPreviewPoint);
+    if (!clientPoint) {
+      this.removeDrawingHint();
+      return;
+    }
+    const workAreaBounds = workArea.getBoundingClientRect();
+    const hint = document.createElement("div");
+    hint.className = "object-vector-studio-v2__drawing-hint";
+    hint.dataset.drawingHintTool = drawing.tool;
+    hint.textContent = "Double-click / Enter to complete";
+    hint.style.left = `${Math.round(clientPoint.x - workAreaBounds.left + 12)}px`;
+    hint.style.top = `${Math.round(clientPoint.y - workAreaBounds.top + 16)}px`;
+    workArea.append(hint);
+  }
+
+  removeDrawingHint() {
+    this.elements.renderSurface.closest(".object-vector-studio-v2__work-area")
+      ?.querySelector(".object-vector-studio-v2__drawing-hint")
+      ?.remove();
+  }
+
+  clientPointFromDrawingPoint(point) {
+    const bounds = this.elements.renderSurface.getBoundingClientRect();
+    if (!bounds.width || !bounds.height) {
+      return null;
+    }
+    const viewWidth = DEFAULT_VIEWPORT.width / this.viewport.zoom;
+    const viewHeight = DEFAULT_VIEWPORT.height / this.viewport.zoom;
+    const drawingX = point.x * OBJECT_PREVIEW_DRAWING_SCALE;
+    const drawingY = point.y * OBJECT_PREVIEW_DRAWING_SCALE;
+    return {
+      x: bounds.left + ((drawingX - this.viewport.x + viewWidth / 2) / viewWidth) * bounds.width,
+      y: bounds.top + ((drawingY - this.viewport.y + viewHeight / 2) / viewHeight) * bounds.height
     };
-    const unitsPerPixel = this.svgUnitsPerCssPixel();
-    const group = document.createElementNS(SVG_NS, "g");
-    const text = document.createElementNS(SVG_NS, "text");
-    group.classList.add("object-vector-studio-v2__drawing-hint");
-    group.dataset.drawingHintTool = drawing.tool;
-    group.setAttribute("pointer-events", "none");
-    text.classList.add("object-vector-studio-v2__drawing-hint-text");
-    text.setAttribute("x", this.formatViewportNumber(point.x + 12 * unitsPerPixel));
-    text.setAttribute("y", this.formatViewportNumber(point.y + 16 * unitsPerPixel));
-    text.textContent = "Double-click / Enter to complete";
-    group.append(text);
-    this.elements.renderSurface.append(group);
   }
 
   applyDrawingPreviewPresentation(element, previewShape) {
     if (shapeGeometryTool(previewShape) === "text") {
-      element.style.fill = previewShape.style.stroke || "#ffffff";
-      element.style.fillOpacity = String(previewShape.style.strokeOpacity ?? 1);
-      element.style.stroke = "none";
       element.style.strokeDasharray = "none";
-      element.style.strokeWidth = "0";
-      element.style.paintOrder = "normal";
       return;
     }
     element.style.strokeDasharray = this.drawingPreviewDashArray(previewShape.style.strokeWidth);
@@ -3430,6 +3450,7 @@ export class ToolStarterApp {
     this.previewPointerEdit = null;
     this.activeDrawing = this.createDrawingState(tool);
     this.drawingPreviewPoint = null;
+    this.drawingHintClientPoint = null;
     this.renderWorkSurface();
     const objectHint = this.selectedObject() ? "" : " Select a schema-valid object before committing geometry.";
     const drawingHelp = ["polygon", "polyline"].includes(tool)
@@ -3472,6 +3493,7 @@ export class ToolStarterApp {
     const tool = this.activeDrawing.tool;
     this.activeDrawing = null;
     this.drawingPreviewPoint = null;
+    this.drawingHintClientPoint = null;
     this.activeTool = "select";
     const selectButton = this.elements.toolToggles.find((candidate) => candidate.dataset.shapeTool === "select") || null;
     this.setActiveToolButton(selectButton);
@@ -3517,6 +3539,7 @@ export class ToolStarterApp {
     event.stopPropagation();
     const point = this.snapCanvasPoint(this.pointerPreviewPoint(event));
     this.drawingPreviewPoint = point;
+    this.drawingHintClientPoint = { x: event.clientX, y: event.clientY };
     if (drawing.flow === "points") {
       if (!drawing.points.length) {
         drawing.style = this.drawingStyleFromActivePalette();
@@ -3558,6 +3581,7 @@ export class ToolStarterApp {
     }
     drawing.preview = point;
     this.drawingPreviewPoint = point;
+    this.drawingHintClientPoint = { x: event.clientX, y: event.clientY };
     this.renderWorkSurface();
   }
 

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

@@ -1107,6 +1107,7 @@ textarea:hover {
 }
 
 .object-vector-studio-v2__work-area {
+  position: relative;
   min-height: 0;
   flex: 0 0 auto;
   display: grid;
@@ -1445,18 +1446,19 @@ textarea:hover {
 }
 
 .object-vector-studio-v2__drawing-hint {
-  pointer-events: none;
-}
-
-.object-vector-studio-v2__drawing-hint-text {
-  fill: var(--tool-starter-text);
+  position: absolute;
+  z-index: 6;
+  max-width: min(260px, calc(100% - 24px));
+  border: 1px solid rgba(221, 214, 254, 0.45);
+  border-radius: 6px;
+  background: rgba(2, 6, 23, 0.92);
+  color: var(--tool-starter-text);
   font-family: "0xProto Nerd Font", "Cascadia Mono", monospace;
   font-size: 12px;
-  paint-order: stroke;
-  stroke: rgba(2, 6, 23, 0.95);
-  stroke-linejoin: round;
-  stroke-width: 4px;
-  vector-effect: non-scaling-stroke;
+  line-height: 1.2;
+  padding: 4px 7px;
+  white-space: nowrap;
+  pointer-events: none;
 }
 
 .object-vector-studio-v2__snap-targets {