Fix Object Preview selection drawing style snap and Paint Stroke behavior - PR_26133_069-object-preview-selection-style-and-snap-fixes

Author: DavidQ

docs/dev/reports/playwright_v8_coverage_report.md

@@ -1,6 +1,6 @@
-# Playwright V8 Coverage Report
+# Playwright V8 Coverage Report
 
-PR: PR_26133_066-paint-stroke-picker-and-transparent-right-click
+PR: PR_26133_069-object-preview-selection-style-and-snap-fixes
 
 Source: docs/dev/reports/playwright_v8_coverage_report.txt generated by the latest npm run test:workspace-v2 run.
 
@@ -21,13 +21,9 @@ 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 6355/6355; executed functions 644/676
+- (95%) tools/object-vector-studio-v2/js/ToolStarterApp.js - executed lines 6357/6357; executed functions 644/676
 
 ## 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
-
-## Non-JS Changed Files
-
-- tools/object-vector-studio-v2/index.html - markup change, not applicable to V8 coverage

docs/dev/reports/playwright_workspace_v2_results.md

@@ -1,22 +1,24 @@
-# Playwright Workspace V2 Results
+# Playwright Workspace V2 Results
 
-PR: PR_26133_066-paint-stroke-picker-and-transparent-right-click
+PR: PR_26133_069-object-preview-selection-style-and-snap-fixes
 
 ## Validation
 
 - PASS: npm run test:workspace-v2
 - Result: 54 passed
-- Runtime: 5.0m
+- Runtime: 4.9m
 - Browser project: playwright
 - Workers: 1
 
 ## Targeted Checks Covered
 
-- Picker tool renders with the Nerd Font eye-dropper icon and samples fill/stroke colors, opacities, and stroke width into palette controls without recoloring shapes.
-- Paint and Stroke remain independent modes; selecting Shape/Tools activates Stroke mode and drawing keeps Stroke active.
-- Right-click inside Object Preview suppresses the browser context menu and applies transparent fill/stroke only to the clicked shape based on the active palette mode.
-- Fill and Stroke opacity values stay unchanged unless directly edited; applying Stroke does not mutate Fill opacity and applying Paint does not mutate Stroke opacity.
-- Selected circle resize handles render larger while existing non-circle selection chrome remains unchanged.
+- New Object Vector Studio V2 shapes are committed stroke-only with transparent fill for line, polygon, polyline, rectangle, square, circle, ellipse, triangle, and text drawing flows.
+- Empty canvas click deselects the current shape and clicking inside another shape selects it.
+- Selected shape click-hold-drag movement updates live through the preview surface.
+- Circle selection handle resize updates circle geometry.
+- Snap Grid stores whole logical coordinates and Snap None preserves fractional coordinates.
+- Paint and Stroke stay independent; applying Stroke does not mutate Fill opacity and applying Paint does not mutate Stroke opacity.
+- Selecting Shape/Tools activates Stroke mode.
 
 ## Console/Runtime Errors
 

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -2285,7 +2285,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         geometry: createdRectangleSchemaDefaults.schemaGeometry,
         locked: createdRectangleSchemaDefaults.schemaShapeCommon.locked,
         style: {
-          fill: "#ffffff",
+          fill: "#00000000",
           fillOpacity: createdRectangleSchemaDefaults.schemaStyle.fillOpacity,
           stroke: "#ffffff",
           strokeOpacity: createdRectangleSchemaDefaults.schemaStyle.strokeOpacity,
@@ -3397,6 +3397,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
           fields,
           geometry: shape.geometry,
           schemaOk: app.schemaService.validatePayload(app.currentPayload).ok,
+          style: shape.style,
           tool: shape.tool
         };
       });
@@ -3408,6 +3409,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         ],
         geometry: { height: 60, width: 60, x: -80, y: -30 },
         schemaOk: true,
+        style: { fill: "#00000000", fillOpacity: 1, stroke: "#ffffff", strokeOpacity: 1, strokeWidth: 3 },
         tool: "square"
       });
 
@@ -3502,14 +3504,15 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await drawObjectVectorShape(page, "polyline", [{ x: -20, y: 20 }, { x: 0, y: 0 }, { x: 20, y: 20 }]);
       await expect(page.locator("#objectVectorStudioV2RenderSurface polyline[data-shape-index='2']")).toHaveCount(1);
       const pointDrawnShapes = await page.evaluate(() => window.__objectVectorStudioV2App.selectedObject().shapes.map((shape) => ({
+        fill: shape.style.fill,
         geometry: shape.geometry,
         stroke: shape.style.stroke,
         tool: shape.tool
       })));
       expect(pointDrawnShapes).toMatchObject([
-        { geometry: { point1: { x: -10, y: 0 }, point2: { x: 10, y: 0 } }, stroke: "#6fd3ff", tool: "line" },
-        { geometry: { points: [{ x: -10, y: -10 }, { x: 10, y: -10 }, { x: 10, y: 10 }, { x: -10, y: 10 }] }, stroke: "#6fd3ff", tool: "polygon" },
-        { geometry: { points: [{ x: -20, y: 20 }, { x: 0, y: 0 }, { x: 20, y: 20 }] }, stroke: "#6fd3ff", tool: "polyline" }
+        { fill: "#00000000", geometry: { point1: { x: -10, y: 0 }, point2: { x: 10, y: 0 } }, stroke: "#6fd3ff", tool: "line" },
+        { fill: "#00000000", geometry: { points: [{ x: -10, y: -10 }, { x: 10, y: -10 }, { x: 10, y: 10 }, { x: -10, y: 10 }] }, stroke: "#6fd3ff", tool: "polygon" },
+        { fill: "#00000000", geometry: { points: [{ x: -20, y: 20 }, { x: 0, y: 0 }, { x: 20, y: 20 }] }, stroke: "#6fd3ff", tool: "polyline" }
       ]);
       const strokeOnlyPolygonBeforeSelection = await page.evaluate(() => {
         const app = window.__objectVectorStudioV2App;
@@ -3586,6 +3589,33 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#objectVectorStudioV2SnapModeButton")).toHaveText("Snap Grid");
       await expect(page.locator("#objectVectorStudioV2SnapModeButton")).toHaveAttribute("data-snap-mode", "grid");
 
+      await drawObjectVectorShape(page, "rectangle", [{ x: -80, y: -30 }, { x: -20, y: 30 }]);
+      await drawObjectVectorShape(page, "square", [{ x: -60, y: -30 }, { x: -10, y: 20 }]);
+      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 }]);
+      const strokeOnlyCreatedShapes = await page.evaluate(() => {
+        const createdTools = ["rectangle", "square", "circle", "ellipse", "triangle", "text"];
+        return window.__objectVectorStudioV2App.selectedObject().shapes
+          .filter((shape) => createdTools.includes(shape.tool))
+          .map((shape) => ({
+            fill: shape.style.fill,
+            fillOpacity: shape.style.fillOpacity,
+            stroke: shape.style.stroke,
+            strokeOpacity: shape.style.strokeOpacity,
+            tool: shape.tool
+          }));
+      });
+      expect(strokeOnlyCreatedShapes).toEqual([
+        { fill: "#00000000", fillOpacity: 1, stroke: "#6fd3ff", strokeOpacity: 1, tool: "rectangle" },
+        { fill: "#00000000", fillOpacity: 1, stroke: "#6fd3ff", strokeOpacity: 1, tool: "square" },
+        { fill: "#00000000", fillOpacity: 1, stroke: "#6fd3ff", strokeOpacity: 1, tool: "circle" },
+        { fill: "#00000000", fillOpacity: 1, stroke: "#6fd3ff", strokeOpacity: 1, tool: "ellipse" },
+        { fill: "#00000000", fillOpacity: 1, stroke: "#6fd3ff", strokeOpacity: 1, tool: "triangle" },
+        { fill: "#00000000", fillOpacity: 1, stroke: "#6fd3ff", strokeOpacity: 1, tool: "text" }
+      ]);
+
       expect(pageErrors).toEqual([]);
       expect(consoleErrors).toEqual([]);
     } finally {

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

@@ -3540,7 +3540,7 @@ export class ToolStarterApp {
       locked: false,
       order: 0,
       style: {
-        fill: ["arc", "line", "polyline"].includes(tool) ? "none" : (this.currentTargetColor() || "#ffffff"),
+        fill: TRANSPARENT_STYLE_COLOR,
         fillOpacity: this.selectedFillOpacity,
         stroke: this.selectedStrokeColor || this.currentTargetColor() || "#ffffff",
         strokeOpacity: this.selectedStrokeOpacity,
@@ -4637,10 +4637,9 @@ export class ToolStarterApp {
   createShapeStyleDefault(type, color) {
     const style = this.schemaDefault("style");
     const strokeColor = this.selectedStrokeColor || color;
-    const fillColor = this.selectedFillColor || color;
     return {
       ...style,
-      fill: ["arc", "line", "polyline"].includes(type) ? "none" : fillColor,
+      fill: TRANSPARENT_STYLE_COLOR,
       fillOpacity: this.selectedFillOpacity,
       stroke: strokeColor,
       strokeOpacity: this.selectedStrokeOpacity