@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/index.js
CHANGED
|
@@ -14691,6 +14691,7 @@ var EDGE_HEADS = [
|
|
|
14691
14691
|
];
|
|
14692
14692
|
var EDGE_HEAD_FILL_DEFAULT = "solid";
|
|
14693
14693
|
var EDGE_HEAD_FILLS = ["solid", "hollow"];
|
|
14694
|
+
var EDGE_HEAD_MARKER_SIZE = { \u65E2\u5B9A: 14, \u5C0F: 10 };
|
|
14694
14695
|
var EDGE_REVEALS = ["phase", "all"];
|
|
14695
14696
|
var RELATION_FOCUSES = ["off", "hover"];
|
|
14696
14697
|
var RELATION_FOCUS_DEFAULT = "off";
|
|
@@ -15436,6 +15437,32 @@ function shrinkPathEnd(d, shrinkPx) {
|
|
|
15436
15437
|
tokens[tokens.length - 1] = newEndY.toFixed(1);
|
|
15437
15438
|
return tokens.join(" ");
|
|
15438
15439
|
}
|
|
15440
|
+
function shrinkPathStart(d, shrinkPx) {
|
|
15441
|
+
const \u533A\u9593 = [...d.matchAll(/([MLCQZmlcqz])([^MLCQZmlcqz]*)/g)].map((m) => ({
|
|
15442
|
+
cmd: m[1],
|
|
15443
|
+
args: (m[2] ?? "").trim().split(/[\s,]+/).filter(Boolean).map(parseFloat)
|
|
15444
|
+
}));
|
|
15445
|
+
if (\u533A\u9593.length < 2) return d;
|
|
15446
|
+
const \u5148\u982D = \u533A\u9593[0];
|
|
15447
|
+
if (\u5148\u982D.cmd !== "M" || \u5148\u982D.args.length < 2) return d;
|
|
15448
|
+
const \u6B21 = \u533A\u9593[1];
|
|
15449
|
+
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;
|
|
15450
|
+
if (!\u5411\u304D\u5148 || !Number.isFinite(\u5411\u304D\u5148.x) || !Number.isFinite(\u5411\u304D\u5148.y)) return d;
|
|
15451
|
+
const x0 = \u5148\u982D.args[0];
|
|
15452
|
+
const y0 = \u5148\u982D.args[1];
|
|
15453
|
+
const dx = \u5411\u304D\u5148.x - x0;
|
|
15454
|
+
const dy = \u5411\u304D\u5148.y - y0;
|
|
15455
|
+
const len = Math.hypot(dx, dy);
|
|
15456
|
+
if (len < shrinkPx + 1) return d;
|
|
15457
|
+
const \u6BD4 = shrinkPx / len;
|
|
15458
|
+
const \u65B0x = x0 + dx * \u6BD4;
|
|
15459
|
+
const \u65B0y = y0 + dy * \u6BD4;
|
|
15460
|
+
const tokens = d.trim().split(/\s+/);
|
|
15461
|
+
if (tokens.length < 3) return d;
|
|
15462
|
+
tokens[1] = \u65B0x.toFixed(1);
|
|
15463
|
+
tokens[2] = \u65B0y.toFixed(1);
|
|
15464
|
+
return tokens.join(" ");
|
|
15465
|
+
}
|
|
15439
15466
|
function pathSubpath(d, progress) {
|
|
15440
15467
|
if (progress >= 1) return d;
|
|
15441
15468
|
if (progress <= 0) {
|
|
@@ -21565,10 +21592,12 @@ function recomputeContainedLanes(lanes, nodes) {
|
|
|
21565
21592
|
}
|
|
21566
21593
|
|
|
21567
21594
|
// src/layout/head-label.ts
|
|
21568
|
-
var \u7AEF\u306E\u5B57\u3092\u623B\u3059\u8DDD\u96E2 = 22;
|
|
21569
|
-
var \u7AEF\u306E\u5B57\u3068\u7DDA\u306E\u9699\u9593 = 8;
|
|
21570
21595
|
var \u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055 = EDGE_LABEL_TEXT.sub.fontSize;
|
|
21571
21596
|
var \u7BB1\u306E\u9AD8\u3055 = Math.round(\u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055 * 1.2);
|
|
21597
|
+
var \u7AEF\u306E\u5B57\u3068\u5370\u306E\u4F59\u767D = Math.round(\u7BB1\u306E\u9AD8\u3055 / 2);
|
|
21598
|
+
var \u7AEF\u306E\u5370\u306E\u5F35\u308A\u51FA\u3057 = EDGE_HEAD_MARKER_SIZE.\u65E2\u5B9A / 2;
|
|
21599
|
+
var \u7AEF\u306E\u5B57\u3092\u623B\u3059\u8DDD\u96E2 = EDGE_HEAD_MARKER_SIZE.\u65E2\u5B9A + \u7AEF\u306E\u5B57\u3068\u5370\u306E\u4F59\u767D;
|
|
21600
|
+
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;
|
|
21572
21601
|
var BASELINE_RATIO = 0.8;
|
|
21573
21602
|
var \u4E21\u7AEF\u306E\u5B57\u306E\u9593 = \u7AEF\u306E\u5B57\u3092\u623B\u3059\u8DDD\u96E2 * 2;
|
|
21574
21603
|
function \u7AEF\u306E\u5B57\u306B\u8981\u308B\u7DDA\u306E\u9577\u3055(edge) {
|
|
@@ -24095,7 +24124,8 @@ function CdlEdgeView({
|
|
|
24095
24124
|
const isPassThrough = isDotted && Boolean(edge.dThrough);
|
|
24096
24125
|
const lineDotsD = isDotted ? shrinkPathEnd(edge.d, 12) : edge.d;
|
|
24097
24126
|
const glowPathId = `cdl-edge-${edge.id}`;
|
|
24098
|
-
const
|
|
24127
|
+
const \u901A\u308A\u9053\u3092\u7E2E\u3081\u308B = EDGE_HEAD_MARKER_SIZE.\u65E2\u5B9A + \u8D70\u308B\u4E38\u306E\u534A\u5F84.\u82AF;
|
|
24128
|
+
const glowPathD = shrinkPathStart(shrinkPathEnd(edge.d, \u901A\u308A\u9053\u3092\u7E2E\u3081\u308B), \u901A\u308A\u9053\u3092\u7E2E\u3081\u308B);
|
|
24099
24129
|
return /* @__PURE__ */ jsxs(
|
|
24100
24130
|
"g",
|
|
24101
24131
|
{
|
|
@@ -24158,7 +24188,7 @@ function CdlEdgeView({
|
|
|
24158
24188
|
}
|
|
24159
24189
|
),
|
|
24160
24190
|
flowing && !isDotted && /* @__PURE__ */ jsxs("g", { "data-cdl-role": "edge-flow", children: [
|
|
24161
|
-
/* @__PURE__ */ jsx("path", { id: glowPathId, d:
|
|
24191
|
+
/* @__PURE__ */ jsx("path", { id: glowPathId, d: glowPathD, fill: "none", stroke: "none" }),
|
|
24162
24192
|
/* @__PURE__ */ jsx(EdgeGlowCircles, { color, edgeId: edge.id })
|
|
24163
24193
|
] })
|
|
24164
24194
|
]
|
|
@@ -24202,10 +24232,11 @@ function SolidEdgePath({
|
|
|
24202
24232
|
}
|
|
24203
24233
|
);
|
|
24204
24234
|
}
|
|
24235
|
+
var \u8D70\u308B\u4E38\u306E\u534A\u5F84 = { \u5916: 28, \u4E2D: 18, \u82AF: 11 };
|
|
24205
24236
|
function EdgeGlowCircles({ color, edgeId }) {
|
|
24206
24237
|
const ref = `#cdl-edge-${edgeId}`;
|
|
24207
24238
|
return /* @__PURE__ */ jsxs("g", { "data-cdl-particle": edgeId, "data-cdl-particle-path-ref": ref, children: [
|
|
24208
|
-
/* @__PURE__ */ jsxs("circle", { r:
|
|
24239
|
+
/* @__PURE__ */ jsxs("circle", { r: \u8D70\u308B\u4E38\u306E\u534A\u5F84.\u5916, fill: color, children: [
|
|
24209
24240
|
/* @__PURE__ */ jsx("animateMotion", { dur: "2s", begin: "-1s", repeatCount: "indefinite", rotate: "auto", children: /* @__PURE__ */ jsx("mpath", { href: ref }) }),
|
|
24210
24241
|
/* @__PURE__ */ jsx(
|
|
24211
24242
|
"animate",
|
|
@@ -24219,7 +24250,7 @@ function EdgeGlowCircles({ color, edgeId }) {
|
|
|
24219
24250
|
}
|
|
24220
24251
|
)
|
|
24221
24252
|
] }),
|
|
24222
|
-
/* @__PURE__ */ jsxs("circle", { r:
|
|
24253
|
+
/* @__PURE__ */ jsxs("circle", { r: \u8D70\u308B\u4E38\u306E\u534A\u5F84.\u4E2D, fill: color, children: [
|
|
24223
24254
|
/* @__PURE__ */ jsx("animateMotion", { dur: "2s", begin: "-1s", repeatCount: "indefinite", rotate: "auto", children: /* @__PURE__ */ jsx("mpath", { href: ref }) }),
|
|
24224
24255
|
/* @__PURE__ */ jsx(
|
|
24225
24256
|
"animate",
|
|
@@ -24233,7 +24264,7 @@ function EdgeGlowCircles({ color, edgeId }) {
|
|
|
24233
24264
|
}
|
|
24234
24265
|
)
|
|
24235
24266
|
] }),
|
|
24236
|
-
/* @__PURE__ */ jsxs("circle", { r:
|
|
24267
|
+
/* @__PURE__ */ jsxs("circle", { r: \u8D70\u308B\u4E38\u306E\u534A\u5F84.\u82AF, fill: color, children: [
|
|
24237
24268
|
/* @__PURE__ */ jsx("animateMotion", { dur: "2s", begin: "-1s", repeatCount: "indefinite", rotate: "auto", children: /* @__PURE__ */ jsx("mpath", { href: ref }) }),
|
|
24238
24269
|
/* @__PURE__ */ jsx(
|
|
24239
24270
|
"animate",
|
|
@@ -33274,8 +33305,8 @@ function CdlStage({
|
|
|
33274
33305
|
}
|
|
33275
33306
|
return Object.entries(TONE).flatMap(
|
|
33276
33307
|
([tone, color]) => [
|
|
33277
|
-
[false,
|
|
33278
|
-
[true,
|
|
33308
|
+
[false, EDGE_HEAD_MARKER_SIZE.\u65E2\u5B9A],
|
|
33309
|
+
[true, EDGE_HEAD_MARKER_SIZE.\u5C0F]
|
|
33279
33310
|
].flatMap(
|
|
33280
33311
|
([small, size]) => EDGE_HEADS.flatMap(
|
|
33281
33312
|
(head) => EDGE_HEAD_FILLS.map((fill) => {
|