castle-web-cli 0.4.115 → 0.4.116

package/kits/physics-2d/editors/pathOverlay.js

@@ -0,0 +1,340 @@
+import { absoluteSegment, subpathEdgeFrom, subpathPoints } from '../engine/pxartPath.js';
+import { primitiveHandleIndices } from '../engine/pxartPath.js';
+import { anchorKey, coincidentSiteKeys, isOpenPenShape } from './pathTools';
+
+// Render-only overlay for path-layer tools: selection chrome (outline + anchor
+// dots), pen rubber-band to hover, fill-tool hover preview, and shape marquee.
+
+// Every size below is CSS pixels — drawPathOverlay scales the context by the
+// device pixel ratio, so chrome covers the same amount of screen whatever the
+// display. Sizing in backing-store pixels instead, as this file used to, halves
+// the whole overlay on a 2x screen: the same trap renderPixelOverlay avoids by
+// multiplying its widths by dpr.
+const ANCHOR_R = 6;
+const ANCHOR_HOVER_R = 7;
+const JUNCTION_R = 11;
+const HAIRLINE = 1.25;
+const SKELETON_W = 2.5;
+const JUNCTION_INNER_W = 1.5;
+const EDGE_W = 3.25;
+const RUBBER_W = 1.75;
+const MARQUEE_W = 1;
+const DASH = [4, 4];
+
+const FILL_TOOL_WASH_ALPHA = 0.45;
+
+// Blue means picked. A selected shape's skeleton is neutral so that the blue is
+// free to say which part of it the next edit will act on — without that, the
+// whole outline shouting the selection colour left edge picking no colour of
+// its own to use.
+const SKELETON = '#9aa0a6';
+const PICKED = '#00d4ff';
+const HOVER_YELLOW = '#ffd23f';
+const INK = '#1c1c1c';
+// Hovering an edge previews picking it, so it takes the pick colour held back
+// to a wash rather than a second hue.
+const HOVER_ALPHA = 0.45;
+
+function toCanvas(sx, sy, x, y) {
+  return [x * sx, y * sy];
+}
+
+export function drawPathOverlay(canvas, resolution, path, ui) {
+  if (!canvas || !resolution) return;
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return;
+  const cssW = canvas.clientWidth;
+  const cssH = canvas.clientHeight;
+  if (!cssW || !cssH) return;
+  const dpr = window.devicePixelRatio || 1;
+  const bw = Math.round(cssW * dpr);
+  const bh = Math.round(cssH * dpr);
+  if (canvas.width !== bw) canvas.width = bw;
+  if (canvas.height !== bh) canvas.height = bh;
+  ctx.setTransform(1, 0, 0, 1, 0, 0);
+  ctx.clearRect(0, 0, bw, bh);
+  // From here on the drawing units are CSS pixels while the backing store stays
+  // at device resolution, so the chrome is both crisp and a fixed screen size.
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+  const sx = cssW / resolution.width;
+  const sy = cssH / resolution.height;
+  const at = (x, y) => toCanvas(sx, sy, x, y);
+
+  const selected = new Set(ui?.selectedShapeIndices ?? []);
+  if (!selected.size && ui?.selectedShapeIndex != null) selected.add(ui.selectedShapeIndex);
+  const soleSelected = selected.size === 1 ? [...selected][0] : null;
+
+  // Three passes per shape, in the order they have to stack: the neutral
+  // skeleton, then the picked edges recolouring the runs they cover, then the
+  // anchors on top of both.
+  for (const shapeIndex of selected) {
+    const shape = path?.shapes?.[shapeIndex];
+    if (!shape) continue;
+    const subs = shape.subpaths ?? [];
+    for (const sub of subs) strokeSubpath(ctx, sub, at, SKELETON, SKELETON_W, 1);
+    if (ui?.tool === 'path-select') paintPickedEdges(ctx, subs, shapeIndex, at, ui);
+    if (soleSelected === shapeIndex) {
+      const junctions = coincidentSiteKeys(shape);
+      subs.forEach((sub, subIndex) => {
+        drawAnchors(ctx, sub, at, ui, subIndex, primitiveHandleIndices(shape), junctions);
+      });
+    }
+  }
+
+  const penMode = ui?.tool === 'brush' && ui?.brushMode === 'pen';
+
+  if ((penMode || ui?.tool === 'bend') && ui.hoverInsertEdge) {
+    const { shapeIndex, subIndex, edgeIndex } = ui.hoverInsertEdge;
+    const sub = path?.shapes?.[shapeIndex]?.subpaths?.[subIndex];
+    if (sub) strokeEdge(ctx, sub, edgeIndex, at, HOVER_YELLOW, EDGE_W, 1);
+  }
+
+  if (penMode && ui.hoverPoint && !ui.hoverInsertEdge && soleSelected != null) {
+    const live = path?.shapes?.[soleSelected];
+    const limbSub = ui.penLimb?.shapeIndex === soleSelected ? ui.penLimb.subIndex : -1;
+    const sub =
+      limbSub >= 0 ? live?.subpaths?.[limbSub] : isOpenPenShape(live) ? live.subpaths[0] : null;
+    const pts = sub && !sub.closed ? subpathPoints(sub) : [];
+    if (pts.length) {
+      const last = pts[pts.length - 1];
+      const from = at(last[0], last[1]);
+      const to = at(ui.hoverPoint[0], ui.hoverPoint[1]);
+      ctx.save();
+      ctx.globalAlpha = 0.9;
+      ctx.strokeStyle = HOVER_YELLOW;
+      ctx.lineWidth = RUBBER_W;
+      ctx.setLineDash(DASH);
+      ctx.beginPath();
+      ctx.moveTo(from[0], from[1]);
+      ctx.lineTo(to[0], to[1]);
+      ctx.stroke();
+      ctx.restore();
+    }
+  }
+  if (ui?.tool === 'brush' && ui.hoverPoint) {
+    drawGhostAnchor(ctx, at, ui.hoverPoint);
+  }
+  drawBrushGesture(ctx, at, ui);
+  drawFillToolPreview(ctx, path, ui, at, sx, sy);
+  drawShapeMarquee(ctx, ui?.shapeMarquee, sx, sy);
+}
+
+/**
+ * Repaint hovered and picked edges over the skeleton. Slightly wider than the
+ * skeleton so the blue covers the grey's antialiased fringe instead of leaving
+ * it showing along both sides of a picked run.
+ */
+function paintPickedEdges(ctx, subs, shapeIndex, at, ui) {
+  const hover = ui.hoverEdge;
+  if (hover?.shapeIndex === shapeIndex) {
+    const sub = subs[hover.subIndex];
+    if (sub) strokeEdge(ctx, sub, hover.edgeIndex, at, PICKED, EDGE_W, HOVER_ALPHA);
+  }
+  const picked = ui.selectedEdges;
+  if (picked?.shapeIndex !== shapeIndex) return;
+  for (const { subIndex, edgeIndex } of picked.edges ?? []) {
+    const sub = subs[subIndex];
+    if (sub) strokeEdge(ctx, sub, edgeIndex, at, PICKED, EDGE_W, 1);
+  }
+}
+
+function appendSubpathToPath2D(geometry, sub, at) {
+  if (!sub?.start) return false;
+  const first = at(sub.start[0], sub.start[1]);
+  geometry.moveTo(first[0], first[1]);
+  let from = sub.start;
+  for (const seg of sub.segs ?? []) {
+    appendSegment(geometry, from, seg, at);
+    from = seg.to;
+  }
+  if (sub.closed) geometry.closePath();
+  return true;
+}
+
+function buildShapeFillPath2D(shape, at) {
+  const geometry = new Path2D();
+  let any = false;
+  for (const sub of shape.subpaths ?? []) {
+    if (!sub.closed) continue;
+    if (appendSubpathToPath2D(geometry, sub, at)) any = true;
+  }
+  return any ? geometry : null;
+}
+
+function drawFillToolPreview(ctx, path, ui, at, sx, sy) {
+  if (ui?.tool !== 'fill') return;
+  const target = ui.fillHoverTarget;
+  const color = ui.activeColor;
+  if (!target || target.shapeIndex < 0 || !color) return;
+  const shape = path?.shapes?.[target.shapeIndex];
+  if (!shape) return;
+
+  ctx.save();
+  if (target.slot === 'fill' && shape.fill) {
+    const geometry = buildShapeFillPath2D(shape, at);
+    if (geometry) {
+      ctx.fillStyle = color;
+      ctx.globalAlpha = FILL_TOOL_WASH_ALPHA;
+      ctx.fill(geometry, 'evenodd');
+    }
+  } else if (target.slot === 'stroke') {
+    const lineWidth = ui.smoothFinish ? (sx + sy) / 2 : SKELETON_W;
+    ctx.globalAlpha = 0.95;
+    if (ui.smoothFinish) {
+      ctx.lineCap = 'round';
+      ctx.lineJoin = 'round';
+    }
+    for (const sub of shape.subpaths ?? []) {
+      strokeSubpath(ctx, sub, at, color, lineWidth, 1);
+    }
+  }
+  ctx.restore();
+}
+
+function drawGhostAnchor(ctx, at, point) {
+  const [x, y] = at(point[0], point[1]);
+  ctx.save();
+  ctx.globalAlpha = 0.9;
+  ctx.lineWidth = HAIRLINE;
+  ctx.setLineDash([]);
+  ctx.beginPath();
+  ctx.arc(x, y, ANCHOR_R, 0, Math.PI * 2);
+  ctx.fillStyle = 'rgba(255, 210, 63, 0.35)';
+  ctx.strokeStyle = HOVER_YELLOW;
+  ctx.fill();
+  ctx.stroke();
+  ctx.restore();
+}
+
+function appendSegment(ctx, from, seg, at) {
+  if (!seg.c1 && !seg.c2) {
+    const end = at(seg.to[0], seg.to[1]);
+    ctx.lineTo(end[0], end[1]);
+    return;
+  }
+  const { c1, c2, to } = absoluteSegment(from, seg);
+  const ac1 = at(c1[0], c1[1]);
+  const ac2 = at(c2[0], c2[1]);
+  const end = at(to[0], to[1]);
+  ctx.bezierCurveTo(ac1[0], ac1[1], ac2[0], ac2[1], end[0], end[1]);
+}
+
+function strokeEdgeSegment(ctx, sub, edgeIndex, at) {
+  const edge = subpathEdgeFrom(sub, edgeIndex);
+  if (!edge) return false;
+  const start = at(edge.from[0], edge.from[1]);
+  ctx.moveTo(start[0], start[1]);
+  appendSegment(ctx, edge.from, edge.seg, at);
+  return true;
+}
+
+function strokeEdge(ctx, sub, edgeIndex, at, color, lineWidth, alpha) {
+  ctx.beginPath();
+  if (!strokeEdgeSegment(ctx, sub, edgeIndex, at)) return;
+  ctx.setLineDash([]);
+  ctx.lineWidth = lineWidth;
+  ctx.strokeStyle = color;
+  ctx.globalAlpha = alpha;
+  ctx.stroke();
+  ctx.globalAlpha = 1;
+}
+
+function strokeSubpath(ctx, sub, at, color, lineWidth, alpha) {
+  if (!sub?.start) return;
+  ctx.beginPath();
+  const first = at(sub.start[0], sub.start[1]);
+  ctx.moveTo(first[0], first[1]);
+  let from = sub.start;
+  for (const seg of sub.segs ?? []) {
+    appendSegment(ctx, from, seg, at);
+    from = seg.to;
+  }
+  if (sub.closed) ctx.closePath();
+  ctx.setLineDash([]);
+  ctx.lineWidth = lineWidth;
+  ctx.strokeStyle = color;
+  ctx.globalAlpha = alpha;
+  ctx.stroke();
+  ctx.globalAlpha = 1;
+}
+
+function drawAnchors(ctx, sub, at, ui, subIndex, onlyIndices, junctions) {
+  const pts = subpathPoints(sub);
+  const shown = onlyIndices?.length ? new Set(onlyIndices) : null;
+  const selectedAnchors = new Set((ui?.selectedAnchors ?? []).map(anchorKey));
+  pts.forEach((p, i) => {
+    if (shown && !shown.has(i)) return;
+    const [x, y] = at(p[0], p[1]);
+    // A junction ring reports structure, not selection, so it takes the
+    // skeleton's neutral rather than the pick colour.
+    if (junctions?.has(`${p[0]},${p[1]}`)) {
+      ctx.beginPath();
+      ctx.arc(x, y, JUNCTION_R, 0, Math.PI * 2);
+      ctx.lineWidth = SKELETON_W;
+      ctx.strokeStyle = INK;
+      ctx.stroke();
+      ctx.lineWidth = JUNCTION_INNER_W;
+      ctx.strokeStyle = SKELETON;
+      ctx.stroke();
+    }
+    const hover =
+      ui?.hoverAnchor &&
+      ui.hoverAnchor.subIndex === subIndex &&
+      ui.hoverAnchor.pointIndex === i;
+    const selected = selectedAnchors.has(anchorKey({ subIndex, pointIndex: i }));
+    const r = hover ? ANCHOR_HOVER_R : ANCHOR_R;
+    ctx.lineWidth = HAIRLINE;
+    ctx.beginPath();
+    ctx.arc(x, y, r, 0, Math.PI * 2);
+    ctx.fillStyle = selected ? PICKED : '#ffffff';
+    ctx.strokeStyle = INK;
+    ctx.fill();
+    ctx.stroke();
+  });
+}
+
+function drawShapeMarquee(ctx, rect, sx, sy) {
+  if (!rect || rect.w <= 0 || rect.h <= 0) return;
+  const x = rect.x * sx;
+  const y = rect.y * sy;
+  const w = rect.w * sx;
+  const h = rect.h * sy;
+  ctx.save();
+  ctx.lineWidth = MARQUEE_W;
+  ctx.setLineDash(DASH);
+  ctx.strokeStyle = PICKED;
+  ctx.globalAlpha = 0.95;
+  // Inset by half the stroke so the border lands inside the rect it reports.
+  const inset = MARQUEE_W / 2;
+  ctx.strokeRect(x + inset, y + inset, Math.max(0, w - MARQUEE_W), Math.max(0, h - MARQUEE_W));
+  ctx.fillStyle = 'rgba(0, 212, 255, 0.12)';
+  ctx.setLineDash([]);
+  ctx.fillRect(x, y, w, h);
+  ctx.restore();
+}
+
+function drawBrushGesture(ctx, at, ui) {
+  const ink = ui?.brushInk;
+  if (ink?.length) {
+    ctx.beginPath();
+    const first = at(ink[0][0], ink[0][1]);
+    ctx.moveTo(first[0], first[1]);
+    for (let i = 1; i < ink.length; i++) {
+      const p = at(ink[i][0], ink[i][1]);
+      ctx.lineTo(p[0], p[1]);
+    }
+    ctx.setLineDash([]);
+    ctx.lineWidth = HAIRLINE;
+    ctx.strokeStyle = SKELETON;
+    ctx.globalAlpha = 0.45;
+    ctx.stroke();
+    ctx.globalAlpha = 1;
+  }
+  const ghost = ui?.brushGhost;
+  if (ghost?.subpaths?.length) {
+    for (const sub of ghost.subpaths) {
+      strokeSubpath(ctx, sub, at, PICKED, SKELETON_W, 1);
+    }
+  }
+}