@cardenelabs/cdl 0.119.0 → 0.120.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +53 -1
- package/dist/index.cjs +36 -8
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +36 -8
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +36 -8
- package/dist/react.cjs.map +1 -1
- package/dist/react.js +36 -8
- package/dist/react.js.map +1 -1
- package/package.json +1 -1
- package/src/layout/head-label.ts +17 -8
- package/src/render/edges.tsx +26 -7
- package/src/render/utils.ts +47 -0
package/dist/react.cjs
CHANGED
|
@@ -4420,6 +4420,32 @@ function shrinkPathEnd(d, shrinkPx) {
|
|
|
4420
4420
|
tokens[tokens.length - 1] = newEndY.toFixed(1);
|
|
4421
4421
|
return tokens.join(" ");
|
|
4422
4422
|
}
|
|
4423
|
+
function shrinkPathStart(d, shrinkPx) {
|
|
4424
|
+
const \u533A\u9593 = [...d.matchAll(/([MLCQZmlcqz])([^MLCQZmlcqz]*)/g)].map((m) => ({
|
|
4425
|
+
cmd: m[1],
|
|
4426
|
+
args: (m[2] ?? "").trim().split(/[\s,]+/).filter(Boolean).map(parseFloat)
|
|
4427
|
+
}));
|
|
4428
|
+
if (\u533A\u9593.length < 2) return d;
|
|
4429
|
+
const \u5148\u982D = \u533A\u9593[0];
|
|
4430
|
+
if (\u5148\u982D.cmd !== "M" || \u5148\u982D.args.length < 2) return d;
|
|
4431
|
+
const \u6B21 = \u533A\u9593[1];
|
|
4432
|
+
const \u5411\u304D\u5148 = \u6B21.cmd === "Q" || \u6B21.cmd === "C" ? { x: \u6B21.args[0], y: \u6B21.args[1] } : \u6B21.cmd === "L" || \u6B21.cmd === "M" ? { x: \u6B21.args[0], y: \u6B21.args[1] } : null;
|
|
4433
|
+
if (!\u5411\u304D\u5148 || !Number.isFinite(\u5411\u304D\u5148.x) || !Number.isFinite(\u5411\u304D\u5148.y)) return d;
|
|
4434
|
+
const x0 = \u5148\u982D.args[0];
|
|
4435
|
+
const y0 = \u5148\u982D.args[1];
|
|
4436
|
+
const dx = \u5411\u304D\u5148.x - x0;
|
|
4437
|
+
const dy = \u5411\u304D\u5148.y - y0;
|
|
4438
|
+
const len = Math.hypot(dx, dy);
|
|
4439
|
+
if (len < shrinkPx + 1) return d;
|
|
4440
|
+
const \u6BD4 = shrinkPx / len;
|
|
4441
|
+
const \u65B0x = x0 + dx * \u6BD4;
|
|
4442
|
+
const \u65B0y = y0 + dy * \u6BD4;
|
|
4443
|
+
const tokens = d.trim().split(/\s+/);
|
|
4444
|
+
if (tokens.length < 3) return d;
|
|
4445
|
+
tokens[1] = \u65B0x.toFixed(1);
|
|
4446
|
+
tokens[2] = \u65B0y.toFixed(1);
|
|
4447
|
+
return tokens.join(" ");
|
|
4448
|
+
}
|
|
4423
4449
|
function pathSubpath(d, progress) {
|
|
4424
4450
|
if (progress >= 1) return d;
|
|
4425
4451
|
if (progress <= 0) {
|
|
@@ -10187,12 +10213,12 @@ function recomputeContainedLanes(lanes, nodes) {
|
|
|
10187
10213
|
}
|
|
10188
10214
|
|
|
10189
10215
|
// src/layout/head-label.ts
|
|
10190
|
-
var \u7AEF\u306E\u5B57\
|
|
10216
|
+
var \u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055 = EDGE_LABEL_TEXT.sub.fontSize;
|
|
10217
|
+
var \u7BB1\u306E\u9AD8\u3055 = Math.round(\u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055 * 1.2);
|
|
10218
|
+
var \u7AEF\u306E\u5B57\u3068\u5370\u306E\u4F59\u767D = Math.round(\u7BB1\u306E\u9AD8\u3055 / 2);
|
|
10191
10219
|
var \u7AEF\u306E\u5370\u306E\u5F35\u308A\u51FA\u3057 = EDGE_HEAD_MARKER_SIZE.\u65E2\u5B9A / 2;
|
|
10192
10220
|
var \u7AEF\u306E\u5B57\u3092\u623B\u3059\u8DDD\u96E2 = EDGE_HEAD_MARKER_SIZE.\u65E2\u5B9A + \u7AEF\u306E\u5B57\u3068\u5370\u306E\u4F59\u767D;
|
|
10193
10221
|
var \u7AEF\u306E\u5B57\u3068\u7DDA\u306E\u9699\u9593 = \u7AEF\u306E\u5370\u306E\u5F35\u308A\u51FA\u3057 + \u7AEF\u306E\u5B57\u3068\u5370\u306E\u4F59\u767D;
|
|
10194
|
-
var \u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055 = EDGE_LABEL_TEXT.sub.fontSize;
|
|
10195
|
-
var \u7BB1\u306E\u9AD8\u3055 = Math.round(\u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055 * 1.2);
|
|
10196
10222
|
var BASELINE_RATIO = 0.8;
|
|
10197
10223
|
var \u4E21\u7AEF\u306E\u5B57\u306E\u9593 = \u7AEF\u306E\u5B57\u3092\u623B\u3059\u8DDD\u96E2 * 2;
|
|
10198
10224
|
function \u7AEF\u306E\u5B57\u306B\u8981\u308B\u7DDA\u306E\u9577\u3055(edge) {
|
|
@@ -11504,7 +11530,8 @@ function CdlEdgeView({
|
|
|
11504
11530
|
const isPassThrough = isDotted && Boolean(edge.dThrough);
|
|
11505
11531
|
const lineDotsD = isDotted ? shrinkPathEnd(edge.d, 12) : edge.d;
|
|
11506
11532
|
const glowPathId = `cdl-edge-${edge.id}`;
|
|
11507
|
-
const
|
|
11533
|
+
const \u901A\u308A\u9053\u3092\u7E2E\u3081\u308B = EDGE_HEAD_MARKER_SIZE.\u65E2\u5B9A + \u8D70\u308B\u4E38\u306E\u534A\u5F84.\u82AF;
|
|
11534
|
+
const glowPathD = shrinkPathStart(shrinkPathEnd(edge.d, \u901A\u308A\u9053\u3092\u7E2E\u3081\u308B), \u901A\u308A\u9053\u3092\u7E2E\u3081\u308B);
|
|
11508
11535
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
11509
11536
|
"g",
|
|
11510
11537
|
{
|
|
@@ -11567,7 +11594,7 @@ function CdlEdgeView({
|
|
|
11567
11594
|
}
|
|
11568
11595
|
),
|
|
11569
11596
|
flowing && !isDotted && /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-role": "edge-flow", children: [
|
|
11570
|
-
/* @__PURE__ */ jsxRuntime.jsx("path", { id: glowPathId, d:
|
|
11597
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { id: glowPathId, d: glowPathD, fill: "none", stroke: "none" }),
|
|
11571
11598
|
/* @__PURE__ */ jsxRuntime.jsx(EdgeGlowCircles, { color, edgeId: edge.id })
|
|
11572
11599
|
] })
|
|
11573
11600
|
]
|
|
@@ -11611,10 +11638,11 @@ function SolidEdgePath({
|
|
|
11611
11638
|
}
|
|
11612
11639
|
);
|
|
11613
11640
|
}
|
|
11641
|
+
var \u8D70\u308B\u4E38\u306E\u534A\u5F84 = { \u5916: 28, \u4E2D: 18, \u82AF: 11 };
|
|
11614
11642
|
function EdgeGlowCircles({ color, edgeId }) {
|
|
11615
11643
|
const ref = `#cdl-edge-${edgeId}`;
|
|
11616
11644
|
return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-particle": edgeId, "data-cdl-particle-path-ref": ref, children: [
|
|
11617
|
-
/* @__PURE__ */ jsxRuntime.jsxs("circle", { r:
|
|
11645
|
+
/* @__PURE__ */ jsxRuntime.jsxs("circle", { r: \u8D70\u308B\u4E38\u306E\u534A\u5F84.\u5916, fill: color, children: [
|
|
11618
11646
|
/* @__PURE__ */ jsxRuntime.jsx("animateMotion", { dur: "2s", begin: "-1s", repeatCount: "indefinite", rotate: "auto", children: /* @__PURE__ */ jsxRuntime.jsx("mpath", { href: ref }) }),
|
|
11619
11647
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11620
11648
|
"animate",
|
|
@@ -11628,7 +11656,7 @@ function EdgeGlowCircles({ color, edgeId }) {
|
|
|
11628
11656
|
}
|
|
11629
11657
|
)
|
|
11630
11658
|
] }),
|
|
11631
|
-
/* @__PURE__ */ jsxRuntime.jsxs("circle", { r:
|
|
11659
|
+
/* @__PURE__ */ jsxRuntime.jsxs("circle", { r: \u8D70\u308B\u4E38\u306E\u534A\u5F84.\u4E2D, fill: color, children: [
|
|
11632
11660
|
/* @__PURE__ */ jsxRuntime.jsx("animateMotion", { dur: "2s", begin: "-1s", repeatCount: "indefinite", rotate: "auto", children: /* @__PURE__ */ jsxRuntime.jsx("mpath", { href: ref }) }),
|
|
11633
11661
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11634
11662
|
"animate",
|
|
@@ -11642,7 +11670,7 @@ function EdgeGlowCircles({ color, edgeId }) {
|
|
|
11642
11670
|
}
|
|
11643
11671
|
)
|
|
11644
11672
|
] }),
|
|
11645
|
-
/* @__PURE__ */ jsxRuntime.jsxs("circle", { r:
|
|
11673
|
+
/* @__PURE__ */ jsxRuntime.jsxs("circle", { r: \u8D70\u308B\u4E38\u306E\u534A\u5F84.\u82AF, fill: color, children: [
|
|
11646
11674
|
/* @__PURE__ */ jsxRuntime.jsx("animateMotion", { dur: "2s", begin: "-1s", repeatCount: "indefinite", rotate: "auto", children: /* @__PURE__ */ jsxRuntime.jsx("mpath", { href: ref }) }),
|
|
11647
11675
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11648
11676
|
"animate",
|