@cardenelabs/cdl 0.119.0 → 0.121.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.119.0",
+  "version": "0.121.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,33 @@ import { extractPathSegments } from "./collisions";
 import { hasRenderedLabel } from "./spec";
 import { measureTextWidth } from "./text-width";
 
-/** 端の印と端の字の間に空ける余白 (world)。 線に沿う向きと直角の向きで同じ値を使う */
-export const 端の字と印の余白 = 8;
+/**
+ * 端の字の大きさ (world)。
+ *
+ * **札の下の行とは別に持つ** (#994)。 元は `EDGE_LABEL_TEXT.sub.fontSize` を引いていたが、
+ * 札は箱の間に置くので縮めても読め、端の字は線の脇で単独に立つので同じ大きさでは負ける。
+ * 見本帳はクラス図を 0.42 倍で出しており、19 では画面 8 画素と、箱の中の字 (11 画素) より
+ * 一段小さく見えた。 26 にすると画面で 11 画素になり、箱の中の字と並ぶ。
+ */
+export const 端の字の大きさ = 26;
+
+/** 字の箱の高さ。 字の大きさに上下の余白を足す */
+const 箱の高さ = Math.round(端の字の大きさ * 1.2);
+
+/**
+ * 端の印と端の字の間に空ける余白 (world)。 線に沿う向きと直角の向きで同じ値を使う。
+ *
+ * **字の大きさに連れて広げない** (#994)。 #989 では字の箱の半分から導いていたが、字を 26 に
+ * 上げると余白まで 16 に広がり、印の大きさは変わらないのに字だけが線から遠ざかった。
+ * 実機で見た利用者の言葉は「間伸びしてる」 で、図も縦に伸びていた。
+ *
+ * この余白が避ける相手は **印** で、印は字の大きさに連れて変わらない (`EDGE_HEAD_MARKER_SIZE`
+ * は固定)。 避ける相手が動かないなら、避ける幅も動かさない。
+ *
+ * 値は #989 が字 19 で導いた 12 をそのまま据え置く。 見本帳の 0.42 倍では 5 画素で、
+ * 印の縁と字の箱の間に 1 行の半分ほどが残る。
+ */
+export const 端の字と印の余白 = 12;
 
 /** 端の印が線の芯から左右へ張り出す長さ (world)。 印の縦の半分 */
 export const 端の印の張り出し = EDGE_HEAD_MARKER_SIZE.既定 / 2;
@@ -52,12 +77,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,12 @@ export function CdlEdgeView({
   // 旧実装は passthrough edge で dThrough (node center 直線) を particle path にして visible path
   // (orthogonal routing) と乖離させていたが、 視覚的にも整合性的にも問題なので統一。
   // 貫通効果が必要な場合は別途 phase activation で表現する。
-  const glowPathD = edge.d;
+  // 丸の通り道は線の両端から印の長さだけ縮める (#988)。 縮めないと丸が端の印の中まで
+  // 入り、輪郭だけの三角に濃い丸が重なって印に穴が開いたように見える。
+  // 点線の粒を `shrinkPathEnd` で隠しているのと同じ理由で、向きが両端にあるぶん対で縮める。
+  // 縮める幅は芯ではなく **玉の一番外の縁** で測る (#994) = 使う側が縁を足すと芯だけでは足りない
+  const 通り道を縮める = EDGE_HEAD_MARKER_SIZE.既定 + 走る丸の外側;
+  const glowPathD = shrinkPathStart(shrinkPathEnd(edge.d, 通り道を縮める), 通り道を縮める);
   void isPassThrough;
 
   return (
@@ -168,7 +179,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 +261,34 @@ function SolidEdgePath({
 /**
  * EdgeGlowCircles ... 進行点 glow 3 重円 (28/18/11px) を mpath で path 沿い移動。
  */
+/**
+ * 走る丸の 3 枚の半径 (world)。 濃さは外から順に 0.18 / 0.45 / 1 で、芯だけが不透明。
+ *
+ * **通り道を縮める長さが芯の半径を読む** (#988)。 芯は端の印の上に乗ると穴が開いたように
+ * 見えるので、印の長さに芯の半径を足した分だけ通り道を縮める。 ここに数を直に書くと、
+ * 丸を大きくした時に芯だけが印へはみ出す。
+ */
+export const 走る丸の半径 = { 外: 28, 中: 18, 芯: 12 } as const;
+
+/**
+ * 使う側が芯に足す縁の太さの見込み (world、半分の値)。
+ *
+ * 描く側は芯を塗りだけで描くが、使う側は紙の色の縁を回して線から浮かせることがある
+ * (見本帳は 3.5 の縁を足しており、外側は 12 + 1.75 = 13.75 になる)。
+ * その縁は CSS で足されるので描く側からは見えない = 見込みとして持つしかない。
+ *
+ * 2 にするのは見本帳の 1.75 を丸めた値。 **これより太い縁を足すと玉が印に入る**。
+ */
+export const 走る丸の縁の見込み = 2;
+
+/** 玉の一番外の縁までの長さ (world)。 通り道を端から縮める幅の基準になる */
+export 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 +301,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 +314,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]) のみを返すため、