@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.cjs
CHANGED
|
@@ -3117,6 +3117,7 @@ var EDGE_HEADS = [
|
|
|
3117
3117
|
];
|
|
3118
3118
|
var EDGE_HEAD_FILL_DEFAULT = "solid";
|
|
3119
3119
|
var EDGE_HEAD_FILLS = ["solid", "hollow"];
|
|
3120
|
+
var EDGE_HEAD_MARKER_SIZE = { \u65E2\u5B9A: 14, \u5C0F: 10 };
|
|
3120
3121
|
var RELATION_FOCUS_DEFAULT = "off";
|
|
3121
3122
|
var EDGE_REVEAL_DEFAULT = "phase";
|
|
3122
3123
|
|
|
@@ -4419,6 +4420,32 @@ function shrinkPathEnd(d, shrinkPx) {
|
|
|
4419
4420
|
tokens[tokens.length - 1] = newEndY.toFixed(1);
|
|
4420
4421
|
return tokens.join(" ");
|
|
4421
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
|
+
}
|
|
4422
4449
|
function pathSubpath(d, progress) {
|
|
4423
4450
|
if (progress >= 1) return d;
|
|
4424
4451
|
if (progress <= 0) {
|
|
@@ -10186,10 +10213,12 @@ function recomputeContainedLanes(lanes, nodes) {
|
|
|
10186
10213
|
}
|
|
10187
10214
|
|
|
10188
10215
|
// src/layout/head-label.ts
|
|
10189
|
-
var \u7AEF\u306E\u5B57\u3092\u623B\u3059\u8DDD\u96E2 = 22;
|
|
10190
|
-
var \u7AEF\u306E\u5B57\u3068\u7DDA\u306E\u9699\u9593 = 8;
|
|
10191
10216
|
var \u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055 = EDGE_LABEL_TEXT.sub.fontSize;
|
|
10192
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);
|
|
10219
|
+
var \u7AEF\u306E\u5370\u306E\u5F35\u308A\u51FA\u3057 = EDGE_HEAD_MARKER_SIZE.\u65E2\u5B9A / 2;
|
|
10220
|
+
var \u7AEF\u306E\u5B57\u3092\u623B\u3059\u8DDD\u96E2 = EDGE_HEAD_MARKER_SIZE.\u65E2\u5B9A + \u7AEF\u306E\u5B57\u3068\u5370\u306E\u4F59\u767D;
|
|
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;
|
|
10193
10222
|
var BASELINE_RATIO = 0.8;
|
|
10194
10223
|
var \u4E21\u7AEF\u306E\u5B57\u306E\u9593 = \u7AEF\u306E\u5B57\u3092\u623B\u3059\u8DDD\u96E2 * 2;
|
|
10195
10224
|
function \u7AEF\u306E\u5B57\u306B\u8981\u308B\u7DDA\u306E\u9577\u3055(edge) {
|
|
@@ -11501,7 +11530,8 @@ function CdlEdgeView({
|
|
|
11501
11530
|
const isPassThrough = isDotted && Boolean(edge.dThrough);
|
|
11502
11531
|
const lineDotsD = isDotted ? shrinkPathEnd(edge.d, 12) : edge.d;
|
|
11503
11532
|
const glowPathId = `cdl-edge-${edge.id}`;
|
|
11504
|
-
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);
|
|
11505
11535
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
11506
11536
|
"g",
|
|
11507
11537
|
{
|
|
@@ -11564,7 +11594,7 @@ function CdlEdgeView({
|
|
|
11564
11594
|
}
|
|
11565
11595
|
),
|
|
11566
11596
|
flowing && !isDotted && /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-role": "edge-flow", children: [
|
|
11567
|
-
/* @__PURE__ */ jsxRuntime.jsx("path", { id: glowPathId, d:
|
|
11597
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { id: glowPathId, d: glowPathD, fill: "none", stroke: "none" }),
|
|
11568
11598
|
/* @__PURE__ */ jsxRuntime.jsx(EdgeGlowCircles, { color, edgeId: edge.id })
|
|
11569
11599
|
] })
|
|
11570
11600
|
]
|
|
@@ -11608,10 +11638,11 @@ function SolidEdgePath({
|
|
|
11608
11638
|
}
|
|
11609
11639
|
);
|
|
11610
11640
|
}
|
|
11641
|
+
var \u8D70\u308B\u4E38\u306E\u534A\u5F84 = { \u5916: 28, \u4E2D: 18, \u82AF: 11 };
|
|
11611
11642
|
function EdgeGlowCircles({ color, edgeId }) {
|
|
11612
11643
|
const ref = `#cdl-edge-${edgeId}`;
|
|
11613
11644
|
return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-particle": edgeId, "data-cdl-particle-path-ref": ref, children: [
|
|
11614
|
-
/* @__PURE__ */ jsxRuntime.jsxs("circle", { r:
|
|
11645
|
+
/* @__PURE__ */ jsxRuntime.jsxs("circle", { r: \u8D70\u308B\u4E38\u306E\u534A\u5F84.\u5916, fill: color, children: [
|
|
11615
11646
|
/* @__PURE__ */ jsxRuntime.jsx("animateMotion", { dur: "2s", begin: "-1s", repeatCount: "indefinite", rotate: "auto", children: /* @__PURE__ */ jsxRuntime.jsx("mpath", { href: ref }) }),
|
|
11616
11647
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11617
11648
|
"animate",
|
|
@@ -11625,7 +11656,7 @@ function EdgeGlowCircles({ color, edgeId }) {
|
|
|
11625
11656
|
}
|
|
11626
11657
|
)
|
|
11627
11658
|
] }),
|
|
11628
|
-
/* @__PURE__ */ jsxRuntime.jsxs("circle", { r:
|
|
11659
|
+
/* @__PURE__ */ jsxRuntime.jsxs("circle", { r: \u8D70\u308B\u4E38\u306E\u534A\u5F84.\u4E2D, fill: color, children: [
|
|
11629
11660
|
/* @__PURE__ */ jsxRuntime.jsx("animateMotion", { dur: "2s", begin: "-1s", repeatCount: "indefinite", rotate: "auto", children: /* @__PURE__ */ jsxRuntime.jsx("mpath", { href: ref }) }),
|
|
11630
11661
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11631
11662
|
"animate",
|
|
@@ -11639,7 +11670,7 @@ function EdgeGlowCircles({ color, edgeId }) {
|
|
|
11639
11670
|
}
|
|
11640
11671
|
)
|
|
11641
11672
|
] }),
|
|
11642
|
-
/* @__PURE__ */ jsxRuntime.jsxs("circle", { r:
|
|
11673
|
+
/* @__PURE__ */ jsxRuntime.jsxs("circle", { r: \u8D70\u308B\u4E38\u306E\u534A\u5F84.\u82AF, fill: color, children: [
|
|
11643
11674
|
/* @__PURE__ */ jsxRuntime.jsx("animateMotion", { dur: "2s", begin: "-1s", repeatCount: "indefinite", rotate: "auto", children: /* @__PURE__ */ jsxRuntime.jsx("mpath", { href: ref }) }),
|
|
11644
11675
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11645
11676
|
"animate",
|
|
@@ -20677,8 +20708,8 @@ function CdlStage({
|
|
|
20677
20708
|
}
|
|
20678
20709
|
return Object.entries(TONE).flatMap(
|
|
20679
20710
|
([tone, color]) => [
|
|
20680
|
-
[false,
|
|
20681
|
-
[true,
|
|
20711
|
+
[false, EDGE_HEAD_MARKER_SIZE.\u65E2\u5B9A],
|
|
20712
|
+
[true, EDGE_HEAD_MARKER_SIZE.\u5C0F]
|
|
20682
20713
|
].flatMap(
|
|
20683
20714
|
([small, size]) => EDGE_HEADS.flatMap(
|
|
20684
20715
|
(head) => EDGE_HEAD_FILLS.map((fill) => {
|