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