@cardenelabs/cdl 0.120.0 → 0.122.0

package/CHANGELOG.md

@@ -5,6 +5,78 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.122.0] - 2026-10-04
+
+### Added
+
+- **2 つの箱を、水平に出て水平に入る曲線でつなげるようにした** (#997)
+
+  `routing: "curve"` で、段や列をまたぐ箱を 3 次曲線で結べる。
+  2 点が同じ高さなら直線になり、終点の矢印は水平を向く。
+  既存の図は `routing` を書かなければ出力が変わらない。
+  曲線は書いた形を優先するため、途中の箱は避けない。
+
+- **路線図の線と、線路上に置く駅を足した** (#996)
+
+  `routing: "metro"` で、横線と傾き ±1 の斜線を円弧でつなげられる。
+  駅は `station` で描き、`posX` / `posY` に小さな丸を置いて名前と説明を外へ出す。
+  `metro` は途中の箱を避けず、既存の道筋と座標を固定した線の出力は変わらない。
+  同じ lane に横並びで置いた箱を、縦の隙間の検査 (`node-vertical-clearance`) が縦の隣として測らなくなった。
+
+### Changed
+
+- **終点をずらした線の名札を置き直す処理が、名札を箱から離す処理と別の基準で置き場所を決めていた** (#1002)
+
+  名札を置けるかの判定を 1 つにまとめた。
+  置き直した名札が箱との余白と自分の線からの距離の上限を守り、後の処理に押し直されない。
+  線の上に重ねる名札 (`overlay`) のうち線の上に載っているものは動かさない。
+
+### Fixed
+
+- **同じ辺に 2 本入る線の名札が、ずらす前の位置に残って線を覆い、線が切れ端に見えた** (#1000)
+
+  終点だけを辺に沿って動かし、名札を動かしていなかった。
+  経路を動かし終えた後に、最後の区間を覆う名札だけを線と一緒に動かす。
+  同じ辺に 2 本入らない図の出力は変わらない。
+
+## [0.121.0] - 2026-10-02
+
+### Fixed
+
+- **線の端に添える数が、縮めて出すと箱の中の字より一段小さく見えた** (#994)
+
+  大きさを札の下の行 (`EDGE_LABEL_TEXT.sub.fontSize`) から引いていた。
+  札は箱と箱の間に置くので縮めても読めるが、端の字は線の脇で単独に立つので同じ大きさでは負ける。
+  見本帳はクラス図を 0.42 倍で出しており、19 は画面で 8 画素、箱の中の字は 11 画素だった。
+
+  端の字の大きさを札から切り離して 26 にした。
+  画面では 11 画素になり、箱の中の字と並ぶ。
+
+  あわせて **余白を字の大きさに連れて広げない形に戻した**。
+  [#989](https://github.com/cardene777/cdl/issues/989) は字の箱の高さの半分から導いていたので、
+  字を 26 に上げると余白まで 16 に広がり、印の大きさは変わらないのに字だけが線から遠ざかった。
+  実機で見た言葉は「間伸びしてる」 で、図も縦に伸びていた。
+  この余白が避ける相手は印で、印は字に連れて変わらないため、避ける幅も動かさない。
+
+  | 何を | 前 | 後 |
+  |---|---|---|
+  | 端の字の大きさ | 19 (札の下の行と同じ) | 26 (独立) |
+  | 印と字の余白 | 12 (箱の半分から導く) | 12 (据え置き) |
+  | 線の脇へ離す | 19 | 19 |
+  | 端から線に沿って戻る | 26 | 26 |
+
+  線に沿って戻る距離は変えていないので、箱の間隔は字の箱が高くなった分 (23 から 31) だけ伸びる。
+
+- **走る丸を太らせると端の印に食い込んだ** (#994)
+
+  通り道を縮める幅を **芯の半径** で測っていた。
+  使う側は紙の色の縁を回して玉を線から浮かせるので、実際の外側は芯より太い
+  (見本帳は 3.5 の縁を足しており、外側は芯 + 1.75 になる)。
+  縁は CSS で足されるため描く側からは見えない。
+
+  芯を 11 から 12 に上げ、縮める幅の基準を **玉の一番外の縁** (芯 + 縁の見込み 2) に変えた。
+  これより太い縁を足すと印に入るので、見込みの値は描く側が持つ。
+
 ## [0.120.0] - 2026-10-02
 
 ### Fixed
@@ -4778,7 +4850,9 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.120.0...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.122.0...HEAD
+[0.122.0]: https://github.com/cardene777/cdl/compare/v0.121.0...v0.122.0
+[0.121.0]: https://github.com/cardene777/cdl/compare/v0.120.0...v0.121.0
 [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

package/README.md

@@ -189,6 +189,11 @@ export const custom = diagram("custom", { topic: "Custom" })
 流れの始まりと終わりを示す印として `mark-start` (塗った丸) と `mark-end` (輪で囲んだ丸) がある。
 印そのものが意味を持つので文字は描かない。
 
+路線図の駅には `station` を使う。
+駅は小さな丸で、名前を丸の上、説明 (`subtitle`) を丸の下に描く。
+`posX` / `posY` で線路上の点へ置き、既定の大きさは 24×24 になる。
+`tone` を指定すると丸の枠色が変わる。
+
 書ける種類の全件は `NODE_KINDS` を値として公開しているので、記法を書く側は手書きせずに引ける
 (上の表は代表例で、全件ではない)。
 
@@ -221,6 +226,67 @@ export const custom = diagram("custom", { topic: "Custom" })
 | `warning` | `#c9a23e` | 警告 |
 | `info` | `#5a8ec1` | 情報 |
 
+## 線の道筋 (routing)
+
+| 値 | 道筋 | 向く場面 |
+|---|---|---|
+| `default` | 箱を避け、角を丸めた直角の線 | 箱を避けたい図、直角の線に揃えたい図 |
+| `back-detour` | 箱の上を回って戻る線 | 前の箱へ戻る関係 |
+| `curve` | 両端で水平になる 3 次曲線 | 段や列をまたぐ関係を柔らかくつなぐ図 |
+| `metro` | 横線と傾き ±1 の斜線を円弧で結ぶ線 | 路線図の線路と乗り換え |
+
+`curve` は、行き先が右なら始点の右辺から終点の左辺へ、左なら始点の左辺から終点の右辺へ結ぶ。
+2 つの箱の横の範囲が重なる時は、両方の右辺を結ぶ。
+2 点の高さが同じなら直線になる。
+線が終点へ水平に入るため、終点の矢印も線の向きに沿って水平を向く。
+途中の箱は避けない。
+箱を避けたい時は `routing` を書かずに `default` のままにする。
+
+```ts
+import { diagram } from "@cardenelabs/cdl";
+
+export const curvedRelation = diagram("curved-relation", { topic: "曲線で結ぶ" })
+  .lane("left", { x: 0, width: 300 })
+  .lane("right", { x: 600, width: 300 })
+  .node("source", { lane: "left", stack: 0, kind: "card", title: "始点" })
+  .node("target", { lane: "right", stack: 1, kind: "card", title: "終点" })
+  .edge("source", "target", { id: "curve", label: "柔らかくつなぐ", routing: "curve" })
+  .build();
+```
+
+`metro` は、行き先が右なら始点の右辺から終点の左辺へ、左なら始点の左辺から終点の右辺へ結ぶ。
+両端の間に高さの差以上の横幅があれば、傾き ±1 の斜線を中央に置く。
+横線と斜線は半径 24 を上限とする円弧でつなぎ、横線か斜線が短い時は収まる半径まで縮める。
+横の余裕が高さの差に足りない時と、箱の横の範囲が重なる時は、両方の右辺をくの字で結ぶ。
+同じ高さなら横の直線になり、途中の箱は避けない。
+
+`metro` を使う図だけがこの道筋を選ぶ。
+`default` / `back-detour` / `curve` の線と、座標を固定した線の出力は変わらない。
+
+```ts
+import { diagram } from "@cardenelabs/cdl";
+
+export const metroMap = diagram("metro-map", { topic: "路線図" })
+  .lane("upper", { x: 0, width: 700 })
+  .lane("lower", { x: 800, width: 700 })
+  .node("central", {
+    lane: "upper", stack: 0, kind: "station", title: "中央", posX: 100, posY: 200,
+  })
+  .node("museum", {
+    lane: "upper", stack: 1, kind: "station", title: "美術館", posX: 500, posY: 200,
+  })
+  .node("river", {
+    lane: "lower", stack: 0, kind: "station", title: "川辺", posX: 900, posY: 400,
+  })
+  .node("park", {
+    lane: "lower", stack: 1, kind: "station", title: "公園", posX: 1300, posY: 400,
+  })
+  .edge("central", "museum", { id: "upper-line", label: "", routing: "metro" })
+  .edge("river", "park", { id: "lower-line", label: "", routing: "metro" })
+  .edge("museum", "river", { id: "transfer", label: "乗り換え", routing: "metro" })
+  .build();
+```
+
 ## phase / state / tween / set / badge
 
 phase 内で state を tween / set し、 badge を出す。
@@ -384,6 +450,13 @@ cdl は形だけを描き、 色や影は持たない (geometry only、 style
 }
 ```
 
+駅と路線図の線は、次の selector で個別に選べる。
+
+```css
+[data-cdl-role="node-body"][data-cdl-mark="station"] { /* 駅 */ }
+[data-cdl-routing="metro"] [data-cdl-role="edge-line"] { /* 路線図の線 */ }
+```
+
 明暗の切替は consumer 側の仕組み (`html` の class 等) で行う = cdl は明暗の概念を持たない。
 
 **`CdlRole` 型は実装にある role の全部ではない**。 型に載っているのは共通の描画で使う

package/SPEC.md

@@ -177,7 +177,7 @@ phase が定義されると自動的に。
 2. **node** は lane 内で stack 順に上から並ぶ、 各 stack の高さは kind の default (actor 140 / function 110 / storage 180 / event 130 / card 110)、 上下 gap 80px 固定
 3. **lane label** は lane 上部に 30px の高さで表示
 4. **contain: true** の lane は内部 node を 24px padding で破線 boundary 描く
-5. **edge** routing は orthogonal L 字 (起点 side → 中継 90° → 終点 side)、 同 lane 跨ぎは S 字 1 本の bezier 許可
+5. **edge** の自動 routing は角を丸めた orthogonal L 字 (起点 side → 中継 90° → 終点 side)。 `routing: "curve"` は両端で水平になる 3 次曲線、`routing: "metro"` は横線と傾き ±1 の斜線を円弧で結ぶ線を使う
 6. **edge label** は path 中点から「path 進行方向の垂直方向」 に 50-80px 離して配置、 lane / node bbox との overlap を計算で避ける
 7. **viewBox** は cdl が auto 計算 (全 lane の右端 + 余白 80px、 全 node の下端 + 余白 80px)