@cardenelabs/cdl 0.51.0 → 0.53.0

package/dist/{render-BoBEyCu-.d.cts → render-C0PJ2weJ.d.cts}

@@ -693,6 +693,12 @@ type CdlEdge = {
      * 置き場所は線の最後の区間から決まる (`layout/head-label.ts`)。
      */
     headLabel?: string;
+    /**
+     * 出どころの端に添える短い字 (#825)。 `headLabel` と対。 クラス図の出どころ側の多重度に使う。
+     *
+     * UML は関係の両端に多重度を書く。 置き場所の計算は `headLabel` と同じ (`layout/head-label.ts`)。
+     */
+    tailLabel?: string;
     /** label の x 方向 fine offset (default 0)、 著者が細かく位置調整するための逃げ道 */
     labelOffsetX?: number;
     /** label の y 方向 fine offset (default 0、 + で下、 - で上) */

package/dist/{render-BoBEyCu-.d.ts → render-C0PJ2weJ.d.ts}

@@ -693,6 +693,12 @@ type CdlEdge = {
      * 置き場所は線の最後の区間から決まる (`layout/head-label.ts`)。
      */
     headLabel?: string;
+    /**
+     * 出どころの端に添える短い字 (#825)。 `headLabel` と対。 クラス図の出どころ側の多重度に使う。
+     *
+     * UML は関係の両端に多重度を書く。 置き場所の計算は `headLabel` と同じ (`layout/head-label.ts`)。
+     */
+    tailLabel?: string;
     /** label の x 方向 fine offset (default 0)、 著者が細かく位置調整するための逃げ道 */
     labelOffsetX?: number;
     /** label の y 方向 fine offset (default 0、 + で下、 - で上) */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.51.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/builder.ts

@@ -1454,6 +1454,8 @@ export type DiagramBuilder = {
       cardinality?: string;
       /** 行き先の端に添える字 (#821)。 クラス図の多重度に使う */
       headLabel?: string;
+      /** 出どころの端に添える字 (#825)。 クラス図の出どころ側の多重度に使う */
+      tailLabel?: string;
       labelOffsetX?: number;
       labelOffsetY?: number;
       routing?: "default" | "back-detour";
@@ -1564,6 +1566,8 @@ export type DiagramBuilder = {
       cardinality?: string;
       /** 行き先の端に添える字 (#821)。 クラス図の多重度に使う */
       headLabel?: string;
+      /** 出どころの端に添える字 (#825)。 クラス図の出どころ側の多重度に使う */
+      tailLabel?: string;
       labelOffsetX?: number;
       labelOffsetY?: number;
       routing?: "default" | "back-detour";
@@ -1781,6 +1785,7 @@ export function diagram(
         guard: opts.guard,
         cardinality: opts.cardinality,
         headLabel: opts.headLabel,
+        tailLabel: opts.tailLabel,
         labelOffsetX: opts.labelOffsetX,
         labelOffsetY: opts.labelOffsetY,
         routing: opts.routing,
@@ -1916,6 +1921,7 @@ export function diagram(
           guard: d.guard,
           cardinality: d.cardinality,
           headLabel: d.headLabel,
+          tailLabel: d.tailLabel,
           labelOffsetX: d.labelOffsetX,
           labelOffsetY: d.labelOffsetY,
           routing: d.routing,

package/src/layout/head-label.ts

@@ -1,11 +1,11 @@
 /**
- * 行き先の端に添える字 (`headLabel`) の置き場所 (#821)。
+ * 線の端に添える字 (`headLabel` / `tailLabel`) の置き場所 (#821 / #825)。
  *
  * 描く側 (`render/edges.tsx`) と検査が同じ値を使うため、計算をここに 1 つだけ置く。
+ * 行き先の端 (`head`) と出どころの端 (`tail`) は、端での線の向きの取り方だけが違う。
  *
- * 線の最後の区間の向きで決める。 端から `端の字を戻す距離` だけ線を戻った点を基準に、
- * 線の脇へ置く。 字は端に近い側の縁を基準点に揃える = 字の長さが変わっても、端から字までの
- * 隙間は変わらない。
+ * 端での線の向きで決める。 端から `端の字を戻す距離` だけ線を戻った点を基準に、線の脇へ置く。
+ * 字は端に近い側の縁を基準点に揃える = 字の長さが変わっても、端から字までの隙間は変わらない。
  *
  * **線の札の反対側に置く**。 札と同じ側に置くと、札の語と多重度が続けて読まれる (「持つ」 の
  * 隣に `1..*`、 英字の頃は「HAS1」)。 実測で、札と同じ側 (横向きなら上、縦向きなら右) に
@@ -13,8 +13,8 @@
  * 札を持たない線は、横向きなら下、縦向きなら左に置く (engine が札を置く既定の側の反対)。
  *
  * 斜めの線と曲線は、向きの大きいほうの軸で横向き / 縦向きに振り分ける。 曲線の向きは
- * 終点の接線 (最後の制御点から終点へ) を使う。 弦の向きを使うと、大きく膨らむ曲線で
- * 線が端へ入ってくる向きと別の向きが出る。
+ * 端の接線 (行き先の端なら最後の制御点から終点へ、出どころの端なら最初の制御点から始点へ) を
+ * 使う。 弦の向きを使うと、大きく膨らむ曲線で線が端へ入ってくる向きと別の向きが出る。
  */
 import { EDGE_LABEL_TEXT } from "../label-text";
 import { extractPathSegments } from "./collisions";
@@ -25,7 +25,7 @@ import { measureTextWidth } from "./text-width";
  * 端から字までの、線に沿った距離 (world)。
  *
  * 端の印の長さの最大 (光っている時の 14、 `render/stage.tsx` の marker の大きさ) に隙間 8 を足す。
- * 印を持たない端 (菱が出どころ側にある「持つ」 「抱える」) でも同じ距離にする = 端ごとに
+ * 印を持たない端 (菱が出どころ側にある「持つ」 「抱える」 の行き先) でも同じ距離にする = 端ごとに
  * 距離が変わると、図の中で多重度の位置が揃わない。
  */
 export const 端の字を戻す距離 = 22;
@@ -42,6 +42,33 @@ 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";
+
 export interface 端の字の置き場所 {
   /** `text` の x。 どちらの縁かは `anchor` が決める */
   x: number;
@@ -52,43 +79,60 @@ export interface 端の字の置き場所 {
   box: { x: number; y: number; w: number; h: number };
 }
 
+type 点 = { x: number; y: number };
+
+/** 端の点と、線がその端へ入ってくる向き (単位ベクトル)。 取れない時は `null` */
+function 向きを取る(end: 点, 候補: ReadonlyArray<点 | undefined>): { end: 点; ux: number; uy: number } | null {
+  for (const p of 候補) {
+    if (!p) continue;
+    const dx = end.x - p.x;
+    const dy = end.y - p.y;
+    const len = Math.hypot(dx, dy);
+    if (len > 1e-6) return { end, ux: dx / len, uy: dy / len };
+  }
+  return null;
+}
+
 /**
- * 線の終点と、線が終点へ入ってくる向き (単位ベクトル)。
+ * 端の点と、線がその端へ入ってくる向き。
  *
- * 最後の区間の長さが 0 の時は 1 つ前の区間へ戻る。 向きが取れない (区間が無い / 全て長さ 0)
- * 時は `null`。
+ * 行き先の端は最後の区間から、出どころの端は最初の区間を逆にたどって取る。 端の区間の長さが
+ * 0 の時は隣の区間へ進む。 向きが取れない (区間が無い / 全て長さ 0) 時は `null`。
  */
-function 最後の向き(d: string): { end: { x: number; y: number }; ux: number; uy: number } | null {
+function 端での向き(d: string, 端: 線の端): { end: 点; ux: number; uy: number } | null {
   const segs = extractPathSegments(d);
-  const last = segs[segs.length - 1];
-  if (!last) return null;
-  const end = { x: last.x2, y: last.y2 };
-  for (let i = segs.length - 1; i >= 0; i--) {
-    const s = segs[i]!;
-    const 制御点 = s.cmd === "Q" ? s.ctrl?.[0] : s.cmd === "C" ? s.ctrl?.[1] : undefined;
-    for (const p of [制御点, { x: s.x1, y: s.y1 }]) {
-      if (!p) continue;
-      const dx = end.x - p.x;
-      const dy = end.y - p.y;
-      const len = Math.hypot(dx, dy);
-      if (len > 1e-6) return { end, ux: dx / len, uy: dy / len };
-    }
+  if (segs.length === 0) return null;
+  if (端 === "head") {
+    const last = segs[segs.length - 1]!;
+    const end = { x: last.x2, y: last.y2 };
+    const 候補 = segs
+      .slice()
+      .reverse()
+      .flatMap((s) => [s.cmd === "Q" ? s.ctrl?.[0] : s.cmd === "C" ? s.ctrl?.[1] : undefined, { x: s.x1, y: s.y1 }]);
+    return 向きを取る(end, 候補);
   }
-  return null;
+  const first = segs[0]!;
+  const end = { x: first.x1, y: first.y1 };
+  const 候補 = segs.flatMap((s) => [...(s.ctrl ?? []), { x: s.x2, y: s.y2 }]);
+  return 向きを取る(end, 候補);
 }
 
-/** `headLabel` を描く位置。 字が空か、線の向きが取れない時は `null` (描かない) */
-export function 端の字を置く(edge: {
-  d: string;
-  headLabel?: string;
-  label?: string;
-  sub?: string;
-  labelX?: number;
-  labelY?: number;
-}): 端の字の置き場所 | null {
-  const text = edge.headLabel?.trim();
+/** 端の字を描く位置。 字が空か、線の向きが取れない時は `null` (描かない) */
+export function 端の字を置く(
+  edge: {
+    d: string;
+    headLabel?: string;
+    tailLabel?: string;
+    label?: string;
+    sub?: string;
+    labelX?: number;
+    labelY?: number;
+  },
+  端: 線の端 = "head",
+): 端の字の置き場所 | null {
+  const text = (端 === "head" ? edge.headLabel : edge.tailLabel)?.trim();
   if (!text) return null;
-  const 向き = 最後の向き(edge.d);
+  const 向き = 端での向き(edge.d, 端);
   if (!向き) return null;
   const { end, ux, uy } = 向き;
   const bx = end.x - ux * 端の字を戻す距離;

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));
   }

package/src/presets.ts

@@ -1432,6 +1432,8 @@ export type UmlRelation = {
   label?: string;
   /** 多重度 (例 "1..*" / "0..1")。 行き先 (`to`) の端に添える (#821) */
   cardinality?: string;
+  /** 出どころ (`from`) 側の多重度 (例 "1")。 出どころの端に添える (#825) */
+  tailCardinality?: string;
   tone?: Tone;
   /**
    * 矢印の先の形 (cdl#574)。 書かなければ種類から決まる (`CLASS_RELATION_LOOK`)。
@@ -1576,6 +1578,7 @@ export function classDiagram(preset: ClassDiagramPreset): ClassDiagramBuilder {
           // 多重度は行き先の端に添える (#821)。 札の下の行に入れると語と続けて読まれ
           // (英字の頃は「HAS 1..*」 が「HAS1」)、 どちらの端の数かも読めない
           ...(r.cardinality ? { headLabel: r.cardinality } : {}),
+          ...(r.tailCardinality ? { tailLabel: r.tailCardinality } : {}),
           tone: r.tone ?? 図の既定 ?? CLASS_RELATION_TONE[r.type],
           // 関係の種類から線と端の形を決める (cdl#574 / #578)。 書いた値が勝つ
           style: r.style ?? 見た目.style,

package/src/render/edges.tsx

@@ -1,7 +1,7 @@
 import { 等幅の字 } from "./mono-text";
 import type { JSX } from "react";
 import { computeLabelBBoxWorld, hasRenderedLabel, LABEL_PILL_PAD_X } from "../layout/spec";
-import { 端の字の大きさ, 端の字を置く } from "../layout/head-label";
+import { 端の字の大きさ, 端の字を置く, type 線の端 } from "../layout/head-label";
 import type { EdgeRole, LaidEdge, Tone } from "../types";
 import { edgeHeadMarkerName } from "./edge-head";
 import { toneColor } from "./tone";
@@ -397,25 +397,28 @@ export function CdlEdgeLabelView({
 }
 
 /**
- * 行き先の端に添える字 (#821)。 札と同じく最前面の pass で描く。
+ * 線の端に添える字 (#821 / #825)。 札と同じく最前面の pass で描く。 `端` で行き先か出どころかを選ぶ。
  *
  * 下地の四角は敷かず、字の周りに下地色の縁取りを付ける (`paint-order: stroke`)。 字は線の脇、
  * 箱の角の近くに置くので、四角い下地だと箱の角や線に被って小さな箱に見える。
  */
-export function CdlEdgeHeadLabelView({
+export function CdlEdgeEndLabelView({
   edge,
   active,
+  端,
 }: {
   edge: LaidEdge;
   active: boolean;
+  端: 線の端;
 }): JSX.Element | null {
-  const 置き場所 = 端の字を置く(edge);
+  const 置き場所 = 端の字を置く(edge, 端);
   if (!置き場所) return null;
   const color = edgeColor(edge);
   return (
     <text
       data-cdl-role="edge-end-label"
       data-cdl-edge-end-label-for={edge.id}
+      data-cdl-edge-end={端}
       x={置き場所.x}
       y={置き場所.y}
       fontSize={端の字の大きさ}
@@ -428,7 +431,7 @@ export function CdlEdgeHeadLabelView({
       paintOrder="stroke"
       style={{ fontFamily: fontFamilyAttr("sub") }}
     >
-      {等幅の字(edge.headLabel, 端の字の大きさ)}
+      {等幅の字(端 === "head" ? edge.headLabel : edge.tailLabel, 端の字の大きさ)}
     </text>
   );
 }

package/src/render/stage.tsx

@@ -20,7 +20,7 @@ import {
   edgeHeadMarkerName,
   edgeHeadPaint,
 } from "./edge-head";
-import { CdlEdgeView, CdlEdgeGlowView, CdlEdgeHeadLabelView, CdlEdgeLabelView } from "./edges";
+import { CdlEdgeView, CdlEdgeGlowView, CdlEdgeEndLabelView, CdlEdgeLabelView } from "./edges";
 import { CdlNodeView } from "./nodes";
 import { resolveChartData } from "./payload-binding";
 import { relatedFocusSet } from "./relation-focus";
@@ -453,16 +453,19 @@ export function CdlStage({
           />
         ))}
 
-        {/* 行き先の端に添える字 (#821)。 札と同じ最前面の pass */}
+        {/* 線の端に添える字 (#821 / #825)。 札と同じ最前面の pass */}
         {laid.edges
-          .filter((edge) => edge.headLabel && 矢印の出番.出るか(edge.id))
-          .map((edge) => (
-            <CdlEdgeHeadLabelView
-              key={`head-label-${edge.id}`}
-              edge={edge}
-              active={activeSet.has(edge.id)}
-            />
-          ))}
+          .filter((edge) => (edge.headLabel || edge.tailLabel) && 矢印の出番.出るか(edge.id))
+          .flatMap((edge) =>
+            (["head", "tail"] as const).map((端) => (
+              <CdlEdgeEndLabelView
+                key={`${端}-label-${edge.id}`}
+                edge={edge}
+                active={activeSet.has(edge.id)}
+                端={端}
+              />
+            )),
+          )}
 
         {/* debug overlay = engine が把握している bbox + collision を半透明で重ね描き */}
         {debug && (

package/src/types.ts

@@ -765,6 +765,12 @@ export type CdlEdge = {
    * 置き場所は線の最後の区間から決まる (`layout/head-label.ts`)。
    */
   headLabel?: string;
+  /**
+   * 出どころの端に添える短い字 (#825)。 `headLabel` と対。 クラス図の出どころ側の多重度に使う。
+   *
+   * UML は関係の両端に多重度を書く。 置き場所の計算は `headLabel` と同じ (`layout/head-label.ts`)。
+   */
+  tailLabel?: string;
   /** label の x 方向 fine offset (default 0)、 著者が細かく位置調整するための逃げ道 */
   labelOffsetX?: number;
   /** label の y 方向 fine offset (default 0、 + で下、 - で上) */