@cardenelabs/cdl 0.51.0 → 0.52.0

package/CHANGELOG.md

@@ -5,6 +5,19 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.52.0] - 2026-09-11
+
+### Added
+
+- **クラス図の関係の出どころ側の端にも多重度を出せるようにした** (#825)
+
+  UML は関係の両端に多重度を書く (例 = 管理者 `1` が注文 `1..*` を持つ)。 組み立て器は多重度を
+  1 つ (`cardinality` = 行き先の端) しか受け取れず、出どころの端の数を書く口が無かった。
+
+  クラス図の組み立て器に `tailCardinality` を足した。 線に「出どころの端に添える字」 の欄 `tailLabel` を
+  足し (`headLabel` と対)、置き場所は行き先の端と同じ計算で決める。 出どころの端での向きは、線の
+  最初の区間を逆にたどって取る (曲線なら始点の接線)。
+
 ## [0.51.0] - 2026-09-11
 
 ### Changed
@@ -2435,7 +2448,8 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.51.0...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.52.0...HEAD
+[0.52.0]: https://github.com/cardene777/cdl/compare/v0.51.0...v0.52.0
 [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

package/dist/index.cjs

@@ -9502,6 +9502,7 @@ function diagram(id, options) {
         guard: opts.guard,
         cardinality: opts.cardinality,
         headLabel: opts.headLabel,
+        tailLabel: opts.tailLabel,
         labelOffsetX: opts.labelOffsetX,
         labelOffsetY: opts.labelOffsetY,
         routing: opts.routing,
@@ -9629,6 +9630,7 @@ function diagram(id, options) {
           guard: d.guard,
           cardinality: d.cardinality,
           headLabel: d.headLabel,
+          tailLabel: d.tailLabel,
           labelOffsetX: d.labelOffsetX,
           labelOffsetY: d.labelOffsetY,
           routing: d.routing,
@@ -22940,28 +22942,34 @@ 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 };
-    }
+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\u306E\u5B57\u3092\u7F6E\u304F(edge) {
-  const text = edge.headLabel?.trim();
+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 = \u6700\u5F8C\u306E\u5411\u304D(edge.d);
+  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;
@@ -23262,11 +23270,12 @@ function CdlEdgeLabelView({
     }
   );
 }
-function CdlEdgeHeadLabelView({
+function CdlEdgeEndLabelView({
   edge,
-  active
+  active,
+  \u7AEF
 }) {
-  const \u7F6E\u304D\u5834\u6240 = \u7AEF\u306E\u5B57\u3092\u7F6E\u304F(edge);
+  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__ */ jsxRuntime.jsx(
@@ -23274,6 +23283,7 @@ function CdlEdgeHeadLabelView({
     {
       "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,
@@ -23285,7 +23295,7 @@ function CdlEdgeHeadLabelView({
       strokeLinejoin: "round",
       paintOrder: "stroke",
       style: { fontFamily: fontFamilyAttr("sub") },
-      children: \u7B49\u5E45\u306E\u5B57(edge.headLabel, \u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055)
+      children: \u7B49\u5E45\u306E\u5B57(\u7AEF === "head" ? edge.headLabel : edge.tailLabel, \u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055)
     }
   );
 }
@@ -31573,14 +31583,17 @@ 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}`
-          )),
+          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__ */ jsxRuntime.jsx(
+              CdlEdgeEndLabelView,
+              {
+                edge,
+                active: activeSet.has(edge.id),
+                \u7AEF
+              },
+              `${\u7AEF}-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";
@@ -32628,6 +32641,7 @@ function classDiagram(preset) {
           // 多重度は行き先の端に添える (#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,