@cardenelabs/cdl 0.49.0 → 0.51.0

package/CHANGELOG.md

@@ -5,6 +5,36 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.51.0] - 2026-09-11
+
+### Changed
+
+- **クラス図の多重度を、線の中ほどの札から行き先の端へ移した** (#821)
+
+  クラス図の関係に書いた多重度 (`cardinality: "1..*"`) は、札の語の下の行 (`sub`) に入っていた。
+  語と続けて読まれ (英字の頃は `HAS` と `1..*` が「HAS1」)、 どちらの端の数かも読めなかった。
+  UML と同じく、行き先の端の近くへ等幅の字で添える。
+
+  置き場所は線の最後の区間から決まる。 端から 22 world 戻った点の、札と反対の側に置く
+  (札を持たない線は、横向きなら下、縦向きなら左)。 札と同じ側に置くと、見本帳のクラス図で
+  1 本が札と重なり、もう 1 本が札と 2 world まで寄った。
+
+  線に「行き先の端に添える字」 の欄 `headLabel` を足した。 クラス図の組み立て器は多重度を
+  `sub` ではなく `headLabel` に渡す。 ER 図の多重度の出し方は変えない (端の印で示す)。
+
+## [0.50.0] - 2026-09-11
+
+### Fixed
+
+- **等幅の文字で `[` と `]` が隣り合うと四角 1 つに見えるのを直した** (#817)
+
+  見本帳のクラス図で、型の `string[]` が画面では `string□` と読めた。 等幅の書体 (`JetBrains Mono`) の
+  `[` と `]` は横棒が字の枠いっぱいまで伸びており、図を画面の幅に合わせて縮めると (画面上 14px 前後)
+  2 本の横棒がつながる。 合字ではない (合字を止めても変わらない)。
+
+  engine が等幅の書体で描く全ての文字で、 `[]` の間にだけ字の大きさの 0.08 倍の隙間を足す。
+  隙間は `<tspan dx>` で足すので、 文字の中身 (`textContent`) は `string[]` のまま変わらない。
+
 ## [0.49.0] - 2026-09-11
 
 ### Added
@@ -2405,7 +2435,9 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.49.0...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.51.0...HEAD
+[0.51.0]: https://github.com/cardene777/cdl/compare/v0.50.0...v0.51.0
+[0.50.0]: https://github.com/cardene777/cdl/compare/v0.49.0...v0.50.0
 [0.49.0]: https://github.com/cardene777/cdl/compare/v0.48.0...v0.49.0
 [0.48.0]: https://github.com/cardene777/cdl/compare/v0.47.0...v0.48.0
 [0.47.0]: https://github.com/cardene777/cdl/compare/v0.46.0...v0.47.0

package/dist/index.cjs

@@ -9501,6 +9501,7 @@ function diagram(id, options) {
         tailHeadFill: opts.tailHeadFill,
         guard: opts.guard,
         cardinality: opts.cardinality,
+        headLabel: opts.headLabel,
         labelOffsetX: opts.labelOffsetX,
         labelOffsetY: opts.labelOffsetY,
         routing: opts.routing,
@@ -9627,6 +9628,7 @@ function diagram(id, options) {
           tailHeadFill: d.tailHeadFill,
           guard: d.guard,
           cardinality: d.cardinality,
+          headLabel: d.headLabel,
           labelOffsetX: d.labelOffsetX,
           labelOffsetY: d.labelOffsetY,
           routing: d.routing,
@@ -14105,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();
@@ -14835,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
 }) {
@@ -14844,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",
@@ -22920,6 +22922,84 @@ function edgeHeadPaint(head, fill, color) {
   }
   return { fill: color, stroke: "none" };
 }
+var \u89D2\u62EC\u5F27\u306E\u9699\u9593 = 0.08;
+function \u7B49\u5E45\u306E\u5B57(text, fontSize) {
+  if (typeof text !== "string" || !text.includes("[]")) return text;
+  const \u584A = text.split("[]");
+  const out = [];
+  \u584A.forEach((s, i) => {
+    if (i > 0) out.push("[", react.createElement("tspan", { key: i, dx: fontSize * \u89D2\u62EC\u5F27\u306E\u9699\u9593 }, "]"));
+    if (s !== "") out.push(s);
+  });
+  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 \u6700\u5F8C\u306E\u5411\u304D(d) {
+  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 \u5236\u5FA1\u70B9 = s.cmd === "Q" ? s.ctrl?.[0] : s.cmd === "C" ? s.ctrl?.[1] : void 0;
+    for (const p of [\u5236\u5FA1\u70B9, { 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;
+}
+function \u7AEF\u306E\u5B57\u3092\u7F6E\u304F(edge) {
+  const text = edge.headLabel?.trim();
+  if (!text) return null;
+  const \u5411\u304D = \u6700\u5F8C\u306E\u5411\u304D(edge.d);
+  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;
 }
@@ -23175,13 +23255,40 @@ function CdlEdgeLabelView({
             fill: active ? color : "var(--cdl-text-dim, #5a6270)",
             opacity: labelTextOpacity("sub"),
             style: { fontFamily: fontFamilyAttr("sub") },
-            children: edge.sub
+            children: \u7B49\u5E45\u306E\u5B57(edge.sub, EDGE_LABEL_TEXT.sub.fontSize)
           }
         )
       ]
     }
   );
 }
+function CdlEdgeHeadLabelView({
+  edge,
+  active
+}) {
+  const \u7F6E\u304D\u5834\u6240 = \u7AEF\u306E\u5B57\u3092\u7F6E\u304F(edge);
+  if (!\u7F6E\u304D\u5834\u6240) return null;
+  const color = edgeColor(edge);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "text",
+    {
+      "data-cdl-role": "edge-end-label",
+      "data-cdl-edge-end-label-for": edge.id,
+      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(edge.headLabel, \u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055)
+    }
+  );
+}
 
 // src/kinds/node-tone.ts
 function nodeAccent(node, fallback) {
@@ -23255,7 +23362,7 @@ function ActorNode({ node, active, value }) {
         textAnchor: "end",
         fill: "var(--cdl-text, #1a1f2a)",
         style: { fontFamily: "'JetBrains Mono', monospace" },
-        children: value
+        children: \u7B49\u5E45\u306E\u5B57(value, 42)
       }
     )
   ] });
@@ -23431,7 +23538,7 @@ function SequenceBoardNode({
           textAnchor: "middle",
           fill: "var(--cdl-text, #1a1f2a)",
           style: { fontFamily: "'JetBrains Mono', monospace" },
-          children: a.name
+          children: \u7B49\u5E45\u306E\u5B57(a.name, SEQ_NAME)
         }
       ),
       a.subtitle && /* @__PURE__ */ jsxRuntime.jsx(
@@ -23621,7 +23728,7 @@ function EventNode({
             fill: "var(--cdl-text, #1a1f2a)",
             textAnchor: \u540D\u524D.anchor,
             style: { fontFamily: "'JetBrains Mono', monospace" },
-            children: node.title
+            children: \u7B49\u5E45\u306E\u5B57(node.title, \u540D\u524D.size)
           }
         ),
         node.subtitle && /* @__PURE__ */ jsxRuntime.jsx(
@@ -23632,7 +23739,7 @@ function EventNode({
             fontSize: 21,
             fill: "var(--cdl-text-dim, #5a6270)",
             style: { fontFamily: "'JetBrains Mono', monospace" },
-            children: node.subtitle
+            children: \u7B49\u5E45\u306E\u5B57(node.subtitle, 21)
           }
         )
       ] })
@@ -23681,7 +23788,7 @@ function FunctionNode({ node, active }) {
         fill: "var(--cdl-text, #1a1f2a)",
         textAnchor: \u540D\u524D.anchor,
         style: { fontFamily: "'JetBrains Mono', monospace" },
-        children: node.title
+        children: \u7B49\u5E45\u306E\u5B57(node.title, \u540D\u524D.size)
       }
     ),
     node.subtitle && /* @__PURE__ */ jsxRuntime.jsx("text", { x: 26, y: 126 - \u305A\u3089\u3057, fontSize: 20, fill: "var(--cdl-text-dim, #5a6270)", children: node.subtitle })
@@ -23794,7 +23901,7 @@ function StorageNode({
         fill: "var(--cdl-text, #1a1f2a)",
         textAnchor: \u540D\u524D.anchor,
         style: { fontFamily: "'JetBrains Mono', monospace" },
-        children: node.title
+        children: \u7B49\u5E45\u306E\u5B57(node.title, \u540D\u524D.size)
       }
     ),
     rows.length > 0 && !\u5370\u3067\u5206\u3051\u308B && /* @__PURE__ */ jsxRuntime.jsx(
@@ -23855,7 +23962,7 @@ function StorageNode({
             fontWeight: \u5370\u3067\u5206\u3051\u308B ? 500 : 600,
             fill: "var(--cdl-text, #1a1f2a)",
             style: { fontFamily: "'JetBrains Mono', monospace" },
-            children: s.left
+            children: \u7B49\u5E45\u306E\u5B57(s.left, 26)
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -23869,7 +23976,7 @@ function StorageNode({
             textAnchor: \u5370\u3067\u5206\u3051\u308B ? "end" : "start",
             fill: \u5370\u3067\u5206\u3051\u308B ? "var(--cdl-text-dim, #5a6270)" : highlightRows ? accent : "var(--cdl-text, #1a1f2a)",
             style: { fontFamily: "'JetBrains Mono', monospace" },
-            children: s.right
+            children: \u7B49\u5E45\u306E\u5B57(s.right, \u5370\u3067\u5206\u3051\u308B ? ROW_TYPE_FONT : 26)
           }
         )
       ] }, idx);
@@ -24143,8 +24250,8 @@ function GenericNode({
           /* @__PURE__ */ jsxRuntime.jsx("path", { d: style.icon, fill: style.eyebrowColor, opacity: 0.7, transform: "scale(1)" })
         ] }),
         node.eyebrow && /* @__PURE__ */ jsxRuntime.jsx("text", { x: textX, y: eyebrowY, fontSize: 17, fontWeight: 700, letterSpacing: 1.5, fill: paint.onSolid ? "var(--cdl-node-fill, #ffffff)" : style.eyebrowColor, textAnchor, dominantBaseline, children: node.eyebrow }),
-        /* @__PURE__ */ jsxRuntime.jsx("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, dominantBaseline, style: node.kind === "function" || node.kind === "api" ? { fontFamily: "'JetBrains Mono', monospace" } : void 0, children: node.title }),
-        node.subtitle && /* @__PURE__ */ jsxRuntime.jsx("text", { x: textX, y: subtitleY, fontSize: 17, fill: paint.onSolid ? "var(--cdl-node-fill, #ffffff)" : "var(--cdl-text-dim, #5a6270)", textAnchor, dominantBaseline, style: { fontFamily: "'JetBrains Mono', monospace" }, children: node.subtitle }),
+        /* @__PURE__ */ jsxRuntime.jsx("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, dominantBaseline, style: node.kind === "function" || node.kind === "api" ? { fontFamily: "'JetBrains Mono', monospace" } : void 0, children: node.kind === "function" || node.kind === "api" ? \u7B49\u5E45\u306E\u5B57(node.title, 20) : node.title }),
+        node.subtitle && /* @__PURE__ */ jsxRuntime.jsx("text", { x: textX, y: subtitleY, fontSize: 17, fill: paint.onSolid ? "var(--cdl-node-fill, #ffffff)" : "var(--cdl-text-dim, #5a6270)", textAnchor, dominantBaseline, style: { fontFamily: "'JetBrains Mono', monospace" }, children: \u7B49\u5E45\u306E\u5B57(node.subtitle, 17) }),
         resolvedValue && /* @__PURE__ */ jsxRuntime.jsx(
           "text",
           {
@@ -24155,7 +24262,7 @@ function GenericNode({
             textAnchor: "end",
             fill: "var(--cdl-text, #1a1f2a)",
             style: { fontFamily: "'JetBrains Mono', monospace" },
-            children: resolvedValue
+            children: \u7B49\u5E45\u306E\u5B57(resolvedValue, 32)
           }
         ),
         node.rows && node.rows.length > 0 && (() => {
@@ -24180,7 +24287,7 @@ function GenericNode({
                 textAnchor: "start",
                 fill: "var(--cdl-text, #1a1f2a)",
                 style: { fontFamily: "'JetBrains Mono', monospace" },
-                children: s.right
+                children: \u7B49\u5E45\u306E\u5B57(s.right, 21)
               }
             )
           ] }, i)) });
@@ -31466,6 +31573,14 @@ function CdlStage({
             },
             `label-${edge.id}`
           )),
+          laid.edges.filter((edge) => edge.headLabel && \u77E2\u5370\u306E\u51FA\u756A.\u51FA\u308B\u304B(edge.id)).map((edge) => /* @__PURE__ */ jsxRuntime.jsx(
+            CdlEdgeHeadLabelView,
+            {
+              edge,
+              active: activeSet.has(edge.id)
+            },
+            `head-label-${edge.id}`
+          )),
           debug && /* @__PURE__ */ jsxRuntime.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";
@@ -32510,7 +32625,9 @@ 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 } : {},
           tone: r.tone ?? \u56F3\u306E\u65E2\u5B9A ?? CLASS_RELATION_TONE[r.type],
           // 関係の種類から線と端の形を決める (cdl#574 / #578)。 書いた値が勝つ
           style: r.style ?? \u898B\u305F\u76EE.style,