@cardenelabs/cdl 0.120.0 → 0.122.0

package/src/layout/spec.ts

@@ -175,6 +175,7 @@ const KINDS_DRAWING_TITLE_OUTSIDE: ReadonlySet<string> = new Set([
   "dyn-arc",
   "dyn-wave",
   "dyn-polygon",
+  "station",
   ...KINDS_DRAWING_OWN_PAYLOAD,
 ]);
 
@@ -199,7 +200,7 @@ export function drawsTitleOutsideBox(kind: string | undefined): boolean {
  */
 const TITLE_FONT_SIZE_DEFAULT = 18;
 const TITLE_FONT_SIZE: ReadonlyMap<string, number> = new Map<string, number>([
-  ...(["dyn-rect", "dyn-circle", "dyn-arc", "dyn-wave", "dyn-polygon"] as const).map(
+  ...(["dyn-rect", "dyn-circle", "dyn-arc", "dyn-wave", "dyn-polygon", "station"] as const).map(
     (k) => [k, 13] as const,
   ),
   ...(
@@ -264,6 +265,19 @@ export function titleFontSize(kind: string | undefined): number {
   return TITLE_FONT_SIZE.get(kind ?? "") ?? TITLE_FONT_SIZE_DEFAULT;
 }
 
+/**
+ * 題の幅を node の箱幅で測らない種別。
+ *
+ * 駅の名前は小さな丸の外に置き、丸の幅で切らない。箱幅 24 を上限にすると、通常の駅名まで
+ * `text-readability` が読めない語として挙げるため、幅を箱の中で測る軸からだけ外す。
+ */
+const KINDS_WITH_TITLE_WIDTH_OUTSIDE_NODE: ReadonlySet<string> = new Set(["station"]);
+
+/** その node の題を箱幅に収める前提が成り立たないか */
+export function skipsNodeTitleWidthCheck(kind: string | undefined): boolean {
+  return KINDS_WITH_TITLE_WIDTH_OUTSIDE_NODE.has(kind ?? "");
+}
+
 /**
  * 題を箱の中に描く種別で、題が使えない左右の余白 (world)。
  *
@@ -428,6 +442,7 @@ const KINDS_DRAWING_ONLY_SHAPE: readonly string[] = [
   "dyn-arc",
   "dyn-wave",
   "dyn-polygon",
+  "station",
 ];
 
 /**

package/src/layout/tokens.ts

@@ -140,6 +140,8 @@ export const TOKENS = {
     // 箱としての最小 (80x40) より大きく、名前を持つ箱 (card 320x150) よりは明らかに小さい
     "mark-start": { w: 96, h: 96 },
     "mark-end": { w: 96, h: 96 },
+    // 路線図の駅 (#996) ... 正方形にして小さな丸が縦横どちらにも歪まないようにする。
+    station: { w: 24, h: 24 },
     // 時系列のやり取り (#578)。 実寸は中身から決まる (`sequenceBoardMetrics`) ので、
     // ここは書かなかった時の受け皿
     "sequence-board": { w: 960, h: 640 },

package/src/layout-with-validation.ts

@@ -14,7 +14,8 @@
  *      持つ edge の labelOffsetX/Y を 0 にリセット (作者の手動 offset で bbox 範囲外に押し出された
  *      label を default 位置に戻す)
  *  - h2 node-shift-down ... node-overlap error node pair の下 node の stack を +1
- *  - h3 edge-back-detour ... edge-node-cross error edge の routing を "back-detour" に切替
+ *  - h3 edge-back-detour ... edge-node-cross error のうち、自動経路の edge の routing を
+ *      "back-detour" に切替。 書き手が選んだ曲線と路線図の線は途中の箱を避けない約束なので変えない
  */
 import type { CdlDiagram, CdlEdge, LaidDiagram } from "./types";
 import { layout } from "./layout";
@@ -152,11 +153,15 @@ function applyHeuristics(
       .filter((id): id is string => id !== null),
   );
   if (h3Edges.size > 0) {
-    const originalEdges = edges;
-    edges = edges.map((e): CdlEdge =>
-      h3Edges.has(e.id) && e.routing !== "back-detour" ? { ...e, routing: "back-detour" } : e,
+    const eligibleEdges = new Set(
+      edges
+        .filter((e) => h3Edges.has(e.id) && (e.routing === undefined || e.routing === "default"))
+        .map((e) => e.id),
     );
-    if (edges !== originalEdges) {
+    if (eligibleEdges.size > 0) {
+      edges = edges.map((e): CdlEdge =>
+        eligibleEdges.has(e.id) ? { ...e, routing: "back-detour" } : e,
+      );
       applied.push("h3-edge-back-detour");
       mutated = true;
     }

package/src/layout.ts

@@ -15,6 +15,7 @@ import {
 import {
   bowSharedStraightPaths,
   fanIncomingEndpoints,
+  followLabelsToFannedTails,
   hopEdgeCrossings,
   layoutEdges,
   pullOutgoingFirstCorner,
@@ -212,7 +213,8 @@ export function applyRowLevelNodeShifts<
  * - node は lane 内 stack 順で縦並び、 各 stack 間 gap 80px、 上端 80px
  * - lane label は lane 上部 30px 高
  * - contain: true の lane は内部 node 全部を 24px padding で囲む boundary
- * - edge routing は orthogonal L 字 (起点 side → 中継 → 終点 side)、 左右 lane 跨ぎは S 字 bezier
+ * - edge routing は orthogonal L 字 (起点 side → 中継 → 終点 side)。`curve` は 3 次曲線、
+ *   `metro` は横線と傾き ±1 の斜線を円弧で結ぶ
  * - edge label は path 中点から path 進行方向の垂直方向に 50-80px、 node bbox を避ける
  * - viewBox は cdl が auto 計算 (右端 +80 / 下端 +80)
  */
@@ -339,10 +341,15 @@ export function layout(diag: CdlDiagram): LaidDiagram {
 
   // 同じ 2 点を結ぶ複数の線を弓なりに分ける (dragon #941)。 label と path が確定した後に動かす =
   // 確定前に判定すると、 後から動く label の位置を見て分離を諦める。 座標を明示した edge
-  // (canvas pivot) は「指定した直線が最終 path」 が公開契約なので対象から外す。
+  // (canvas pivot)、`curve`、`metro` は「指定した形が最終 path」 が公開契約なので対象から外す。
   const positionedEdgeIds = new Set(
     diag.edges
-      .filter((e) => e.posX1 !== undefined && e.posY1 !== undefined && e.posX2 !== undefined && e.posY2 !== undefined)
+      .filter(
+        (e) =>
+          e.routing === "curve" ||
+          e.routing === "metro" ||
+          (e.posX1 !== undefined && e.posY1 !== undefined && e.posX2 !== undefined && e.posY2 !== undefined),
+      )
       .map((e) => e.id),
   );
   bowSharedStraightPaths(edges, nodesFinal, positionedEdgeIds);
@@ -354,7 +361,7 @@ export function layout(diag: CdlDiagram): LaidDiagram {
   pullOutgoingFirstCorner(edges, nodesFinal);
   // 同じ辺に入る線の終点を辺に沿って離す (#611)。 経路を引き終えてから当てる = 終点を先に
   // 動かすと引き方の分岐が変わり、 迂回していた線が箱を貫通する (実測で 0 件が 7 件になった)。
-  fanIncomingEndpoints(edges, nodesFinal);
+  const fannedTailShifts = fanIncomingEndpoints(edges, nodesFinal);
   // 同じ通り道を並んで走る区間をずらす (#610)。 弓の後に当てる = 弓で分かれた線を数え直さない。
   // 弧より先に当てる = ずらした後の形で交点を数えないと、 消えた交点に弧が残る。
   //
@@ -364,6 +371,14 @@ export function layout(diag: CdlDiagram): LaidDiagram {
   // 交わる所で上を通る側に弧を差し込む (#608)。 経路が確定してから当てる = 弓や迂回で
   // 形が変わった後の交点を見る。 札を置く前に当てるので、 札は弧を含んだ経路の上に載る。
   hopEdgeCrossings(edges);
+  // 終点を離す / 共有区間を分ける / 交差へ弧を入れる pass が全て終わった座標で札を見る (#1000)。
+  // 先に見ると、 その後に経路が動いて札が線を覆う形が戻る。
+  // 追従と最後の逃がし pass は、 `collectBBoxes` が含める下端の名札の箱上へのはみ出しと
+  // 縦列の題を同じ矩形で測る。 追従だけ箱本体で測ると、 置いた札を最後の pass が押し直す (#1002)。
+  const labelClearanceObstacles = collectBBoxes(containedLanesFinal, nodesFinal, []).filter(
+    (b) => b.kind === "node" || b.kind === "lane-label",
+  );
+  followLabelsToFannedTails(edges, labelClearanceObstacles, fannedTailShifts);
   repositionParallelLabels(edges, nodesFinal);
   // 縦にずらすだけでは逃げ場が無い札を、 自分の線に沿って動かす (#601)。 ここまでの
   // 置き直しは全て縦方向で、 線に沿って動かす経路が無かった。 いま被っている札だけを
@@ -371,16 +386,11 @@ export function layout(diag: CdlDiagram): LaidDiagram {
   slideLabelsAlongOwnPath(edges, nodesFinal);
   // 経路を動かす pass が全て終わってから、 札を箱と札から離し直す (#659)。
   //
-  // 上の chain 伝搬はここより前に走るため、 その後で `pullOutgoingFirstCorner` /
-  // `fanIncomingEndpoints` が経路を動かすと札も一緒に動く。 動いた後を見る者が居なかった。
+  // 上の chain 伝搬はここより前に走るため、 その後の経路 pass が動かした最終経路との隙間を
+  // ここで見直す。
   // ここで動かすのは札だけで、 箱も経路も触らない = 触ると直前の pass が確定させた形を崩す。
   if (!isChainEdgeLabelDisabled()) {
-    edges = resolveLabelClearanceAfterPathPasses(
-      edges,
-      collectBBoxes(containedLanesFinal, nodesFinal, []).filter(
-        (b) => b.kind === "node" || b.kind === "lane-label",
-      ),
-    );
+    edges = resolveLabelClearanceAfterPathPasses(edges, labelClearanceObstacles);
   }
 
   const bboxes = collectBBoxes(containedLanesFinal, nodesFinal, edges);

package/src/render/edges.tsx

@@ -110,14 +110,16 @@ export function CdlEdgeView({
   // 貫通効果が必要な場合は別途 phase activation で表現する。
   // 丸の通り道は線の両端から印の長さだけ縮める (#988)。 縮めないと丸が端の印の中まで
   // 入り、輪郭だけの三角に濃い丸が重なって印に穴が開いたように見える。
-  // 点線の粒を `shrinkPathEnd` で隠しているのと同じ理由で、向きが両端にあるぶん対で縮める
-  const 通り道を縮める = EDGE_HEAD_MARKER_SIZE.既定 + 走る丸の半径.芯;
+  // 点線の粒を `shrinkPathEnd` で隠しているのと同じ理由で、向きが両端にあるぶん対で縮める。
+  // 縮める幅は芯ではなく **玉の一番外の縁** で測る (#994) = 使う側が縁を足すと芯だけでは足りない
+  const 通り道を縮める = EDGE_HEAD_MARKER_SIZE.既定 + 走る丸の外側;
   const glowPathD = shrinkPathStart(shrinkPathEnd(edge.d, 通り道を縮める), 通り道を縮める);
   void isPassThrough;
 
   return (
     <g
       data-cdl-edge={edge.id}
+      data-cdl-routing={edge.routing === "metro" ? "metro" : undefined}
       data-cdl-from={edge.from}
       data-cdl-to={edge.to}
       data-cdl-active={active ? "true" : "false"}
@@ -267,7 +269,21 @@ function SolidEdgePath({
  * 見えるので、印の長さに芯の半径を足した分だけ通り道を縮める。 ここに数を直に書くと、
  * 丸を大きくした時に芯だけが印へはみ出す。
  */
-export const 走る丸の半径 = { 外: 28, 中: 18, 芯: 11 } as const;
+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}`;

package/src/render/nodes.tsx

@@ -7,6 +7,7 @@ import { FunctionNode } from "../kinds/function";
 import { StorageNode } from "../kinds/storage";
 import { GenericNode } from "../kinds/generic";
 import { MarkStartNode, MarkEndNode } from "../kinds/terminal-mark";
+import { StationNode } from "../kinds/station";
 import { DynShapeNode } from "../kinds/dyn-shape";
 import { ChartLineNode, type ChartLineScale } from "../kinds/chart-line";
 import { ChartPieNode } from "../kinds/chart-pie";
@@ -449,6 +450,8 @@ export function CdlNodeView({
         return <MarkStartNode node={resolvedNode} active={active} />;
       case "mark-end":
         return <MarkEndNode node={resolvedNode} active={active} />;
+      case "station":
+        return <StationNode node={resolvedNode} active={active} />;
       default:
         // 新 NodeKind 25 種は GenericNode で汎用描画 (kind 別 icon / color / shape)
         return <GenericNode node={resolvedNode} active={active} value={node.value} stateValues={stateValues} 値の名前={値の名前} />;

package/src/types.ts

@@ -186,6 +186,8 @@ export const NODE_KINDS = [
   // 状態遷移図が使う。 印そのものが意味を持つので文字は描かない
   "mark-start",
   "mark-end",
+  // 路線図の駅 (#996) ... 線路上の点を小さな丸で示し、名前と説明は丸の外に置く
+  "station",
   // 時系列のやり取り (#578) ... 1 つの箱が図を丸ごと描く。 縦が時間で、参加者は箱を持たない
   "sequence-board",
 ] as const;
@@ -207,6 +209,18 @@ export type Side = "top" | "right" | "bottom" | "left";
  */
 export type EdgeStyle = "solid" | "dotted-flow" | "dashed";
 
+/**
+ * 線の道筋。
+ *
+ * - `"default"` ... 自動。 箱を避け、角を丸めた直角の線を引く。 書かない時も同じ
+ * - `"back-detour"` ... 箱の上を回って前の箱へ戻る
+ * - `"curve"` ... 始点から水平に出て終点へ水平に入る 3 次曲線。 途中の箱は避けず、
+ *   2 点が同じ高さなら直線になる。 終点の矢印は水平を向く
+ * - `"metro"` ... 横線と傾き ±1 の斜線だけで結び、角を半径 r の円弧で丸める。
+ *   途中の箱は避けず、2 点が同じ高さなら横 1 本になる
+ */
+export type EdgeRouting = "default" | "back-detour" | "curve" | "metro";
+
 /** 辺の役目 (#618)。 `main` = 図の主となる道 */
 export type EdgeRole = "main";
 
@@ -506,8 +520,8 @@ export type CdlNode = {
    * 変わるのは kind の既定色を使って描かれる部分で、 枠線 / eyebrow の文字色 / icon /
    * 強調表示中の行の値。 本文の文字色と背景は変わらない。
    *
-   * 効くのは `actor` / `function` / `storage` / `event` / `card` と `person` 以降の汎用 kind の
-   * 計 26 種。 それ以外は自前の配色を持つため指定しても変わらず、 検査も通す。 効く kind の
+   * 効くのは `actor` / `function` / `storage` / `event` / `card`、`person` 以降の汎用 kind、
+   * 流れの印、路線図の駅。 それ以外は自前の配色を持つため指定しても変わらず、検査も通す。
    * 一覧は `test/node-styling.test.tsx` が実装から計算した集合と突き合わせている。
    *
    * 既定色と同じ名前を明示指定しても色が変わる kind がある (既定色の hex が `render/tone.ts`
@@ -867,8 +881,12 @@ export type CdlEdge = {
   labelOffsetX?: number;
   /** label の y 方向 fine offset (default 0、 + で下、 - で上) */
   labelOffsetY?: number;
-  /** routing mode (default "default" = 自動 routing、 "back-detour" = back transition 用の上方 detour 強制) */
-  routing?: "default" | "back-detour";
+  /**
+   * 線の道筋。 `default` は箱を避ける自動経路、 `back-detour` は箱の上を回る戻り線、
+   * `curve` は途中の箱を避けず、両端で水平になる 3 次曲線。 `metro` は途中の箱を避けず、
+   * 横線と傾き ±1 の斜線を半径 r の円弧で結ぶ。2 点が同じ高さなら横 1 本。書かなければ `default`。
+   */
+  routing?: EdgeRouting;
   /**
    * CAR-549 SSOT ... label を edge path 上に「被せる」 か「離す」 かの制御 flag。
    * default (false or undefined) = LABEL_INIT_CLEARANCE (34 world、 CAR-630 で 26 → 34 復帰) 離して配置。

package/src/visual-validate.ts

@@ -143,6 +143,7 @@ import {
   TITLE_ROW_MIN_GAP,
   rendersTitleText,
   fitsOwnTitleWidth,
+  skipsNodeTitleWidthCheck,
   drawsTitleOutsideBox,
   titleScalesToFit,
   MIN_TITLE_FONT_SIZE,
@@ -1980,6 +1981,8 @@ function runAxes(
   const LIFELINE_W_THRESHOLD = 8;
   for (const n of laid.nodes) {
     if (n.w < LIFELINE_W_THRESHOLD) continue;
+    // 駅は文字を収める箱ではなく線路上の印なので、箱向けの最小寸法を要求しない。
+    if (n.kind === "station") continue;
     if (n.w < MIN_NODE_W || n.h < MIN_NODE_H) {
       push(
         "node-visibility",
@@ -2016,6 +2019,8 @@ function runAxes(
     // 自分で幅に合わせて切る種別も同じ。 字数から幅を出す下の近似は字の大きさ 22 を前提に
     // しており、 それより小さい字で描く種別に当てると偽陽性になる (#469)
     if (fitsOwnTitleWidth(n.kind)) continue;
+    // 箱の外に出す駅名は小さな丸の幅で切らないため、箱幅を上限にする前提が成り立たない。
+    if (skipsNodeTitleWidthCheck(n.kind)) continue;
     // 常に非表示の node の文字は画面に出ないので、 切れようがない。
     if (!isRenderedNode(n)) continue;
     const titleTrimmed = n.title?.trim() ?? "";
@@ -3111,6 +3116,13 @@ function runAxes(
     for (let i = 0; i + 1 < sorted.length; i++) {
       const upper = sorted[i]!;
       const lower = sorted[i + 1]!;
+      // 横の範囲が重ならない箱は同じ lane に横並びで置かれた組なので、縦の隙間を測らない。
+      if (
+        upper.cx + upper.w / 2 <= lower.cx - lower.w / 2 ||
+        lower.cx + lower.w / 2 <= upper.cx - upper.w / 2
+      ) {
+        continue;
+      }
       const upperBottom = upper.cy + upper.h / 2;
       const lowerTop = lower.cy - lower.h / 2;
       const gap = lowerTop - upperBottom;
@@ -4214,17 +4226,25 @@ function runAxes(
         y1: number;
         x2: number;
         y2: number;
-        cmd: "L" | "Q" | "C";
+        cmd: "L" | "Q" | "C" | "A";
         ctrl?: ReadonlyArray<{ x: number; y: number }>;
       }>,
       peakY: number,
     ): Array<{ minX: number; maxX: number }> => {
       const out: Array<{ minX: number; maxX: number }> = [];
+      let 円弧の始点: { x: number; y: number } | null = null;
       for (const s of segs) {
-        if (Math.abs(s.y1 - s.y2) > 1) continue;
-        if (Math.abs(s.y1 - peakY) > 1) continue;
+        if (s.cmd === "A") {
+          // 飛び越しの弧は同じ高さの通り道の上の小さな山で、山の前後は 1 本の通り道になる。
+          円弧の始点 ??= { x: s.x1, y: s.y1 };
+          continue;
+        }
+        const 始点 = 円弧の始点 ?? { x: s.x1, y: s.y1 };
+        円弧の始点 = null;
+        if (Math.abs(始点.y - s.y2) > 1) continue;
+        if (Math.abs(始点.y - peakY) > 1) continue;
         if (s.cmd !== "L" && !(s.ctrl ?? []).every((c) => Math.abs(c.y - peakY) <= 1)) continue;
-        out.push({ minX: Math.min(s.x1, s.x2), maxX: Math.max(s.x1, s.x2) });
+        out.push({ minX: Math.min(始点.x, s.x2), maxX: Math.max(始点.x, s.x2) });
       }
       return out;
     };