@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/react.cjs
CHANGED
|
@@ -1381,72 +1381,169 @@ function collectBBoxes(lanes, nodes, edges) {
|
|
|
1381
1381
|
});
|
|
1382
1382
|
}
|
|
1383
1383
|
for (const e of edges) {
|
|
1384
|
-
const
|
|
1385
|
-
if (
|
|
1386
|
-
const xs = points.map((p) => p.x);
|
|
1387
|
-
const ys = points.map((p) => p.y);
|
|
1388
|
-
const minX = Math.min(...xs);
|
|
1389
|
-
const maxX = Math.max(...xs);
|
|
1390
|
-
const minY = Math.min(...ys);
|
|
1391
|
-
const maxY = Math.max(...ys);
|
|
1384
|
+
const box = pathBBox(e.d);
|
|
1385
|
+
if (!box) continue;
|
|
1392
1386
|
out.push({
|
|
1393
1387
|
kind: "edge-path",
|
|
1394
1388
|
id: e.id,
|
|
1395
|
-
x: minX - 2,
|
|
1396
|
-
y: minY - 2,
|
|
1397
|
-
w: maxX - minX + 4,
|
|
1398
|
-
h: maxY - minY + 4
|
|
1389
|
+
x: box.minX - 2,
|
|
1390
|
+
y: box.minY - 2,
|
|
1391
|
+
w: box.maxX - box.minX + 4,
|
|
1392
|
+
h: box.maxY - box.minY + 4
|
|
1399
1393
|
});
|
|
1400
1394
|
}
|
|
1401
1395
|
return out;
|
|
1402
1396
|
}
|
|
1397
|
+
var PATH_ARITY = {
|
|
1398
|
+
M: 2,
|
|
1399
|
+
L: 2,
|
|
1400
|
+
H: 1,
|
|
1401
|
+
V: 1,
|
|
1402
|
+
C: 6,
|
|
1403
|
+
S: 4,
|
|
1404
|
+
Q: 4,
|
|
1405
|
+
T: 2,
|
|
1406
|
+
A: 7,
|
|
1407
|
+
Z: 0
|
|
1408
|
+
};
|
|
1409
|
+
function isRelative(cmd) {
|
|
1410
|
+
return cmd >= "a" && cmd <= "z";
|
|
1411
|
+
}
|
|
1412
|
+
function coordSlots(cmd) {
|
|
1413
|
+
switch (cmd.toUpperCase()) {
|
|
1414
|
+
case "M":
|
|
1415
|
+
case "L":
|
|
1416
|
+
case "T":
|
|
1417
|
+
return [[0, 1]];
|
|
1418
|
+
case "H":
|
|
1419
|
+
return [[0, -1]];
|
|
1420
|
+
case "V":
|
|
1421
|
+
return [[-1, 0]];
|
|
1422
|
+
case "Q":
|
|
1423
|
+
case "S":
|
|
1424
|
+
return [[0, 1], [2, 3]];
|
|
1425
|
+
case "C":
|
|
1426
|
+
return [[0, 1], [2, 3], [4, 5]];
|
|
1427
|
+
case "A":
|
|
1428
|
+
return [[5, 6]];
|
|
1429
|
+
default:
|
|
1430
|
+
return [];
|
|
1431
|
+
}
|
|
1432
|
+
}
|
|
1433
|
+
function parsePathCommands(d) {
|
|
1434
|
+
const out = [];
|
|
1435
|
+
const commandRegex = /([MmLlHhVvCcSsQqTtAaZz])([^MmLlHhVvCcSsQqTtAaZz]*)/g;
|
|
1436
|
+
let m;
|
|
1437
|
+
while ((m = commandRegex.exec(d)) !== null) {
|
|
1438
|
+
const cmd = m[1];
|
|
1439
|
+
const arity = PATH_ARITY[cmd.toUpperCase()] ?? 0;
|
|
1440
|
+
if (arity === 0) {
|
|
1441
|
+
out.push({ cmd, args: [] });
|
|
1442
|
+
continue;
|
|
1443
|
+
}
|
|
1444
|
+
const nums = (m[2] ?? "").trim().split(/[\s,]+/).filter(Boolean).map(parseFloat);
|
|
1445
|
+
for (let i = 0; i + arity <= nums.length; i += arity) {
|
|
1446
|
+
const args = nums.slice(i, i + arity);
|
|
1447
|
+
if (!args.every(Number.isFinite)) break;
|
|
1448
|
+
const \u7E70\u308A\u8FD4\u3057 = i > 0;
|
|
1449
|
+
const c = \u7E70\u308A\u8FD4\u3057 && cmd === "M" ? "L" : \u7E70\u308A\u8FD4\u3057 && cmd === "m" ? "l" : cmd;
|
|
1450
|
+
out.push({ cmd: c, args });
|
|
1451
|
+
}
|
|
1452
|
+
}
|
|
1453
|
+
return out;
|
|
1454
|
+
}
|
|
1403
1455
|
function extractPathPoints(d) {
|
|
1404
1456
|
const out = [];
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
const
|
|
1409
|
-
|
|
1457
|
+
let cur = { x: 0, y: 0 };
|
|
1458
|
+
let started = false;
|
|
1459
|
+
for (const { cmd, args } of parsePathCommands(d)) {
|
|
1460
|
+
const \u76F8\u5BFE = started && isRelative(cmd);
|
|
1461
|
+
const \u57FA\u70B9 = cur;
|
|
1462
|
+
for (const [xi, yi] of coordSlots(cmd)) {
|
|
1463
|
+
const x = xi >= 0 ? \u76F8\u5BFE ? \u57FA\u70B9.x + args[xi] : args[xi] : \u57FA\u70B9.x;
|
|
1464
|
+
const y = yi >= 0 ? \u76F8\u5BFE ? \u57FA\u70B9.y + args[yi] : args[yi] : \u57FA\u70B9.y;
|
|
1410
1465
|
out.push({ x, y });
|
|
1466
|
+
cur = { x, y };
|
|
1411
1467
|
}
|
|
1468
|
+
started = true;
|
|
1412
1469
|
}
|
|
1413
1470
|
return out;
|
|
1414
1471
|
}
|
|
1472
|
+
function pathBBox(d) {
|
|
1473
|
+
let minX = Infinity;
|
|
1474
|
+
let minY = Infinity;
|
|
1475
|
+
let maxX = -Infinity;
|
|
1476
|
+
let maxY = -Infinity;
|
|
1477
|
+
let \u70B9\u3042\u308A = false;
|
|
1478
|
+
const \u53D6\u308B = (x, y) => {
|
|
1479
|
+
minX = Math.min(minX, x);
|
|
1480
|
+
minY = Math.min(minY, y);
|
|
1481
|
+
maxX = Math.max(maxX, x);
|
|
1482
|
+
maxY = Math.max(maxY, y);
|
|
1483
|
+
\u70B9\u3042\u308A = true;
|
|
1484
|
+
};
|
|
1485
|
+
let cur = { x: 0, y: 0 };
|
|
1486
|
+
let started = false;
|
|
1487
|
+
for (const { cmd, args } of parsePathCommands(d)) {
|
|
1488
|
+
const \u76F8\u5BFE = started && isRelative(cmd);
|
|
1489
|
+
const \u57FA\u70B9 = cur;
|
|
1490
|
+
for (const [xi, yi] of coordSlots(cmd)) {
|
|
1491
|
+
const x = xi >= 0 ? \u76F8\u5BFE ? \u57FA\u70B9.x + args[xi] : args[xi] : \u57FA\u70B9.x;
|
|
1492
|
+
const y = yi >= 0 ? \u76F8\u5BFE ? \u57FA\u70B9.y + args[yi] : args[yi] : \u57FA\u70B9.y;
|
|
1493
|
+
\u53D6\u308B(x, y);
|
|
1494
|
+
cur = { x, y };
|
|
1495
|
+
}
|
|
1496
|
+
if (cmd.toUpperCase() === "A") {
|
|
1497
|
+
const r = Math.max(Math.abs(args[0]), Math.abs(args[1]));
|
|
1498
|
+
const \u5F26 = Math.hypot(cur.x - \u57FA\u70B9.x, cur.y - \u57FA\u70B9.y);
|
|
1499
|
+
const \u534A\u5F26 = Math.min(\u5F26 / 2, r);
|
|
1500
|
+
const \u4F59 = Math.sqrt(Math.max(0, r * r - \u534A\u5F26 * \u534A\u5F26));
|
|
1501
|
+
const \u81A8\u3089\u307F = args[3] !== 0 ? r + \u4F59 : r - \u4F59;
|
|
1502
|
+
\u53D6\u308B(Math.min(\u57FA\u70B9.x, cur.x) - \u81A8\u3089\u307F, Math.min(\u57FA\u70B9.y, cur.y) - \u81A8\u3089\u307F);
|
|
1503
|
+
\u53D6\u308B(Math.max(\u57FA\u70B9.x, cur.x) + \u81A8\u3089\u307F, Math.max(\u57FA\u70B9.y, cur.y) + \u81A8\u3089\u307F);
|
|
1504
|
+
}
|
|
1505
|
+
started = true;
|
|
1506
|
+
}
|
|
1507
|
+
return \u70B9\u3042\u308A ? { minX, minY, maxX, maxY } : null;
|
|
1508
|
+
}
|
|
1415
1509
|
function rebuildPathD(d, map) {
|
|
1416
|
-
const commandRegex = /([MLCQZmlcqz])([^MLCQZmlcqz]*)/g;
|
|
1417
1510
|
let out = "";
|
|
1418
1511
|
let idx = 0;
|
|
1419
|
-
let
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
const
|
|
1423
|
-
if (
|
|
1512
|
+
let cur = { x: 0, y: 0 };
|
|
1513
|
+
let started = false;
|
|
1514
|
+
for (const { cmd, args } of parsePathCommands(d)) {
|
|
1515
|
+
const slots = coordSlots(cmd);
|
|
1516
|
+
if (slots.length === 0) {
|
|
1424
1517
|
out += cmd + " ";
|
|
1518
|
+
started = true;
|
|
1425
1519
|
continue;
|
|
1426
1520
|
}
|
|
1427
|
-
const
|
|
1428
|
-
const
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1521
|
+
const \u76F8\u5BFE = started && isRelative(cmd);
|
|
1522
|
+
const \u57FA\u70B9 = cur;
|
|
1523
|
+
const \u6B21\u306E\u5F15\u6570 = args.slice();
|
|
1524
|
+
for (const [xi, yi] of slots) {
|
|
1525
|
+
const x = xi >= 0 ? \u76F8\u5BFE ? \u57FA\u70B9.x + args[xi] : args[xi] : \u57FA\u70B9.x;
|
|
1526
|
+
const y = yi >= 0 ? \u76F8\u5BFE ? \u57FA\u70B9.y + args[yi] : args[yi] : \u57FA\u70B9.y;
|
|
1527
|
+
const [nx, ny] = map(x, y, idx);
|
|
1528
|
+
if (!\u76F8\u5BFE) {
|
|
1529
|
+
if (xi >= 0) \u6B21\u306E\u5F15\u6570[xi] = nx;
|
|
1530
|
+
if (yi >= 0) \u6B21\u306E\u5F15\u6570[yi] = ny;
|
|
1531
|
+
}
|
|
1432
1532
|
idx += 1;
|
|
1533
|
+
cur = { x, y };
|
|
1433
1534
|
}
|
|
1434
|
-
out += cmd + " " +
|
|
1535
|
+
out += cmd + " " + \u6B21\u306E\u5F15\u6570.join(" ") + " ";
|
|
1536
|
+
started = true;
|
|
1435
1537
|
}
|
|
1436
1538
|
return out.trim();
|
|
1437
1539
|
}
|
|
1438
1540
|
function cornerBoundaryIndices(d) {
|
|
1439
|
-
const commandRegex = /([MLCQZmlcqz])([^MLCQZmlcqz]*)/g;
|
|
1440
1541
|
let idx = 0;
|
|
1441
1542
|
let firstCornerEnd = -1;
|
|
1442
1543
|
let lastCornerStart = -1;
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
|
|
1446
|
-
const argsStr = (m[2] ?? "").trim();
|
|
1447
|
-
if (argsStr === "" || cmd === "Z" || cmd === "z") continue;
|
|
1448
|
-
const pairs = argsStr.split(/[\s,]+/).filter(Boolean).length >> 1;
|
|
1449
|
-
if ((cmd === "Q" || cmd === "q") && pairs >= 2) {
|
|
1544
|
+
for (const { cmd } of parsePathCommands(d)) {
|
|
1545
|
+
const pairs = coordSlots(cmd).length;
|
|
1546
|
+
if (cmd.toUpperCase() === "Q" && pairs >= 2) {
|
|
1450
1547
|
if (firstCornerEnd < 0) firstCornerEnd = idx + 1;
|
|
1451
1548
|
lastCornerStart = idx;
|
|
1452
1549
|
}
|
|
@@ -19473,6 +19570,10 @@ function CdlNodeView({
|
|
|
19473
19570
|
const offsetX = node.renderOffsetX !== void 0 ? resolveNumericAttr(node.renderOffsetX, stateValues, 0) : 0;
|
|
19474
19571
|
const offsetY = node.renderOffsetY !== void 0 ? resolveNumericAttr(node.renderOffsetY, stateValues, 0) : 0;
|
|
19475
19572
|
const hasOffset = offsetX !== 0 || offsetY !== 0;
|
|
19573
|
+
const \u7BB1\u306Estyle = {
|
|
19574
|
+
transition: "opacity 120ms ease-out, transform 200ms ease-out",
|
|
19575
|
+
...\u95A2\u4FC2\u306E\u53D7\u3051\u53E3 === void 0 ? {} : { cursor: "pointer" }
|
|
19576
|
+
};
|
|
19476
19577
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
19477
19578
|
"g",
|
|
19478
19579
|
{
|
|
@@ -19494,7 +19595,6 @@ function CdlNodeView({
|
|
|
19494
19595
|
role: "button",
|
|
19495
19596
|
tabIndex: 0,
|
|
19496
19597
|
"aria-pressed": \u95A2\u4FC2\u306E\u53D7\u3051\u53E3.\u7126\u70B9 === node.id,
|
|
19497
|
-
style: { cursor: "pointer" },
|
|
19498
19598
|
onPointerEnter: () => \u95A2\u4FC2\u306E\u53D7\u3051\u53E3.\u89E6\u308C\u305F(node.id),
|
|
19499
19599
|
onPointerLeave: () => \u95A2\u4FC2\u306E\u53D7\u3051\u53E3.\u96E2\u308C\u305F(),
|
|
19500
19600
|
onFocus: () => \u95A2\u4FC2\u306E\u53D7\u3051\u53E3.\u89E6\u308C\u305F(node.id),
|
|
@@ -19509,7 +19609,7 @@ function CdlNodeView({
|
|
|
19509
19609
|
transform: hasOffset ? `translate(${offsetX}, ${offsetY})` : void 0,
|
|
19510
19610
|
opacity: boundOpacity,
|
|
19511
19611
|
"data-cdl-tone": node.tone,
|
|
19512
|
-
style:
|
|
19612
|
+
style: \u7BB1\u306Estyle,
|
|
19513
19613
|
children: [
|
|
19514
19614
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
19515
19615
|
"rect",
|