@cardenelabs/cdl 0.108.0 → 0.110.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 +61 -1
- package/dist/index.cjs +41 -24
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +41 -24
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +41 -24
- package/dist/react.cjs.map +1 -1
- package/dist/react.js +41 -24
- package/dist/react.js.map +1 -1
- package/package.json +1 -1
- package/src/kinds/shape-basement.tsx +16 -7
- package/src/kinds/shape-blockchain.tsx +9 -5
- package/src/kinds/shape-commerce.tsx +10 -9
- package/src/kinds/shape-finance.tsx +10 -9
- package/src/kinds/shape-hardware.tsx +10 -10
- package/src/kinds/shape-region.tsx +26 -1
- package/src/render/header.tsx +10 -1
- package/src/render.tsx +17 -0
package/dist/index.js
CHANGED
|
@@ -14702,10 +14702,14 @@ function \u5E45\u306E\u500D\u7387(text, size, letterSpacing, \u5E45) {
|
|
|
14702
14702
|
function \u8AAD\u3081\u308B\u4E0B\u9650\u306E\u500D\u7387(\u5927\u304D\u3055) {
|
|
14703
14703
|
return \u5927\u304D\u3055 > MIN_TITLE_FONT_SIZE ? MIN_TITLE_FONT_SIZE / \u5927\u304D\u3055 : 0;
|
|
14704
14704
|
}
|
|
14705
|
+
var \u5207\u308B\u4F59\u88D5 = 1e-9;
|
|
14706
|
+
function \u5E2F\u3067\u5207\u308B(text, \u5927\u304D\u3055, \u5E45\u4E0A\u9650, \u6E2C\u308B) {
|
|
14707
|
+
return \u5E45\u3067\u5207\u308B(text, \u5927\u304D\u3055, \u5E45\u4E0A\u9650 * (1 + \u5207\u308B\u4F59\u88D5), \u6E2C\u308B);
|
|
14708
|
+
}
|
|
14705
14709
|
function \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(\u984C, \u5927\u304D\u3055, \u5B57\u9593, \u5E45\u4E0A\u9650, \u6E2C\u308B) {
|
|
14706
14710
|
const \u4E0B\u9650 = \u8AAD\u3081\u308B\u4E0B\u9650\u306E\u500D\u7387(\u5927\u304D\u3055);
|
|
14707
14711
|
if (!(\u4E0B\u9650 > 0) || !(\u5E45\u4E0A\u9650 > 0)) return 0;
|
|
14708
|
-
return \
|
|
14712
|
+
return \u5E2F\u3067\u5207\u308B(\u984C, \u5927\u304D\u3055 * \u4E0B\u9650, \u5E45\u4E0A\u9650, (u, f) => \u6E2C\u308B(u, f, \u5B57\u9593 * \u4E0B\u9650)) === "" ? 0 : \u4E0B\u9650;
|
|
14709
14713
|
}
|
|
14710
14714
|
var TITLE_MAX = 18;
|
|
14711
14715
|
var TITLE_MIN = 9;
|
|
@@ -23474,12 +23478,13 @@ function CdlHeader({
|
|
|
23474
23478
|
stateValues,
|
|
23475
23479
|
states,
|
|
23476
23480
|
onJumpPhase,
|
|
23477
|
-
headingLevel = 3
|
|
23481
|
+
headingLevel = 3,
|
|
23482
|
+
showTopic = true
|
|
23478
23483
|
}) {
|
|
23479
23484
|
const HeadingTag = `h${headingLevel}`;
|
|
23480
23485
|
return /* @__PURE__ */ jsxs("div", { className: "border-b border-[var(--cdl-divider,#d4d4d8)]/35 px-7 py-6", children: [
|
|
23481
23486
|
/* @__PURE__ */ jsxs("div", { className: "mb-5 flex items-center gap-3", children: [
|
|
23482
|
-
/* @__PURE__ */ jsx("div", { className: "text-[10px] font-bold uppercase tracking-[0.2em]", style: { color: "var(--cdl-text-accent, #2d6a8f)" }, children: topic }),
|
|
23487
|
+
showTopic && /* @__PURE__ */ jsx("div", { className: "text-[10px] font-bold uppercase tracking-[0.2em]", style: { color: "var(--cdl-text-accent, #2d6a8f)" }, children: topic }),
|
|
23483
23488
|
/* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-1.5", children: [
|
|
23484
23489
|
phases.map((p, idx) => {
|
|
23485
23490
|
const active = idx === phaseIdx;
|
|
@@ -28718,7 +28723,8 @@ function labelBlock(node, pos, size, band) {
|
|
|
28718
28723
|
node.eyebrow ? textWidth(node.eyebrow, EYEBROW_SIZE2, EYEBROW_TRACKING) : 0,
|
|
28719
28724
|
node.subtitle ? textWidth(node.subtitle, SUB_SIZE) : 0
|
|
28720
28725
|
);
|
|
28721
|
-
const \
|
|
28726
|
+
const \u984C\u5E45 = textWidth(node.title ?? "", size);
|
|
28727
|
+
const \u4E0B\u9650 = \u984C\u5E45 >= \u5E45 ? \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(node.title ?? "", size, 0, band.w, textWidth) : 0;
|
|
28722
28728
|
const { k, x, y: baseline } = fitLabel(band, { \u4E0A, \u4E0B, \u5E45 }, pos, \u4E0B\u9650);
|
|
28723
28729
|
return { k, x, baseline, \u4E0A\u7AEF: baseline - \u4E0A * k, \u4E0B\u7AEF: baseline + \u4E0B * k };
|
|
28724
28730
|
}
|
|
@@ -28726,7 +28732,7 @@ function commonLabel(node, pos, size, band) {
|
|
|
28726
28732
|
const \u584A = labelBlock(node, pos, size, band);
|
|
28727
28733
|
const k = \u584A.k;
|
|
28728
28734
|
const x = \u584A.x;
|
|
28729
|
-
const \u5207\u308B = (t, \u5927\u304D\u3055, \u5B57\u9593 = 0) => \
|
|
28735
|
+
const \u5207\u308B = (t, \u5927\u304D\u3055, \u5B57\u9593 = 0) => \u5E2F\u3067\u5207\u308B(t, \u5927\u304D\u3055 * k, band.w, (u, f) => textWidth(u, f, \u5B57\u9593 * k));
|
|
28730
28736
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
28731
28737
|
node.eyebrow && /* @__PURE__ */ jsx(
|
|
28732
28738
|
"text",
|
|
@@ -29097,9 +29103,10 @@ function planLabel(node, cx, \u5E45\u4E0A\u9650, plan) {
|
|
|
29097
29103
|
node.eyebrow && plan.\u80A9\u66F8 ? textWidth(node.eyebrow, plan.\u80A9\u66F8.size, EYEBROW_TRACKING) : 0,
|
|
29098
29104
|
node.subtitle && plan.\u8AAC\u660E ? textWidth(node.subtitle, plan.\u8AAC\u660E.size) : 0
|
|
29099
29105
|
);
|
|
29100
|
-
const \
|
|
29106
|
+
const \u984C\u5E45 = textWidth(node.title ?? "", plan.\u540D\u524D.size);
|
|
29107
|
+
const \u4E0B\u9650 = \u984C\u5E45 >= \u5E45 ? \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(node.title ?? "", plan.\u540D\u524D.size, 0, \u5E45\u4E0A\u9650, textWidth) : 0;
|
|
29101
29108
|
const k = \u5E45 > 0 && \u5E45\u4E0A\u9650 > 0 ? Math.min(1, Math.max(\u5E45\u4E0A\u9650 / \u5E45, \u4E0B\u9650)) : 1;
|
|
29102
|
-
const \u5207\u308B = (t, \u5927\u304D\u3055, \u5B57\u9593 = 0) => \
|
|
29109
|
+
const \u5207\u308B = (t, \u5927\u304D\u3055, \u5B57\u9593 = 0) => \u5E2F\u3067\u5207\u308B(t, \u5927\u304D\u3055 * k, \u5E45\u4E0A\u9650, (u, f) => textWidth(u, f, \u5B57\u9593 * k));
|
|
29103
29110
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
29104
29111
|
node.eyebrow && plan.\u80A9\u66F8 && /* @__PURE__ */ jsx(
|
|
29105
29112
|
"text",
|
|
@@ -30056,16 +30063,17 @@ var externalLabel = (node, cx, bottomY) => /* @__PURE__ */ jsxs(Fragment, { chil
|
|
|
30056
30063
|
)
|
|
30057
30064
|
] });
|
|
30058
30065
|
var LABEL_EYEBROW_SPACING = 2;
|
|
30059
|
-
function \u5E45\u306B\u53CE\u3081\u308B2(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45) {
|
|
30066
|
+
function \u5E45\u306B\u53CE\u3081\u308B2(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, \u984C\u304B = false) {
|
|
30060
30067
|
const \u5E45 = textWidth(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593);
|
|
30061
|
-
const \
|
|
30068
|
+
const \u4E0B\u9650 = \u984C\u304B ? \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, textWidth) : 0;
|
|
30069
|
+
const \u500D\u7387 = \u5E45 > 0 && \u7BB1\u5E45 > 0 ? Math.min(1, Math.max(\u7BB1\u5E45 / \u5E45, \u4E0B\u9650)) : 1;
|
|
30062
30070
|
const size = \u5927\u304D\u3055 * \u500D\u7387;
|
|
30063
30071
|
const spacing = \u5B57\u9593 * \u500D\u7387;
|
|
30064
|
-
return { size, spacing, text: \
|
|
30072
|
+
return { size, spacing, text: \u5E2F\u3067\u5207\u308B(\u6587\u5B57\u5217, size, \u7BB1\u5E45, (u, f) => textWidth(u, f, spacing)) };
|
|
30065
30073
|
}
|
|
30066
30074
|
function bottomLabel(node, cx, plan) {
|
|
30067
30075
|
const \u80A9 = \u5E45\u306B\u53CE\u3081\u308B2(node.eyebrow ?? "", plan.\u80A9\u66F8?.size ?? 0, LABEL_EYEBROW_SPACING, node.w);
|
|
30068
|
-
const \u540D = \u5E45\u306B\u53CE\u3081\u308B2(node.title ?? "", plan.\u540D\u524D.size, 0, node.w);
|
|
30076
|
+
const \u540D = \u5E45\u306B\u53CE\u3081\u308B2(node.title ?? "", plan.\u540D\u524D.size, 0, node.w, true);
|
|
30069
30077
|
const \u8AAC = \u5E45\u306B\u53CE\u3081\u308B2(node.subtitle ?? "", plan.\u8AAC\u660E?.size ?? 0, 0, node.w);
|
|
30070
30078
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
30071
30079
|
node.eyebrow && plan.\u80A9\u66F8 && /* @__PURE__ */ jsx("text", { x: cx, y: plan.\u80A9\u66F8.y, fontSize: \u80A9.size, fontWeight: 700, letterSpacing: \u80A9.spacing, textAnchor: "middle", fill: "var(--cdl-tone-accent, #2d6a8f)", children: \u80A9.text }),
|
|
@@ -30865,14 +30873,15 @@ function blockchainNodeExtent(strokeWidth) {
|
|
|
30865
30873
|
return { \u4E0A: \u7E26, \u4E0B: \u7E26, \u5DE6: \u6A2A, \u53F3: \u6A2A };
|
|
30866
30874
|
}
|
|
30867
30875
|
function bottomLabel2(node, cx, plan) {
|
|
30868
|
-
const \u53CE\u3081\u308B = (t, \u5927\u304D\u3055, \u5B57\u9593) => {
|
|
30876
|
+
const \u53CE\u3081\u308B = (t, \u5927\u304D\u3055, \u5B57\u9593, \u984C\u304B = false) => {
|
|
30869
30877
|
const \u6E2C\u308B = (u, f, ls) => \u5B57\u306E\u5E45(u, f) + ls * [...u].length;
|
|
30870
|
-
const \
|
|
30878
|
+
const \u4E0B\u9650 = \u984C\u304B ? \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(t, \u5927\u304D\u3055, \u5B57\u9593, node.w, \u6E2C\u308B) : 0;
|
|
30879
|
+
const \u500D\u7387 = Math.max(\u5E45\u306E\u500D\u7387(t, \u5927\u304D\u3055, \u5B57\u9593, node.w), \u4E0B\u9650);
|
|
30871
30880
|
const size = \u5927\u304D\u3055 * \u500D\u7387;
|
|
30872
|
-
return { \u500D\u7387, text: \
|
|
30881
|
+
return { \u500D\u7387, text: \u5E2F\u3067\u5207\u308B(t, size, node.w, (u, f) => \u5B57\u306E\u5E45(u, f) + \u5B57\u9593 * \u500D\u7387 * [...u].length) };
|
|
30873
30882
|
};
|
|
30874
30883
|
const \u80A9 = node.eyebrow && plan.\u80A9\u66F8 ? \u53CE\u3081\u308B(node.eyebrow, plan.\u80A9\u66F8.size, 2) : { \u500D\u7387: 1, text: node.eyebrow ?? "" };
|
|
30875
|
-
const \u540D = \u53CE\u3081\u308B(node.title ?? "", plan.\u540D\u524D.size, 0);
|
|
30884
|
+
const \u540D = \u53CE\u3081\u308B(node.title ?? "", plan.\u540D\u524D.size, 0, true);
|
|
30876
30885
|
const \u8AAC = node.subtitle && plan.\u8AAC\u660E ? \u53CE\u3081\u308B(node.subtitle, plan.\u8AAC\u660E.size, 0) : { \u500D\u7387: 1, text: node.subtitle ?? "" };
|
|
30877
30886
|
const \u80A9\u66F8\u500D\u7387 = \u80A9.\u500D\u7387;
|
|
30878
30887
|
const \u540D\u524D\u500D\u7387 = \u540D.\u500D\u7387;
|
|
@@ -31487,16 +31496,17 @@ function \u5B57\u5E45(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593) {
|
|
|
31487
31496
|
}
|
|
31488
31497
|
return \u5E45 + \u5B57\u9593 * \u5B57\u6570;
|
|
31489
31498
|
}
|
|
31490
|
-
function \u5E45\u306B\u53CE\u3081\u308B3(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45) {
|
|
31499
|
+
function \u5E45\u306B\u53CE\u3081\u308B3(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, \u984C\u304B = false) {
|
|
31491
31500
|
const \u5E45 = \u5B57\u5E45(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593);
|
|
31492
|
-
const \
|
|
31501
|
+
const \u4E0B\u9650 = \u984C\u304B ? \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, \u5B57\u5E45) : 0;
|
|
31502
|
+
const \u500D\u7387 = \u5E45 > 0 && \u7BB1\u5E45 > 0 ? Math.min(1, Math.max(\u7BB1\u5E45 / \u5E45, \u4E0B\u9650)) : 1;
|
|
31493
31503
|
const size = \u5927\u304D\u3055 * \u500D\u7387;
|
|
31494
31504
|
const spacing = \u5B57\u9593 * \u500D\u7387;
|
|
31495
|
-
return { size, spacing, text: \
|
|
31505
|
+
return { size, spacing, text: \u5E2F\u3067\u5207\u308B(\u6587\u5B57\u5217, size, \u7BB1\u5E45, (u, f) => \u5B57\u5E45(u, f, spacing)) };
|
|
31496
31506
|
}
|
|
31497
31507
|
function bottomLabel3(node, cx, plan) {
|
|
31498
31508
|
const \u80A9 = \u5E45\u306B\u53CE\u3081\u308B3(node.eyebrow ?? "", plan.\u80A9\u66F8?.size ?? 0, LABEL_EYEBROW_SPACING2, node.w);
|
|
31499
|
-
const \u540D = \u5E45\u306B\u53CE\u3081\u308B3(node.title ?? "", plan.\u540D\u524D.size, 0, node.w);
|
|
31509
|
+
const \u540D = \u5E45\u306B\u53CE\u3081\u308B3(node.title ?? "", plan.\u540D\u524D.size, 0, node.w, true);
|
|
31500
31510
|
const \u8AAC = \u5E45\u306B\u53CE\u3081\u308B3(node.subtitle ?? "", plan.\u8AAC\u660E?.size ?? 0, 0, node.w);
|
|
31501
31511
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
31502
31512
|
node.eyebrow && plan.\u80A9\u66F8 && /* @__PURE__ */ jsx("text", { x: cx, y: plan.\u80A9\u66F8.y, fontSize: \u80A9.size, fontWeight: 700, letterSpacing: \u80A9.spacing, textAnchor: "middle", fill: "var(--cdl-tone-accent, #2d6a8f)", children: \u80A9.text }),
|
|
@@ -31972,16 +31982,17 @@ function \u5B57\u5E452(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593) {
|
|
|
31972
31982
|
}
|
|
31973
31983
|
return \u5E45 + \u5B57\u9593 * \u5B57\u6570;
|
|
31974
31984
|
}
|
|
31975
|
-
function \u5E45\u306B\u53CE\u3081\u308B4(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45) {
|
|
31985
|
+
function \u5E45\u306B\u53CE\u3081\u308B4(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, \u984C\u304B = false) {
|
|
31976
31986
|
const \u5E45 = \u5B57\u5E452(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593);
|
|
31977
|
-
const \
|
|
31987
|
+
const \u4E0B\u9650 = \u984C\u304B ? \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, \u5B57\u5E452) : 0;
|
|
31988
|
+
const \u500D\u7387 = \u5E45 > 0 && \u7BB1\u5E45 > 0 ? Math.min(1, Math.max(\u7BB1\u5E45 / \u5E45, \u4E0B\u9650)) : 1;
|
|
31978
31989
|
const size = \u5927\u304D\u3055 * \u500D\u7387;
|
|
31979
31990
|
const spacing = \u5B57\u9593 * \u500D\u7387;
|
|
31980
|
-
return { size, spacing, text: \
|
|
31991
|
+
return { size, spacing, text: \u5E2F\u3067\u5207\u308B(\u6587\u5B57\u5217, size, \u7BB1\u5E45, (u, f) => \u5B57\u5E452(u, f, spacing)) };
|
|
31981
31992
|
}
|
|
31982
31993
|
function bottomLabel4(node, cx, plan) {
|
|
31983
31994
|
const \u80A9 = \u5E45\u306B\u53CE\u3081\u308B4(node.eyebrow ?? "", plan.\u80A9\u66F8?.size ?? 0, LABEL_EYEBROW_SPACING3, node.w);
|
|
31984
|
-
const \u540D = \u5E45\u306B\u53CE\u3081\u308B4(node.title ?? "", plan.\u540D\u524D.size, 0, node.w);
|
|
31995
|
+
const \u540D = \u5E45\u306B\u53CE\u3081\u308B4(node.title ?? "", plan.\u540D\u524D.size, 0, node.w, true);
|
|
31985
31996
|
const \u8AAC = \u5E45\u306B\u53CE\u3081\u308B4(node.subtitle ?? "", plan.\u8AAC\u660E?.size ?? 0, 0, node.w);
|
|
31986
31997
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
31987
31998
|
node.eyebrow && plan.\u80A9\u66F8 && /* @__PURE__ */ jsx("text", { x: cx, y: plan.\u80A9\u66F8.y, fontSize: \u80A9.size, fontWeight: 700, letterSpacing: \u80A9.spacing, textAnchor: "middle", fill: "var(--cdl-tone-accent, #2d6a8f)", children: \u80A9.text }),
|
|
@@ -33585,6 +33596,11 @@ function CdlDiagramView({ diagram: diagram2, laid: laidProp, hideHeader = false,
|
|
|
33585
33596
|
return mergeStateValues(baseStateValues, interactive.stateOverrides);
|
|
33586
33597
|
}, [isInteractive, baseStateValues, interactive.stateOverrides]);
|
|
33587
33598
|
const \u5024\u306E\u540D\u524D = useMemo(() => \u5024\u306E\u540D\u524D\u306E\u8868\u3092\u4F5C\u308B(diagram2.inputs), [diagram2.inputs]);
|
|
33599
|
+
const \u56F3\u304C\u8A71\u984C\u3092\u63CF\u304F = useMemo(() => {
|
|
33600
|
+
const \u8A71\u984C = laid.topic.trim();
|
|
33601
|
+
if (\u8A71\u984C === "") return false;
|
|
33602
|
+
return laid.nodes.some((n) => drawsFigureTitle(n.kind) && (n.title ?? "").trim() === \u8A71\u984C);
|
|
33603
|
+
}, [laid.nodes, laid.topic]);
|
|
33588
33604
|
return /* @__PURE__ */ jsxs(
|
|
33589
33605
|
"div",
|
|
33590
33606
|
{
|
|
@@ -33609,7 +33625,8 @@ function CdlDiagramView({ diagram: diagram2, laid: laidProp, hideHeader = false,
|
|
|
33609
33625
|
timeline.goto(idx);
|
|
33610
33626
|
timeline.play();
|
|
33611
33627
|
},
|
|
33612
|
-
headingLevel
|
|
33628
|
+
headingLevel,
|
|
33629
|
+
showTopic: !\u56F3\u304C\u8A71\u984C\u3092\u63CF\u304F
|
|
33613
33630
|
}
|
|
33614
33631
|
),
|
|
33615
33632
|
isInteractive && interactive.panel,
|