@cardenelabs/cdl 0.119.0 → 0.121.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 +92 -1
- package/dist/index.cjs +38 -8
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +38 -8
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +38 -8
- package/dist/react.cjs.map +1 -1
- package/dist/react.js +38 -8
- package/dist/react.js.map +1 -1
- package/package.json +1 -1
- package/src/layout/head-label.ts +27 -8
- package/src/render/edges.tsx +41 -7
- package/src/render/utils.ts +47 -0
package/dist/react.js
CHANGED
|
@@ -4418,6 +4418,32 @@ function shrinkPathEnd(d, shrinkPx) {
|
|
|
4418
4418
|
tokens[tokens.length - 1] = newEndY.toFixed(1);
|
|
4419
4419
|
return tokens.join(" ");
|
|
4420
4420
|
}
|
|
4421
|
+
function shrinkPathStart(d, shrinkPx) {
|
|
4422
|
+
const \u533A\u9593 = [...d.matchAll(/([MLCQZmlcqz])([^MLCQZmlcqz]*)/g)].map((m) => ({
|
|
4423
|
+
cmd: m[1],
|
|
4424
|
+
args: (m[2] ?? "").trim().split(/[\s,]+/).filter(Boolean).map(parseFloat)
|
|
4425
|
+
}));
|
|
4426
|
+
if (\u533A\u9593.length < 2) return d;
|
|
4427
|
+
const \u5148\u982D = \u533A\u9593[0];
|
|
4428
|
+
if (\u5148\u982D.cmd !== "M" || \u5148\u982D.args.length < 2) return d;
|
|
4429
|
+
const \u6B21 = \u533A\u9593[1];
|
|
4430
|
+
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;
|
|
4431
|
+
if (!\u5411\u304D\u5148 || !Number.isFinite(\u5411\u304D\u5148.x) || !Number.isFinite(\u5411\u304D\u5148.y)) return d;
|
|
4432
|
+
const x0 = \u5148\u982D.args[0];
|
|
4433
|
+
const y0 = \u5148\u982D.args[1];
|
|
4434
|
+
const dx = \u5411\u304D\u5148.x - x0;
|
|
4435
|
+
const dy = \u5411\u304D\u5148.y - y0;
|
|
4436
|
+
const len = Math.hypot(dx, dy);
|
|
4437
|
+
if (len < shrinkPx + 1) return d;
|
|
4438
|
+
const \u6BD4 = shrinkPx / len;
|
|
4439
|
+
const \u65B0x = x0 + dx * \u6BD4;
|
|
4440
|
+
const \u65B0y = y0 + dy * \u6BD4;
|
|
4441
|
+
const tokens = d.trim().split(/\s+/);
|
|
4442
|
+
if (tokens.length < 3) return d;
|
|
4443
|
+
tokens[1] = \u65B0x.toFixed(1);
|
|
4444
|
+
tokens[2] = \u65B0y.toFixed(1);
|
|
4445
|
+
return tokens.join(" ");
|
|
4446
|
+
}
|
|
4421
4447
|
function pathSubpath(d, progress) {
|
|
4422
4448
|
if (progress >= 1) return d;
|
|
4423
4449
|
if (progress <= 0) {
|
|
@@ -10185,12 +10211,12 @@ function recomputeContainedLanes(lanes, nodes) {
|
|
|
10185
10211
|
}
|
|
10186
10212
|
|
|
10187
10213
|
// src/layout/head-label.ts
|
|
10188
|
-
var \u7AEF\u306E\u5B57\
|
|
10214
|
+
var \u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055 = 26;
|
|
10215
|
+
var \u7BB1\u306E\u9AD8\u3055 = Math.round(\u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055 * 1.2);
|
|
10216
|
+
var \u7AEF\u306E\u5B57\u3068\u5370\u306E\u4F59\u767D = 12;
|
|
10189
10217
|
var \u7AEF\u306E\u5370\u306E\u5F35\u308A\u51FA\u3057 = EDGE_HEAD_MARKER_SIZE.\u65E2\u5B9A / 2;
|
|
10190
10218
|
var \u7AEF\u306E\u5B57\u3092\u623B\u3059\u8DDD\u96E2 = EDGE_HEAD_MARKER_SIZE.\u65E2\u5B9A + \u7AEF\u306E\u5B57\u3068\u5370\u306E\u4F59\u767D;
|
|
10191
10219
|
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;
|
|
10192
|
-
var \u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055 = EDGE_LABEL_TEXT.sub.fontSize;
|
|
10193
|
-
var \u7BB1\u306E\u9AD8\u3055 = Math.round(\u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055 * 1.2);
|
|
10194
10220
|
var BASELINE_RATIO = 0.8;
|
|
10195
10221
|
var \u4E21\u7AEF\u306E\u5B57\u306E\u9593 = \u7AEF\u306E\u5B57\u3092\u623B\u3059\u8DDD\u96E2 * 2;
|
|
10196
10222
|
function \u7AEF\u306E\u5B57\u306B\u8981\u308B\u7DDA\u306E\u9577\u3055(edge) {
|
|
@@ -11502,7 +11528,8 @@ function CdlEdgeView({
|
|
|
11502
11528
|
const isPassThrough = isDotted && Boolean(edge.dThrough);
|
|
11503
11529
|
const lineDotsD = isDotted ? shrinkPathEnd(edge.d, 12) : edge.d;
|
|
11504
11530
|
const glowPathId = `cdl-edge-${edge.id}`;
|
|
11505
|
-
const
|
|
11531
|
+
const \u901A\u308A\u9053\u3092\u7E2E\u3081\u308B = EDGE_HEAD_MARKER_SIZE.\u65E2\u5B9A + \u8D70\u308B\u4E38\u306E\u5916\u5074;
|
|
11532
|
+
const glowPathD = shrinkPathStart(shrinkPathEnd(edge.d, \u901A\u308A\u9053\u3092\u7E2E\u3081\u308B), \u901A\u308A\u9053\u3092\u7E2E\u3081\u308B);
|
|
11506
11533
|
return /* @__PURE__ */ jsxs(
|
|
11507
11534
|
"g",
|
|
11508
11535
|
{
|
|
@@ -11565,7 +11592,7 @@ function CdlEdgeView({
|
|
|
11565
11592
|
}
|
|
11566
11593
|
),
|
|
11567
11594
|
flowing && !isDotted && /* @__PURE__ */ jsxs("g", { "data-cdl-role": "edge-flow", children: [
|
|
11568
|
-
/* @__PURE__ */ jsx("path", { id: glowPathId, d:
|
|
11595
|
+
/* @__PURE__ */ jsx("path", { id: glowPathId, d: glowPathD, fill: "none", stroke: "none" }),
|
|
11569
11596
|
/* @__PURE__ */ jsx(EdgeGlowCircles, { color, edgeId: edge.id })
|
|
11570
11597
|
] })
|
|
11571
11598
|
]
|
|
@@ -11609,10 +11636,13 @@ function SolidEdgePath({
|
|
|
11609
11636
|
}
|
|
11610
11637
|
);
|
|
11611
11638
|
}
|
|
11639
|
+
var \u8D70\u308B\u4E38\u306E\u534A\u5F84 = { \u5916: 28, \u4E2D: 18, \u82AF: 12 };
|
|
11640
|
+
var \u8D70\u308B\u4E38\u306E\u7E01\u306E\u898B\u8FBC\u307F = 2;
|
|
11641
|
+
var \u8D70\u308B\u4E38\u306E\u5916\u5074 = \u8D70\u308B\u4E38\u306E\u534A\u5F84.\u82AF + \u8D70\u308B\u4E38\u306E\u7E01\u306E\u898B\u8FBC\u307F;
|
|
11612
11642
|
function EdgeGlowCircles({ color, edgeId }) {
|
|
11613
11643
|
const ref = `#cdl-edge-${edgeId}`;
|
|
11614
11644
|
return /* @__PURE__ */ jsxs("g", { "data-cdl-particle": edgeId, "data-cdl-particle-path-ref": ref, children: [
|
|
11615
|
-
/* @__PURE__ */ jsxs("circle", { r:
|
|
11645
|
+
/* @__PURE__ */ jsxs("circle", { r: \u8D70\u308B\u4E38\u306E\u534A\u5F84.\u5916, fill: color, children: [
|
|
11616
11646
|
/* @__PURE__ */ jsx("animateMotion", { dur: "2s", begin: "-1s", repeatCount: "indefinite", rotate: "auto", children: /* @__PURE__ */ jsx("mpath", { href: ref }) }),
|
|
11617
11647
|
/* @__PURE__ */ jsx(
|
|
11618
11648
|
"animate",
|
|
@@ -11626,7 +11656,7 @@ function EdgeGlowCircles({ color, edgeId }) {
|
|
|
11626
11656
|
}
|
|
11627
11657
|
)
|
|
11628
11658
|
] }),
|
|
11629
|
-
/* @__PURE__ */ jsxs("circle", { r:
|
|
11659
|
+
/* @__PURE__ */ jsxs("circle", { r: \u8D70\u308B\u4E38\u306E\u534A\u5F84.\u4E2D, fill: color, children: [
|
|
11630
11660
|
/* @__PURE__ */ jsx("animateMotion", { dur: "2s", begin: "-1s", repeatCount: "indefinite", rotate: "auto", children: /* @__PURE__ */ jsx("mpath", { href: ref }) }),
|
|
11631
11661
|
/* @__PURE__ */ jsx(
|
|
11632
11662
|
"animate",
|
|
@@ -11640,7 +11670,7 @@ function EdgeGlowCircles({ color, edgeId }) {
|
|
|
11640
11670
|
}
|
|
11641
11671
|
)
|
|
11642
11672
|
] }),
|
|
11643
|
-
/* @__PURE__ */ jsxs("circle", { r:
|
|
11673
|
+
/* @__PURE__ */ jsxs("circle", { r: \u8D70\u308B\u4E38\u306E\u534A\u5F84.\u82AF, fill: color, children: [
|
|
11644
11674
|
/* @__PURE__ */ jsx("animateMotion", { dur: "2s", begin: "-1s", repeatCount: "indefinite", rotate: "auto", children: /* @__PURE__ */ jsx("mpath", { href: ref }) }),
|
|
11645
11675
|
/* @__PURE__ */ jsx(
|
|
11646
11676
|
"animate",
|