@cardenelabs/cdl 0.49.0 → 0.51.0

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

@@ -686,6 +686,13 @@ type CdlEdge = {
      * compileEr 経路で edge label に "(1:N)" 形式で併記、 他 preset では透過。
      */
     cardinality?: string;
+    /**
+     * 行き先の端に添える短い字 (#821)。 クラス図の多重度 (`1..*`) に使う。
+     *
+     * 線の中ほどの札 (`label` / `sub`) に入れると、どちらの端の数かが読めない。
+     * 置き場所は線の最後の区間から決まる (`layout/head-label.ts`)。
+     */
+    headLabel?: string;
     /** label の x 方向 fine offset (default 0)、 著者が細かく位置調整するための逃げ道 */
     labelOffsetX?: number;
     /** label の y 方向 fine offset (default 0、 + で下、 - で上) */

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

@@ -686,6 +686,13 @@ type CdlEdge = {
      * compileEr 経路で edge label に "(1:N)" 形式で併記、 他 preset では透過。
      */
     cardinality?: string;
+    /**
+     * 行き先の端に添える短い字 (#821)。 クラス図の多重度 (`1..*`) に使う。
+     *
+     * 線の中ほどの札 (`label` / `sub`) に入れると、どちらの端の数かが読めない。
+     * 置き場所は線の最後の区間から決まる (`layout/head-label.ts`)。
+     */
+    headLabel?: 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.49.0",
+  "version": "0.51.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

@@ -1452,6 +1452,8 @@ export type DiagramBuilder = {
       guard?: string;
       /** ER 関係 cardinality、 text-dsl v0.5 inline option (`cardinality: "1:N"`) を CdlEdge.cardinality へ透過 */
       cardinality?: string;
+      /** 行き先の端に添える字 (#821)。 クラス図の多重度に使う */
+      headLabel?: string;
       labelOffsetX?: number;
       labelOffsetY?: number;
       routing?: "default" | "back-detour";
@@ -1560,6 +1562,8 @@ export type DiagramBuilder = {
       tailHeadFill?: EdgeHeadFill;
       guard?: string;
       cardinality?: string;
+      /** 行き先の端に添える字 (#821)。 クラス図の多重度に使う */
+      headLabel?: string;
       labelOffsetX?: number;
       labelOffsetY?: number;
       routing?: "default" | "back-detour";
@@ -1776,6 +1780,7 @@ export function diagram(
         tailHeadFill: opts.tailHeadFill,
         guard: opts.guard,
         cardinality: opts.cardinality,
+        headLabel: opts.headLabel,
         labelOffsetX: opts.labelOffsetX,
         labelOffsetY: opts.labelOffsetY,
         routing: opts.routing,
@@ -1910,6 +1915,7 @@ export function diagram(
           tailHeadFill: d.tailHeadFill,
           guard: d.guard,
           cardinality: d.cardinality,
+          headLabel: d.headLabel,
           labelOffsetX: d.labelOffsetX,
           labelOffsetY: d.labelOffsetY,
           routing: d.routing,

package/src/kinds/actor.tsx

@@ -1,3 +1,4 @@
+import { 等幅の字 } from "../render/mono-text";
 import type { JSX } from "react";
 import type { LaidNode } from "../types";
 import { nodeAccent } from "./node-tone";
@@ -84,7 +85,7 @@ export function ActorNode({ node, active, value }: { node: LaidNode; active: boo
           fill="var(--cdl-text, #1a1f2a)"
           style={{ fontFamily: "'JetBrains Mono', monospace" }}
         >
-          {value}
+          {等幅の字(value, 42)}
         </text>
       )}
     </g>

package/src/kinds/event.tsx

@@ -1,3 +1,4 @@
+import { 等幅の字 } from "../render/mono-text";
 import type { JSX } from "react";
 import type { LaidNode } from "../types";
 import { nodeAccent } from "./node-tone";
@@ -63,7 +64,7 @@ export function EventNode({
           textAnchor={名前.anchor}
           style={{ fontFamily: "'JetBrains Mono', monospace" }}
         >
-          {node.title}
+          {等幅の字(node.title, 名前.size)}
         </text>
         {node.subtitle && (
           <text
@@ -73,7 +74,7 @@ export function EventNode({
             fill="var(--cdl-text-dim, #5a6270)"
             style={{ fontFamily: "'JetBrains Mono', monospace" }}
           >
-            {node.subtitle}
+            {等幅の字(node.subtitle, 21)}
           </text>
         )}
       </g>

package/src/kinds/function.tsx

@@ -1,3 +1,4 @@
+import { 等幅の字 } from "../render/mono-text";
 import type { JSX } from "react";
 import type { LaidNode } from "../types";
 import { nodeAccent } from "./node-tone";
@@ -53,7 +54,7 @@ export function FunctionNode({ node, active }: { node: LaidNode; active: boolean
         textAnchor={名前.anchor}
         style={{ fontFamily: "'JetBrains Mono', monospace" }}
       >
-        {node.title}
+        {等幅の字(node.title, 名前.size)}
       </text>
       {node.subtitle && (
         <text x={26} y={126 - ずらし} fontSize={20} fill="var(--cdl-text-dim, #5a6270)">

package/src/kinds/generic.tsx

@@ -1,3 +1,4 @@
+import { 等幅の字 } from "../render/mono-text";
 import type { JSX } from "react";
 import type { LaidNode, NodeKind } from "../types";
 import { toneColor } from "./node-tone";
@@ -423,11 +424,11 @@ export function GenericNode({
         </text>
       )}
       <text data-cdl-role="node-label" x={textX} y={titleY} fontSize={20} fontWeight={700} fill={paint.onSolid ? "var(--cdl-node-fill, #ffffff)" : "var(--cdl-text, #1a1f2a)"} textAnchor={textAnchor} dominantBaseline={dominantBaseline} style={node.kind === "function" || node.kind === "api" ? { fontFamily: "'JetBrains Mono', monospace" } : undefined}>
-        {node.title}
+        {node.kind === "function" || node.kind === "api" ? 等幅の字(node.title, 20) : node.title}
       </text>
       {node.subtitle && (
         <text x={textX} y={subtitleY} fontSize={17} fill={paint.onSolid ? "var(--cdl-node-fill, #ffffff)" : "var(--cdl-text-dim, #5a6270)"} textAnchor={textAnchor} dominantBaseline={dominantBaseline} style={{ fontFamily: "'JetBrains Mono', monospace" }}>
-          {node.subtitle}
+          {等幅の字(node.subtitle, 17)}
         </text>
       )}
       {resolvedValue && (
@@ -440,7 +441,7 @@ export function GenericNode({
           fill="var(--cdl-text, #1a1f2a)"
           style={{ fontFamily: "'JetBrains Mono', monospace" }}
         >
-          {resolvedValue}
+          {等幅の字(resolvedValue, 32)}
         </text>
       )}
       {node.rows && node.rows.length > 0 && (() => {
@@ -473,7 +474,7 @@ export function GenericNode({
                   fill="var(--cdl-text, #1a1f2a)"
                   style={{ fontFamily: "'JetBrains Mono', monospace" }}
                 >
-                  {s.right}
+                  {等幅の字(s.right, 21)}
                 </text>
               </g>
             ))}

package/src/kinds/sequence-board.tsx

@@ -1,3 +1,4 @@
+import { 等幅の字 } from "../render/mono-text";
 import type { JSX } from "react";
 import type { LaidNode } from "../types";
 import { interpolate } from "../render/utils";
@@ -144,7 +145,7 @@ export function SequenceBoardNode({
             fill="var(--cdl-text, #1a1f2a)"
             style={{ fontFamily: "'JetBrains Mono', monospace" }}
           >
-            {a.name}
+            {等幅の字(a.name, SEQ_NAME)}
           </text>
           {a.subtitle && (
             <text

package/src/kinds/storage.tsx

@@ -1,3 +1,4 @@
+import { 等幅の字 } from "../render/mono-text";
 import type { JSX } from "react";
 import type { LaidNode, RowMark } from "../types";
 import { nodeAccent } from "./node-tone";
@@ -233,7 +234,7 @@ export function StorageNode({
         textAnchor={名前.anchor}
         style={{ fontFamily: "'JetBrains Mono', monospace" }}
       >
-        {node.title}
+        {等幅の字(node.title, 名前.size)}
       </text>
       {/*
         表の区切り線 2 本 (`#419`)。
@@ -323,7 +324,7 @@ export function StorageNode({
               fill="var(--cdl-text, #1a1f2a)"
               style={{ fontFamily: "'JetBrains Mono', monospace" }}
             >
-              {s.left}
+              {等幅の字(s.left, 26)}
             </text>
             {/*
               型は **読み手が探すものではない**ので、右端で揃えて薄く引く。 名前の右に続けて
@@ -347,7 +348,7 @@ export function StorageNode({
               }
               style={{ fontFamily: "'JetBrains Mono', monospace" }}
             >
-              {s.right}
+              {等幅の字(s.right, 印で分ける ? ROW_TYPE_FONT : 26)}
             </text>
           </g>
         );

package/src/layout/head-label.ts

@@ -0,0 +1,136 @@
+/**
+ * 行き先の端に添える字 (`headLabel`) の置き場所 (#821)。
+ *
+ * 描く側 (`render/edges.tsx`) と検査が同じ値を使うため、計算をここに 1 つだけ置く。
+ *
+ * 線の最後の区間の向きで決める。 端から `端の字を戻す距離` だけ線を戻った点を基準に、
+ * 線の脇へ置く。 字は端に近い側の縁を基準点に揃える = 字の長さが変わっても、端から字までの
+ * 隙間は変わらない。
+ *
+ * **線の札の反対側に置く**。 札と同じ側に置くと、札の語と多重度が続けて読まれる (「持つ」 の
+ * 隣に `1..*`、 英字の頃は「HAS1」)。 実測で、札と同じ側 (横向きなら上、縦向きなら右) に
+ * 置く形は見本帳のクラス図で 1 本が札と重なり、 もう 1 本が札と 2 world まで寄った。
+ * 札を持たない線は、横向きなら下、縦向きなら左に置く (engine が札を置く既定の側の反対)。
+ *
+ * 斜めの線と曲線は、向きの大きいほうの軸で横向き / 縦向きに振り分ける。 曲線の向きは
+ * 終点の接線 (最後の制御点から終点へ) を使う。 弦の向きを使うと、大きく膨らむ曲線で
+ * 線が端へ入ってくる向きと別の向きが出る。
+ */
+import { EDGE_LABEL_TEXT } from "../label-text";
+import { extractPathSegments } from "./collisions";
+import { hasRenderedLabel } from "./spec";
+import { measureTextWidth } from "./text-width";
+
+/**
+ * 端から字までの、線に沿った距離 (world)。
+ *
+ * 端の印の長さの最大 (光っている時の 14、 `render/stage.tsx` の marker の大きさ) に隙間 8 を足す。
+ * 印を持たない端 (菱が出どころ側にある「持つ」 「抱える」) でも同じ距離にする = 端ごとに
+ * 距離が変わると、図の中で多重度の位置が揃わない。
+ */
+export const 端の字を戻す距離 = 22;
+
+/** 線と字の間の隙間 (world) */
+export const 端の字と線の隙間 = 8;
+
+/** 端の字の大きさ。 札の下の行と同じ等幅の字 = 多重度を札に入れていた頃と同じ見え方 */
+export const 端の字の大きさ = EDGE_LABEL_TEXT.sub.fontSize;
+
+/** 字の箱の高さ。 字の大きさに上下の余白を足す */
+const 箱の高さ = Math.round(端の字の大きさ * 1.2);
+
+/** 字の大きさに対する baseline の深さ。 等幅の字の ascent が字の大きさの 8 割ほど */
+const BASELINE_RATIO = 0.8;
+
+export interface 端の字の置き場所 {
+  /** `text` の x。 どちらの縁かは `anchor` が決める */
+  x: number;
+  /** `text` の baseline の y */
+  y: number;
+  anchor: "start" | "end";
+  /** 字が占める箱 (world)。 重なりの検査に使う */
+  box: { x: number; y: number; w: number; h: number };
+}
+
+/**
+ * 線の終点と、線が終点へ入ってくる向き (単位ベクトル)。
+ *
+ * 最後の区間の長さが 0 の時は 1 つ前の区間へ戻る。 向きが取れない (区間が無い / 全て長さ 0)
+ * 時は `null`。
+ */
+function 最後の向き(d: string): { end: { x: number; y: number }; 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 };
+    }
+  }
+  return null;
+}
+
+/** `headLabel` を描く位置。 字が空か、線の向きが取れない時は `null` (描かない) */
+export function 端の字を置く(edge: {
+  d: string;
+  headLabel?: string;
+  label?: string;
+  sub?: string;
+  labelX?: number;
+  labelY?: number;
+}): 端の字の置き場所 | null {
+  const text = edge.headLabel?.trim();
+  if (!text) return null;
+  const 向き = 最後の向き(edge.d);
+  if (!向き) return null;
+  const { end, ux, uy } = 向き;
+  const bx = end.x - ux * 端の字を戻す距離;
+  const by = end.y - uy * 端の字を戻す距離;
+  const w = measureTextWidth(text, {
+    fontSize: 端の字の大きさ,
+    fontWeight: EDGE_LABEL_TEXT.sub.fontWeight,
+    fontFamily: "mono",
+  });
+  const h = 箱の高さ;
+  // 札の中心。 札を描かない線と、位置がまだ無い線は `null`
+  const 札 =
+    hasRenderedLabel(edge) && edge.labelX !== undefined && edge.labelY !== undefined
+      ? { x: edge.labelX, y: edge.labelY }
+      : null;
+
+  let anchor: "start" | "end";
+  let box: { x: number; y: number; w: number; h: number };
+  if (Math.abs(ux) >= Math.abs(uy)) {
+    // 横向き。 右へ進む線は字が端の手前 (左) に伸びるので右の縁を揃える
+    const 右へ進む = ux > 0;
+    const 上に置く = 札 !== null && 札.y > by;
+    anchor = 右へ進む ? "end" : "start";
+    box = {
+      x: 右へ進む ? bx - w : bx,
+      y: 上に置く ? by - 端の字と線の隙間 - h : by + 端の字と線の隙間,
+      w,
+      h,
+    };
+  } else {
+    // 縦向き。 下へ進む線は字が端の手前 (上) に来るので下の辺を揃える
+    const 下へ進む = uy > 0;
+    const 右に置く = 札 !== null && 札.x < bx;
+    anchor = 右に置く ? "start" : "end";
+    box = {
+      x: 右に置く ? bx + 端の字と線の隙間 : bx - 端の字と線の隙間 - w,
+      y: 下へ進む ? by - h : by,
+      w,
+      h,
+    };
+  }
+  const x = anchor === "start" ? box.x : box.x + box.w;
+  const y = box.y + (h - 端の字の大きさ) / 2 + 端の字の大きさ * BASELINE_RATIO;
+  return { x, y, anchor, box };
+}

package/src/presets.ts

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

package/src/render/edges.tsx

@@ -1,5 +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 { EdgeRole, LaidEdge, Tone } from "../types";
 import { edgeHeadMarkerName } from "./edge-head";
 import { toneColor } from "./tone";
@@ -387,9 +389,46 @@ export function CdlEdgeLabelView({
           opacity={labelTextOpacity("sub")}
           style={{ fontFamily: fontFamilyAttr("sub") }}
         >
-          {edge.sub}
+          {等幅の字(edge.sub, EDGE_LABEL_TEXT.sub.fontSize)}
         </text>
       )}
     </g>
   );
 }
+
+/**
+ * 行き先の端に添える字 (#821)。 札と同じく最前面の pass で描く。
+ *
+ * 下地の四角は敷かず、字の周りに下地色の縁取りを付ける (`paint-order: stroke`)。 字は線の脇、
+ * 箱の角の近くに置くので、四角い下地だと箱の角や線に被って小さな箱に見える。
+ */
+export function CdlEdgeHeadLabelView({
+  edge,
+  active,
+}: {
+  edge: LaidEdge;
+  active: boolean;
+}): JSX.Element | null {
+  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}
+      x={置き場所.x}
+      y={置き場所.y}
+      fontSize={端の字の大きさ}
+      fontWeight={EDGE_LABEL_TEXT.sub.fontWeight}
+      textAnchor={置き場所.anchor}
+      fill={active ? color : "var(--cdl-text-dim, #5a6270)"}
+      stroke="var(--cdl-label-bg, #ffffff)"
+      strokeWidth={4}
+      strokeLinejoin="round"
+      paintOrder="stroke"
+      style={{ fontFamily: fontFamilyAttr("sub") }}
+    >
+      {等幅の字(edge.headLabel, 端の字の大きさ)}
+    </text>
+  );
+}

package/src/render/mono-text.ts

@@ -0,0 +1,44 @@
+/**
+ * 等幅の書体で描く文字の、 `[` と `]` の間にだけ隙間を足す (#817)。
+ *
+ * `JetBrains Mono` の `[` と `]` は横棒が字の枠いっぱいまで伸びている。 図を画面の幅に合わせて
+ * 縮めると (画面上 14px 前後)、 隣り合った 2 本の横棒がつながって `[]` が四角 1 つに見える
+ * (`string[]` が `string□` と読める)。 合字ではない = 合字を止めても見え方は変わらない。
+ *
+ * 隙間は `<tspan dx>` で足す。 文字は増やさないので `textContent` は元のまま (`string[]`) で、
+ * 文字を読む側 (検索 / 読み上げ / 写し取り) は変わらない。 `dx` は文字の塊を新しく始めないので、
+ * 右寄せ (`text-anchor: end`) も隙間を含めた全体に効く。
+ *
+ * `][` は横棒が外を向いていてつながらないので、 `[]` の組ごとに足せば足りる。
+ *
+ * **engine が等幅の書体で描く文字は全てここを通す**。 通していない箇所はソースの走査で落とす
+ * (`mono-bracket-gap.test.tsx`)。
+ */
+import { createElement, type ReactNode } from "react";
+
+/**
+ * 隙間の幅 (字の大きさに対する比)。
+ *
+ * 等倍で撮り比べて、 全ての字の間を 0.06 空けると 2 本の横棒が分かれて読めた。 図はそれより小さく
+ * 縮めて描かれることもあるので、 少し余裕を持たせる。 1 組あたり字幅の 1 割に満たず、 字の送り幅の
+ * 計算 (等幅を前提に文字数から桁の位置を決める) には入れない。
+ */
+export const 角括弧の隙間 = 0.08;
+
+/**
+ * 文字列の `[]` を `[` と、 前に隙間を持つ `]` に分けて返す。 `[]` を含まない文字と、 文字列でない
+ * 値 (数値 / 要素) はそのまま返す。
+ *
+ * @param text 描く文字
+ * @param fontSize その文字の大きさ (隙間はこれに比例する)
+ */
+export function 等幅の字(text: ReactNode, fontSize: number): ReactNode {
+  if (typeof text !== "string" || !text.includes("[]")) return text;
+  const 塊 = text.split("[]");
+  const out: ReactNode[] = [];
+  塊.forEach((s, i) => {
+    if (i > 0) out.push("[", createElement("tspan", { key: i, dx: fontSize * 角括弧の隙間 }, "]"));
+    if (s !== "") out.push(s);
+  });
+  return out;
+}

package/src/render/stage.tsx

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

package/src/types.ts

@@ -758,6 +758,13 @@ export type CdlEdge = {
    * compileEr 経路で edge label に "(1:N)" 形式で併記、 他 preset では透過。
    */
   cardinality?: string;
+  /**
+   * 行き先の端に添える短い字 (#821)。 クラス図の多重度 (`1..*`) に使う。
+   *
+   * 線の中ほどの札 (`label` / `sub`) に入れると、どちらの端の数かが読めない。
+   * 置き場所は線の最後の区間から決まる (`layout/head-label.ts`)。
+   */
+  headLabel?: string;
   /** label の x 方向 fine offset (default 0)、 著者が細かく位置調整するための逃げ道 */
   labelOffsetX?: number;
   /** label の y 方向 fine offset (default 0、 + で下、 - で上) */