@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/index.js
CHANGED
|
@@ -15437,6 +15437,32 @@ function shrinkPathEnd(d, shrinkPx) {
|
|
|
15437
15437
|
tokens[tokens.length - 1] = newEndY.toFixed(1);
|
|
15438
15438
|
return tokens.join(" ");
|
|
15439
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
|
+
}
|
|
15440
15466
|
function pathSubpath(d, progress) {
|
|
15441
15467
|
if (progress >= 1) return d;
|
|
15442
15468
|
if (progress <= 0) {
|
|
@@ -21566,12 +21592,12 @@ function recomputeContainedLanes(lanes, nodes) {
|
|
|
21566
21592
|
}
|
|
21567
21593
|
|
|
21568
21594
|
// src/layout/head-label.ts
|
|
21569
|
-
var \u7AEF\u306E\u5B57\
|
|
21595
|
+
var \u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055 = EDGE_LABEL_TEXT.sub.fontSize;
|
|
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);
|
|
21570
21598
|
var \u7AEF\u306E\u5370\u306E\u5F35\u308A\u51FA\u3057 = EDGE_HEAD_MARKER_SIZE.\u65E2\u5B9A / 2;
|
|
21571
21599
|
var \u7AEF\u306E\u5B57\u3092\u623B\u3059\u8DDD\u96E2 = EDGE_HEAD_MARKER_SIZE.\u65E2\u5B9A + \u7AEF\u306E\u5B57\u3068\u5370\u306E\u4F59\u767D;
|
|
21572
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;
|
|
21573
|
-
var \u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055 = EDGE_LABEL_TEXT.sub.fontSize;
|
|
21574
|
-
var \u7BB1\u306E\u9AD8\u3055 = Math.round(\u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055 * 1.2);
|
|
21575
21601
|
var BASELINE_RATIO = 0.8;
|
|
21576
21602
|
var \u4E21\u7AEF\u306E\u5B57\u306E\u9593 = \u7AEF\u306E\u5B57\u3092\u623B\u3059\u8DDD\u96E2 * 2;
|
|
21577
21603
|
function \u7AEF\u306E\u5B57\u306B\u8981\u308B\u7DDA\u306E\u9577\u3055(edge) {
|
|
@@ -24098,7 +24124,8 @@ function CdlEdgeView({
|
|
|
24098
24124
|
const isPassThrough = isDotted && Boolean(edge.dThrough);
|
|
24099
24125
|
const lineDotsD = isDotted ? shrinkPathEnd(edge.d, 12) : edge.d;
|
|
24100
24126
|
const glowPathId = `cdl-edge-${edge.id}`;
|
|
24101
|
-
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);
|
|
24102
24129
|
return /* @__PURE__ */ jsxs(
|
|
24103
24130
|
"g",
|
|
24104
24131
|
{
|
|
@@ -24161,7 +24188,7 @@ function CdlEdgeView({
|
|
|
24161
24188
|
}
|
|
24162
24189
|
),
|
|
24163
24190
|
flowing && !isDotted && /* @__PURE__ */ jsxs("g", { "data-cdl-role": "edge-flow", children: [
|
|
24164
|
-
/* @__PURE__ */ jsx("path", { id: glowPathId, d:
|
|
24191
|
+
/* @__PURE__ */ jsx("path", { id: glowPathId, d: glowPathD, fill: "none", stroke: "none" }),
|
|
24165
24192
|
/* @__PURE__ */ jsx(EdgeGlowCircles, { color, edgeId: edge.id })
|
|
24166
24193
|
] })
|
|
24167
24194
|
]
|
|
@@ -24205,10 +24232,11 @@ function SolidEdgePath({
|
|
|
24205
24232
|
}
|
|
24206
24233
|
);
|
|
24207
24234
|
}
|
|
24235
|
+
var \u8D70\u308B\u4E38\u306E\u534A\u5F84 = { \u5916: 28, \u4E2D: 18, \u82AF: 11 };
|
|
24208
24236
|
function EdgeGlowCircles({ color, edgeId }) {
|
|
24209
24237
|
const ref = `#cdl-edge-${edgeId}`;
|
|
24210
24238
|
return /* @__PURE__ */ jsxs("g", { "data-cdl-particle": edgeId, "data-cdl-particle-path-ref": ref, children: [
|
|
24211
|
-
/* @__PURE__ */ jsxs("circle", { r:
|
|
24239
|
+
/* @__PURE__ */ jsxs("circle", { r: \u8D70\u308B\u4E38\u306E\u534A\u5F84.\u5916, fill: color, children: [
|
|
24212
24240
|
/* @__PURE__ */ jsx("animateMotion", { dur: "2s", begin: "-1s", repeatCount: "indefinite", rotate: "auto", children: /* @__PURE__ */ jsx("mpath", { href: ref }) }),
|
|
24213
24241
|
/* @__PURE__ */ jsx(
|
|
24214
24242
|
"animate",
|
|
@@ -24222,7 +24250,7 @@ function EdgeGlowCircles({ color, edgeId }) {
|
|
|
24222
24250
|
}
|
|
24223
24251
|
)
|
|
24224
24252
|
] }),
|
|
24225
|
-
/* @__PURE__ */ jsxs("circle", { r:
|
|
24253
|
+
/* @__PURE__ */ jsxs("circle", { r: \u8D70\u308B\u4E38\u306E\u534A\u5F84.\u4E2D, fill: color, children: [
|
|
24226
24254
|
/* @__PURE__ */ jsx("animateMotion", { dur: "2s", begin: "-1s", repeatCount: "indefinite", rotate: "auto", children: /* @__PURE__ */ jsx("mpath", { href: ref }) }),
|
|
24227
24255
|
/* @__PURE__ */ jsx(
|
|
24228
24256
|
"animate",
|
|
@@ -24236,7 +24264,7 @@ function EdgeGlowCircles({ color, edgeId }) {
|
|
|
24236
24264
|
}
|
|
24237
24265
|
)
|
|
24238
24266
|
] }),
|
|
24239
|
-
/* @__PURE__ */ jsxs("circle", { r:
|
|
24267
|
+
/* @__PURE__ */ jsxs("circle", { r: \u8D70\u308B\u4E38\u306E\u534A\u5F84.\u82AF, fill: color, children: [
|
|
24240
24268
|
/* @__PURE__ */ jsx("animateMotion", { dur: "2s", begin: "-1s", repeatCount: "indefinite", rotate: "auto", children: /* @__PURE__ */ jsx("mpath", { href: ref }) }),
|
|
24241
24269
|
/* @__PURE__ */ jsx(
|
|
24242
24270
|
"animate",
|