@cardenelabs/cdl 0.22.0 → 0.24.0

package/src/layout/order.ts

@@ -0,0 +1,201 @@
+/**
+ * 関係から lane と stack の並びを決める (#599)。
+ *
+ * cdl は交差を `countEdgeCrossings` で数えるだけで、減らす手段を持っていなかった。
+ * 書き手が lane / stack を手で指定する仕様のため、交差が出ても engine 側に打つ手がない。
+ * 6 表 5 関係の図を人が並べた実測で交差 3 箇所、本関数の並びでは 0 箇所になる。
+ *
+ * ## 3 段で決める
+ *
+ * | 段 | やること |
+ * |---|---|
+ * | 1 | 親からの深さで lane 番号を決める (最長路) |
+ * | 2 | lane を跨ぐ関係に中継点を挟み、通り道を確保する |
+ * | 3 | 各 lane の並びを中央値法で往復させ、交差を減らす |
+ *
+ * ## `compile` からは呼ばない
+ *
+ * 書き手が明示した lane / stack を engine が黙って動かすと、既存の全図の配置が変わる。
+ * 本関数は入力を受けて割当を返すだけで、呼ぶかどうかは上流が決める。
+ *
+ * ## 中継点を挟む理由
+ *
+ * lane を 2 つ以上跨ぐ関係は、途中の lane で場所を取らないと他の節点と重なる経路になる。
+ * 中継点を置くと、その lane の並べ替えに参加して通り道が確保される。
+ * 返す結果に中継点は含まない (呼出側が知る必要のない内部の足場)。
+ */
+
+/** 並べたい節点。 大きさは見ないので id だけでよい */
+export type OrderNode = { id: string };
+
+/** 親から子への関係。 向きが lane の深さを決める */
+export type OrderEdge = { from: string; to: string };
+
+/** 決まった並び。 lane が列、 stack が列の中の位置 */
+export type OrderResult = { id: string; lane: number; stack: number };
+
+/** 中央値法を往復させる回数。 4 往復で並びが落ち着くことを test で確かめている */
+const SWEEPS = 4;
+
+/** 中継点かどうかは id の接頭辞で分ける。 呼出側の id と衝突しない形にする */
+const RELAY = "__relay:";
+
+/**
+ * 親からの深さを決める。
+ *
+ * 環状の関係 (a→b→c→a) があると最長路は定義できないため、節点数を上限に打ち切る。
+ * 打ち切った時点の深さをそのまま使う = 環の中では順序が付かないが、結果は返る。
+ */
+function ranks(nodes: readonly OrderNode[], edges: readonly OrderEdge[]): Map<string, number> {
+  const rank = new Map<string, number>();
+  for (const n of nodes) rank.set(n.id, 0);
+  for (let pass = 0; pass < nodes.length; pass += 1) {
+    let 動いた = false;
+    for (const e of edges) {
+      if (e.from === e.to) continue;
+      const a = rank.get(e.from);
+      const b = rank.get(e.to);
+      if (a === undefined || b === undefined) continue;
+      if (b < a + 1) {
+        rank.set(e.to, a + 1);
+        動いた = true;
+      }
+    }
+    if (!動いた) break;
+  }
+  return rank;
+}
+
+/** 中央値。 参照先が無い節点は -1 を返し、並べ替えの対象から外す */
+function median(values: readonly number[]): number {
+  if (values.length === 0) return -1;
+  const v = [...values].sort((a, b) => a - b);
+  return v[Math.floor((v.length - 1) / 2)] ?? -1;
+}
+
+/**
+ * 関係から lane と stack を決める。
+ *
+ * 同じ入力からは常に同じ並びが返る (乱数を使わず、同点は入力順で解く)。
+ *
+ * @param nodes 並べたい節点
+ * @param edges 親から子への関係。 自己参照は深さに影響しない
+ * @returns 節点ごとの lane と stack。 入力に無い id は返らない
+ */
+export function orderNodes(nodes: readonly OrderNode[], edges: readonly OrderEdge[]): OrderResult[] {
+  if (nodes.length === 0) return [];
+  const ある = new Set(nodes.map((n) => n.id));
+  const 有効 = edges.filter((e) => ある.has(e.from) && ある.has(e.to));
+
+  const rank = ranks(nodes, 有効);
+
+  // 中継点を挟む。 lane を 2 つ以上跨ぐ関係だけが対象
+  type 節 = { id: string; lane: number };
+  const 節点: 節[] = nodes.map((n) => ({ id: n.id, lane: rank.get(n.id) ?? 0 }));
+  const 辺: OrderEdge[] = [];
+  有効.forEach((e, i) => {
+    if (e.from === e.to) return;
+    const 始 = rank.get(e.from) ?? 0;
+    const 終 = rank.get(e.to) ?? 0;
+    let 前 = e.from;
+    for (let s = 始 + 1; s < 終; s += 1) {
+      const id = `${RELAY}${i}:${s}`;
+      節点.push({ id, lane: s });
+      辺.push({ from: 前, to: id });
+      前 = id;
+    }
+    辺.push({ from: 前, to: e.to });
+  });
+
+  // lane ごとに並べる。 初期の並びは入力順
+  const 深さ = Math.max(...節点.map((n) => n.lane)) + 1;
+  const 列: 節[][] = Array.from({ length: 深さ }, () => []);
+  for (const n of 節点) 列[n.lane]?.push(n);
+
+  const 位置 = (): Map<string, number> => {
+    const m = new Map<string, number>();
+    for (const 並 of 列) 並.forEach((n, i) => m.set(n.id, i));
+    return m;
+  };
+  const 親 = new Map<string, string[]>();
+  const 子 = new Map<string, string[]>();
+  const 足す = (m: Map<string, string[]>, key: string, value: string): void => {
+    const 既 = m.get(key);
+    if (既) 既.push(value);
+    else m.set(key, [value]);
+  };
+  for (const e of 辺) {
+    足す(親, e.to, e.from);
+    足す(子, e.from, e.to);
+  }
+
+  for (let pass = 0; pass < SWEEPS; pass += 1) {
+    const pos = 位置();
+    const 下向き = pass % 2 === 0;
+    const 順 = 下向き ? [...列.keys()] : [...列.keys()].reverse();
+    for (const s of 順) {
+      if ((下向き && s === 0) || (!下向き && s === 列.length - 1)) continue;
+      const 並 = 列[s];
+      if (!並) continue;
+      const 元順 = new Map(並.map((n, i) => [n.id, i]));
+      const 重み = new Map(
+        並.map((n) => {
+          const 相手 = (下向き ? 親.get(n.id) : 子.get(n.id)) ?? [];
+          const m = median(相手.map((id) => pos.get(id) ?? -1).filter((v) => v >= 0));
+          return [n.id, m];
+        }),
+      );
+      並.sort((a, b) => {
+        const A = 重み.get(a.id) ?? -1;
+        const B = 重み.get(b.id) ?? -1;
+        // 参照先を持たない節点は動かさない (元の位置を保つ)
+        if (A < 0 && B < 0) return (元順.get(a.id) ?? 0) - (元順.get(b.id) ?? 0);
+        if (A < 0) return 1;
+        if (B < 0) return -1;
+        if (A !== B) return A - B;
+        return (元順.get(a.id) ?? 0) - (元順.get(b.id) ?? 0);
+      });
+    }
+  }
+
+  // 中継点を落とし、残りに stack を振り直す
+  const 結果: OrderResult[] = [];
+  列.forEach((並, lane) => {
+    let stack = 0;
+    for (const n of 並) {
+      if (n.id.startsWith(RELAY)) continue;
+      結果.push({ id: n.id, lane, stack });
+      stack += 1;
+    }
+  });
+  return 結果;
+}
+
+/**
+ * 並びの上で交差の数を数える。
+ *
+ * 節点の実寸を見ず、lane と stack だけで数える近似。
+ * 同じ lane 間を渡る 2 本が、始点と終点の上下関係を入れ替えていれば 1 交差と数える。
+ * 配置を比べる用途にはこれで足り、実寸を要する判定は `countEdgeCrossings` が担う。
+ */
+export function countOrderCrossings(order: readonly OrderResult[], edges: readonly OrderEdge[]): number {
+  const 場所 = new Map(order.map((o) => [o.id, o]));
+  const 渡り = edges
+    .filter((e) => e.from !== e.to)
+    .map((e) => ({ a: 場所.get(e.from), b: 場所.get(e.to) }))
+    .filter((e): e is { a: OrderResult; b: OrderResult } => e.a !== undefined && e.b !== undefined);
+
+  let 数 = 0;
+  for (let i = 0; i < 渡り.length; i += 1) {
+    for (let j = i + 1; j < 渡り.length; j += 1) {
+      const x = 渡り[i];
+      const y = 渡り[j];
+      if (!x || !y) continue;
+      // 同じ lane から同じ lane へ渡る 2 本だけを比べる
+      if (x.a.lane !== y.a.lane || x.b.lane !== y.b.lane) continue;
+      const 上下 = (x.a.stack - y.a.stack) * (x.b.stack - y.b.stack);
+      if (上下 < 0) 数 += 1;
+    }
+  }
+  return 数;
+}

package/src/layout/spec.ts

@@ -251,6 +251,7 @@ export function genericTitleBaselineY(kind: string | undefined, h: number, hasRo
 export const ROW_TOP_STORAGE = 152;
 export const ROW_PITCH_STORAGE = 56;
 
+
 /** `kinds/generic.tsx` の 1 行目 baseline と行送り。 */
 export const ROW_TOP_GENERIC = 100;
 export const ROW_PITCH_GENERIC = 28;

package/src/layout.ts

@@ -10,7 +10,15 @@ import {
   resolveEdgeLabelOverlapsWithChainAndPropagate,
   resolveOverlaps,
 } from "./layout/collisions";
-import { bowSharedStraightPaths, layoutEdges, repositionParallelLabels } from "./layout/edges";
+import {
+  bowSharedStraightPaths,
+  fanIncomingEndpoints,
+  hopEdgeCrossings,
+  layoutEdges,
+  repositionParallelLabels,
+  separateSharedStraightRuns,
+  slideLabelsAlongOwnPath,
+} from "./layout/edges";
 import { applyFooterShapeDrops } from "./layout/footer-shape";
 import {
   expandLaneGapsForEdgeLabels,
@@ -338,7 +346,23 @@ export function layout(diag: CdlDiagram): LaidDiagram {
   // 弧が確定してから、 同じ節の組を結ぶ辺の label を「兄弟の線を跨がない位置」 へ置き直す (#376)。
   // 順序が逆だと、 直線を前提に置いた label を弧が貫く。 label を先に線から離すと、 今度は弧を
   // 膨らませる判定が label を障害物と見なして弧が消える。
+  // 同じ辺に入る線の終点を辺に沿って離す (#611)。 経路を引き終えてから当てる = 終点を先に
+  // 動かすと引き方の分岐が変わり、 迂回していた線が箱を貫通する (実測で 0 件が 7 件になった)。
+  fanIncomingEndpoints(edges, nodesFinal);
+  // 同じ通り道を並んで走る区間をずらす (#610)。 弓の後に当てる = 弓で分かれた線を数え直さない。
+  // 弧より先に当てる = ずらした後の形で交点を数えないと、 消えた交点に弧が残る。
+  //
+  // 終点を離した **後** に当てる。 先に当てると、 終点を離したことで新しくできた並走が
+  // 残る (実測で ER 4 表に長さ 95 の並走が戻った)。
+  separateSharedStraightRuns(edges, nodesFinal);
+  // 交わる所で上を通る側に弧を差し込む (#608)。 経路が確定してから当てる = 弓や迂回で
+  // 形が変わった後の交点を見る。 札を置く前に当てるので、 札は弧を含んだ経路の上に載る。
+  hopEdgeCrossings(edges);
   repositionParallelLabels(edges, nodesFinal);
+  // 縦にずらすだけでは逃げ場が無い札を、 自分の線に沿って動かす (#601)。 ここまでの
+  // 置き直しは全て縦方向で、 線に沿って動かす経路が無かった。 いま被っている札だけを
+  // 対象にするので、 落ち着いている図の座標は動かない。
+  slideLabelsAlongOwnPath(edges, nodesFinal);
 
   const bboxes = collectBBoxes(containedLanesFinal, nodesFinal, edges);
   const collisions = detectCollisions(bboxes, edges);

package/src/presets.ts

@@ -11,7 +11,7 @@ import {
   type SequenceBoardMessage,
   type SequenceBoardMessageKind,
 } from "./kinds/sequence-board-metrics";
-import type { NodeKind, Tone, EdgeStyle, EdgeHead, EdgeHeadFill, RowMark, JourneyEmotion, QuadrantKey, BoundNumber } from "./types";
+import type { NodeKind, Tone, EdgeStyle, EdgeHead, EdgeHeadFill, RowMark, JourneyEmotion, QuadrantKey, BoundNumber, EdgeRole } from "./types";
 
 /**
  * 状態を読む書き方 (`{名前}`)。
@@ -794,8 +794,9 @@ export function er(preset: ErPreset): ErBuilder {
   const api: ErBuilder = {
     entity(e) {
       const laneId = `lane-${e.id}`;
-      // 鍵の群を上にまとめ、間を空の行 1 つで開ける (#578)。 区切りの線を引く代わりに余白で
-      // 分けるので、`rowMarks` を持つ箱では描き手が線を引かない
+      // 鍵の群を上にまとめる (#578)。 群の区切りは **行頭の印** が持つ = 鍵は名前に下線が付く。
+      // 空の行で開ける形は #606 でやめた = 下線と重複した 2 つ目の手掛かりで、
+      // 代わりに行の間隔を不揃いにしていた (鍵と値を持つ箱だけ境目が広がる)
       const 鍵 = (e.columns ?? []).filter((c) => c.pk === true);
       const 値 = (e.columns ?? []).filter((c) => c.pk !== true);
       const 行: string[] = [];
@@ -809,10 +810,6 @@ export function er(preset: ErPreset): ErBuilder {
         });
       };
       鍵.forEach(足す);
-      if (鍵.length > 0 && 値.length > 0) {
-        行.push("");
-        印.push(null);
-      }
       値.forEach(足す);
       const 設計の形 = 行.length > 0;
       const rows = 設計の形 ? 行 : (e.rows ?? []);
@@ -1170,6 +1167,10 @@ export type InfraConnection = {
   sub?: string;
   tone?: Tone;
   style?: EdgeStyle;
+  /** 辺の役目 (#618)。 `main` を書いた辺だけ「いま」 の色で引く */
+  role?: EdgeRole;
+  /** 名前の下地を敷くか (#618)。 書かなければ敷く */
+  labelPlate?: boolean;
   /** label の水平方向 fine offset (default 0)、 preset 交互 ±60 を override */
   labelOffsetX?: number;
   /** label の垂直方向 fine offset (default 0、 preset 交互 ±60 を override) */
@@ -1258,6 +1259,8 @@ export function infrastructure(preset: InfrastructurePreset): InfrastructureBuil
         ...(c.sub ? { sub: c.sub } : {}),
         tone: c.tone ?? tone,
         style: c.style ?? style,
+        ...(c.role ? { role: c.role } : {}),
+        ...(c.labelPlate === undefined ? {} : { labelPlate: c.labelPlate }),
         labelOffsetX: c.labelOffsetX ?? 0,
         labelOffsetY: c.labelOffsetY ?? 0,
       });
@@ -1442,8 +1445,8 @@ export function classDiagram(preset: ClassDiagramPreset): ClassDiagramBuilder {
       return api;
     },
     build() {
-      // 行頭の印で持ち物と振る舞いを分ける (#578)。 群の間は **空の行** で開ける = 区切りの
-      // 線を引く代わりに余白で分ける。 印を持つ行は描き手が線を引かない
+      // 行頭の印で持ち物と振る舞いを分ける (#578)。 持ち物は四角、振る舞いは山形なので、
+      // 群の区切りは行ごとに読める。 空の行で開ける形は #606 でやめた
       const 中身 = 箱.map((c) => {
         const rows: string[] = [];
         const rowMarks: (RowMark | null)[] = [];
@@ -1451,10 +1454,6 @@ export function classDiagram(preset: ClassDiagramPreset): ClassDiagramBuilder {
           rows.push(stripAccess(a));
           rowMarks.push({ shape: "square", filled: isPublic(a) });
         }
-        if ((c.attributes?.length ?? 0) > 0 && (c.methods?.length ?? 0) > 0) {
-          rows.push("");
-          rowMarks.push(null);
-        }
         for (const m of c.methods ?? []) {
           rows.push(stripAccess(m));
           rowMarks.push({ shape: "chevron", filled: isPublic(m) });

package/src/render/edges.tsx

@@ -3,6 +3,28 @@ import { EDGE_HEAD_DEFAULT, EDGE_HEAD_FILL_DEFAULT, type LaidEdge } from "../typ
 import { edgeHeadMarkerId } from "./edge-head";
 import { computeLabelBBoxWorld, hasRenderedLabel, LABEL_PILL_PAD_X } from "../layout/spec";
 import { hasTone, toneColor } from "./tone";
+import type { EdgeRole, Tone } from "../types";
+
+/**
+ * 辺の色 (#618)。 役目を書いた辺だけ「いま」 の色で引く。
+ *
+ * 図の中に道が 2 種 (主となる 1 本と、 そこから枝分かれする預け先) ある時、 どちらも
+ * 同じ色だとどこから読むかが決まらない。 主となる道にだけ別の色を当てて順番を作る。
+ */
+/**
+ * 辺の太さの既定 (#618)。
+ *
+ * 元は光って 5 / 光らず 2.5 で、 消費側 (dragon) が `!important` で 2.25 に上書きしていた。
+ * 実際に画面へ出る 2.25 は箱の枠 (1.75) より太く、 線が箱より前に出ていた。
+ * 箱の枠と釣り合う細さへ下げる。
+ */
+export function defaultEdgeWidth(active: boolean): number {
+  return active ? 2.5 : 1.25;
+}
+
+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";
 
@@ -39,7 +61,7 @@ export function CdlEdgeView({
   progress: number;
   stateValues?: Record<string, string>;
 }): JSX.Element {
-  const color = toneColor(edge.tone);
+  const color = edgeColor(edge);
   // 光っていない edge も tone の色で描く。 以前は一律の灰色に落としていたため、 何も光っていない
   // 静的な図では全 edge が同じ色になり、 因果の向き (警戒 = 赤 / 良好 = 緑) が線から読めなかった。
   // 光っている / いないの区別は、 実線は太さ (5 対 2.5) と線種 (実線対破線)、 点線は太さ (5 対 4)
@@ -171,7 +193,7 @@ function SolidEdgePath({
   // 伸ばすのは初めて出る段だけ (#584)。 光っているかで引くと、光り続ける図で毎段引き直される
   const visibleD = drawing ? pathSubpath(edge.d, progress) : edge.d;
   // signal binding: widthBind / strokeBind / dashOffsetBind (CAR edge-signal-binding)
-  const defaultWidth = active ? 5 : 2.5;
+  const defaultWidth = defaultEdgeWidth(active);
   const boundWidth = edge.widthBind && stateValues
     ? resolveNumericAttr(edge.widthBind, stateValues, defaultWidth)
     : defaultWidth;
@@ -269,7 +291,7 @@ export function CdlEdgeGlowView({
   active: boolean;
 }): JSX.Element | null {
   if (!active) return null;
-  const color = toneColor(edge.tone);
+  const color = edgeColor(edge);
   return <EdgeGlowCircles color={color} edgeId={edge.id} />;
 }
 
@@ -286,7 +308,7 @@ export function CdlEdgeLabelView({
   // 空 label でも rect + text で 12.5x12.5 の小 marker が残り、 dragon sweep で
   // node bbox と数十 px² の実測 overlap を生む (mind-demo 61px² 事象)。
   if (!hasRenderedLabel(edge)) return null;
-  const color = toneColor(edge.tone);
+  const color = edgeColor(edge);
   // SSOT = spec.ts の computeLabelBBoxWorld (CAR-431 で render / layout / predict-bbox 3 箇所の
   // bbox 計算 drift を解消)。 pill h / w / padding / boxLeftX / boxTopY は本 helper 経由で取得、
   // <g transform="translate(labelX, labelY)"> 内 rect は相対座標なので world x/y を helper から
@@ -312,19 +334,22 @@ export function CdlEdgeLabelView({
       data-cdl-edge-label-text={edge.label}
       data-cdl-edge-sub-text={edge.sub ?? ""}
     >
-      <rect
-        data-cdl-role="edge-label-bg"
-        x={boxLeftX}
-        y={boxTopY}
-        width={boxW}
-        height={boxH}
-        rx={10}
-        fill="var(--cdl-label-bg, #ffffff)"
-        stroke={active ? color : "var(--cdl-divider, #d4d4d8)"}
-        strokeOpacity={active ? 0.9 : 0.55}
-        strokeWidth={1.5}
-        opacity={active ? 1 : 0.92}
-      />
+      {/* 下地は既定で敷く。 丸い下地は箱と同じ形なので、 罫の細い図では外せるようにした (#618) */}
+      {edge.labelPlate !== false && (
+        <rect
+          data-cdl-role="edge-label-bg"
+          x={boxLeftX}
+          y={boxTopY}
+          width={boxW}
+          height={boxH}
+          rx={10}
+          fill="var(--cdl-label-bg, #ffffff)"
+          stroke={active ? color : "var(--cdl-divider, #d4d4d8)"}
+          strokeOpacity={active ? 0.9 : 0.55}
+          strokeWidth={1.5}
+          opacity={active ? 1 : 0.92}
+        />
+      )}
       <text
         data-cdl-role="edge-label"
         x={textX}

package/src/types.ts

@@ -134,6 +134,9 @@ export type Side = "top" | "right" | "bottom" | "left";
  */
 export type EdgeStyle = "solid" | "dotted-flow" | "dashed";
 
+/** 辺の役目 (#618)。 `main` = 図の主となる道 */
+export type EdgeRole = "main";
+
 /**
  * 線の種類の全種 (#578)。 **型だけでなく実体を持つ**。
  *
@@ -637,6 +640,21 @@ export type CdlEdge = {
   side?: Side;
   /** visual style、 default "solid" */
   style?: EdgeStyle;
+  /**
+   * 辺の役目 (#618)。 書かなければ従来どおり tone の色で引く。
+   *
+   * `main` を書いた辺だけ「いま」 の色 (`--cdl-now`) で引く。 図の中で 1 本の道を
+   * 目立たせ、 どこから読むかを決めるための口。 すべての辺に書くと差が消えるので、
+   * 主となる 1 本 (または 1 続き) にだけ書く。
+   */
+  role?: EdgeRole;
+  /**
+   * 名前の下地を敷くか (#618)。 書かなければ敷く (従来どおり)。
+   *
+   * 丸い下地は箱と同じ形なので、 名前が小さな箱に見える。 罫の細い図では外したほうが
+   * 線と名前の区別が付く。
+   */
+  labelPlate?: boolean;
   /** 端の形、 default "triangle" (#560)。 線の種類とは別の軸 */
   head?: EdgeHead;
   /**