Fix Asteroids bezel visibility and apply Object Vector rounding in runtime rendering - PR_26133_106-asteroids-bezel-rounding-fixes

Author: DavidQ

docs/dev/reports/PR_26133_105-object-vector-snapline-scale-controls_report.md

@@ -0,0 +1,32 @@
+# PR_26133_105-object-vector-snapline-scale-controls
+
+## Summary
+- Verified Object Vector Studio V2 no longer renders the selected-shape center/origin X marker.
+- Verified snap-enabled drawing renders a visible snap line using the same generated SVG geometry as the preview, including rounded curve path data when point rounding is enabled.
+- Verified Object Transform Scale updates the preview in realtime without persisting object scale state until Resize is used.
+- Verified Object Transform and Shape Transform Scale rows include right-side `X` reset buttons that restore scale to `1.0`.
+- Preserved the single object-origin model and did not reintroduce shape-origin state or controls.
+
+## Scope Notes
+- Read `docs/dev/PROJECT_INSTRUCTIONS.md` before continuing.
+- Used the integrated PR_26133_104 state as the prior reference.
+- Workspace manifest/schema structures were preserved.
+- Scope was limited to Object Vector V2 snapline and scale-control behavior plus targeted Playwright coverage stabilization.
+- Full samples smoke test skipped as requested.
+
+## Targeted Verification
+- Shape center/origin X marker is absent from the Object Preview selection chrome.
+- Object-origin marker remains a `+`.
+- Snap line appears while drawing when snap mode is enabled.
+- Rounded polygon/polyline snap line uses curve path data when rounding is enabled.
+- Object Transform scale step/input changes update rendered bounds immediately.
+- Object Transform scale reset returns the preview scale to `1.0`.
+- Shape Transform scale reset returns selected shape scale to `1.0`.
+- Object scale remains a transient preview value unless geometry is rewritten through Resize.
+
+## Validation Results
+- PASS `node --check tools/object-vector-studio-v2/js/ToolStarterApp.js`
+- PASS `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --grep "expands Object Vector Studio V2 asset authoring controls" --workers=1 --reporter=list`
+- PASS `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --grep "Object Vector Studio V2" --workers=1 --reporter=list` (16 passed)
+- PASS `npm run test:workspace-v2` (56 passed)
+- PASS `git diff --check`

docs/dev/reports/PR_26133_106-asteroids-bezel-rounding-fixes_report.md

@@ -0,0 +1,36 @@
+# PR_26133_106-asteroids-bezel-rounding-fixes
+
+## Summary
+- Fixed Asteroids bezel visibility so the bezel layer renders in normal play view as well as fullscreen.
+- Preserved existing fullscreen transparent-window canvas fitting behavior.
+- Updated Object Vector runtime canvas rendering to honor authored point rounding for polygon, polyline, and rectangle/square geometry.
+- Updated Object Vector runtime SVG previews to emit rounded path geometry when authored rounding is present.
+
+## Scope Notes
+- Read `docs/dev/PROJECT_INSTRUCTIONS.md` before implementation.
+- Used the PR_26133_105 delta as the prior reference and preserved its staged/local changes.
+- Workspace manifest/schema structures were not changed.
+- Full samples smoke test skipped as requested; this PR is limited to Asteroids bezel visibility and Object Vector runtime rounding.
+
+## Playwright Impact
+- Playwright impacted: Yes.
+- Validated Asteroids normal-mode bezel visibility, fullscreen bezel fit preservation, and runtime Object Vector rounded path rendering.
+- Expected pass behavior: bezel state is visible before fullscreen, fullscreen still uses `transparent-window-fit`, and rounded Asteroids ship hull rendering emits canvas quadratic curves plus SVG rounded path output.
+- Expected fail behavior: tests fail if bezel remains hidden outside fullscreen or if runtime rounded geometry renders as straight-only polygon output.
+
+## Manual Validation
+- Open `/games/Asteroids/index.html`.
+- Confirm the bezel is visible around the canvas before entering fullscreen.
+- Click the canvas to enter fullscreen and confirm the canvas still fits inside the bezel window.
+- Confirm the Asteroids ship hull shows the authored rounded interior point rather than a sharp straight join.
+
+## Validation Results
+- PASS `node --check src/engine/runtime/fullscreenBezel.js`
+- PASS `node --check src/engine/rendering/ObjectVectorRuntimeAssetService.js`
+- PASS `node --check games/Asteroids/index.js`
+- PASS `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --grep "fits the game canvas inside the fullscreen play area|loads Object Vector Studio V2 runtime assets into Asteroids gameplay rendering" --workers=1 --reporter=list` (2 passed)
+- PASS `npm run test:workspace-v2` (56 passed)
+- PASS `git diff --check`
+- PASS Playwright V8 coverage report generated; changed runtime files were covered:
+  - `src/engine/runtime/fullscreenBezel.js`
+  - `src/engine/rendering/ObjectVectorRuntimeAssetService.js`

src/engine/rendering/ObjectVectorRuntimeAssetService.js

@@ -143,6 +143,160 @@ function objectTransformOrigin(object) {
   return { x: 0, y: 0 };
 }
 
+function pointStyleValue(value) {
+  return value === "round" ? "round" : "square";
+}
+
+function strokeLineJoinValue(value) {
+  return pointStyleValue(value) === "round" ? "round" : "miter";
+}
+
+function shapeRoundingRadius(shape) {
+  const value = Number(shape?.style?.roundingRadius);
+  return Number.isFinite(value) && value >= 0 ? value : 4;
+}
+
+function shapeGeometryPoints(shape) {
+  const geometryTool = shapeGeometryTool(shape);
+  if (geometryTool === "rectangle") {
+    const x = Number(shape.geometry.x) || 0;
+    const y = Number(shape.geometry.y) || 0;
+    const width = Number(shape.geometry.width) || 0;
+    const height = Number(shape.geometry.height) || 0;
+    return [
+      { x, y },
+      { x: x + width, y },
+      { x: x + width, y: y + height },
+      { x, y: y + height }
+    ];
+  }
+  if (geometryTool === "polygon" || geometryTool === "polyline") {
+    return Array.isArray(shape?.geometry?.points) ? shape.geometry.points : [];
+  }
+  return [];
+}
+
+function shapePointRoundingValues(shape) {
+  const points = shapeGeometryPoints(shape);
+  if (!points.length) {
+    return [];
+  }
+  const explicit = Array.isArray(shape?.style?.pointRounding) ? shape.style.pointRounding : null;
+  if (explicit) {
+    return Array.from({ length: points.length }, (_, index) => explicit[index] === true);
+  }
+  return Array.from({ length: points.length }, () => false);
+}
+
+function roundedPointPathCommands(shape, { closed } = {}) {
+  const geometryTool = shapeGeometryTool(shape);
+  if (!["polygon", "polyline", "rectangle"].includes(geometryTool)) {
+    return [];
+  }
+  const sourcePoints = shapeGeometryPoints(shape);
+  const pointCount = sourcePoints.length;
+  if (pointCount < 3) {
+    return [];
+  }
+  const pointRounding = shapePointRoundingValues(shape);
+  const hasRoundedPoint = pointRounding.some((isRounded, index) => isRounded === true && (closed || (index > 0 && index < pointCount - 1)));
+  const radius = shapeRoundingRadius(shape);
+  if (!hasRoundedPoint || radius <= 0) {
+    return [];
+  }
+  const points = sourcePoints.map((point) => ({
+    x: Number(point.x) || 0,
+    y: Number(point.y) || 0
+  }));
+  const roundedVertex = (index) => {
+    if (pointRounding[index] !== true || (!closed && (index === 0 || index === pointCount - 1))) {
+      return null;
+    }
+    const previous = points[index === 0 ? pointCount - 1 : index - 1];
+    const current = points[index];
+    const next = points[index === pointCount - 1 ? 0 : index + 1];
+    const previousDistance = Math.hypot(previous.x - current.x, previous.y - current.y);
+    const nextDistance = Math.hypot(next.x - current.x, next.y - current.y);
+    if (previousDistance <= 0 || nextDistance <= 0) {
+      return null;
+    }
+    const vertexRadius = Math.min(radius, previousDistance / 2, nextDistance / 2);
+    if (vertexRadius <= 0) {
+      return null;
+    }
+    return {
+      after: {
+        x: current.x + ((next.x - current.x) / nextDistance) * vertexRadius,
+        y: current.y + ((next.y - current.y) / nextDistance) * vertexRadius
+      },
+      before: {
+        x: current.x + ((previous.x - current.x) / previousDistance) * vertexRadius,
+        y: current.y + ((previous.y - current.y) / previousDistance) * vertexRadius
+      },
+      current
+    };
+  };
+  const commands = [];
+  const appendVertex = (index) => {
+    const rounded = roundedVertex(index);
+    if (!rounded) {
+      commands.push({ point: points[index], type: "line" });
+      return;
+    }
+    commands.push({ point: rounded.before, type: "line" });
+    commands.push({ control: rounded.current, point: rounded.after, type: "quadratic" });
+  };
+  if (closed) {
+    commands.push({ point: roundedVertex(0)?.after || points[0], type: "move" });
+    for (let index = 1; index < pointCount; index += 1) {
+      appendVertex(index);
+    }
+    appendVertex(0);
+    commands.push({ type: "close" });
+    return commands;
+  }
+  commands.push({ point: points[0], type: "move" });
+  for (let index = 1; index < pointCount - 1; index += 1) {
+    appendVertex(index);
+  }
+  commands.push({ point: points[pointCount - 1], type: "line" });
+  return commands;
+}
+
+function applyRuntimePathCommands(context, commands) {
+  commands.forEach((command) => {
+    if (command.type === "move") {
+      context.moveTo(command.point.x, command.point.y);
+    } else if (command.type === "line") {
+      context.lineTo(command.point.x, command.point.y);
+    } else if (command.type === "quadratic") {
+      context.quadraticCurveTo(command.control.x, command.control.y, command.point.x, command.point.y);
+    } else if (command.type === "close") {
+      context.closePath();
+    }
+  });
+}
+
+function formatSvgNumber(value) {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? String(Math.round(parsed * 1000) / 1000) : "0";
+}
+
+function runtimePathCommandsToSvgPath(commands) {
+  return commands.map((command) => {
+    if (command.type === "move") {
+      return `M ${formatSvgNumber(command.point.x)} ${formatSvgNumber(command.point.y)}`;
+    }
+    if (command.type === "line") {
+      return `L ${formatSvgNumber(command.point.x)} ${formatSvgNumber(command.point.y)}`;
+    }
+    if (command.type === "quadratic") {
+      return `Q ${formatSvgNumber(command.control.x)} ${formatSvgNumber(command.control.y)} ${formatSvgNumber(command.point.x)} ${formatSvgNumber(command.point.y)}`;
+    }
+    return "Z";
+  }).join(" ");
+}
+
 function normalizeFill(value) {
   return value && value !== "transparent" ? value : null;
 }
@@ -745,6 +899,8 @@ export class ObjectVectorRuntimeAssetService {
       context.scale(transform.scaleX, transform.scaleY);
       context.translate(-transformOrigin.x, -transformOrigin.y);
       context.lineWidth = shape.style.strokeWidth;
+      context.lineCap = pointStyleValue(shape.style.strokeLinecap ?? shape.style.startPointStyle ?? shape.style.pointStyle);
+      context.lineJoin = strokeLineJoinValue(shape.style.pointStyle ?? shape.style.strokeLinecap);
       context.fillStyle = normalizeFill(shape.style.fill) || "transparent";
       context.strokeStyle = normalizeStroke(shape.style.stroke) || "transparent";
       this.buildPath(context, shape);
@@ -767,6 +923,11 @@ export class ObjectVectorRuntimeAssetService {
     context.beginPath();
     const geometryTool = shapeGeometryTool(shape);
     if (geometryTool === "rectangle") {
+      const roundedPath = roundedPointPathCommands(shape, { closed: true });
+      if (roundedPath.length) {
+        applyRuntimePathCommands(context, roundedPath);
+        return;
+      }
       context.rect(shape.geometry.x, shape.geometry.y, shape.geometry.width, shape.geometry.height);
       return;
     }
@@ -784,6 +945,11 @@ export class ObjectVectorRuntimeAssetService {
       return;
     }
     if (geometryTool === "polygon" || geometryTool === "polyline") {
+      const roundedPath = roundedPointPathCommands(shape, { closed: geometryTool === "polygon" });
+      if (roundedPath.length) {
+        applyRuntimePathCommands(context, roundedPath);
+        return;
+      }
       shape.geometry.points.forEach((point, index) => {
         if (index === 0) {
           context.moveTo(point.x, point.y);
@@ -842,9 +1008,17 @@ export class ObjectVectorRuntimeAssetService {
   }
 
   shapeToSvg(shape, transformOrigin = { x: 0, y: 0 }) {
-    const style = ` fill="${escapeXml(shape.style.fill)}" fill-opacity="${shape.style.fillOpacity}" stroke="${escapeXml(shape.style.stroke)}" stroke-opacity="${shape.style.strokeOpacity}" stroke-width="${shape.style.strokeWidth}" transform="${svgTransformAttribute(shapeTransform(shape), transformOrigin)}"`;
+    const lineCap = pointStyleValue(shape.style.strokeLinecap ?? shape.style.startPointStyle ?? shape.style.pointStyle);
+    const lineJoin = strokeLineJoinValue(shape.style.pointStyle ?? shape.style.strokeLinecap);
+    const style = ` fill="${escapeXml(shape.style.fill)}" fill-opacity="${shape.style.fillOpacity}" stroke="${escapeXml(shape.style.stroke)}" stroke-opacity="${shape.style.strokeOpacity}" stroke-width="${shape.style.strokeWidth}" stroke-linecap="${lineCap}" stroke-linejoin="${lineJoin}" transform="${svgTransformAttribute(shapeTransform(shape), transformOrigin)}"`;
     const geometryTool = shapeGeometryTool(shape);
     if (geometryTool === "rectangle") {
+      const roundedPath = roundedPointPathCommands(shape, { closed: true });
+      if (roundedPath.length) {
+        const d = runtimePathCommandsToSvgPath(roundedPath);
+        const points = shapeGeometryPoints(shape).map((point) => `${point.x},${point.y}`).join(" ");
+        return `<path d="${d}" points="${points}" data-runtime-rounded-point-render="path"${style}/>`;
+      }
       return `<rect x="${shape.geometry.x}" y="${shape.geometry.y}" width="${shape.geometry.width}" height="${shape.geometry.height}"${style}/>`;
     }
     if (geometryTool === "circle") {
@@ -858,6 +1032,11 @@ export class ObjectVectorRuntimeAssetService {
     }
     if (geometryTool === "polygon" || geometryTool === "polyline") {
       const points = shape.geometry.points.map((point) => `${point.x},${point.y}`).join(" ");
+      const roundedPath = roundedPointPathCommands(shape, { closed: geometryTool === "polygon" });
+      if (roundedPath.length) {
+        const d = runtimePathCommandsToSvgPath(roundedPath);
+        return `<path d="${d}" points="${points}" data-runtime-rounded-point-render="path"${style}/>`;
+      }
       return geometryTool === "polygon"
         ? `<polygon points="${points}"${style}/>`
         : `<polyline points="${points}"${style}/>`;

src/engine/runtime/fullscreenBezel.js

@@ -1150,11 +1150,11 @@ export default class fullscreenBezel {
       };
     }
 
-    const shouldShow = fullscreenActive && this.ready && !this.missing;
+    const shouldShow = this.ready && !this.missing;
     this.element.style.display = toDisplayValue(shouldShow);
     this.element.style.visibility = toVisibilityValue(shouldShow);
     this.element.style.opacity = toOpacityValue(shouldShow);
-    if (shouldShow) {
+    if (shouldShow && fullscreenActive) {
       const fitted = this.applyCanvasWindowFitLayout();
       if (!fitted) {
         this.applyCanvasFullscreenFitLayout() || this.applyCanvasFallbackLayout();