@cardenelabs/cdl 0.51.0 → 0.53.0

package/dist/react.cjs

@@ -9226,6 +9226,87 @@ function requiredRowsWidth(rows, kind) {
   return Math.ceil(kind === "storage" ? storage : generic);
 }
 
+// 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\u3055 = Math.round(\u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055 * 1.2);
+var BASELINE_RATIO = 0.8;
+var \u4E21\u7AEF\u306E\u5B57\u306E\u9593 = \u7AEF\u306E\u5B57\u3092\u623B\u3059\u8DDD\u96E2 * 2;
+function \u7AEF\u306E\u5B57\u306B\u8981\u308B\u7DDA\u306E\u9577\u3055(edge) {
+  const \u4E00\u3064\u5206 = \u7AEF\u306E\u5B57\u3092\u623B\u3059\u8DDD\u96E2 + \u7BB1\u306E\u9AD8\u3055;
+  const \u6570 = [edge.headLabel, edge.tailLabel].filter((t) => t?.trim()).length;
+  if (\u6570 === 0) return 0;
+  if (\u6570 === 1) return \u4E00\u3064\u5206;
+  return \u4E00\u3064\u5206 * 2 + \u4E21\u7AEF\u306E\u5B57\u306E\u9593;
+}
+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\u3055;
+  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 };
+}
+
 // src/layout/nodes.ts
 function autoStorageHeight(n, defaultH) {
   if (n.kind !== "storage") return n.h ?? defaultH;
@@ -9247,7 +9328,7 @@ function autoRowsWidth(n, defaultW) {
   const required = requiredRowsWidth(n.rows, n.kind);
   return Math.max(defaultW, required);
 }
-function \u7BB1\u306E\u9AD8\u3055(n, \u65E2\u5B9Ah) {
+function \u7BB1\u306E\u9AD8\u30552(n, \u65E2\u5B9Ah) {
   if (n.h != null) return n.h;
   if (n.kind === "storage") return autoStorageHeight(n, \u65E2\u5B9Ah);
   return \u4E2D\u8EAB\u304B\u3089\u51FA\u3059\u9AD8\u3055(n.kind, \u65E2\u5B9Ah, {
@@ -9261,8 +9342,8 @@ function requiredStackGapForEdgeLabels(diag, allStacks) {
   const byId = new Map(diag.nodes.map((n) => [n.id, n]));
   const rankOf = new Map(allStacks.map((stack, i) => [stack, i]));
   const pillHsByGap = /* @__PURE__ */ new Map();
+  let \u7AEF\u306E\u5B57\u306E\u8981\u6C42 = 0;
   for (const e of diag.edges) {
-    if (!hasRenderedLabel(e)) continue;
     const from = byId.get(e.from);
     const to = byId.get(e.to);
     if (!from || !to) continue;
@@ -9271,10 +9352,12 @@ function requiredStackGapForEdgeLabels(diag, allStacks) {
     const toRank = rankOf.get(to.stack);
     if (fromRank === void 0 || toRank === void 0) continue;
     if (Math.abs(fromRank - toRank) !== 1) continue;
+    \u7AEF\u306E\u5B57\u306E\u8981\u6C42 = Math.max(\u7AEF\u306E\u5B57\u306E\u8981\u6C42, \u7AEF\u306E\u5B57\u306B\u8981\u308B\u7DDA\u306E\u9577\u3055(e));
+    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 = \u7AEF\u306E\u5B57\u306E\u8981\u6C42;
   for (const pillHs of pillHsByGap.values()) {
     required = Math.max(required, requiredVerticalLabelGap(pillHs));
   }
@@ -9286,7 +9369,7 @@ function layoutNodes(diag, lanes) {
   const rowH = /* @__PURE__ */ new Map();
   for (const stack of allStacks) {
     const nodesAtStack = diag.nodes.filter((n) => n.stack === stack);
-    const h = Math.max(...nodesAtStack.map((n) => \u7BB1\u306E\u9AD8\u3055(n, NODE_SIZE[n.kind].h)));
+    const h = Math.max(...nodesAtStack.map((n) => \u7BB1\u306E\u9AD8\u30552(n, NODE_SIZE[n.kind].h)));
     rowH.set(stack, h);
   }
   const rowCy = /* @__PURE__ */ new Map();
@@ -9340,7 +9423,7 @@ function layoutNodes(diag, lanes) {
     const \u6BB5\u306E\u82AF = rowCy.get(n.stack);
     const \u6BB5\u306E\u9AD8\u3055 = rowH.get(n.stack);
     const \u81EA\u524D\u306E\u9AD8\u3055 = n.rowMarks !== void 0;
-    const h = n.h ?? (\u81EA\u524D\u306E\u9AD8\u3055 ? \u7BB1\u306E\u9AD8\u3055(n, size.h) : \u6BB5\u306E\u9AD8\u3055);
+    const h = n.h ?? (\u81EA\u524D\u306E\u9AD8\u3055 ? \u7BB1\u306E\u9AD8\u30552(n, size.h) : \u6BB5\u306E\u9AD8\u3055);
     const cy = \u6BB5\u306E\u82AF;
     const w = autoRowsWidth(n, size.w);
     out.push({
@@ -10414,73 +10497,6 @@ 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 \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;
 }
@@ -10743,11 +10759,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(
@@ -10755,6 +10772,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,
@@ -10766,7 +10784,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)
     }
   );
 }
@@ -19051,14 +19069,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";