@cardenelabs/cdl 0.119.0 → 0.120.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.119.0",
+  "version": "0.120.0",
   "description": "CDL (Chainome Diagram Language). Mermaid-like declarative DSL that compiles to animated SVG diagrams. Built for blockchain / Solidity flows, generic enough for sequence / flow / state / ER / topology diagrams.",
   "license": "MIT",
   "author": "cardene777",

package/src/layout/head-label.ts

@@ -22,8 +22,23 @@ import { extractPathSegments } from "./collisions";
 import { hasRenderedLabel } from "./spec";
 import { measureTextWidth } from "./text-width";
 
-/** 端の印と端の字の間に空ける余白 (world)。 線に沿う向きと直角の向きで同じ値を使う */
-export const 端の字と印の余白 = 8;
+/** 端の字の大きさ。 札の下の行と同じ等幅の字 = 多重度を札に入れていた頃と同じ見え方 */
+export const 端の字の大きさ = EDGE_LABEL_TEXT.sub.fontSize;
+
+/** 字の箱の高さ。 字の大きさに上下の余白を足す */
+const 箱の高さ = Math.round(端の字の大きさ * 1.2);
+
+/**
+ * 端の印と端の字の間に空ける余白 (world)。 線に沿う向きと直角の向きで同じ値を使う。
+ *
+ * **字の箱の高さの半分で測る** (#989)。 使う側は図を縮めて出すので、余白を world の小さい
+ * 数で持つと画面では字より狭くなる。 見本帳はクラス図を 0.42 倍で出しており、余白 8 は
+ * 3 画素、字の高さ 19 は 8 画素だった = 線と数が 1 つの帯として読めた。
+ *
+ * 字の箱の半分にすると、縮めた後も **字の半行分** の空きが残る。
+ * 字を大きくした図では余白も一緒に広がる。
+ */
+export const 端の字と印の余白 = Math.round(箱の高さ / 2);
 
 /** 端の印が線の芯から左右へ張り出す長さ (world)。 印の縦の半分 */
 export const 端の印の張り出し = EDGE_HEAD_MARKER_SIZE.既定 / 2;
@@ -52,12 +67,6 @@ export const 端の字を戻す距離 = EDGE_HEAD_MARKER_SIZE.既定 + 端の字
  */
 export const 端の字と線の隙間 = 端の印の張り出し + 端の字と印の余白;
 
-/** 端の字の大きさ。 札の下の行と同じ等幅の字 = 多重度を札に入れていた頃と同じ見え方 */
-export const 端の字の大きさ = EDGE_LABEL_TEXT.sub.fontSize;
-
-/** 字の箱の高さ。 字の大きさに上下の余白を足す */
-const 箱の高さ = Math.round(端の字の大きさ * 1.2);
-
 /** 字の大きさに対する baseline の深さ。 等幅の字の ascent が字の大きさの 8 割ほど */
 const BASELINE_RATIO = 0.8;
 

package/src/render/edges.tsx

@@ -2,7 +2,7 @@ import { 等幅の字 } from "./mono-text";
 import type { JSX } from "react";
 import { computeLabelBBoxWorld, hasRenderedLabel, LABEL_PILL_PAD_X } from "../layout/spec";
 import { 端の字の大きさ, 端の字を置く, type 線の端 } from "../layout/head-label";
-import type { EdgeRole, LaidEdge, Tone } from "../types";
+import { EDGE_HEAD_MARKER_SIZE, type EdgeRole, type LaidEdge, type Tone } from "../types";
 import { edgeHeadMarkerName } from "./edge-head";
 import { toneColor } from "./tone";
 
@@ -27,7 +27,13 @@ export function edgeColor(edge: { tone: Tone; role?: EdgeRole }): string {
   return edge.role === "main" ? "var(--cdl-now, #c0421f)" : toneColor(edge.tone);
 }
 import { EDGE_LABEL_TEXT, fontFamilyAttr, type EdgeLabelLine } from "../label-text";
-import { interpolate, pathSubpath, resolveNumericAttr, shrinkPathEnd } from "./utils";
+import {
+  interpolate,
+  pathSubpath,
+  resolveNumericAttr,
+  shrinkPathEnd,
+  shrinkPathStart,
+} from "./utils";
 
 /**
  * 不透明度が 1 の行では属性自体を出さない。 SSOT (`EDGE_LABEL_TEXT`) を 1 未満に変えれば
@@ -102,7 +108,11 @@ export function CdlEdgeView({
   // 旧実装は passthrough edge で dThrough (node center 直線) を particle path にして visible path
   // (orthogonal routing) と乖離させていたが、 視覚的にも整合性的にも問題なので統一。
   // 貫通効果が必要な場合は別途 phase activation で表現する。
-  const glowPathD = edge.d;
+  // 丸の通り道は線の両端から印の長さだけ縮める (#988)。 縮めないと丸が端の印の中まで
+  // 入り、輪郭だけの三角に濃い丸が重なって印に穴が開いたように見える。
+  // 点線の粒を `shrinkPathEnd` で隠しているのと同じ理由で、向きが両端にあるぶん対で縮める
+  const 通り道を縮める = EDGE_HEAD_MARKER_SIZE.既定 + 走る丸の半径.芯;
+  const glowPathD = shrinkPathStart(shrinkPathEnd(edge.d, 通り道を縮める), 通り道を縮める);
   void isPassThrough;
 
   return (
@@ -168,7 +178,7 @@ export function CdlEdgeView({
       */}
       {flowing && !isDotted && (
         <g data-cdl-role="edge-flow">
-          <path id={glowPathId} d={edge.d} fill="none" stroke="none" />
+          <path id={glowPathId} d={glowPathD} fill="none" stroke="none" />
           <EdgeGlowCircles color={color} edgeId={edge.id} />
         </g>
       )}
@@ -250,11 +260,20 @@ function SolidEdgePath({
 /**
  * EdgeGlowCircles ... 進行点 glow 3 重円 (28/18/11px) を mpath で path 沿い移動。
  */
+/**
+ * 走る丸の 3 枚の半径 (world)。 濃さは外から順に 0.18 / 0.45 / 1 で、芯だけが不透明。
+ *
+ * **通り道を縮める長さが芯の半径を読む** (#988)。 芯は端の印の上に乗ると穴が開いたように
+ * 見えるので、印の長さに芯の半径を足した分だけ通り道を縮める。 ここに数を直に書くと、
+ * 丸を大きくした時に芯だけが印へはみ出す。
+ */
+export const 走る丸の半径 = { 外: 28, 中: 18, 芯: 11 } as const;
+
 function EdgeGlowCircles({ color, edgeId }: { color: string; edgeId: string }): JSX.Element {
   const ref = `#cdl-edge-${edgeId}`;
   return (
     <g data-cdl-particle={edgeId} data-cdl-particle-path-ref={ref}>
-      <circle r={28} fill={color}>
+      <circle r={走る丸の半径.外} fill={color}>
         <animateMotion dur="2s" begin="-1s" repeatCount="indefinite" rotate="auto">
           <mpath href={ref} />
         </animateMotion>
@@ -267,7 +286,7 @@ function EdgeGlowCircles({ color, edgeId }: { color: string; edgeId: string }):
           repeatCount="indefinite"
         />
       </circle>
-      <circle r={18} fill={color}>
+      <circle r={走る丸の半径.中} fill={color}>
         <animateMotion dur="2s" begin="-1s" repeatCount="indefinite" rotate="auto">
           <mpath href={ref} />
         </animateMotion>
@@ -280,7 +299,7 @@ function EdgeGlowCircles({ color, edgeId }: { color: string; edgeId: string }):
           repeatCount="indefinite"
         />
       </circle>
-      <circle r={11} fill={color}>
+      <circle r={走る丸の半径.芯} fill={color}>
         <animateMotion dur="2s" begin="-1s" repeatCount="indefinite" rotate="auto">
           <mpath href={ref} />
         </animateMotion>

package/src/render/utils.ts

@@ -254,6 +254,53 @@ export function shrinkPathEnd(d: string, shrinkPx: number): string {
   return tokens.join(" ");
 }
 
+/**
+ * SVG path d 文字列の先頭を shrinkPx だけ先へ送る (#988)。 `shrinkPathEnd` と対になる。
+ *
+ * 走る丸の通り道を両端で縮めるために使う。 丸は通り道の端まで行き着くので、縮めないと
+ * 端に乗っている印 (三角 / 菱) の中に重なり、印に穴が開いたように見える。
+ *
+ * 向きは **最初の区間の行き先** から取る。 曲線は最初の制御点を使う = 弦を使うと、
+ * 大きく膨らむ曲線で線が端から出ていく向きと別の向きになる。
+ *
+ * 縮めると残りが点に潰れる短い線は、**縮めずにそのまま返す**。 潰れた通り道では丸が
+ * 1 点に止まって見え、走っていないのと区別が付かない。
+ */
+export function shrinkPathStart(d: string, shrinkPx: number): string {
+  const 区間 = [...d.matchAll(/([MLCQZmlcqz])([^MLCQZmlcqz]*)/g)].map((m) => ({
+    cmd: m[1]!,
+    args: (m[2] ?? "").trim().split(/[\s,]+/).filter(Boolean).map(parseFloat),
+  }));
+  if (区間.length < 2) return d;
+  const 先頭 = 区間[0]!;
+  if (先頭.cmd !== "M" || 先頭.args.length < 2) return d;
+  const 次 = 区間[1]!;
+  // 曲線は最初の制御点が接線を決める。 直線は行き先そのもの
+  const 向き先 =
+    次.cmd === "Q" || 次.cmd === "C"
+      ? { x: 次.args[0]!, y: 次.args[1]! }
+      : 次.cmd === "L" || 次.cmd === "M"
+        ? { x: 次.args[0]!, y: 次.args[1]! }
+        : null;
+  if (!向き先 || !Number.isFinite(向き先.x) || !Number.isFinite(向き先.y)) return d;
+
+  const x0 = 先頭.args[0]!;
+  const y0 = 先頭.args[1]!;
+  const dx = 向き先.x - x0;
+  const dy = 向き先.y - y0;
+  const len = Math.hypot(dx, dy);
+  if (len < shrinkPx + 1) return d;
+  const 比 = shrinkPx / len;
+  const 新x = x0 + dx * 比;
+  const 新y = y0 + dy * 比;
+
+  const tokens = d.trim().split(/\s+/);
+  if (tokens.length < 3) return d;
+  tokens[1] = 新x.toFixed(1);
+  tokens[2] = 新y.toFixed(1);
+  return tokens.join(" ");
+}
+
 /**
  * SVG path d (M / L のみ対応) を progress (0-1) で切り詰めた新 d を返す。
  * cdl の routePath は直線 + L-bend (M x y L x y [L x y]) のみを返すため、