@cardenelabs/cdl 0.21.2 → 0.23.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;
@@ -1155,3 +1156,29 @@ export const CLOUD_ART_CENTER_RISE = (() => {
   const 下 = Math.max(...CLOUD_CIRCLES.map((c) => c.cy + c.r));
   return -(上 + 下) / 2;
 })();
+
+/**
+ * 箱が中身より高い時に、字を下へずらす量 (#597)。
+ *
+ * 段の高さは行内の最大値で決まるので、行に高い箱が 1 つあると同じ行の箱もそこまで伸びる。
+ * 字は上から置かれるため、伸びたぶんがそのまま下に空く (実測 = 240 の箱に 67 ぶんの字が
+ * 上端に貼り付いていた)。
+ *
+ * 余りを上下で分ける = 中身を箱の中央に置く。 行を持つ形と値を持つ形は対象外
+ * (行は上端から数え、値は下端から置くので、動かすと重なる)。
+ *
+ * @param 満載h 3 段すべてを書いた時の高さ (`NODE_SIZE[kind].h`)
+ * @param 実際のh layout が決めた高さ
+ */
+export function 余りを分ける(
+  kind: string | undefined,
+  満載h: number,
+  実際のh: number,
+  中身: { hasEyebrow: boolean; hasSubtitle: boolean; hasValue: boolean; hasRows: boolean },
+): number {
+  if (!段を積む箱か(kind, 中身.hasRows)) return 0;
+  if (中身.hasValue) return 0;
+  const 要る高さ = 中身から出す高さ(kind, 満載h, 中身);
+  const 余り = 実際のh - 要る高さ;
+  return 余り > 0 ? Math.round(余り / 2) : 0;
+}

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

@@ -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 ?? []);
@@ -1442,8 +1439,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 +1448,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) });