@cardenelabs/cdl 0.118.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 +92 -1
- package/dist/index.cjs +40 -9
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +40 -9
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +40 -9
- package/dist/react.cjs.map +1 -1
- package/dist/react.js +40 -9
- package/dist/react.js.map +1 -1
- package/package.json +1 -1
- package/src/layout/head-label.ts +38 -10
- package/src/render/edges.tsx +26 -7
- package/src/render/stage.tsx +3 -2
- package/src/render/utils.ts +47 -0
- package/src/types.ts +11 -0
package/dist/react.js
CHANGED
|
@@ -3115,6 +3115,7 @@ var EDGE_HEADS = [
|
|
|
3115
3115
|
];
|
|
3116
3116
|
var EDGE_HEAD_FILL_DEFAULT = "solid";
|
|
3117
3117
|
var EDGE_HEAD_FILLS = ["solid", "hollow"];
|
|
3118
|
+
var EDGE_HEAD_MARKER_SIZE = { \u65E2\u5B9A: 14, \u5C0F: 10 };
|
|
3118
3119
|
var RELATION_FOCUS_DEFAULT = "off";
|
|
3119
3120
|
var EDGE_REVEAL_DEFAULT = "phase";
|
|
3120
3121
|
|
|
@@ -4417,6 +4418,32 @@ function shrinkPathEnd(d, shrinkPx) {
|
|
|
4417
4418
|
tokens[tokens.length - 1] = newEndY.toFixed(1);
|
|
4418
4419
|
return tokens.join(" ");
|
|
4419
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
|
+
}
|
|
4420
4447
|
function pathSubpath(d, progress) {
|
|
4421
4448
|
if (progress >= 1) return d;
|
|
4422
4449
|
if (progress <= 0) {
|
|
@@ -10184,10 +10211,12 @@ function recomputeContainedLanes(lanes, nodes) {
|
|
|
10184
10211
|
}
|
|
10185
10212
|
|
|
10186
10213
|
// src/layout/head-label.ts
|
|
10187
|
-
var \u7AEF\u306E\u5B57\u3092\u623B\u3059\u8DDD\u96E2 = 22;
|
|
10188
|
-
var \u7AEF\u306E\u5B57\u3068\u7DDA\u306E\u9699\u9593 = 8;
|
|
10189
10214
|
var \u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055 = EDGE_LABEL_TEXT.sub.fontSize;
|
|
10190
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 = Math.round(\u7BB1\u306E\u9AD8\u3055 / 2);
|
|
10217
|
+
var \u7AEF\u306E\u5370\u306E\u5F35\u308A\u51FA\u3057 = EDGE_HEAD_MARKER_SIZE.\u65E2\u5B9A / 2;
|
|
10218
|
+
var \u7AEF\u306E\u5B57\u3092\u623B\u3059\u8DDD\u96E2 = EDGE_HEAD_MARKER_SIZE.\u65E2\u5B9A + \u7AEF\u306E\u5B57\u3068\u5370\u306E\u4F59\u767D;
|
|
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;
|
|
10191
10220
|
var BASELINE_RATIO = 0.8;
|
|
10192
10221
|
var \u4E21\u7AEF\u306E\u5B57\u306E\u9593 = \u7AEF\u306E\u5B57\u3092\u623B\u3059\u8DDD\u96E2 * 2;
|
|
10193
10222
|
function \u7AEF\u306E\u5B57\u306B\u8981\u308B\u7DDA\u306E\u9577\u3055(edge) {
|
|
@@ -11499,7 +11528,8 @@ function CdlEdgeView({
|
|
|
11499
11528
|
const isPassThrough = isDotted && Boolean(edge.dThrough);
|
|
11500
11529
|
const lineDotsD = isDotted ? shrinkPathEnd(edge.d, 12) : edge.d;
|
|
11501
11530
|
const glowPathId = `cdl-edge-${edge.id}`;
|
|
11502
|
-
const
|
|
11531
|
+
const \u901A\u308A\u9053\u3092\u7E2E\u3081\u308B = EDGE_HEAD_MARKER_SIZE.\u65E2\u5B9A + \u8D70\u308B\u4E38\u306E\u534A\u5F84.\u82AF;
|
|
11532
|
+
const glowPathD = shrinkPathStart(shrinkPathEnd(edge.d, \u901A\u308A\u9053\u3092\u7E2E\u3081\u308B), \u901A\u308A\u9053\u3092\u7E2E\u3081\u308B);
|
|
11503
11533
|
return /* @__PURE__ */ jsxs(
|
|
11504
11534
|
"g",
|
|
11505
11535
|
{
|
|
@@ -11562,7 +11592,7 @@ function CdlEdgeView({
|
|
|
11562
11592
|
}
|
|
11563
11593
|
),
|
|
11564
11594
|
flowing && !isDotted && /* @__PURE__ */ jsxs("g", { "data-cdl-role": "edge-flow", children: [
|
|
11565
|
-
/* @__PURE__ */ jsx("path", { id: glowPathId, d:
|
|
11595
|
+
/* @__PURE__ */ jsx("path", { id: glowPathId, d: glowPathD, fill: "none", stroke: "none" }),
|
|
11566
11596
|
/* @__PURE__ */ jsx(EdgeGlowCircles, { color, edgeId: edge.id })
|
|
11567
11597
|
] })
|
|
11568
11598
|
]
|
|
@@ -11606,10 +11636,11 @@ function SolidEdgePath({
|
|
|
11606
11636
|
}
|
|
11607
11637
|
);
|
|
11608
11638
|
}
|
|
11639
|
+
var \u8D70\u308B\u4E38\u306E\u534A\u5F84 = { \u5916: 28, \u4E2D: 18, \u82AF: 11 };
|
|
11609
11640
|
function EdgeGlowCircles({ color, edgeId }) {
|
|
11610
11641
|
const ref = `#cdl-edge-${edgeId}`;
|
|
11611
11642
|
return /* @__PURE__ */ jsxs("g", { "data-cdl-particle": edgeId, "data-cdl-particle-path-ref": ref, children: [
|
|
11612
|
-
/* @__PURE__ */ jsxs("circle", { r:
|
|
11643
|
+
/* @__PURE__ */ jsxs("circle", { r: \u8D70\u308B\u4E38\u306E\u534A\u5F84.\u5916, fill: color, children: [
|
|
11613
11644
|
/* @__PURE__ */ jsx("animateMotion", { dur: "2s", begin: "-1s", repeatCount: "indefinite", rotate: "auto", children: /* @__PURE__ */ jsx("mpath", { href: ref }) }),
|
|
11614
11645
|
/* @__PURE__ */ jsx(
|
|
11615
11646
|
"animate",
|
|
@@ -11623,7 +11654,7 @@ function EdgeGlowCircles({ color, edgeId }) {
|
|
|
11623
11654
|
}
|
|
11624
11655
|
)
|
|
11625
11656
|
] }),
|
|
11626
|
-
/* @__PURE__ */ jsxs("circle", { r:
|
|
11657
|
+
/* @__PURE__ */ jsxs("circle", { r: \u8D70\u308B\u4E38\u306E\u534A\u5F84.\u4E2D, fill: color, children: [
|
|
11627
11658
|
/* @__PURE__ */ jsx("animateMotion", { dur: "2s", begin: "-1s", repeatCount: "indefinite", rotate: "auto", children: /* @__PURE__ */ jsx("mpath", { href: ref }) }),
|
|
11628
11659
|
/* @__PURE__ */ jsx(
|
|
11629
11660
|
"animate",
|
|
@@ -11637,7 +11668,7 @@ function EdgeGlowCircles({ color, edgeId }) {
|
|
|
11637
11668
|
}
|
|
11638
11669
|
)
|
|
11639
11670
|
] }),
|
|
11640
|
-
/* @__PURE__ */ jsxs("circle", { r:
|
|
11671
|
+
/* @__PURE__ */ jsxs("circle", { r: \u8D70\u308B\u4E38\u306E\u534A\u5F84.\u82AF, fill: color, children: [
|
|
11641
11672
|
/* @__PURE__ */ jsx("animateMotion", { dur: "2s", begin: "-1s", repeatCount: "indefinite", rotate: "auto", children: /* @__PURE__ */ jsx("mpath", { href: ref }) }),
|
|
11642
11673
|
/* @__PURE__ */ jsx(
|
|
11643
11674
|
"animate",
|
|
@@ -20675,8 +20706,8 @@ function CdlStage({
|
|
|
20675
20706
|
}
|
|
20676
20707
|
return Object.entries(TONE).flatMap(
|
|
20677
20708
|
([tone, color]) => [
|
|
20678
|
-
[false,
|
|
20679
|
-
[true,
|
|
20709
|
+
[false, EDGE_HEAD_MARKER_SIZE.\u65E2\u5B9A],
|
|
20710
|
+
[true, EDGE_HEAD_MARKER_SIZE.\u5C0F]
|
|
20680
20711
|
].flatMap(
|
|
20681
20712
|
([small, size]) => EDGE_HEADS.flatMap(
|
|
20682
20713
|
(head) => EDGE_HEAD_FILLS.map((fill) => {
|