@cardenelabs/cdl 0.52.0 → 0.53.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.52.0",
+  "version": "0.53.0",
   "description": "CDL (Chainome Diagram Language). Mermaid-like declarative DSL that compiles to animated SVG diagrams. Built for blockchain / Solidity flows, generic enough for sequence / flow / state / ER / topology diagrams.",
   "license": "MIT",
   "author": "cardene777",

package/src/layout/head-label.ts

@@ -42,6 +42,30 @@ const 箱の高さ = Math.round(端の字の大きさ * 1.2);
 /** 字の大きさに対する baseline の深さ。 等幅の字の ascent が字の大きさの 8 割ほど */
 const BASELINE_RATIO = 0.8;
 
+/**
+ * 両端に字がある線で、2 つの字の間に空ける長さ (world)。
+ *
+ * 字と自分の端の間 (`端の字を戻す距離`) の 2 倍にする = 字が自分の端より相手の字の近くに
+ * 見えなくなる。 実測で、間が 10 だった短い縦の線 (長さ 100) は 2 つの字が 2 行の札のように
+ * 読まれ、どちらの端の数かが分からなかった (#829)。
+ */
+export const 両端の字の間 = 端の字を戻す距離 * 2;
+
+/**
+ * 端の字を線の同じ側に並べた時、線に沿って要る長さ (world)。 字が無い線は 0。
+ *
+ * 字は端から `端の字を戻す距離` 戻った所から、線に沿って `箱の高さ` だけ占める (縦向きの時)。
+ * 両端にあれば、その 2 つの間に `両端の字の間` を足す。 縦に隣り合う箱の間隔を決める
+ * `layout/nodes.ts` が使う = 間隔が線の長さそのものになる形だけが対象。
+ */
+export function 端の字に要る線の長さ(edge: { headLabel?: string; tailLabel?: string }): number {
+  const 一つ分 = 端の字を戻す距離 + 箱の高さ;
+  const 数 = [edge.headLabel, edge.tailLabel].filter((t) => t?.trim()).length;
+  if (数 === 0) return 0;
+  if (数 === 1) return 一つ分;
+  return 一つ分 * 2 + 両端の字の間;
+}
+
 /** どちらの端か。 `head` = 行き先 (`to`)、 `tail` = 出どころ (`from`) */
 export type 線の端 = "head" | "tail";
 

package/src/layout/nodes.ts

@@ -1,5 +1,6 @@
 import { requiredRowsWidth } from "../kinds/row-align";
 import type { CdlDiagram, LaidLane, LaidNode } from "../types";
+import { 端の字に要る線の長さ } from "./head-label";
 import {
   hasRenderedLabel,
   labelPillH,
@@ -138,9 +139,9 @@ function requiredStackGapForEdgeLabels(diag: CdlDiagram, allStacks: readonly num
 
   // 同じ隙間 (lane + 上側 row の rank) を通る label の pill 高を集める。
   const pillHsByGap = new Map<string, number[]>();
+  // 端の字 (#829) は線の端から測るので、隙間ごとに集めず線 1 本ずつの長さで足りる
+  let 端の字の要求 = 0;
   for (const e of diag.edges) {
-    // `label` が空でも `sub` があれば pill は描かれ、 その高さ (68) の分だけ隙間が要る (Issue #224)。
-    if (!hasRenderedLabel(e)) continue;
     const from = byId.get(e.from);
     const to = byId.get(e.to);
     if (!from || !to) continue;
@@ -149,11 +150,14 @@ function requiredStackGapForEdgeLabels(diag: CdlDiagram, allStacks: readonly num
     const toRank = rankOf.get(to.stack);
     if (fromRank === undefined || toRank === undefined) continue;
     if (Math.abs(fromRank - toRank) !== 1) continue;
+    端の字の要求 = Math.max(端の字の要求, 端の字に要る線の長さ(e));
+    // `label` が空でも `sub` があれば pill は描かれ、 その高さ (68) の分だけ隙間が要る (Issue #224)。
+    if (!hasRenderedLabel(e)) continue;
     const key = `${from.lane}::${Math.min(fromRank, toRank)}`;
     pillHsByGap.set(key, [...(pillHsByGap.get(key) ?? []), labelPillH(e.sub)]);
   }
 
-  let required = 0;
+  let required = 端の字の要求;
   for (const pillHs of pillHsByGap.values()) {
     required = Math.max(required, requiredVerticalLabelGap(pillHs));
   }