@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/react.js
CHANGED
|
@@ -3309,10 +3309,14 @@ function \u5E45\u306E\u500D\u7387(text, size, letterSpacing, \u5E45) {
|
|
|
3309
3309
|
function \u8AAD\u3081\u308B\u4E0B\u9650\u306E\u500D\u7387(\u5927\u304D\u3055) {
|
|
3310
3310
|
return \u5927\u304D\u3055 > MIN_TITLE_FONT_SIZE ? MIN_TITLE_FONT_SIZE / \u5927\u304D\u3055 : 0;
|
|
3311
3311
|
}
|
|
3312
|
+
var \u5207\u308B\u4F59\u88D5 = 1e-9;
|
|
3313
|
+
function \u5E2F\u3067\u5207\u308B(text, \u5927\u304D\u3055, \u5E45\u4E0A\u9650, \u6E2C\u308B) {
|
|
3314
|
+
return \u5E45\u3067\u5207\u308B(text, \u5927\u304D\u3055, \u5E45\u4E0A\u9650 * (1 + \u5207\u308B\u4F59\u88D5), \u6E2C\u308B);
|
|
3315
|
+
}
|
|
3312
3316
|
function \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(\u984C, \u5927\u304D\u3055, \u5B57\u9593, \u5E45\u4E0A\u9650, \u6E2C\u308B) {
|
|
3313
3317
|
const \u4E0B\u9650 = \u8AAD\u3081\u308B\u4E0B\u9650\u306E\u500D\u7387(\u5927\u304D\u3055);
|
|
3314
3318
|
if (!(\u4E0B\u9650 > 0) || !(\u5E45\u4E0A\u9650 > 0)) return 0;
|
|
3315
|
-
return \
|
|
3319
|
+
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;
|
|
3316
3320
|
}
|
|
3317
3321
|
var TITLE_MAX = 18;
|
|
3318
3322
|
var TITLE_MIN = 9;
|
|
@@ -10913,12 +10917,13 @@ function CdlHeader({
|
|
|
10913
10917
|
stateValues,
|
|
10914
10918
|
states,
|
|
10915
10919
|
onJumpPhase,
|
|
10916
|
-
headingLevel = 3
|
|
10920
|
+
headingLevel = 3,
|
|
10921
|
+
showTopic = true
|
|
10917
10922
|
}) {
|
|
10918
10923
|
const HeadingTag = `h${headingLevel}`;
|
|
10919
10924
|
return /* @__PURE__ */ jsxs("div", { className: "border-b border-[var(--cdl-divider,#d4d4d8)]/35 px-7 py-6", children: [
|
|
10920
10925
|
/* @__PURE__ */ jsxs("div", { className: "mb-5 flex items-center gap-3", children: [
|
|
10921
|
-
/* @__PURE__ */ jsx("div", { className: "text-[10px] font-bold uppercase tracking-[0.2em]", style: { color: "var(--cdl-text-accent, #2d6a8f)" }, children: topic }),
|
|
10926
|
+
showTopic && /* @__PURE__ */ jsx("div", { className: "text-[10px] font-bold uppercase tracking-[0.2em]", style: { color: "var(--cdl-text-accent, #2d6a8f)" }, children: topic }),
|
|
10922
10927
|
/* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-1.5", children: [
|
|
10923
10928
|
phases.map((p, idx) => {
|
|
10924
10929
|
const active = idx === phaseIdx;
|
|
@@ -16154,7 +16159,8 @@ function labelBlock(node, pos, size, band) {
|
|
|
16154
16159
|
node.eyebrow ? textWidth(node.eyebrow, EYEBROW_SIZE2, EYEBROW_TRACKING) : 0,
|
|
16155
16160
|
node.subtitle ? textWidth(node.subtitle, SUB_SIZE) : 0
|
|
16156
16161
|
);
|
|
16157
|
-
const \
|
|
16162
|
+
const \u984C\u5E45 = textWidth(node.title ?? "", size);
|
|
16163
|
+
const \u4E0B\u9650 = \u984C\u5E45 >= \u5E45 ? \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(node.title ?? "", size, 0, band.w, textWidth) : 0;
|
|
16158
16164
|
const { k, x, y: baseline } = fitLabel(band, { \u4E0A, \u4E0B, \u5E45 }, pos, \u4E0B\u9650);
|
|
16159
16165
|
return { k, x, baseline, \u4E0A\u7AEF: baseline - \u4E0A * k, \u4E0B\u7AEF: baseline + \u4E0B * k };
|
|
16160
16166
|
}
|
|
@@ -16162,7 +16168,7 @@ function commonLabel(node, pos, size, band) {
|
|
|
16162
16168
|
const \u584A = labelBlock(node, pos, size, band);
|
|
16163
16169
|
const k = \u584A.k;
|
|
16164
16170
|
const x = \u584A.x;
|
|
16165
|
-
const \u5207\u308B = (t, \u5927\u304D\u3055, \u5B57\u9593 = 0) => \
|
|
16171
|
+
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));
|
|
16166
16172
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
16167
16173
|
node.eyebrow && /* @__PURE__ */ jsx(
|
|
16168
16174
|
"text",
|
|
@@ -16533,9 +16539,10 @@ function planLabel(node, cx, \u5E45\u4E0A\u9650, plan) {
|
|
|
16533
16539
|
node.eyebrow && plan.\u80A9\u66F8 ? textWidth(node.eyebrow, plan.\u80A9\u66F8.size, EYEBROW_TRACKING) : 0,
|
|
16534
16540
|
node.subtitle && plan.\u8AAC\u660E ? textWidth(node.subtitle, plan.\u8AAC\u660E.size) : 0
|
|
16535
16541
|
);
|
|
16536
|
-
const \
|
|
16542
|
+
const \u984C\u5E45 = textWidth(node.title ?? "", plan.\u540D\u524D.size);
|
|
16543
|
+
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;
|
|
16537
16544
|
const k = \u5E45 > 0 && \u5E45\u4E0A\u9650 > 0 ? Math.min(1, Math.max(\u5E45\u4E0A\u9650 / \u5E45, \u4E0B\u9650)) : 1;
|
|
16538
|
-
const \u5207\u308B = (t, \u5927\u304D\u3055, \u5B57\u9593 = 0) => \
|
|
16545
|
+
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));
|
|
16539
16546
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
16540
16547
|
node.eyebrow && plan.\u80A9\u66F8 && /* @__PURE__ */ jsx(
|
|
16541
16548
|
"text",
|
|
@@ -17492,16 +17499,17 @@ var externalLabel = (node, cx, bottomY) => /* @__PURE__ */ jsxs(Fragment, { chil
|
|
|
17492
17499
|
)
|
|
17493
17500
|
] });
|
|
17494
17501
|
var LABEL_EYEBROW_SPACING = 2;
|
|
17495
|
-
function \u5E45\u306B\u53CE\u3081\u308B2(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45) {
|
|
17502
|
+
function \u5E45\u306B\u53CE\u3081\u308B2(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, \u984C\u304B = false) {
|
|
17496
17503
|
const \u5E45 = textWidth(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593);
|
|
17497
|
-
const \
|
|
17504
|
+
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;
|
|
17505
|
+
const \u500D\u7387 = \u5E45 > 0 && \u7BB1\u5E45 > 0 ? Math.min(1, Math.max(\u7BB1\u5E45 / \u5E45, \u4E0B\u9650)) : 1;
|
|
17498
17506
|
const size = \u5927\u304D\u3055 * \u500D\u7387;
|
|
17499
17507
|
const spacing = \u5B57\u9593 * \u500D\u7387;
|
|
17500
|
-
return { size, spacing, text: \
|
|
17508
|
+
return { size, spacing, text: \u5E2F\u3067\u5207\u308B(\u6587\u5B57\u5217, size, \u7BB1\u5E45, (u, f) => textWidth(u, f, spacing)) };
|
|
17501
17509
|
}
|
|
17502
17510
|
function bottomLabel(node, cx, plan) {
|
|
17503
17511
|
const \u80A9 = \u5E45\u306B\u53CE\u3081\u308B2(node.eyebrow ?? "", plan.\u80A9\u66F8?.size ?? 0, LABEL_EYEBROW_SPACING, node.w);
|
|
17504
|
-
const \u540D = \u5E45\u306B\u53CE\u3081\u308B2(node.title ?? "", plan.\u540D\u524D.size, 0, node.w);
|
|
17512
|
+
const \u540D = \u5E45\u306B\u53CE\u3081\u308B2(node.title ?? "", plan.\u540D\u524D.size, 0, node.w, true);
|
|
17505
17513
|
const \u8AAC = \u5E45\u306B\u53CE\u3081\u308B2(node.subtitle ?? "", plan.\u8AAC\u660E?.size ?? 0, 0, node.w);
|
|
17506
17514
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
17507
17515
|
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 }),
|
|
@@ -18301,14 +18309,15 @@ function blockchainNodeExtent(strokeWidth) {
|
|
|
18301
18309
|
return { \u4E0A: \u7E26, \u4E0B: \u7E26, \u5DE6: \u6A2A, \u53F3: \u6A2A };
|
|
18302
18310
|
}
|
|
18303
18311
|
function bottomLabel2(node, cx, plan) {
|
|
18304
|
-
const \u53CE\u3081\u308B = (t, \u5927\u304D\u3055, \u5B57\u9593) => {
|
|
18312
|
+
const \u53CE\u3081\u308B = (t, \u5927\u304D\u3055, \u5B57\u9593, \u984C\u304B = false) => {
|
|
18305
18313
|
const \u6E2C\u308B = (u, f, ls) => \u5B57\u306E\u5E45(u, f) + ls * [...u].length;
|
|
18306
|
-
const \
|
|
18314
|
+
const \u4E0B\u9650 = \u984C\u304B ? \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(t, \u5927\u304D\u3055, \u5B57\u9593, node.w, \u6E2C\u308B) : 0;
|
|
18315
|
+
const \u500D\u7387 = Math.max(\u5E45\u306E\u500D\u7387(t, \u5927\u304D\u3055, \u5B57\u9593, node.w), \u4E0B\u9650);
|
|
18307
18316
|
const size = \u5927\u304D\u3055 * \u500D\u7387;
|
|
18308
|
-
return { \u500D\u7387, text: \
|
|
18317
|
+
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) };
|
|
18309
18318
|
};
|
|
18310
18319
|
const \u80A9 = node.eyebrow && plan.\u80A9\u66F8 ? \u53CE\u3081\u308B(node.eyebrow, plan.\u80A9\u66F8.size, 2) : { \u500D\u7387: 1, text: node.eyebrow ?? "" };
|
|
18311
|
-
const \u540D = \u53CE\u3081\u308B(node.title ?? "", plan.\u540D\u524D.size, 0);
|
|
18320
|
+
const \u540D = \u53CE\u3081\u308B(node.title ?? "", plan.\u540D\u524D.size, 0, true);
|
|
18312
18321
|
const \u8AAC = node.subtitle && plan.\u8AAC\u660E ? \u53CE\u3081\u308B(node.subtitle, plan.\u8AAC\u660E.size, 0) : { \u500D\u7387: 1, text: node.subtitle ?? "" };
|
|
18313
18322
|
const \u80A9\u66F8\u500D\u7387 = \u80A9.\u500D\u7387;
|
|
18314
18323
|
const \u540D\u524D\u500D\u7387 = \u540D.\u500D\u7387;
|
|
@@ -18923,16 +18932,17 @@ function \u5B57\u5E45(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593) {
|
|
|
18923
18932
|
}
|
|
18924
18933
|
return \u5E45 + \u5B57\u9593 * \u5B57\u6570;
|
|
18925
18934
|
}
|
|
18926
|
-
function \u5E45\u306B\u53CE\u3081\u308B3(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45) {
|
|
18935
|
+
function \u5E45\u306B\u53CE\u3081\u308B3(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, \u984C\u304B = false) {
|
|
18927
18936
|
const \u5E45 = \u5B57\u5E45(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593);
|
|
18928
|
-
const \
|
|
18937
|
+
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;
|
|
18938
|
+
const \u500D\u7387 = \u5E45 > 0 && \u7BB1\u5E45 > 0 ? Math.min(1, Math.max(\u7BB1\u5E45 / \u5E45, \u4E0B\u9650)) : 1;
|
|
18929
18939
|
const size = \u5927\u304D\u3055 * \u500D\u7387;
|
|
18930
18940
|
const spacing = \u5B57\u9593 * \u500D\u7387;
|
|
18931
|
-
return { size, spacing, text: \
|
|
18941
|
+
return { size, spacing, text: \u5E2F\u3067\u5207\u308B(\u6587\u5B57\u5217, size, \u7BB1\u5E45, (u, f) => \u5B57\u5E45(u, f, spacing)) };
|
|
18932
18942
|
}
|
|
18933
18943
|
function bottomLabel3(node, cx, plan) {
|
|
18934
18944
|
const \u80A9 = \u5E45\u306B\u53CE\u3081\u308B3(node.eyebrow ?? "", plan.\u80A9\u66F8?.size ?? 0, LABEL_EYEBROW_SPACING2, node.w);
|
|
18935
|
-
const \u540D = \u5E45\u306B\u53CE\u3081\u308B3(node.title ?? "", plan.\u540D\u524D.size, 0, node.w);
|
|
18945
|
+
const \u540D = \u5E45\u306B\u53CE\u3081\u308B3(node.title ?? "", plan.\u540D\u524D.size, 0, node.w, true);
|
|
18936
18946
|
const \u8AAC = \u5E45\u306B\u53CE\u3081\u308B3(node.subtitle ?? "", plan.\u8AAC\u660E?.size ?? 0, 0, node.w);
|
|
18937
18947
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
18938
18948
|
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 }),
|
|
@@ -19408,16 +19418,17 @@ function \u5B57\u5E452(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593) {
|
|
|
19408
19418
|
}
|
|
19409
19419
|
return \u5E45 + \u5B57\u9593 * \u5B57\u6570;
|
|
19410
19420
|
}
|
|
19411
|
-
function \u5E45\u306B\u53CE\u3081\u308B4(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45) {
|
|
19421
|
+
function \u5E45\u306B\u53CE\u3081\u308B4(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, \u984C\u304B = false) {
|
|
19412
19422
|
const \u5E45 = \u5B57\u5E452(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593);
|
|
19413
|
-
const \
|
|
19423
|
+
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;
|
|
19424
|
+
const \u500D\u7387 = \u5E45 > 0 && \u7BB1\u5E45 > 0 ? Math.min(1, Math.max(\u7BB1\u5E45 / \u5E45, \u4E0B\u9650)) : 1;
|
|
19414
19425
|
const size = \u5927\u304D\u3055 * \u500D\u7387;
|
|
19415
19426
|
const spacing = \u5B57\u9593 * \u500D\u7387;
|
|
19416
|
-
return { size, spacing, text: \
|
|
19427
|
+
return { size, spacing, text: \u5E2F\u3067\u5207\u308B(\u6587\u5B57\u5217, size, \u7BB1\u5E45, (u, f) => \u5B57\u5E452(u, f, spacing)) };
|
|
19417
19428
|
}
|
|
19418
19429
|
function bottomLabel4(node, cx, plan) {
|
|
19419
19430
|
const \u80A9 = \u5E45\u306B\u53CE\u3081\u308B4(node.eyebrow ?? "", plan.\u80A9\u66F8?.size ?? 0, LABEL_EYEBROW_SPACING3, node.w);
|
|
19420
|
-
const \u540D = \u5E45\u306B\u53CE\u3081\u308B4(node.title ?? "", plan.\u540D\u524D.size, 0, node.w);
|
|
19431
|
+
const \u540D = \u5E45\u306B\u53CE\u3081\u308B4(node.title ?? "", plan.\u540D\u524D.size, 0, node.w, true);
|
|
19421
19432
|
const \u8AAC = \u5E45\u306B\u53CE\u3081\u308B4(node.subtitle ?? "", plan.\u8AAC\u660E?.size ?? 0, 0, node.w);
|
|
19422
19433
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
19423
19434
|
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 }),
|
|
@@ -29631,6 +29642,11 @@ function CdlDiagramView({ diagram, laid: laidProp, hideHeader = false, hideMiniP
|
|
|
29631
29642
|
return mergeStateValues(baseStateValues, interactive.stateOverrides);
|
|
29632
29643
|
}, [isInteractive, baseStateValues, interactive.stateOverrides]);
|
|
29633
29644
|
const \u5024\u306E\u540D\u524D = useMemo(() => \u5024\u306E\u540D\u524D\u306E\u8868\u3092\u4F5C\u308B(diagram.inputs), [diagram.inputs]);
|
|
29645
|
+
const \u56F3\u304C\u8A71\u984C\u3092\u63CF\u304F = useMemo(() => {
|
|
29646
|
+
const \u8A71\u984C = laid.topic.trim();
|
|
29647
|
+
if (\u8A71\u984C === "") return false;
|
|
29648
|
+
return laid.nodes.some((n) => drawsFigureTitle(n.kind) && (n.title ?? "").trim() === \u8A71\u984C);
|
|
29649
|
+
}, [laid.nodes, laid.topic]);
|
|
29634
29650
|
return /* @__PURE__ */ jsxs(
|
|
29635
29651
|
"div",
|
|
29636
29652
|
{
|
|
@@ -29655,7 +29671,8 @@ function CdlDiagramView({ diagram, laid: laidProp, hideHeader = false, hideMiniP
|
|
|
29655
29671
|
timeline.goto(idx);
|
|
29656
29672
|
timeline.play();
|
|
29657
29673
|
},
|
|
29658
|
-
headingLevel
|
|
29674
|
+
headingLevel,
|
|
29675
|
+
showTopic: !\u56F3\u304C\u8A71\u984C\u3092\u63CF\u304F
|
|
29659
29676
|
}
|
|
29660
29677
|
),
|
|
29661
29678
|
isInteractive && interactive.panel,
|