Fix drawing hint stroke width preview and text placement rendering - PR_26133_071-preview-hint-stroke-width-and-text-placement-fixes

Author: DavidQ

docs/dev/reports/playwright_v8_coverage_report.md

@@ -1,6 +1,6 @@
 # Playwright V8 Coverage Report
 
-PR: PR_26133_070-unified-click-preview-click-shape-creation
+PR: PR_26133_071-preview-hint-stroke-width-and-text-placement-fixes
 
 Source: docs/dev/reports/playwright_v8_coverage_report.txt generated by the latest npm run test:workspace-v2 run.
 
@@ -21,9 +21,10 @@ 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 6352/6352; executed functions 645/676
+- (95%) tools/object-vector-studio-v2/js/ToolStarterApp.js - executed lines 6410/6410; executed functions 649/680
 
 ## Changed JS Files Considered
 
 - (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,23 @@
 # Playwright Workspace V2 Results
 
-PR: PR_26133_070-unified-click-preview-click-shape-creation
+PR: PR_26133_071-preview-hint-stroke-width-and-text-placement-fixes
 
 ## Validation
 
 - PASS: npm run test:workspace-v2
 - Result: 54 passed
-- Runtime: 4.9m
+- Runtime: 5.2m
 - Browser project: playwright
 - Workers: 1
 
 ## Targeted Checks Covered
 
-- Simple/bounded Object Vector Studio V2 tools use click -> live preview -> click commit for line, rectangle, square, circle, ellipse, arc, text, and triangle.
-- Polygon and Polyline keep multi-point click behavior and still finish through Enter/double-click completion paths.
-- Drawing preview remains visible after first click and mouse move; Escape does not cancel Object Vector Studio V2 drawing.
-- Committed shapes capture active Stroke color, Stroke opacity, and Stroke Width consistently from drawing start through commit.
-- Newly committed shapes keep transparent fill unless Paint is applied later.
-- Snap Grid, Snap Point, and Snap None behaviors remain covered during drawing flows.
+- 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.
 
 ## Console/Runtime Errors
 

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -3486,6 +3486,31 @@ 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");
+        const app = window.__objectVectorStudioV2App;
+        return {
+          hintX: Number(text.getAttribute("x")),
+          hintY: Number(text.getAttribute("y")),
+          pointerEvents: getComputedStyle(hint).pointerEvents,
+          pointerX: app.drawingPreviewPoint.x * 10,
+          pointerY: app.drawingPreviewPoint.y * 10,
+          textPointerEvents: getComputedStyle(text).pointerEvents
+        };
+      });
+      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"))
+      }));
+      expect(movedPolygonHint.x).toBeGreaterThan(polygonHintState.hintX);
+      expect(movedPolygonHint.y).toBeGreaterThan(polygonHintState.hintY);
       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();
@@ -3623,6 +3648,68 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         { fill: "#00000000", fillOpacity: 1, stroke: "#6fd3ff", strokeOpacity: 1, strokeWidth: 4.5, tool: "text" }
       ]);
 
+      await page.locator("#objectVectorStudioV2StrokeWidth").fill("20");
+      await page.locator("#objectVectorStudioV2StrokeWidth").dispatchEvent("change");
+      await page.locator('[data-shape-tool="line"]').click();
+      await clickObjectVectorLogicalPoint(page, -40, -50);
+      await moveObjectVectorLogicalPoint(page, { x: -10, y: -50 });
+      const wideStrokePreview = await page.locator("#objectVectorStudioV2RenderSurface .object-vector-studio-v2__drawing-preview").evaluate((preview) => ({
+        dash: preview.style.strokeDasharray,
+        strokeWidth: Number(preview.getAttribute("stroke-width")),
+        tool: preview.dataset.drawingPreviewTool
+      }));
+      const wideStrokeDash = wideStrokePreview.dash.match(/[\d.]+/g).map(Number);
+      expect(wideStrokePreview).toMatchObject({ strokeWidth: 20, tool: "line" });
+      expect(wideStrokeDash[0]).toBeGreaterThan(5);
+      expect(wideStrokeDash[0]).toBeLessThan(220);
+      expect(wideStrokeDash[1]).toBeGreaterThan(4);
+      await clickObjectVectorLogicalPoint(page, -10, -50);
+      const wideStrokeLine = await page.evaluate(() => {
+        const app = window.__objectVectorStudioV2App;
+        return {
+          index: app.selectedShapeIndex,
+          style: JSON.parse(JSON.stringify(app.selectedShape().style))
+        };
+      });
+      expect(wideStrokeLine.style).toMatchObject({
+        fill: "#00000000",
+        stroke: "#6fd3ff",
+        strokeOpacity: 1,
+        strokeWidth: 20
+      });
+      const committedWideLine = await page.locator(`#objectVectorStudioV2RenderSurface [data-shape-index="${wideStrokeLine.index}"]`).evaluate((shape) => ({
+        dash: getComputedStyle(shape).strokeDasharray,
+        isPreview: shape.classList.contains("object-vector-studio-v2__drawing-preview"),
+        strokeWidth: Number(shape.getAttribute("stroke-width"))
+      }));
+      expect(committedWideLine).toEqual({ dash: "none", isPreview: false, strokeWidth: 20 });
+
+      await page.locator('[data-shape-tool="text"]').click();
+      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,
+        text: preview.textContent.trim(),
+        tool: preview.dataset.drawingPreviewTool
+      }));
+      expect(textPreview.fill).toMatch(/#6fd3ff|rgb\(111, 211, 255\)/);
+      expect(textPreview).toMatchObject({
+        stroke: "none",
+        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({
+        fill: "#00000000",
+        stroke: "#6fd3ff",
+        strokeOpacity: 1,
+        strokeWidth: 20
+      });
+
       expect(pageErrors).toEqual([]);
       expect(consoleErrors).toEqual([]);
     } finally {

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

@@ -2486,6 +2486,7 @@ export class ToolStarterApp {
     this.renderObjectBounds(object);
     this.renderSnapPointTargets(object);
     this.renderDrawingPreview();
+    this.renderDrawingHint();
     this.renderSelectionOverlay(object);
     this.renderCenterOriginMarker();
 
@@ -2687,12 +2688,69 @@ export class ToolStarterApp {
       const element = this.createSvgShape(previewShape, { drawingScale: OBJECT_PREVIEW_DRAWING_SCALE });
       element.classList.add("object-vector-studio-v2__drawing-preview");
       element.dataset.drawingPreviewTool = this.activeDrawing.tool;
+      this.applyDrawingPreviewPresentation(element, previewShape);
       this.elements.renderSurface.append(element);
     } catch (error) {
       this.statusLog.write(`FAIL Drawing preview failed for ${this.activeDrawing.tool}: ${error.message}`);
     }
   }
 
+  renderDrawingHint() {
+    const drawing = this.activeDrawing;
+    if (!drawing || !["polygon", "polyline"].includes(drawing.tool) || !this.drawingPreviewPoint) {
+      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 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);
+    element.style.strokeLinecap = "round";
+    element.style.strokeLinejoin = "round";
+  }
+
+  drawingPreviewDashArray(strokeWidth) {
+    const normalizedWidth = Number(strokeWidth);
+    const width = Number.isFinite(normalizedWidth) && normalizedWidth > 0 ? normalizedWidth : 2;
+    const unitsPerPixel = this.svgUnitsPerCssPixel();
+    const dashPixels = Math.max(12, Math.min(24, width * 1.1));
+    const gapPixels = Math.max(8, Math.min(18, width * 0.75));
+    return `${this.formatViewportNumber(dashPixels * unitsPerPixel)} ${this.formatViewportNumber(gapPixels * unitsPerPixel)}`;
+  }
+
+  svgUnitsPerCssPixel() {
+    const bounds = this.elements.renderSurface.getBoundingClientRect();
+    const viewBox = this.elements.renderSurface.viewBox?.baseVal;
+    if (!bounds.width || !viewBox?.width) {
+      return 1;
+    }
+    return viewBox.width / bounds.width;
+  }
+
   visibleSnapPoints(object = this.selectedObject(), options = {}) {
     if (!object) {
       return [];
@@ -3460,6 +3518,9 @@ export class ToolStarterApp {
     const point = this.snapCanvasPoint(this.pointerPreviewPoint(event));
     this.drawingPreviewPoint = point;
     if (drawing.flow === "points") {
+      if (!drawing.points.length) {
+        drawing.style = this.drawingStyleFromActivePalette();
+      }
       drawing.points.push(point);
       drawing.preview = point;
       this.renderWorkSurface();
@@ -3468,6 +3529,7 @@ export class ToolStarterApp {
     }
     if (drawing.flow === "two-click") {
       if (!drawing.start) {
+        drawing.style = this.drawingStyleFromActivePalette();
         drawing.start = point;
         drawing.preview = null;
         this.renderWorkSurface();

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

@@ -1444,6 +1444,21 @@ textarea:hover {
   pointer-events: none;
 }
 
+.object-vector-studio-v2__drawing-hint {
+  pointer-events: none;
+}
+
+.object-vector-studio-v2__drawing-hint-text {
+  fill: 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;
+}
+
 .object-vector-studio-v2__snap-targets {
   pointer-events: none;
 }