@cardenelabs/cdl 0.118.0 → 0.120.0

package/CHANGELOG.md

@@ -5,6 +5,95 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.120.0] - 2026-10-02
+
+### Fixed
+
+- **線の端に添える数が、線に近すぎて 1 つの帯に見えた** (#989)
+
+  [#984](https://github.com/cardene777/cdl/issues/984) で線の脇へ離す距離を 8 から 15 に広げたが、
+  使う側は図を縮めて出すので足りなかった。
+  見本帳はクラス図を 0.42 倍で出しており、15 は画面では 6 画素になる。
+  字の高さが 8 画素なので、字 1 つ分も空いていなかった。
+
+  余白を **字の箱の高さの半分** から導くようにした。
+  縮めた後も字の半行分の空きが残り、字を大きくした図では余白も一緒に広がる。
+
+  | 何を | 前 | 後 |
+  |---|---|---|
+  | 印と字の余白 | 8 | 12 |
+  | 線の脇へ離す | 15 | 19 |
+  | 端から線に沿って戻る | 22 | 26 |
+
+  線に沿って戻る距離が広がるので、縦に並ぶ箱の間隔も 4 ずつ広がる
+  (`端の字に要る線の長さ` を間隔の計算が引いているため)。
+
+- **走る丸が端の印の中に入り、印に穴が開いたように見えた** (#988)
+
+  丸の通り道が線そのもの (`edge.d`) だったので、丸が端まで行き着いて印の上に重なっていた。
+  継承の線では輪郭だけの三角の中に濃い芯が入り、印に穴が開いたように読めた。
+
+  同じ型は点線で 1 度直している。
+  点線は端に粒が 1 つ出るので、線の方を端から 12 縮めて粒を隠した (`shrinkPathEnd`)。
+  走る丸の通り道は縮めていなかった。
+
+  通り道を両端で縮めるようにした。
+  縮める長さは **印の長さに芯の半径を足した値** で、どちらも実装の定数から導く。
+
+  | 何を | 値の出どころ |
+  |---|---|
+  | 印の長さ | `EDGE_HEAD_MARKER_SIZE.既定` |
+  | 芯の半径 | `走る丸の半径.芯` |
+
+  芯の半径を足すのは、丸の中心が印の外に出ても **芯の縁が印に掛かる** ため。
+  印の長さだけ縮めた形は実際に三角の底に芯が触れていた。
+
+  先頭を縮める処理 (`shrinkPathStart`) を、末尾を縮める処理と対にして足した。
+  曲線は最初の制御点の向きへ送る = 弦を使うと、大きく膨らむ曲線で線が端から出ていく向きと
+  別の向きになる。
+
+  **縮めると点に潰れる短い線は縮めない**。 潰れた通り道では丸が 1 点に止まって見え、
+  走っていないのと区別が付かない。
+
+
+## [0.119.0] - 2026-10-01
+
+### Fixed
+
+- **線の端に添える数が、同じ端の印に貼り付いて読めた** (#984)
+
+  クラス図の多重度 (`1` / `1..*`) が、集約とコンポジションの菱の印と同じ高さに並び、
+  2 つが 1 つの塊として読めていた。
+
+  置き場所は端から線に沿って 22 戻り、線の脇へ 8 離した所に決まる。
+  22 は印の長さの最大 14 に余白 8 を足した値で、**線に沿う向きだけ** を見ていた。
+  印は直角の向きにも広がり、菱と三角は線の芯から 7 ある。
+  線の脇へ 8 しか離さないので、印の縁と字の箱の間は 1 しか空かなかった。
+
+  | 向き | 印の広がり | 字までの距離 | 空き |
+  |---|---|---|---|
+  | 線に沿う | 14 | 22 | 8 |
+  | 直角 (前) | 7 | 8 | 1 |
+  | 直角 (後) | 7 | 15 | 8 |
+
+  線の脇へ離す距離を、印の張り出し (印の縦の半分) に余白を足した値から導くようにした。
+  余白は線に沿う向きが使っているものと同じ値なので、2 つの向きで空き方が揃う。
+
+  線に沿って戻る距離 (22) は変えていない。
+  この値は箱と箱の間隔を決める計算 (`端の字に要る線の長さ`) に入っており、
+  変えると図の高さが動く。
+
+  印の大きさ (14 / 10) は `EDGE_HEAD_MARKER_SIZE` に出し、marker を定義する側と
+  字を置く側の両方が引くようにした。
+  片方に数を直に書くと、印を大きくした時に字だけが元の位置に残る。
+
+  置き場所の検査も直した。
+  箱と札と他の端の字とは突き合わせていたが、**自分の端の印とは突き合わせていなかった**。
+  2 つの箱の隙間では見えない = 字は端から線に沿って戻した所に置くので、軸ごとの離れ方の
+  大きいほう (線に沿う向きの値) が返り、直角の向きが 1 まで詰まっても同じ数字が出る。
+  詰まる側の軸だけを見る検査を足し、字を直す前の位置へ寄せ直す植え込み対照を添えた。
+
+
 ## [0.118.0] - 2026-10-01
 
 ### Fixed
@@ -4689,7 +4778,9 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.118.0...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.120.0...HEAD
+[0.120.0]: https://github.com/cardene777/cdl/compare/v0.119.0...v0.120.0
+[0.119.0]: https://github.com/cardene777/cdl/compare/v0.118.0...v0.119.0
 [0.118.0]: https://github.com/cardene777/cdl/compare/v0.117.0...v0.118.0
 [0.117.0]: https://github.com/cardene777/cdl/compare/v0.116.0...v0.117.0
 [0.116.0]: https://github.com/cardene777/cdl/compare/v0.115.0...v0.116.0

package/dist/index.cjs

@@ -14693,6 +14693,7 @@ var EDGE_HEADS = [
 ];
 var EDGE_HEAD_FILL_DEFAULT = "solid";
 var EDGE_HEAD_FILLS = ["solid", "hollow"];
+var EDGE_HEAD_MARKER_SIZE = { \u65E2\u5B9A: 14, \u5C0F: 10 };
 var EDGE_REVEALS = ["phase", "all"];
 var RELATION_FOCUSES = ["off", "hover"];
 var RELATION_FOCUS_DEFAULT = "off";
@@ -15438,6 +15439,32 @@ function shrinkPathEnd(d, shrinkPx) {
   tokens[tokens.length - 1] = newEndY.toFixed(1);
   return tokens.join(" ");
 }
+function shrinkPathStart(d, shrinkPx) {
+  const \u533A\u9593 = [...d.matchAll(/([MLCQZmlcqz])([^MLCQZmlcqz]*)/g)].map((m) => ({
+    cmd: m[1],
+    args: (m[2] ?? "").trim().split(/[\s,]+/).filter(Boolean).map(parseFloat)
+  }));
+  if (\u533A\u9593.length < 2) return d;
+  const \u5148\u982D = \u533A\u9593[0];
+  if (\u5148\u982D.cmd !== "M" || \u5148\u982D.args.length < 2) return d;
+  const \u6B21 = \u533A\u9593[1];
+  const \u5411\u304D\u5148 = \u6B21.cmd === "Q" || \u6B21.cmd === "C" ? { x: \u6B21.args[0], y: \u6B21.args[1] } : \u6B21.cmd === "L" || \u6B21.cmd === "M" ? { x: \u6B21.args[0], y: \u6B21.args[1] } : null;
+  if (!\u5411\u304D\u5148 || !Number.isFinite(\u5411\u304D\u5148.x) || !Number.isFinite(\u5411\u304D\u5148.y)) return d;
+  const x0 = \u5148\u982D.args[0];
+  const y0 = \u5148\u982D.args[1];
+  const dx = \u5411\u304D\u5148.x - x0;
+  const dy = \u5411\u304D\u5148.y - y0;
+  const len = Math.hypot(dx, dy);
+  if (len < shrinkPx + 1) return d;
+  const \u6BD4 = shrinkPx / len;
+  const \u65B0x = x0 + dx * \u6BD4;
+  const \u65B0y = y0 + dy * \u6BD4;
+  const tokens = d.trim().split(/\s+/);
+  if (tokens.length < 3) return d;
+  tokens[1] = \u65B0x.toFixed(1);
+  tokens[2] = \u65B0y.toFixed(1);
+  return tokens.join(" ");
+}
 function pathSubpath(d, progress) {
   if (progress >= 1) return d;
   if (progress <= 0) {
@@ -21567,10 +21594,12 @@ function recomputeContainedLanes(lanes, nodes) {
 }
 
 // src/layout/head-label.ts
-var \u7AEF\u306E\u5B57\u3092\u623B\u3059\u8DDD\u96E2 = 22;
-var \u7AEF\u306E\u5B57\u3068\u7DDA\u306E\u9699\u9593 = 8;
 var \u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055 = EDGE_LABEL_TEXT.sub.fontSize;
 var \u7BB1\u306E\u9AD8\u3055 = Math.round(\u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055 * 1.2);
+var \u7AEF\u306E\u5B57\u3068\u5370\u306E\u4F59\u767D = Math.round(\u7BB1\u306E\u9AD8\u3055 / 2);
+var \u7AEF\u306E\u5370\u306E\u5F35\u308A\u51FA\u3057 = EDGE_HEAD_MARKER_SIZE.\u65E2\u5B9A / 2;
+var \u7AEF\u306E\u5B57\u3092\u623B\u3059\u8DDD\u96E2 = EDGE_HEAD_MARKER_SIZE.\u65E2\u5B9A + \u7AEF\u306E\u5B57\u3068\u5370\u306E\u4F59\u767D;
+var \u7AEF\u306E\u5B57\u3068\u7DDA\u306E\u9699\u9593 = \u7AEF\u306E\u5370\u306E\u5F35\u308A\u51FA\u3057 + \u7AEF\u306E\u5B57\u3068\u5370\u306E\u4F59\u767D;
 var BASELINE_RATIO = 0.8;
 var \u4E21\u7AEF\u306E\u5B57\u306E\u9593 = \u7AEF\u306E\u5B57\u3092\u623B\u3059\u8DDD\u96E2 * 2;
 function \u7AEF\u306E\u5B57\u306B\u8981\u308B\u7DDA\u306E\u9577\u3055(edge) {
@@ -24097,7 +24126,8 @@ function CdlEdgeView({
   const isPassThrough = isDotted && Boolean(edge.dThrough);
   const lineDotsD = isDotted ? shrinkPathEnd(edge.d, 12) : edge.d;
   const glowPathId = `cdl-edge-${edge.id}`;
-  const glowPathD = edge.d;
+  const \u901A\u308A\u9053\u3092\u7E2E\u3081\u308B = EDGE_HEAD_MARKER_SIZE.\u65E2\u5B9A + \u8D70\u308B\u4E38\u306E\u534A\u5F84.\u82AF;
+  const glowPathD = shrinkPathStart(shrinkPathEnd(edge.d, \u901A\u308A\u9053\u3092\u7E2E\u3081\u308B), \u901A\u308A\u9053\u3092\u7E2E\u3081\u308B);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "g",
     {
@@ -24160,7 +24190,7 @@ function CdlEdgeView({
           }
         ),
         flowing && !isDotted && /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-role": "edge-flow", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("path", { id: glowPathId, d: edge.d, fill: "none", stroke: "none" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { id: glowPathId, d: glowPathD, fill: "none", stroke: "none" }),
           /* @__PURE__ */ jsxRuntime.jsx(EdgeGlowCircles, { color, edgeId: edge.id })
         ] })
       ]
@@ -24204,10 +24234,11 @@ function SolidEdgePath({
     }
   );
 }
+var \u8D70\u308B\u4E38\u306E\u534A\u5F84 = { \u5916: 28, \u4E2D: 18, \u82AF: 11 };
 function EdgeGlowCircles({ color, edgeId }) {
   const ref = `#cdl-edge-${edgeId}`;
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-particle": edgeId, "data-cdl-particle-path-ref": ref, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("circle", { r: 28, fill: color, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("circle", { r: \u8D70\u308B\u4E38\u306E\u534A\u5F84.\u5916, fill: color, children: [
       /* @__PURE__ */ jsxRuntime.jsx("animateMotion", { dur: "2s", begin: "-1s", repeatCount: "indefinite", rotate: "auto", children: /* @__PURE__ */ jsxRuntime.jsx("mpath", { href: ref }) }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "animate",
@@ -24221,7 +24252,7 @@ function EdgeGlowCircles({ color, edgeId }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("circle", { r: 18, fill: color, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("circle", { r: \u8D70\u308B\u4E38\u306E\u534A\u5F84.\u4E2D, fill: color, children: [
       /* @__PURE__ */ jsxRuntime.jsx("animateMotion", { dur: "2s", begin: "-1s", repeatCount: "indefinite", rotate: "auto", children: /* @__PURE__ */ jsxRuntime.jsx("mpath", { href: ref }) }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "animate",
@@ -24235,7 +24266,7 @@ function EdgeGlowCircles({ color, edgeId }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("circle", { r: 11, fill: color, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("circle", { r: \u8D70\u308B\u4E38\u306E\u534A\u5F84.\u82AF, fill: color, children: [
       /* @__PURE__ */ jsxRuntime.jsx("animateMotion", { dur: "2s", begin: "-1s", repeatCount: "indefinite", rotate: "auto", children: /* @__PURE__ */ jsxRuntime.jsx("mpath", { href: ref }) }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "animate",
@@ -33276,8 +33307,8 @@ function CdlStage({
     }
     return Object.entries(TONE).flatMap(
       ([tone, color]) => [
-        [false, 14],
-        [true, 10]
+        [false, EDGE_HEAD_MARKER_SIZE.\u65E2\u5B9A],
+        [true, EDGE_HEAD_MARKER_SIZE.\u5C0F]
       ].flatMap(
         ([small, size]) => EDGE_HEADS.flatMap(
           (head) => EDGE_HEAD_FILLS.map((fill) => {