@cardenelabs/cdl 0.78.0 → 0.80.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 +54 -1
- package/dist/index.cjs +139 -39
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +139 -39
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +139 -39
- package/dist/react.cjs.map +1 -1
- package/dist/react.js +139 -39
- package/dist/react.js.map +1 -1
- package/package.json +1 -1
- package/src/layout/collisions.ts +185 -41
- package/src/render/nodes.tsx +16 -3
package/dist/index.js
CHANGED
|
@@ -12796,72 +12796,169 @@ function collectBBoxes(lanes, nodes, edges) {
|
|
|
12796
12796
|
});
|
|
12797
12797
|
}
|
|
12798
12798
|
for (const e of edges) {
|
|
12799
|
-
const
|
|
12800
|
-
if (
|
|
12801
|
-
const xs = points.map((p) => p.x);
|
|
12802
|
-
const ys = points.map((p) => p.y);
|
|
12803
|
-
const minX = Math.min(...xs);
|
|
12804
|
-
const maxX = Math.max(...xs);
|
|
12805
|
-
const minY = Math.min(...ys);
|
|
12806
|
-
const maxY = Math.max(...ys);
|
|
12799
|
+
const box = pathBBox(e.d);
|
|
12800
|
+
if (!box) continue;
|
|
12807
12801
|
out.push({
|
|
12808
12802
|
kind: "edge-path",
|
|
12809
12803
|
id: e.id,
|
|
12810
|
-
x: minX - 2,
|
|
12811
|
-
y: minY - 2,
|
|
12812
|
-
w: maxX - minX + 4,
|
|
12813
|
-
h: maxY - minY + 4
|
|
12804
|
+
x: box.minX - 2,
|
|
12805
|
+
y: box.minY - 2,
|
|
12806
|
+
w: box.maxX - box.minX + 4,
|
|
12807
|
+
h: box.maxY - box.minY + 4
|
|
12814
12808
|
});
|
|
12815
12809
|
}
|
|
12816
12810
|
return out;
|
|
12817
12811
|
}
|
|
12812
|
+
var PATH_ARITY = {
|
|
12813
|
+
M: 2,
|
|
12814
|
+
L: 2,
|
|
12815
|
+
H: 1,
|
|
12816
|
+
V: 1,
|
|
12817
|
+
C: 6,
|
|
12818
|
+
S: 4,
|
|
12819
|
+
Q: 4,
|
|
12820
|
+
T: 2,
|
|
12821
|
+
A: 7,
|
|
12822
|
+
Z: 0
|
|
12823
|
+
};
|
|
12824
|
+
function isRelative(cmd) {
|
|
12825
|
+
return cmd >= "a" && cmd <= "z";
|
|
12826
|
+
}
|
|
12827
|
+
function coordSlots(cmd) {
|
|
12828
|
+
switch (cmd.toUpperCase()) {
|
|
12829
|
+
case "M":
|
|
12830
|
+
case "L":
|
|
12831
|
+
case "T":
|
|
12832
|
+
return [[0, 1]];
|
|
12833
|
+
case "H":
|
|
12834
|
+
return [[0, -1]];
|
|
12835
|
+
case "V":
|
|
12836
|
+
return [[-1, 0]];
|
|
12837
|
+
case "Q":
|
|
12838
|
+
case "S":
|
|
12839
|
+
return [[0, 1], [2, 3]];
|
|
12840
|
+
case "C":
|
|
12841
|
+
return [[0, 1], [2, 3], [4, 5]];
|
|
12842
|
+
case "A":
|
|
12843
|
+
return [[5, 6]];
|
|
12844
|
+
default:
|
|
12845
|
+
return [];
|
|
12846
|
+
}
|
|
12847
|
+
}
|
|
12848
|
+
function parsePathCommands(d) {
|
|
12849
|
+
const out = [];
|
|
12850
|
+
const commandRegex = /([MmLlHhVvCcSsQqTtAaZz])([^MmLlHhVvCcSsQqTtAaZz]*)/g;
|
|
12851
|
+
let m;
|
|
12852
|
+
while ((m = commandRegex.exec(d)) !== null) {
|
|
12853
|
+
const cmd = m[1];
|
|
12854
|
+
const arity = PATH_ARITY[cmd.toUpperCase()] ?? 0;
|
|
12855
|
+
if (arity === 0) {
|
|
12856
|
+
out.push({ cmd, args: [] });
|
|
12857
|
+
continue;
|
|
12858
|
+
}
|
|
12859
|
+
const nums = (m[2] ?? "").trim().split(/[\s,]+/).filter(Boolean).map(parseFloat);
|
|
12860
|
+
for (let i = 0; i + arity <= nums.length; i += arity) {
|
|
12861
|
+
const args = nums.slice(i, i + arity);
|
|
12862
|
+
if (!args.every(Number.isFinite)) break;
|
|
12863
|
+
const \u7E70\u308A\u8FD4\u3057 = i > 0;
|
|
12864
|
+
const c = \u7E70\u308A\u8FD4\u3057 && cmd === "M" ? "L" : \u7E70\u308A\u8FD4\u3057 && cmd === "m" ? "l" : cmd;
|
|
12865
|
+
out.push({ cmd: c, args });
|
|
12866
|
+
}
|
|
12867
|
+
}
|
|
12868
|
+
return out;
|
|
12869
|
+
}
|
|
12818
12870
|
function extractPathPoints(d) {
|
|
12819
12871
|
const out = [];
|
|
12820
|
-
|
|
12821
|
-
|
|
12822
|
-
|
|
12823
|
-
const
|
|
12824
|
-
|
|
12872
|
+
let cur = { x: 0, y: 0 };
|
|
12873
|
+
let started = false;
|
|
12874
|
+
for (const { cmd, args } of parsePathCommands(d)) {
|
|
12875
|
+
const \u76F8\u5BFE = started && isRelative(cmd);
|
|
12876
|
+
const \u57FA\u70B9 = cur;
|
|
12877
|
+
for (const [xi, yi] of coordSlots(cmd)) {
|
|
12878
|
+
const x = xi >= 0 ? \u76F8\u5BFE ? \u57FA\u70B9.x + args[xi] : args[xi] : \u57FA\u70B9.x;
|
|
12879
|
+
const y = yi >= 0 ? \u76F8\u5BFE ? \u57FA\u70B9.y + args[yi] : args[yi] : \u57FA\u70B9.y;
|
|
12825
12880
|
out.push({ x, y });
|
|
12881
|
+
cur = { x, y };
|
|
12826
12882
|
}
|
|
12883
|
+
started = true;
|
|
12827
12884
|
}
|
|
12828
12885
|
return out;
|
|
12829
12886
|
}
|
|
12887
|
+
function pathBBox(d) {
|
|
12888
|
+
let minX = Infinity;
|
|
12889
|
+
let minY = Infinity;
|
|
12890
|
+
let maxX = -Infinity;
|
|
12891
|
+
let maxY = -Infinity;
|
|
12892
|
+
let \u70B9\u3042\u308A = false;
|
|
12893
|
+
const \u53D6\u308B = (x, y) => {
|
|
12894
|
+
minX = Math.min(minX, x);
|
|
12895
|
+
minY = Math.min(minY, y);
|
|
12896
|
+
maxX = Math.max(maxX, x);
|
|
12897
|
+
maxY = Math.max(maxY, y);
|
|
12898
|
+
\u70B9\u3042\u308A = true;
|
|
12899
|
+
};
|
|
12900
|
+
let cur = { x: 0, y: 0 };
|
|
12901
|
+
let started = false;
|
|
12902
|
+
for (const { cmd, args } of parsePathCommands(d)) {
|
|
12903
|
+
const \u76F8\u5BFE = started && isRelative(cmd);
|
|
12904
|
+
const \u57FA\u70B9 = cur;
|
|
12905
|
+
for (const [xi, yi] of coordSlots(cmd)) {
|
|
12906
|
+
const x = xi >= 0 ? \u76F8\u5BFE ? \u57FA\u70B9.x + args[xi] : args[xi] : \u57FA\u70B9.x;
|
|
12907
|
+
const y = yi >= 0 ? \u76F8\u5BFE ? \u57FA\u70B9.y + args[yi] : args[yi] : \u57FA\u70B9.y;
|
|
12908
|
+
\u53D6\u308B(x, y);
|
|
12909
|
+
cur = { x, y };
|
|
12910
|
+
}
|
|
12911
|
+
if (cmd.toUpperCase() === "A") {
|
|
12912
|
+
const r = Math.max(Math.abs(args[0]), Math.abs(args[1]));
|
|
12913
|
+
const \u5F26 = Math.hypot(cur.x - \u57FA\u70B9.x, cur.y - \u57FA\u70B9.y);
|
|
12914
|
+
const \u534A\u5F26 = Math.min(\u5F26 / 2, r);
|
|
12915
|
+
const \u4F59 = Math.sqrt(Math.max(0, r * r - \u534A\u5F26 * \u534A\u5F26));
|
|
12916
|
+
const \u81A8\u3089\u307F = args[3] !== 0 ? r + \u4F59 : r - \u4F59;
|
|
12917
|
+
\u53D6\u308B(Math.min(\u57FA\u70B9.x, cur.x) - \u81A8\u3089\u307F, Math.min(\u57FA\u70B9.y, cur.y) - \u81A8\u3089\u307F);
|
|
12918
|
+
\u53D6\u308B(Math.max(\u57FA\u70B9.x, cur.x) + \u81A8\u3089\u307F, Math.max(\u57FA\u70B9.y, cur.y) + \u81A8\u3089\u307F);
|
|
12919
|
+
}
|
|
12920
|
+
started = true;
|
|
12921
|
+
}
|
|
12922
|
+
return \u70B9\u3042\u308A ? { minX, minY, maxX, maxY } : null;
|
|
12923
|
+
}
|
|
12830
12924
|
function rebuildPathD(d, map) {
|
|
12831
|
-
const commandRegex = /([MLCQZmlcqz])([^MLCQZmlcqz]*)/g;
|
|
12832
12925
|
let out = "";
|
|
12833
12926
|
let idx = 0;
|
|
12834
|
-
let
|
|
12835
|
-
|
|
12836
|
-
|
|
12837
|
-
const
|
|
12838
|
-
if (
|
|
12927
|
+
let cur = { x: 0, y: 0 };
|
|
12928
|
+
let started = false;
|
|
12929
|
+
for (const { cmd, args } of parsePathCommands(d)) {
|
|
12930
|
+
const slots = coordSlots(cmd);
|
|
12931
|
+
if (slots.length === 0) {
|
|
12839
12932
|
out += cmd + " ";
|
|
12933
|
+
started = true;
|
|
12840
12934
|
continue;
|
|
12841
12935
|
}
|
|
12842
|
-
const
|
|
12843
|
-
const
|
|
12844
|
-
|
|
12845
|
-
|
|
12846
|
-
|
|
12936
|
+
const \u76F8\u5BFE = started && isRelative(cmd);
|
|
12937
|
+
const \u57FA\u70B9 = cur;
|
|
12938
|
+
const \u6B21\u306E\u5F15\u6570 = args.slice();
|
|
12939
|
+
for (const [xi, yi] of slots) {
|
|
12940
|
+
const x = xi >= 0 ? \u76F8\u5BFE ? \u57FA\u70B9.x + args[xi] : args[xi] : \u57FA\u70B9.x;
|
|
12941
|
+
const y = yi >= 0 ? \u76F8\u5BFE ? \u57FA\u70B9.y + args[yi] : args[yi] : \u57FA\u70B9.y;
|
|
12942
|
+
const [nx, ny] = map(x, y, idx);
|
|
12943
|
+
if (!\u76F8\u5BFE) {
|
|
12944
|
+
if (xi >= 0) \u6B21\u306E\u5F15\u6570[xi] = nx;
|
|
12945
|
+
if (yi >= 0) \u6B21\u306E\u5F15\u6570[yi] = ny;
|
|
12946
|
+
}
|
|
12847
12947
|
idx += 1;
|
|
12948
|
+
cur = { x, y };
|
|
12848
12949
|
}
|
|
12849
|
-
out += cmd + " " +
|
|
12950
|
+
out += cmd + " " + \u6B21\u306E\u5F15\u6570.join(" ") + " ";
|
|
12951
|
+
started = true;
|
|
12850
12952
|
}
|
|
12851
12953
|
return out.trim();
|
|
12852
12954
|
}
|
|
12853
12955
|
function cornerBoundaryIndices(d) {
|
|
12854
|
-
const commandRegex = /([MLCQZmlcqz])([^MLCQZmlcqz]*)/g;
|
|
12855
12956
|
let idx = 0;
|
|
12856
12957
|
let firstCornerEnd = -1;
|
|
12857
12958
|
let lastCornerStart = -1;
|
|
12858
|
-
|
|
12859
|
-
|
|
12860
|
-
|
|
12861
|
-
const argsStr = (m[2] ?? "").trim();
|
|
12862
|
-
if (argsStr === "" || cmd === "Z" || cmd === "z") continue;
|
|
12863
|
-
const pairs = argsStr.split(/[\s,]+/).filter(Boolean).length >> 1;
|
|
12864
|
-
if ((cmd === "Q" || cmd === "q") && pairs >= 2) {
|
|
12959
|
+
for (const { cmd } of parsePathCommands(d)) {
|
|
12960
|
+
const pairs = coordSlots(cmd).length;
|
|
12961
|
+
if (cmd.toUpperCase() === "Q" && pairs >= 2) {
|
|
12865
12962
|
if (firstCornerEnd < 0) firstCornerEnd = idx + 1;
|
|
12866
12963
|
lastCornerStart = idx;
|
|
12867
12964
|
}
|
|
@@ -32009,6 +32106,10 @@ function CdlNodeView({
|
|
|
32009
32106
|
const offsetX = node.renderOffsetX !== void 0 ? resolveNumericAttr(node.renderOffsetX, stateValues, 0) : 0;
|
|
32010
32107
|
const offsetY = node.renderOffsetY !== void 0 ? resolveNumericAttr(node.renderOffsetY, stateValues, 0) : 0;
|
|
32011
32108
|
const hasOffset = offsetX !== 0 || offsetY !== 0;
|
|
32109
|
+
const \u7BB1\u306Estyle = {
|
|
32110
|
+
transition: "opacity 120ms ease-out, transform 200ms ease-out",
|
|
32111
|
+
...\u95A2\u4FC2\u306E\u53D7\u3051\u53E3 === void 0 ? {} : { cursor: "pointer" }
|
|
32112
|
+
};
|
|
32012
32113
|
return /* @__PURE__ */ jsxs(
|
|
32013
32114
|
"g",
|
|
32014
32115
|
{
|
|
@@ -32030,7 +32131,6 @@ function CdlNodeView({
|
|
|
32030
32131
|
role: "button",
|
|
32031
32132
|
tabIndex: 0,
|
|
32032
32133
|
"aria-pressed": \u95A2\u4FC2\u306E\u53D7\u3051\u53E3.\u7126\u70B9 === node.id,
|
|
32033
|
-
style: { cursor: "pointer" },
|
|
32034
32134
|
onPointerEnter: () => \u95A2\u4FC2\u306E\u53D7\u3051\u53E3.\u89E6\u308C\u305F(node.id),
|
|
32035
32135
|
onPointerLeave: () => \u95A2\u4FC2\u306E\u53D7\u3051\u53E3.\u96E2\u308C\u305F(),
|
|
32036
32136
|
onFocus: () => \u95A2\u4FC2\u306E\u53D7\u3051\u53E3.\u89E6\u308C\u305F(node.id),
|
|
@@ -32045,7 +32145,7 @@ function CdlNodeView({
|
|
|
32045
32145
|
transform: hasOffset ? `translate(${offsetX}, ${offsetY})` : void 0,
|
|
32046
32146
|
opacity: boundOpacity,
|
|
32047
32147
|
"data-cdl-tone": node.tone,
|
|
32048
|
-
style:
|
|
32148
|
+
style: \u7BB1\u306Estyle,
|
|
32049
32149
|
children: [
|
|
32050
32150
|
/* @__PURE__ */ jsx(
|
|
32051
32151
|
"rect",
|