@canvas-harness/core 0.1.5 → 0.1.7

package/dist/index.cjs

@@ -233,53 +233,6 @@ var rotatePoint = (px, py, cx, cy, cos, sin) => {
   return { x: cx + dx * cos - dy * sin, y: cy + dx * sin + dy * cos };
 };
 
-// src/edges/auto-route.ts
-var CONTROL_MAX = 200;
-var CONTROL_FRACTION = 0.4;
-var sideOf = (node, localX, localY) => {
-  const distLeft = localX;
-  const distRight = node.w - localX;
-  const distTop = localY;
-  const distBottom = node.h - localY;
-  const minDist = Math.min(distLeft, distRight, distTop, distBottom);
-  if (minDist === distLeft) return "w";
-  if (minDist === distRight) return "e";
-  if (minDist === distTop) return "n";
-  return "s";
-};
-var sideNormalLocal = (side) => {
-  switch (side) {
-    case "n":
-      return { x: 0, y: -1 };
-    case "s":
-      return { x: 0, y: 1 };
-    case "e":
-      return { x: 1, y: 0 };
-    case "w":
-      return { x: -1, y: 0 };
-  }
-};
-var rotateVecByAngle = (v, angle) => {
-  if (angle === 0) return v;
-  const cos = Math.cos(angle);
-  const sin = Math.sin(angle);
-  return { x: v.x * cos - v.y * sin, y: v.x * sin + v.y * cos };
-};
-var autoRouteControls = (sourceWorld, targetWorld, sourceNormalWorld, targetNormalWorld) => {
-  const dx = targetWorld.x - sourceWorld.x;
-  const dy = targetWorld.y - sourceWorld.y;
-  const dist = Math.hypot(dx, dy);
-  const offset = Math.min(CONTROL_MAX, CONTROL_FRACTION * dist);
-  const fallbackSource = dist > 0 ? { x: dx / dist, y: dy / dist } : { x: 1, y: 0 };
-  const fallbackTarget = dist > 0 ? { x: -dx / dist, y: -dy / dist } : { x: -1, y: 0 };
-  const ns = sourceNormalWorld ?? fallbackSource;
-  const nt = targetNormalWorld ?? fallbackTarget;
-  return {
-    c1: { x: sourceWorld.x + ns.x * offset, y: sourceWorld.y + ns.y * offset },
-    c2: { x: targetWorld.x + nt.x * offset, y: targetWorld.y + nt.y * offset }
-  };
-};
-
 // src/edges/project.ts
 var projectEndToWorld = (end, getNode) => {
   if (!isAttached(end)) return end.worldPoint;
@@ -328,6 +281,112 @@ var projectToNodeBoundary = (world, node) => {
   return { x: clampedX, y: node.h };
 };
 
+// src/edges/auto-route.ts
+var CONTROL_MAX = 200;
+var CONTROL_FRACTION = 0.4;
+var BOUNDARY_EPS = 0.5;
+var isLocalOffsetInsideBody = (localOffset, node) => {
+  const onLeft = Math.abs(localOffset.x) <= BOUNDARY_EPS;
+  const onRight = Math.abs(localOffset.x - node.w) <= BOUNDARY_EPS;
+  const onTop = Math.abs(localOffset.y) <= BOUNDARY_EPS;
+  const onBottom = Math.abs(localOffset.y - node.h) <= BOUNDARY_EPS;
+  const inside = localOffset.x > -BOUNDARY_EPS && localOffset.x < node.w + BOUNDARY_EPS && localOffset.y > -BOUNDARY_EPS && localOffset.y < node.h + BOUNDARY_EPS;
+  return inside && !onLeft && !onRight && !onTop && !onBottom;
+};
+var sideOf = (node, localX, localY) => {
+  const distLeft = localX;
+  const distRight = node.w - localX;
+  const distTop = localY;
+  const distBottom = node.h - localY;
+  const minDist = Math.min(distLeft, distRight, distTop, distBottom);
+  if (minDist === distLeft) return "w";
+  if (minDist === distRight) return "e";
+  if (minDist === distTop) return "n";
+  return "s";
+};
+var sideNormalLocal = (side) => {
+  switch (side) {
+    case "n":
+      return { x: 0, y: -1 };
+    case "s":
+      return { x: 0, y: 1 };
+    case "e":
+      return { x: 1, y: 0 };
+    case "w":
+      return { x: -1, y: 0 };
+  }
+};
+var rotateVecByAngle = (v, angle) => {
+  if (angle === 0) return v;
+  const cos = Math.cos(angle);
+  const sin = Math.sin(angle);
+  return { x: v.x * cos - v.y * sin, y: v.x * sin + v.y * cos };
+};
+var autoRouteControls = (sourceWorld, targetWorld, sourceNormalWorld, targetNormalWorld) => {
+  const dx = targetWorld.x - sourceWorld.x;
+  const dy = targetWorld.y - sourceWorld.y;
+  const dist = Math.hypot(dx, dy);
+  const offset = Math.min(CONTROL_MAX, CONTROL_FRACTION * dist);
+  const fallbackSource = dist > 0 ? { x: dx / dist, y: dy / dist } : { x: 1, y: 0 };
+  const fallbackTarget = dist > 0 ? { x: -dx / dist, y: -dy / dist } : { x: -1, y: 0 };
+  const ns = sourceNormalWorld ?? fallbackSource;
+  const nt = targetNormalWorld ?? fallbackTarget;
+  return {
+    c1: { x: sourceWorld.x + ns.x * offset, y: sourceWorld.y + ns.y * offset },
+    c2: { x: targetWorld.x + nt.x * offset, y: targetWorld.y + nt.y * offset }
+  };
+};
+var computeAsymmetricRoute = (sourceNode, targetNode) => {
+  const srcCenterWorld = {
+    x: sourceNode.x + sourceNode.w / 2,
+    y: sourceNode.y + sourceNode.h / 2
+  };
+  const srcInTgtLocal = worldToNodeLocal(srcCenterWorld, targetNode);
+  const tgtHalfW = targetNode.w / 2;
+  const tgtHalfH = targetNode.h / 2;
+  const dxNorm = (srcInTgtLocal.x - tgtHalfW) / Math.max(1, tgtHalfW);
+  const dyNorm = (srcInTgtLocal.y - tgtHalfH) / Math.max(1, tgtHalfH);
+  const targetSide = Math.abs(dxNorm) >= Math.abs(dyNorm) ? dxNorm > 0 ? "e" : "w" : dyNorm > 0 ? "s" : "n";
+  let tgtEntryLocal;
+  if (targetSide === "n" || targetSide === "s") {
+    const sideY = targetSide === "n" ? 0 : targetNode.h;
+    const clampX = Math.max(0, Math.min(targetNode.w, srcInTgtLocal.x));
+    tgtEntryLocal = { x: clampX, y: sideY };
+  } else {
+    const sideX = targetSide === "w" ? 0 : targetNode.w;
+    const clampY = Math.max(0, Math.min(targetNode.h, srcInTgtLocal.y));
+    tgtEntryLocal = { x: sideX, y: clampY };
+  }
+  const targetEntryWorld = nodeLocalToWorld(tgtEntryLocal, targetNode);
+  const tgtEntryInSrcLocal = worldToNodeLocal(targetEntryWorld, sourceNode);
+  const srcHalfW = sourceNode.w / 2;
+  const srcHalfH = sourceNode.h / 2;
+  const rayDx = tgtEntryInSrcLocal.x - srcHalfW;
+  const rayDy = tgtEntryInSrcLocal.y - srcHalfH;
+  const tx = rayDx === 0 ? Number.POSITIVE_INFINITY : (rayDx > 0 ? srcHalfW : -srcHalfW) / rayDx;
+  const ty = rayDy === 0 ? Number.POSITIVE_INFINITY : (rayDy > 0 ? srcHalfH : -srcHalfH) / rayDy;
+  const t = Math.min(tx, ty);
+  const srcExitLocal = {
+    x: srcHalfW + rayDx * t,
+    y: srcHalfH + rayDy * t
+  };
+  const sourceExitWorld = nodeLocalToWorld(srcExitLocal, sourceNode);
+  const dxWorld = targetEntryWorld.x - sourceExitWorld.x;
+  const dyWorld = targetEntryWorld.y - sourceExitWorld.y;
+  const distance2 = Math.hypot(dxWorld, dyWorld);
+  const offset = Math.min(CONTROL_MAX, CONTROL_FRACTION * distance2);
+  const c1 = distance2 > 0 ? {
+    x: sourceExitWorld.x + dxWorld / distance2 * offset,
+    y: sourceExitWorld.y + dyWorld / distance2 * offset
+  } : { ...sourceExitWorld };
+  const tgtNormalWorld = rotateVecByAngle(sideNormalLocal(targetSide), targetNode.angle);
+  const c2 = {
+    x: targetEntryWorld.x + tgtNormalWorld.x * offset,
+    y: targetEntryWorld.y + tgtNormalWorld.y * offset
+  };
+  return { source: sourceExitWorld, target: targetEntryWorld, c1, c2 };
+};
+
 // src/edges/clip.ts
 var fullVisibleClipResult = (samples) => ({
   startIndex: 0,
@@ -588,8 +647,8 @@ var computeEdgeGeometry = (edge, getNode) => {
       targetNodeId
     };
   }
-  const sourceWorld = projectEndToWorld(edge.source, getNode);
-  const targetWorld = projectEndToWorld(edge.target, getNode);
+  let sourceWorld = projectEndToWorld(edge.source, getNode);
+  let targetWorld = projectEndToWorld(edge.target, getNode);
   if (!sourceWorld || !targetWorld) return null;
   let samples;
   if (edge.pathStyle === "bezier") {
@@ -598,6 +657,12 @@ var computeEdgeGeometry = (edge, getNode) => {
     if (edge.control && edge.control.length >= 2) {
       c1 = edge.control[0];
       c2 = edge.control[1];
+    } else if (sourceNode && targetNode && isAttached(edge.source) && isAttached(edge.target) && isLocalOffsetInsideBody(edge.source.localOffset, sourceNode) && isLocalOffsetInsideBody(edge.target.localOffset, targetNode)) {
+      const r = computeAsymmetricRoute(sourceNode, targetNode);
+      sourceWorld = r.source;
+      targetWorld = r.target;
+      c1 = r.c1;
+      c2 = r.c2;
     } else {
       const sourceNormal = sourceNode && isAttached(edge.source) ? rotateVecByAngle(
         sideNormalLocal(
@@ -1050,7 +1115,6 @@ var COMPOSITE = /* @__PURE__ */ new Set([
 var isCompositePrimitive = (type) => COMPOSITE.has(type);
 var isDrawablePrimitive = (type) => ATOMIC.has(type) || COMPOSITE.has(type);
 var PLAIN_RECT_CORNER_THRESHOLD_PX = 1.5;
-var STROKE_VISIBILITY_THRESHOLD_PX = 0.5;
 var LAYERED_OFFSET = 12;
 var drawShape = (ctx, node, scale, theme, opts) => {
   if (!isDrawablePrimitive(node.type)) return;
@@ -1069,7 +1133,7 @@ var drawAtomic = (ctx, type, w, h, style, scale, theme, opts) => {
   const fill = resolveColor(style, "backgroundColor", DEFAULT_STYLE.backgroundColor, theme);
   const stroke = resolveColor(style, "strokeColor", DEFAULT_STYLE.strokeColor, theme);
   const fillVisible = !isFullyTransparent(fill);
-  const strokeVisible = strokeWidth > 0 && strokeWidth * scale >= STROKE_VISIBILITY_THRESHOLD_PX && !isFullyTransparent(stroke);
+  const strokeVisible = strokeWidth > 0 && !isFullyTransparent(stroke);
   if (!fillVisible && !strokeVisible) return;
   const cornerRadius = (style?.roundness ?? DEFAULT_STYLE.roundness) * 4;
   switch (type) {
@@ -1106,7 +1170,7 @@ var drawAtomic = (ctx, type, w, h, style, scale, theme, opts) => {
   }
   if (strokeVisible && !opts?.skipStroke) {
     ctx.strokeStyle = stroke;
-    ctx.lineWidth = strokeWidth;
+    ctx.lineWidth = Math.max(strokeWidth, 1 / scale);
     ctx.setLineDash(dashPatternFor(style?.strokeStyle, strokeWidth));
     ctx.stroke();
   }
@@ -1482,13 +1546,16 @@ var paintAtomicRough = (rc, ctx, type, w, h, style, scale, theme, seed) => {
   const isDark = theme?.("mode") === "dark";
   const fill = resolveColor(style, "backgroundColor", DEFAULT_STYLE.backgroundColor, theme);
   const strokeColor = deriveRoughStrokeColor(rawStroke, fill, isDark);
-  const strokeWidth = resolveStrokeWidth(style, theme);
-  if (strokeWidth <= 0) return;
+  const rawStrokeWidth = resolveStrokeWidth(style, theme);
+  if (rawStrokeWidth <= 0) return;
   const roughness = style?.roughness ?? 0;
   if (roughness <= 0) return;
+  const isNoBorderIntent = isFullyTransparent(rawStroke);
+  const effectiveStrokeStyle = isNoBorderIntent ? "solid" : style?.strokeStyle ?? "solid";
+  const strokeWidth = isNoBorderIntent ? DEFAULT_STYLE.strokeWidth : rawStrokeWidth;
   const cornerRadius = (style?.roundness ?? DEFAULT_STYLE.roundness) * 4;
   const radius = Math.max(0, Math.min(cornerRadius, w / 2, h / 2));
-  const dash = dashPatternFor(style?.strokeStyle, strokeWidth);
+  const dash = dashPatternFor(effectiveStrokeStyle, strokeWidth);
   const detail = apparentDetail(Math.max(w, h), scale);
   const cacheKey = [
     type,
@@ -1497,7 +1564,7 @@ var paintAtomicRough = (rc, ctx, type, w, h, style, scale, theme, seed) => {
     radius.toFixed(1),
     strokeColor,
     strokeWidth.toFixed(2),
-    style?.strokeStyle ?? "solid",
+    effectiveStrokeStyle,
     roughness.toFixed(2),
     seed,
     detail.curveStepCount,
@@ -1605,7 +1672,7 @@ var buildPath = (type, x, y, w, h, radius) => {
 };
 
 // src/text/tokens.ts
-var INLINE_PATTERN = /(\$[^$\n]+?\$|\*\*[^*]+\*\*|==[^=\s](?:[^=]*?[^=\s])?==|`[^`]+`|\*[^*]+\*|__[^_]+__|~~[^~]+~~|_[^_]+_|\[[^\]]+\]\([^)]+\))/g;
+var INLINE_PATTERN = /(\$\$[^\n]+?\$\$|\*\*[^*]+\*\*|==[^=\s](?:[^=]*?[^=\s])?==|`[^`]+`|\*[^*]+\*|__[^_]+__|~~[^~]+~~|_[^_]+_|\[[^\]]+\]\([^)]+\))/g;
 var HR_LINE_PATTERN = /^[ \t]*---[ \t]*$/;
 var DOUBLE_HR_LINE_PATTERN = /^[ \t]*===[ \t]*$/;
 var transformSymbols = (value) => value.replace(/<=>|<->|<-|->|\[\]|\[[vx]\]/gi, (match) => {
@@ -1643,8 +1710,8 @@ var tokenizeInline = (segment) => {
       tokens.push({ type: "link", content: transformSymbols(match.slice(1, splitIndex)) });
     } else if (match.startsWith("`") && match.endsWith("`")) {
       tokens.push({ type: "code", content: match.slice(1, -1) });
-    } else if (match.startsWith("$") && match.endsWith("$")) {
-      tokens.push({ type: "math", content: match.slice(1, -1) });
+    } else if (match.startsWith("$$") && match.endsWith("$$")) {
+      tokens.push({ type: "math", content: match.slice(2, -2) });
     } else {
       tokens.push({ type: "text", content: transformSymbols(match) });
     }
@@ -2648,7 +2715,7 @@ var DEFAULT_EDGE_STYLE = {
   sourceArrowhead: "none",
   targetArrowhead: "arrow-filled"
 };
-var STROKE_VISIBILITY_THRESHOLD_PX2 = 0.5;
+var STROKE_VISIBILITY_THRESHOLD_PX = 0.5;
 var ARROWHEAD_VISIBILITY_THRESHOLD_PX = 2;
 var samplePaintStride = (scale) => {
   if (scale < 0.15) return 8;
@@ -2662,7 +2729,7 @@ var drawEdge = (ctx, edge, geom, sourceNode, targetNode, scale, theme, opts) =>
   if (samples.length < 2) return;
   const style = edge.style;
   const strokeWidth = typeof style?.strokeWidth === "number" ? style.strokeWidth : theme?.("strokeWidth") ?? DEFAULT_EDGE_STYLE.strokeWidth;
-  if (strokeWidth * scale < STROKE_VISIBILITY_THRESHOLD_PX2) return;
+  if (strokeWidth * scale < STROKE_VISIBILITY_THRESHOLD_PX) return;
   const strokeColor = typeof style?.strokeColor === "string" ? style.strokeColor : theme?.("edge.strokeColor") ?? DEFAULT_EDGE_STYLE.strokeColor;
   const sourceArrowhead = style?.sourceArrowhead ?? DEFAULT_EDGE_STYLE.sourceArrowhead;
   const targetArrowhead = style?.targetArrowhead ?? DEFAULT_EDGE_STYLE.targetArrowhead;
@@ -3378,6 +3445,8 @@ var idleInteractionState = () => ({
   resizeHandle: null,
   resizeLockAspect: false,
   resizeFromCenter: false,
+  resizeDraft: null,
+  midpointDraft: null,
   marqueeRect: null,
   marqueeAdditive: false,
   draftEdge: null,
@@ -4954,7 +5023,9 @@ var createRenderer = (opts) => {
     const scale = camera.z * surface.dpr;
     const interaction = store.getInteractionState();
     const excludedNodes = interaction.mode === "dragging" || interaction.mode === "resizing" ? new Set(interaction.draggedIds) : null;
-    const excludedEdges = excludedNodes ? incidentEdgeIds(excludedNodes) : null;
+    const baseExcludedEdges = excludedNodes ? incidentEdgeIds(excludedNodes) : null;
+    const midpointEdgeId = interaction.midpointDraft?.edgeId ?? null;
+    const excludedEdges = midpointEdgeId !== null ? /* @__PURE__ */ new Set([...baseExcludedEdges ?? [], midpointEdgeId]) : baseExcludedEdges;
     paintBackground(surface.ctx, { viewport, zoom: camera.z, background });
     const visible = visibleNodes(camera, viewport);
     const isMoving2 = interaction.mode === "panning" || interaction.mode === "zooming" || interaction.mode === "dragging" || interaction.mode === "resizing" || interaction.mode === "rotating";
@@ -5366,6 +5437,23 @@ var createRenderer = (opts) => {
         }
       }
     }
+    if (interaction.midpointDraft) {
+      const { edgeId, control } = interaction.midpointDraft;
+      const edge = store.getEdge(edgeId);
+      if (edge) {
+        const draftEdge = { ...edge, control };
+        const geom = computeEdgeGeometry(draftEdge, (id) => store.getNode(id));
+        if (geom) {
+          const sourceNode = geom.sourceNodeId ? store.getNode(geom.sourceNodeId) ?? null : null;
+          const targetNode = geom.targetNodeId ? store.getNode(geom.targetNodeId) ?? null : null;
+          drawEdge(ctx, draftEdge, geom, sourceNode, targetNode, scale, theme, {
+            zoom: camera.z,
+            dpr: interactiveSurface.dpr,
+            isMoving: true
+          });
+        }
+      }
+    }
     const selection = store.getSelection();
     const selectedNodeIds = [];
     const selectedEdgeIds = [];
@@ -5438,7 +5526,12 @@ var createRenderer = (opts) => {
           y: orig.y + interaction.dragDelta.y
         });
       } else {
-        m.set(orig.id, live);
+        const d = interaction.resizeDraft;
+        if (d) {
+          m.set(orig.id, { ...live, x: d.x, y: d.y, w: d.w, h: d.h, angle: d.angle });
+        } else {
+          m.set(orig.id, live);
+        }
       }
     }
     return m;