@cardenelabs/cdl 0.6.1 → 0.9.0

package/src/layout/footer-shape.ts

@@ -28,35 +28,45 @@ export const SHAPE_DRAW_UP_EXTENT: Readonly<Record<string, number>> = {
 /**
  * 縦線を持つ lane の **下端の名札** を集める。
  *
- * 順序図は lane ごとに上端と下端へ名札を置く。 node が 1 つ以下の lane は下端の名札を持たない
- * (上端だけ、 もしくは空) ため対象から外す。
+ * 判定は node の `role` で行う。 順序図を組み立てる側 (`presets.ts` の `build()`) が
+ * `role: "lifeline-footer"` を付けるため、 描画側は位置を見る必要が無い。
  *
- * 縦線の終点 (`CdlStage`) と絵を下げる量 (`footerShapeDrops`) と図の下端 (`computeViewBox`) の
- * 3 箇所が同じ名札を指す必要があるため、 「どれが下端の名札か」 の判定をここに 1 つだけ置く。
+ * **位置で推測していた形は誤りだった** (`#458`)。 「node が 2 つ以上ある lane の一番下」 と
+ * 決めていたため、 手で組んだ図で一番下が名札でない `shape-` の node だと、 その絵が下がった。
+ *
+ * 目印に加えて 2 つの条件を見る。 どちらも **どれが名札かの判定ではなく、 名札として扱うと
+ * 図が壊れる形を除く** ためのもの。
+ *
+ * | 条件 | 除く理由 |
+ * |---|---|
+ * | `lane.lifeline` が真 | 縦線が無い lane では絵を下げる理由 (縦線と絵の重なり) が起きない |
+ * | その lane に node が 2 つ以上 | 1 つしか無い lane の唯一の node を名札にすると縦線が退化する |
+ *
+ * 2 つ目は実測に基づく。 縦線の終点は **全 lane で 1 つに揃える** ため、 名札の位置が異常な lane が
+ * 1 つあるだけで図の全 lane から縦線が消えていた (1 node の lane を名札にして実測、 通常の lane と
+ * 混在させても全て消えた)。 1 node の lane にあるのは上端の名札のはずで、 それを下端として扱う形
+ * 自体が誤り。 終点の選び方そのものは `uniformLifelineEndY` (`#479`) が直した。
+ *
+ * 同じ lane に名札が複数あれば全て返す = 数を絞る根拠が無く、 絞るとどれを残すかで再び位置の
+ * 推測に戻る。
+ *
+ * 縦線の終点 (`uniformLifelineEndY`) と絵を下げる量 (`applyFooterShapeDrops`) と外接矩形
+ * (`collectBBoxes`) が同じ名札を指す必要があるため、 「どれが下端の名札か」 の判定をここに
+ * 1 つだけ置く。
  */
 export function lifelineFooterNodes(lanes: LaidLane[], nodes: LaidNode[]): LaidNode[] {
-  // lane ごとに node を集める索引を 1 度だけ作る。 lane ごとに全 node を走査すると
-  // lane 数 × node 数に膨らみ、 `CdlStage` は動きの 1 コマごとに描き直すため毎コマ払う
-  const byLane = new Map<string, LaidNode[]>();
-  for (const n of nodes) {
-    const inside = byLane.get(n.lane);
-    if (inside) inside.push(n);
-    else byLane.set(n.lane, [n]);
-  }
-  const footers: LaidNode[] = [];
+  // lane ごとの node 数を 1 度だけ数える。 node ごとに全 node を走査すると node 数の 2 乗に
+  // 膨らみ、 `CdlStage` は動きの 1 コマごとに描き直すため毎コマ払う
+  const 数 = new Map<string, number>();
+  for (const n of nodes) 数.set(n.lane, (数.get(n.lane) ?? 0) + 1);
+
+  const lifelineLanes = new Set<string>();
   for (const lane of lanes) {
-    if (!lane.lifeline) continue;
-    const inside = byLane.get(lane.id);
-    if (inside === undefined || inside.length < 2) continue;
-    // 一番下 = cy が最大。 並べ替えずに 1 回の走査で選ぶ。 同じ cy が複数ある時は
-    // **後に現れた方** を採る (安定な並べ替えで末尾を取るのと同じ結果にする)
-    let footer = inside[0]!;
-    for (const n of inside) {
-      if (n.cy >= footer.cy) footer = n;
-    }
-    footers.push(footer);
+    if (lane.lifeline) lifelineLanes.add(lane.id);
   }
-  return footers;
+  return nodes.filter(
+    (n) => n.role === "lifeline-footer" && lifelineLanes.has(n.lane) && (数.get(n.lane) ?? 0) >= 2,
+  );
 }
 
 /**
@@ -95,3 +105,55 @@ export function footerShapeDropsOf(footers: LaidNode[]): Map<string, number> {
   }
   return drops;
 }
+
+/**
+ * 下端の名札を、 下げる量だけ実際に動かす (`#478`)。
+ *
+ * **`cy` は「箱の中心」 のまま**。 絵は箱の下端を基準に組み立てられるため、 箱を動かせば
+ * 絵も同じだけ動く。 絵の上端は `cy + h / 2 - SHAPE_DRAW_UP_EXTENT[kind]` で、 箱と
+ * `SHAPE_DRAW_UP_EXTENT` から一意に導ける (`footerShapeDrawTop`)。
+ *
+ * ## 描画だけを動かす形を採らない理由
+ *
+ * 元は描画側が名札を包む `<g>` に `translate(0, dy)` を掛けており、 **箱ごと下へ動いて
+ * 見えるのに座標は元のまま** だった。 `cy` も `data-cdl-cy` も外接矩形も動かないため、
+ * 座標を読む側 (縦線の終点 / 図の下端 / 外接矩形 / 矢印の接続先) が実際の描画と食い違う。
+ *
+ * ## 「絵」 ではなく「箱」 を `cy` とする理由
+ *
+ * `cy` / `w` / `h` は全ての種別で **箱** を表し、 矢印の接続先 / 当たり判定 / `data-cdl-cy` /
+ * 絵の組み立ての原点がこの意味に依存している。 一部の種別だけ `cy` を絵の中心に変えると、
+ * 同じ field が node によって別の意味を持つ。
+ *
+ * 絵の範囲は箱から導けるが、 逆は導きにくい = 絵を `cy` にすると箱の位置を出すのに同じ
+ * `SHAPE_DRAW_UP_EXTENT` が要り、 依存の向きが 1 つ増えるだけで得るものが無い。
+ *
+ * ## 下げる量は位置に依存しない
+ *
+ * `footerShapeDropY` が見るのは種別と箱の高さだけなので、 動かした後に呼び直しても同じ値を
+ * 返す。 したがって後段が名札をさらに動かしても、 絵の上端は常に
+ * `cy + h / 2 - extent` として正しく導ける。
+ */
+export function applyFooterShapeDrops(lanes: LaidLane[], nodes: LaidNode[]): LaidNode[] {
+  const drops = footerShapeDrops(lanes, nodes);
+  if (drops.size === 0) return nodes;
+  return nodes.map((n) => {
+    // posX / posY が揃った node は「指定した位置から動かさない」公開契約。 絵が箱の上へ出る
+    // 範囲は collectBBoxes / footerShapeDrawTop が扱うため、 絶対配置を崩してまで箱を下げない。
+    if (n.posX !== undefined && n.posY !== undefined) return n;
+    const dy = drops.get(n.id);
+    return dy === undefined ? n : { ...n, cy: n.cy + dy };
+  });
+}
+
+/**
+ * 下げた名札の **絵の上端**。 縦線の終点と外接矩形の上端がこの値を使う。
+ *
+ * 絵は箱の下端から上へ `SHAPE_DRAW_UP_EXTENT` 伸びるので、 上端は `cy + h / 2 - extent`。
+ * 下げた量が `extent - h` である分、 これは `cy - h / 2 - 下げた量` と等しい。
+ *
+ * 下げていない名札 (箱に収まる種別 / 収まる高さ) では箱の上端をそのまま返す。
+ */
+export function footerShapeDrawTop(node: LaidNode): number {
+  return node.cy - node.h / 2 - footerShapeDropY(node.kind, node.h);
+}

package/src/layout/lifeline.ts

@@ -0,0 +1,80 @@
+import type { LaidLane, LaidNode } from "../types";
+import { footerShapeDrawTop, lifelineFooterNodes } from "./footer-shape";
+
+/**
+ * lane ごとの縦線の始点 = その lane の一番上の node の下端。
+ *
+ * node を 1 つも持たない lane は載せない (縦線を引く相手が無い)。
+ *
+ * 一番上は `cy` の小さい順で決める。 同値なら先に現れた node を採る = 並べ替えてから先頭を
+ * 採る形と同じ結果になる。
+ */
+export function lifelineStartYs(nodes: LaidNode[]): Map<string, number> {
+  const topmost = new Map<string, LaidNode>();
+  for (const n of nodes) {
+    const cur = topmost.get(n.lane);
+    if (cur === undefined || n.cy < cur.cy) topmost.set(n.lane, n);
+  }
+  const starts = new Map<string, number>();
+  for (const [laneId, n] of topmost) starts.set(laneId, n.cy + n.h / 2);
+  return starts;
+}
+
+/**
+ * 全 lane で揃える縦線の終点。 **下端の名札の絵の上端の最小値** を返す。
+ *
+ * 1 つの値を全 lane で共有することが元からの設計意図で、 これが全 lane の縦線を同じ高さで
+ * 終わらせる。
+ *
+ * ## 終点に選べる名札を絞る (`#479`)
+ *
+ * 全ての名札から最小値を採ると、 **絵の上端が他の lane の始点より上にある名札が 1 つあるだけで
+ * 図の全 lane から縦線が消える**。 終点は全 lane 共通なのに、 描くかどうかの判定
+ * (`終点 > 始点`) は lane ごとに行うため、 1 つの lane の異常が図全体に伝わる。
+ *
+ * 実測 (`#458` の Round 3)。 目印の付いた node が lane の一番上にある lane に通常の lane を
+ * 混ぜると、 通常の lane の縦線まで 1 本も描かれなかった。
+ *
+ * そこで **絵の上端が全 lane の始点の最大値より下にある名札だけ** を候補にする。 終点がどの lane の
+ * 始点より上にも来なくなるため、 候補が 1 つでもあれば全 lane の縦線が描かれる。 名札が
+ * 正常な図では 1 つも外れないので、 終点の値は 1 mm も変わらない。
+ *
+ * 「自分の lane の始点より下か」 で絞る形は採らない。 自分の lane では正常でも他の lane の
+ * 始点より上にある名札が残り、 その lane の縦線が消える形が閉じない。 終点は全 lane 共通なので、
+ * 絞る基準も全 lane の始点で見るのが筋。
+ *
+ * ## 却下 = 最小値を始点の最大値で下限を切る
+ *
+ * 最小値をそのまま採り、 `Math.max(最小値, 始点の最大値)` で下限を切る形も実装して測った。
+ * **この図では縦線が 1 本も描かれない**。 lane の並びが揃った図では全 lane の始点が同値になり、
+ * 下限を切った終点が全 lane の始点と一致する = `終点 > 始点` をどの lane も満たさない。
+ * 下限は「始点より上に来ない」 ことしか保証せず、 描画が要求する「始点より下」 に届かない。
+ *
+ * ## 候補が 1 つも残らない図
+ *
+ * 名札が全て異常な図では選べる終点が無いため、 名札を持たない図と同じ fallback (最初の
+ * 縦線 lane の下端) に落とす。 lane は自分の node を含む高さを持つので、 通常はどの始点よりも
+ * 下に来る。
+ */
+export function uniformLifelineEndY(
+  lanes: LaidLane[],
+  nodes: LaidNode[],
+  starts: Map<string, number> = lifelineStartYs(nodes),
+): number {
+  const lifelineLanes = lanes.filter((l) => l.lifeline);
+
+  let deepestStart = Number.NEGATIVE_INFINITY;
+  for (const lane of lifelineLanes) {
+    const start = starts.get(lane.id);
+    if (start !== undefined) deepestStart = Math.max(deepestStart, start);
+  }
+
+  // 名札の絵が箱の上端より上へ出る種別では、 縦線は **絵の上端** で止める (#417 / #478)。
+  // 箱の上端で止めると出た分だけ縦線が絵の中を通る。
+  const footerTops = lifelineFooterNodes(lanes, nodes)
+    .map((f) => footerShapeDrawTop(f))
+    .filter((top) => top > deepestStart);
+
+  if (footerTops.length > 0) return Math.min(...footerTops);
+  return lifelineLanes[0] ? lifelineLanes[0].y + lifelineLanes[0].height : 0;
+}

package/src/layout/spec.ts

@@ -87,8 +87,6 @@ const KINDS_WITHOUT_TITLE_TEXT: ReadonlySet<string> = new Set([
   "quadrant-matrix",
   "tree-hierarchy",
   "journey-map",
-  // 形の中に自前の文字を置く (title は使わない)
-  "shape-blockchain-block",
 ]);
 
 /**
@@ -104,6 +102,27 @@ export function rendersTitleText(kind: string | undefined): boolean {
   return !KINDS_WITHOUT_TITLE_TEXT.has(kind ?? "");
 }
 
+/**
+ * 自分で `title` を描く幅に合わせて切る種別 (#469)。
+ *
+ * `text-readability` (軸 3) は種別によらず「字数 × 22 + 52 が node 幅を超えるか」 で切れるかを
+ * 見る。 22 は `kinds/storage.tsx` の字の大きさで、 それより小さい字で描く種別には当たらない。
+ *
+ * `shape-blockchain-block` は 13 で描き、 しかも絵ごと `fitArt` で縮尺するため、 字数から幅を
+ * 出す近似が実物と大きくずれる (実測 = 幅 280 の箱に 11 字を渡すと、 描画は 1 字も落とさないのに
+ * 軸は期待幅 294 として警告した)。 種別自身が描く幅に合わせて切るので、 超えて切れることが
+ * そもそも起きない。
+ *
+ * **`rendersTitleText` とは別の述語にする**。 あちらは「文字として描くか」 で、 RTL / CJK / bidi の
+ * 判定はこの種別にも当てたい。 ここで見るのは「幅の近似が当たるか」 だけになる。
+ */
+const KINDS_FITTING_OWN_TITLE: ReadonlySet<string> = new Set(["shape-blockchain-block"]);
+
+/** その node が `title` を自分で幅に合わせて切るか (SSOT) */
+export function fitsOwnTitleWidth(kind: string | undefined): boolean {
+  return KINDS_FITTING_OWN_TITLE.has(kind ?? "");
+}
+
 /**
  * `rows` を文字として描く node の種別。
  *

package/src/layout/text-width.ts

@@ -77,11 +77,93 @@ function isHalfwidthKana(code: number): boolean {
   return code >= 0xff61 && code <= 0xffdc;
 }
 
+/**
+ * 絵文字 1 つ分の advance (em)。 実ブラウザで測った値 (`#481`)。
+ *
+ * `getComputedTextLength()` で fontSize 22 の 1 文字が 23.0 = 1.045 em、 5 / 10 / 20 文字でも
+ * 1 文字あたり 23.0 で線形だった。 丸めて 1.05 を採る。
+ *
+ * **元は class 既定の 0.65 に落ちていた**。 10 文字並べると見積り 143 に対し実描画 230 で、
+ * 37.8% 足りない = 枠が実際より狭く見積もられ、 名前が枠からはみ出す。
+ */
+const EMOJI_ADVANCE_EM = 1.05;
+
+/** mono text から fallback する絵文字の advance (em)。 fontSize 19 の実測 22.0 px。 */
+const MONO_EMOJI_ADVANCE_EM = 1.16;
+
+/**
+ * 絵文字ではない非 ASCII の記号 1 つ分の advance (em)。 実ブラウザで測った値 (`#481`)。
+ *
+ * 矢印 (`→←↑↓`) が 1 文字 0.868 em、 幾何図形と印 (`●■★✓`) が 0.948 em だった。 広い方に
+ * 寄せて 0.95 を採る = 見積りが実描画より **狭い** と枠からはみ出すが、 広い分には枠が
+ * 間延びするだけで済む。
+ */
+const WIDE_SYMBOL_ADVANCE_EM = 0.95;
+
+/** 絵文字として描かれる符号位置か (色付きの絵として描かれる範囲)。 */
+function isEmoji(code: number): boolean {
+  return (
+    (code >= 0x1f000 && code <= 0x1faff) || // 絵文字の主要面
+    (code >= 0x2600 && code <= 0x27bf) || // 記号と絵文字 (♻ ✅ ❤ 等)
+    (code >= 0x1f1e6 && code <= 0x1f1ff) // 国旗を作る地域指示子
+  );
+}
+
+/**
+ * 書記素全体が絵文字表示か。
+ *
+ * キーキャップ (`1️⃣`) / 著作権記号 (`©️`) / 絵文字表示の矢印 (`↔️`) は先頭の符号位置だけでは
+ * 絵文字範囲に入らない。 VS16 が付いた書記素も絵文字として扱う。
+ */
+function isEmojiGrapheme(grapheme: string, firstCode: number): boolean {
+  return isEmoji(firstCode) || grapheme.includes("\ufe0f");
+}
+
+/**
+ * 絵文字ではないが `defaultAdvanceEm` の既定 (0.65) より明らかに広い記号か。
+ *
+ * 矢印 / 幾何図形 / 補助矢印。 いずれも実測で 0.87 em 以上あり、 既定のままだと 25-32% 足りない。
+ */
+function isWideSymbol(code: number): boolean {
+  return (
+    (code >= 0x2190 && code <= 0x21ff) || // 矢印
+    (code >= 0x2500 && code <= 0x257f) || // 罫線
+    (code >= 0x25a0 && code <= 0x25ff) || // 幾何図形
+    (code >= 0x2b00 && code <= 0x2bff) // その他の記号と矢印
+  );
+}
+
+/**
+ * 1 つの絵に畳まれる並びを含むか。 含む時だけ書記素 (glyph) 単位で数える。
+ *
+ * 家族 (`👨‍👩‍👧` = 符号位置 5 つ) / 肌の色付き (`👍🏽` = 2 つ) / 異体字選択子付き (`❤️` = 2 つ) /
+ * 国旗 (`🇯🇵` = 2 つ) は、 いずれも実測で **1 文字分 (23.0)** しか幅を持たない。 符号位置で
+ * 数えると家族 1 つで 3 倍に見積もる。
+ *
+ * 判定を先に置くのは速さのため。 英数字と日本語だけの文字列は書記素と符号位置が一致するので、
+ * 分割する意味が無い (`measureTextWidth` は衝突判定から node ごとに呼ばれる)。
+ */
+const CLUSTER_JOINER_RE = /\u200d|\ufe0f|[\u{1f000}-\u{1faff}]|[\u{2600}-\u{27bf}]/u;
+
+/** 書記素で分ける器。 使う時に 1 度だけ作る (作る cost が呼出ごとに乗らないように)。 */
+let 書記素で分ける: Intl.Segmenter | undefined;
+function segmentGraphemes(text: string): string[] {
+  if (typeof Intl === "undefined" || typeof Intl.Segmenter !== "function") {
+    // 分ける器が無い環境では符号位置で数える。 絵文字の並びを過大に見積もるが、 広い側に
+    // 外れるので枠からはみ出す形にはならない
+    return [...text];
+  }
+  書記素で分ける ??= new Intl.Segmenter(undefined, { granularity: "grapheme" });
+  return [...書記素で分ける.segment(text)].map((s) => s.segment);
+}
+
 /**
  * char class 別 default advance (em)。 char 表に個別値が無い場合の fallback。
  * Inter Bold で ASCII 平均 = 0.58、 記号平均 = 0.42、 CJK = 1.05 (font-fallback overhang 込)、 半角カナ = 0.60。
  */
 function defaultAdvanceEm(ch: string, code: number): number {
+  if (isEmoji(code)) return EMOJI_ADVANCE_EM;
+  if (isWideSymbol(code)) return WIDE_SYMBOL_ADVANCE_EM;
   if (isCJK(code)) return 1.08;
   if (isHalfwidthKana(code)) return 0.72;
   if (ch >= "a" && ch <= "z") return 0.73;
@@ -109,14 +191,20 @@ export function measureTextWidth(text: string, opts: MeasureOptions = {}): numbe
   const fontFamily = opts.fontFamily ?? "sans";
   let advanceEmSum = 0;
   let charCount = 0;
-  for (const ch of text) {
+  // 1 つの絵に畳まれる並びがある時だけ書記素で数える (`CLUSTER_JOINER_RE` の説明)
+  const 文字列 = CLUSTER_JOINER_RE.test(text) ? segmentGraphemes(text) : [...text];
+  for (const ch of 文字列) {
     charCount++;
+    const code = ch.codePointAt(0) ?? 0;
+    if (isEmojiGrapheme(ch, code)) {
+      // mono を指定しても絵文字は JetBrains Mono ではなく emoji font へ fallback する。
+      advanceEmSum += fontFamily === "mono" ? MONO_EMOJI_ADVANCE_EM : EMOJI_ADVANCE_EM;
+      continue;
+    }
     if (fontFamily === "mono") {
-      const code = ch.codePointAt(0) ?? 0;
       advanceEmSum += isCJK(code) ? 1.08 : JETBRAINS_MONO_ADVANCE_EM;
       continue;
     }
-    const code = ch.codePointAt(0) ?? 0;
     if (isCJK(code)) {
       // CJK 実測 = Chrome + macOS system CJK font (Hiragino Sans / Yu Gothic) で
       // Inter fontSize 22 baseline に対し 1.08 em 前後で描画される (実測係数化)。
@@ -125,7 +213,7 @@ export function measureTextWidth(text: string, opts: MeasureOptions = {}): numbe
       advanceEmSum += 1.08;
       continue;
     }
-    const table = INTER_BOLD_ADVANCE_EM[ch];
+    const table = ch.length === 1 ? INTER_BOLD_ADVANCE_EM[ch] : undefined;
     advanceEmSum += table !== undefined ? table : defaultAdvanceEm(ch, code);
   }
   const w = advanceEmSum * fontSize + letterSpacing * charCount;

package/src/layout/viewbox.ts

@@ -1,5 +1,4 @@
 import type { BBox, CdlViewport, LaidEdge, LaidLane, LaidNode } from "../types";
-import { footerShapeDrops } from "./footer-shape";
 import { VIEW_PAD } from "./tokens";
 
 export function computeViewBox(
@@ -27,13 +26,6 @@ export function computeViewBox(
     maxX = Math.max(maxX, n.cx + n.w / 2);
     maxY = Math.max(maxY, n.cy + n.h / 2);
   }
-  // 下端の名札で下げた絵は箱より下に出る (`footerShapeDrops`)。 その分を図の下端に含めないと
-  // 絵と名前が viewBox の外に落ちて切れる = `<svg>` は既定で外側を描かない。
-  const footerDrops = footerShapeDrops(lanes, nodes);
-  for (const n of nodes) {
-    const dy = footerDrops.get(n.id);
-    if (dy !== undefined) maxY = Math.max(maxY, n.cy + n.h / 2 + dy);
-  }
   if (!Number.isFinite(minX)) minX = 0;
   if (!Number.isFinite(minY)) minY = 0;
   const x = minX - VIEW_PAD;

package/src/layout.ts

@@ -11,6 +11,7 @@ import {
   resolveOverlaps,
 } from "./layout/collisions";
 import { bowSharedStraightPaths, layoutEdges, repositionParallelLabels } from "./layout/edges";
+import { applyFooterShapeDrops } from "./layout/footer-shape";
 import {
   expandLaneGapsForEdgeLabels,
   expandLanesForNodes,
@@ -206,7 +207,13 @@ export function applyRowLevelNodeShifts<
  */
 export function layout(diag: CdlDiagram): LaidDiagram {
   const lanes = layoutLanes(diag);
-  const rawNodes = layoutNodes(diag, lanes);
+  // 下端の名札で絵が箱の上へ出る種別は、 ここで **座標ごと** 下げる (#478)。 以降の全ての
+  // 処理 (lane の伸長 / 衝突の解消 / 矢印の経路 / 外接矩形 / 図の下端) が動かした後の位置を
+  // 見るため、 描画と座標が食い違わない。
+  //
+  // 描画側で `<g transform>` を掛ける形だった頃は、 箱ごと下へ動いて見えるのに `cy` も
+  // `data-cdl-cy` も外接矩形も元のままで、 座標を読む側が実際の位置を知らなかった。
+  const rawNodes = applyFooterShapeDrops(lanes, layoutNodes(diag, lanes));
   const expandedLanes = expandLanesForNodes(lanes, rawNodes);
   // CAR-470 SSOT ... 隣接 lane 対を跨ぐ edge label の収納幅を engine 側で先手確保。
   // 拡張後、 後続 lane は cumulative shift で連鎖 shift される。 lane.width は