@cardenelabs/cdl 0.50.0 → 0.52.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeRole, f as EdgeHead, g as EdgeHeadFill, h as CdlState, i as CdlEventTarget, j as Computed, k as CdlDerivedValue, l as CdlScrollTrigger, L as LaidDiagram, m as CdlDiagramViewProps, n as LaidEdge, o as LaidNode, p as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-C53-PeJZ.cjs';
-export { q as CdlDiagramView, r as CdlEventBinding, s as CdlEventKind, t as CdlFormula, u as CdlPhase, v as ChartPieForm, w as ChartSlopeForm, x as EDGE_HEADS, y as EDGE_HEAD_DEFAULT, z as EDGE_HEAD_FILLS, A as EDGE_HEAD_FILL_DEFAULT, D as EDGE_REVEALS, F as EDGE_REVEAL_DEFAULT, G as EDGE_STYLES, H as EdgeReveal, I as InteractiveHandlerMap, K as InteractiveSignalsAccessor, M as LaidLane, O as NODE_KINDS, P as RELATION_FOCUSES, U as RELATION_FOCUS_DEFAULT, V as RelationFocus, W as ScrollProgressHandle, X as TONES, Y as computeEventBindingKey, Z as computeFormulaKey, _ as computeInputSignalKey, $ as computeScrollTriggerKey, a0 as computed, a1 as createInteractiveSignalsAccessor, a2 as createScrollProgressHandle, a3 as createScrollProgressSignals, a4 as hasInteractivePrimitives, a5 as sequenceBoardMetrics, a6 as sequenceStepId, a7 as signal } from './render-C53-PeJZ.cjs';
+import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeRole, f as EdgeHead, g as EdgeHeadFill, h as CdlState, i as CdlEventTarget, j as Computed, k as CdlDerivedValue, l as CdlScrollTrigger, L as LaidDiagram, m as CdlDiagramViewProps, n as LaidEdge, o as LaidNode, p as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-C0PJ2weJ.cjs';
+export { q as CdlDiagramView, r as CdlEventBinding, s as CdlEventKind, t as CdlFormula, u as CdlPhase, v as ChartPieForm, w as ChartSlopeForm, x as EDGE_HEADS, y as EDGE_HEAD_DEFAULT, z as EDGE_HEAD_FILLS, A as EDGE_HEAD_FILL_DEFAULT, D as EDGE_REVEALS, F as EDGE_REVEAL_DEFAULT, G as EDGE_STYLES, H as EdgeReveal, I as InteractiveHandlerMap, K as InteractiveSignalsAccessor, M as LaidLane, O as NODE_KINDS, P as RELATION_FOCUSES, U as RELATION_FOCUS_DEFAULT, V as RelationFocus, W as ScrollProgressHandle, X as TONES, Y as computeEventBindingKey, Z as computeFormulaKey, _ as computeInputSignalKey, $ as computeScrollTriggerKey, a0 as computed, a1 as createInteractiveSignalsAccessor, a2 as createScrollProgressHandle, a3 as createScrollProgressSignals, a4 as hasInteractivePrimitives, a5 as sequenceBoardMetrics, a6 as sequenceStepId, a7 as signal } from './render-C0PJ2weJ.cjs';
 import { JSX } from 'react';
 
 declare function effect(fn: () => void | (() => void)): () => void;
@@ -1046,6 +1046,10 @@ type DiagramBuilder = {
         guard?: string;
         /** ER 関係 cardinality、 text-dsl v0.5 inline option (`cardinality: "1:N"`) を CdlEdge.cardinality へ透過 */
         cardinality?: string;
+        /** 行き先の端に添える字 (#821)。 クラス図の多重度に使う */
+        headLabel?: string;
+        /** 出どころの端に添える字 (#825)。 クラス図の出どころ側の多重度に使う */
+        tailLabel?: string;
         labelOffsetX?: number;
         labelOffsetY?: number;
         routing?: "default" | "back-detour";
@@ -1136,6 +1140,10 @@ type DiagramBuilder = {
         tailHeadFill?: EdgeHeadFill;
         guard?: string;
         cardinality?: string;
+        /** 行き先の端に添える字 (#821)。 クラス図の多重度に使う */
+        headLabel?: string;
+        /** 出どころの端に添える字 (#825)。 クラス図の出どころ側の多重度に使う */
+        tailLabel?: string;
         labelOffsetX?: number;
         labelOffsetY?: number;
         routing?: "default" | "back-detour";
@@ -3406,8 +3414,10 @@ type UmlRelation = {
     type: ClassRelationType;
     /** 関係 label (default は type 名) */
     label?: string;
-    /** 多重度 (例 "1..*" / "0..1") */
+    /** 多重度 (例 "1..*" / "0..1")。 行き先 (`to`) の端に添える (#821) */
     cardinality?: string;
+    /** 出どころ (`from`) 側の多重度 (例 "1")。 出どころの端に添える (#825) */
+    tailCardinality?: string;
     tone?: Tone;
     /**
      * 矢印の先の形 (cdl#574)。 書かなければ種類から決まる (`CLASS_RELATION_LOOK`)。

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeRole, f as EdgeHead, g as EdgeHeadFill, h as CdlState, i as CdlEventTarget, j as Computed, k as CdlDerivedValue, l as CdlScrollTrigger, L as LaidDiagram, m as CdlDiagramViewProps, n as LaidEdge, o as LaidNode, p as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-C53-PeJZ.js';
-export { q as CdlDiagramView, r as CdlEventBinding, s as CdlEventKind, t as CdlFormula, u as CdlPhase, v as ChartPieForm, w as ChartSlopeForm, x as EDGE_HEADS, y as EDGE_HEAD_DEFAULT, z as EDGE_HEAD_FILLS, A as EDGE_HEAD_FILL_DEFAULT, D as EDGE_REVEALS, F as EDGE_REVEAL_DEFAULT, G as EDGE_STYLES, H as EdgeReveal, I as InteractiveHandlerMap, K as InteractiveSignalsAccessor, M as LaidLane, O as NODE_KINDS, P as RELATION_FOCUSES, U as RELATION_FOCUS_DEFAULT, V as RelationFocus, W as ScrollProgressHandle, X as TONES, Y as computeEventBindingKey, Z as computeFormulaKey, _ as computeInputSignalKey, $ as computeScrollTriggerKey, a0 as computed, a1 as createInteractiveSignalsAccessor, a2 as createScrollProgressHandle, a3 as createScrollProgressSignals, a4 as hasInteractivePrimitives, a5 as sequenceBoardMetrics, a6 as sequenceStepId, a7 as signal } from './render-C53-PeJZ.js';
+import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeRole, f as EdgeHead, g as EdgeHeadFill, h as CdlState, i as CdlEventTarget, j as Computed, k as CdlDerivedValue, l as CdlScrollTrigger, L as LaidDiagram, m as CdlDiagramViewProps, n as LaidEdge, o as LaidNode, p as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-C0PJ2weJ.js';
+export { q as CdlDiagramView, r as CdlEventBinding, s as CdlEventKind, t as CdlFormula, u as CdlPhase, v as ChartPieForm, w as ChartSlopeForm, x as EDGE_HEADS, y as EDGE_HEAD_DEFAULT, z as EDGE_HEAD_FILLS, A as EDGE_HEAD_FILL_DEFAULT, D as EDGE_REVEALS, F as EDGE_REVEAL_DEFAULT, G as EDGE_STYLES, H as EdgeReveal, I as InteractiveHandlerMap, K as InteractiveSignalsAccessor, M as LaidLane, O as NODE_KINDS, P as RELATION_FOCUSES, U as RELATION_FOCUS_DEFAULT, V as RelationFocus, W as ScrollProgressHandle, X as TONES, Y as computeEventBindingKey, Z as computeFormulaKey, _ as computeInputSignalKey, $ as computeScrollTriggerKey, a0 as computed, a1 as createInteractiveSignalsAccessor, a2 as createScrollProgressHandle, a3 as createScrollProgressSignals, a4 as hasInteractivePrimitives, a5 as sequenceBoardMetrics, a6 as sequenceStepId, a7 as signal } from './render-C0PJ2weJ.js';
 import { JSX } from 'react';
 
 declare function effect(fn: () => void | (() => void)): () => void;
@@ -1046,6 +1046,10 @@ type DiagramBuilder = {
         guard?: string;
         /** ER 関係 cardinality、 text-dsl v0.5 inline option (`cardinality: "1:N"`) を CdlEdge.cardinality へ透過 */
         cardinality?: string;
+        /** 行き先の端に添える字 (#821)。 クラス図の多重度に使う */
+        headLabel?: string;
+        /** 出どころの端に添える字 (#825)。 クラス図の出どころ側の多重度に使う */
+        tailLabel?: string;
         labelOffsetX?: number;
         labelOffsetY?: number;
         routing?: "default" | "back-detour";
@@ -1136,6 +1140,10 @@ type DiagramBuilder = {
         tailHeadFill?: EdgeHeadFill;
         guard?: string;
         cardinality?: string;
+        /** 行き先の端に添える字 (#821)。 クラス図の多重度に使う */
+        headLabel?: string;
+        /** 出どころの端に添える字 (#825)。 クラス図の出どころ側の多重度に使う */
+        tailLabel?: string;
         labelOffsetX?: number;
         labelOffsetY?: number;
         routing?: "default" | "back-detour";
@@ -3406,8 +3414,10 @@ type UmlRelation = {
     type: ClassRelationType;
     /** 関係 label (default は type 名) */
     label?: string;
-    /** 多重度 (例 "1..*" / "0..1") */
+    /** 多重度 (例 "1..*" / "0..1")。 行き先 (`to`) の端に添える (#821) */
     cardinality?: string;
+    /** 出どころ (`from`) 側の多重度 (例 "1")。 出どころの端に添える (#825) */
+    tailCardinality?: string;
     tone?: Tone;
     /**
      * 矢印の先の形 (cdl#574)。 書かなければ種類から決まる (`CLASS_RELATION_LOOK`)。

package/dist/index.js

@@ -9499,6 +9499,8 @@ function diagram(id, options) {
         tailHeadFill: opts.tailHeadFill,
         guard: opts.guard,
         cardinality: opts.cardinality,
+        headLabel: opts.headLabel,
+        tailLabel: opts.tailLabel,
         labelOffsetX: opts.labelOffsetX,
         labelOffsetY: opts.labelOffsetY,
         routing: opts.routing,
@@ -9625,6 +9627,8 @@ function diagram(id, options) {
           tailHeadFill: d.tailHeadFill,
           guard: d.guard,
           cardinality: d.cardinality,
+          headLabel: d.headLabel,
+          tailLabel: d.tailLabel,
           labelOffsetX: d.labelOffsetX,
           labelOffsetY: d.labelOffsetY,
           routing: d.routing,
@@ -14103,10 +14107,10 @@ function \u66F8\u8A18\u7D20\u306B\u5206\u3051\u308B(text) {
   if (typeof \u533A\u5207\u308A !== "function") return [...text];
   return [...new \u533A\u5207\u308A(void 0, { granularity: "grapheme" }).segment(text)].map((g) => g.segment);
 }
-function \u7BB1\u306B\u7A4D\u3080(\u884C, \u7BB1\u306E\u5E45, \u7BB1\u306E\u9AD8\u30552) {
+function \u7BB1\u306B\u7A4D\u3080(\u884C, \u7BB1\u306E\u5E45, \u7BB1\u306E\u9AD8\u30553) {
   const \u5019\u88DC = \u884C.filter((r, i) => i === 0 || r.text.trim() !== "");
   if (\u5019\u88DC.length === 0) return [];
-  const \u4F7F\u3048\u308B\u9AD8\u3055 = \u7BB1\u306E\u9AD8\u30552 - \u4E0A\u4E0B\u306E\u4F59\u767D * 2;
+  const \u4F7F\u3048\u308B\u9AD8\u3055 = \u7BB1\u306E\u9AD8\u30553 - \u4E0A\u4E0B\u306E\u4F59\u767D * 2;
   const \u9AD8\u3055 = (rs) => rs.reduce((a, r) => a + r.fontSize * \u884C\u9001\u308A\u306E\u6BD4, 0);
   const \u6B8B\u3059 = [...\u5019\u88DC];
   while (\u6B8B\u3059.length > 1 && \u9AD8\u3055(\u6B8B\u3059) > \u4F7F\u3048\u308B\u9AD8\u3055) \u6B8B\u3059.pop();
@@ -14833,7 +14837,7 @@ function \u30D9\u30B8\u30A8\u306E\u7D2F\u7A4D\u5272\u5408(\u70B9, \u5236\u5FA1\u
 function \u7BB1\u306E\u6587\u5B57({
   \u884C,
   x,
-  \u7BB1\u306E\u9AD8\u3055: \u7BB1\u306E\u9AD8\u30552,
+  \u7BB1\u306E\u9AD8\u3055: \u7BB1\u306E\u9AD8\u30553,
   fill,
   \u540D\u524D\u306E\u592A\u3055
 }) {
@@ -14842,7 +14846,7 @@ function \u7BB1\u306E\u6587\u5B57({
     {
       "data-cdl-role": r.\u5F79\u5272 === "subtitle" ? "tree-node-subtitle" : void 0,
       x,
-      y: \u7BB1\u306E\u9AD8\u30552 / 2 + r.dy,
+      y: \u7BB1\u306E\u9AD8\u30553 / 2 + r.dy,
       fontSize: r.fontSize,
       fontWeight: r.\u5F79\u5272 === "title" ? \u540D\u524D\u306E\u592A\u3055 : 500,
       textAnchor: "middle",
@@ -22929,6 +22933,79 @@ function \u7B49\u5E45\u306E\u5B57(text, fontSize) {
   });
   return out;
 }
+
+// src/layout/head-label.ts
+var \u7AEF\u306E\u5B57\u3092\u623B\u3059\u8DDD\u96E2 = 22;
+var \u7AEF\u306E\u5B57\u3068\u7DDA\u306E\u9699\u9593 = 8;
+var \u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055 = EDGE_LABEL_TEXT.sub.fontSize;
+var \u7BB1\u306E\u9AD8\u30552 = Math.round(\u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055 * 1.2);
+var BASELINE_RATIO = 0.8;
+function \u5411\u304D\u3092\u53D6\u308B(end, \u5019\u88DC) {
+  for (const p of \u5019\u88DC) {
+    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;
+}
+function \u7AEF\u3067\u306E\u5411\u304D(d, \u7AEF) {
+  const segs = extractPathSegments(d);
+  if (segs.length === 0) return null;
+  if (\u7AEF === "head") {
+    const last = segs[segs.length - 1];
+    const end2 = { x: last.x2, y: last.y2 };
+    const \u5019\u88DC2 = segs.slice().reverse().flatMap((s) => [s.cmd === "Q" ? s.ctrl?.[0] : s.cmd === "C" ? s.ctrl?.[1] : void 0, { x: s.x1, y: s.y1 }]);
+    return \u5411\u304D\u3092\u53D6\u308B(end2, \u5019\u88DC2);
+  }
+  const first = segs[0];
+  const end = { x: first.x1, y: first.y1 };
+  const \u5019\u88DC = segs.flatMap((s) => [...s.ctrl ?? [], { x: s.x2, y: s.y2 }]);
+  return \u5411\u304D\u3092\u53D6\u308B(end, \u5019\u88DC);
+}
+function \u7AEF\u306E\u5B57\u3092\u7F6E\u304F(edge, \u7AEF = "head") {
+  const text = (\u7AEF === "head" ? edge.headLabel : edge.tailLabel)?.trim();
+  if (!text) return null;
+  const \u5411\u304D = \u7AEF\u3067\u306E\u5411\u304D(edge.d, \u7AEF);
+  if (!\u5411\u304D) return null;
+  const { end, ux, uy } = \u5411\u304D;
+  const bx = end.x - ux * \u7AEF\u306E\u5B57\u3092\u623B\u3059\u8DDD\u96E2;
+  const by = end.y - uy * \u7AEF\u306E\u5B57\u3092\u623B\u3059\u8DDD\u96E2;
+  const w = measureTextWidth(text, {
+    fontSize: \u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055,
+    fontWeight: EDGE_LABEL_TEXT.sub.fontWeight,
+    fontFamily: "mono"
+  });
+  const h = \u7BB1\u306E\u9AD8\u30552;
+  const \u672D = hasRenderedLabel(edge) && edge.labelX !== void 0 && edge.labelY !== void 0 ? { x: edge.labelX, y: edge.labelY } : null;
+  let anchor;
+  let box;
+  if (Math.abs(ux) >= Math.abs(uy)) {
+    const \u53F3\u3078\u9032\u3080 = ux > 0;
+    const \u4E0A\u306B\u7F6E\u304F = \u672D !== null && \u672D.y > by;
+    anchor = \u53F3\u3078\u9032\u3080 ? "end" : "start";
+    box = {
+      x: \u53F3\u3078\u9032\u3080 ? bx - w : bx,
+      y: \u4E0A\u306B\u7F6E\u304F ? by - \u7AEF\u306E\u5B57\u3068\u7DDA\u306E\u9699\u9593 - h : by + \u7AEF\u306E\u5B57\u3068\u7DDA\u306E\u9699\u9593,
+      w,
+      h
+    };
+  } else {
+    const \u4E0B\u3078\u9032\u3080 = uy > 0;
+    const \u53F3\u306B\u7F6E\u304F = \u672D !== null && \u672D.x < bx;
+    anchor = \u53F3\u306B\u7F6E\u304F ? "start" : "end";
+    box = {
+      x: \u53F3\u306B\u7F6E\u304F ? bx + \u7AEF\u306E\u5B57\u3068\u7DDA\u306E\u9699\u9593 : bx - \u7AEF\u306E\u5B57\u3068\u7DDA\u306E\u9699\u9593 - w,
+      y: \u4E0B\u3078\u9032\u3080 ? by - h : by,
+      w,
+      h
+    };
+  }
+  const x = anchor === "start" ? box.x : box.x + box.w;
+  const y = box.y + (h - \u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055) / 2 + \u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055 * BASELINE_RATIO;
+  return { x, y, anchor, box };
+}
 function defaultEdgeWidth(active) {
   return active ? 2.5 : 1.25;
 }
@@ -23191,6 +23268,35 @@ function CdlEdgeLabelView({
     }
   );
 }
+function CdlEdgeEndLabelView({
+  edge,
+  active,
+  \u7AEF
+}) {
+  const \u7F6E\u304D\u5834\u6240 = \u7AEF\u306E\u5B57\u3092\u7F6E\u304F(edge, \u7AEF);
+  if (!\u7F6E\u304D\u5834\u6240) return null;
+  const color = edgeColor(edge);
+  return /* @__PURE__ */ jsx(
+    "text",
+    {
+      "data-cdl-role": "edge-end-label",
+      "data-cdl-edge-end-label-for": edge.id,
+      "data-cdl-edge-end": \u7AEF,
+      x: \u7F6E\u304D\u5834\u6240.x,
+      y: \u7F6E\u304D\u5834\u6240.y,
+      fontSize: \u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055,
+      fontWeight: EDGE_LABEL_TEXT.sub.fontWeight,
+      textAnchor: \u7F6E\u304D\u5834\u6240.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") },
+      children: \u7B49\u5E45\u306E\u5B57(\u7AEF === "head" ? edge.headLabel : edge.tailLabel, \u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055)
+    }
+  );
+}
 
 // src/kinds/node-tone.ts
 function nodeAccent(node, fallback) {
@@ -31475,6 +31581,17 @@ function CdlStage({
             },
             `label-${edge.id}`
           )),
+          laid.edges.filter((edge) => (edge.headLabel || edge.tailLabel) && \u77E2\u5370\u306E\u51FA\u756A.\u51FA\u308B\u304B(edge.id)).flatMap(
+            (edge) => ["head", "tail"].map((\u7AEF) => /* @__PURE__ */ jsx(
+              CdlEdgeEndLabelView,
+              {
+                edge,
+                active: activeSet.has(edge.id),
+                \u7AEF
+              },
+              `${\u7AEF}-label-${edge.id}`
+            ))
+          ),
           debug && /* @__PURE__ */ jsxs("g", { pointerEvents: "none", children: [
             laid.bboxes.map((bbox, idx) => {
               const color = bbox.kind === "node" ? "#3b82f6" : bbox.kind === "lane-label" ? "#a855f7" : bbox.kind === "edge-label" ? "#10b981" : "#f59e0b";
@@ -32519,7 +32636,10 @@ function classDiagram(preset) {
         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 } : {},
+          ...r.tailCardinality ? { tailLabel: r.tailCardinality } : {},
           tone: r.tone ?? \u56F3\u306E\u65E2\u5B9A ?? CLASS_RELATION_TONE[r.type],
           // 関係の種類から線と端の形を決める (cdl#574 / #578)。 書いた値が勝つ
           style: r.style ?? \u898B\u305F\u76EE.style,