@cardenelabs/cdl 0.13.0 → 0.13.1
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 +22 -1
- package/dist/index.cjs +39 -29
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +39 -29
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +39 -29
- package/dist/react.cjs.map +1 -1
- package/dist/react.js +39 -29
- package/dist/react.js.map +1 -1
- package/package.json +1 -1
- package/src/kinds/box-lines.ts +45 -4
- package/src/kinds/compact-title.ts +6 -6
- package/src/kinds/mind-map.tsx +10 -5
- package/src/kinds/tree.tsx +12 -7
package/dist/index.js
CHANGED
|
@@ -20266,10 +20266,10 @@ function fitTextSize(text, maxWidth, targetSize, minSize) {
|
|
|
20266
20266
|
}
|
|
20267
20267
|
var COMPACT_MAX_H = 100;
|
|
20268
20268
|
var COMPACT_PADDING_X = 16;
|
|
20269
|
-
var
|
|
20269
|
+
var MIN_TEXT_SIZE = 11;
|
|
20270
20270
|
var ASCENT2 = 0.72;
|
|
20271
20271
|
var DESCENT2 = 0.25;
|
|
20272
|
-
var MIN_BAND_H =
|
|
20272
|
+
var MIN_BAND_H = MIN_TEXT_SIZE * (ASCENT2 + DESCENT2);
|
|
20273
20273
|
var EYEBROW_BASELINE = 38;
|
|
20274
20274
|
var EYEBROW_SIZE = 18;
|
|
20275
20275
|
var EYEBROW_GAP = 8;
|
|
@@ -20291,10 +20291,10 @@ function titlePlacement(node, \u901A\u5E38, opts = {}) {
|
|
|
20291
20291
|
node.title,
|
|
20292
20292
|
Math.max(0, node.w - COMPACT_PADDING_X),
|
|
20293
20293
|
\u901A\u5E38.size,
|
|
20294
|
-
|
|
20294
|
+
MIN_TEXT_SIZE
|
|
20295
20295
|
);
|
|
20296
20296
|
const \u5E2F\u3067 = Math.floor(\u5E2F / (ASCENT2 + DESCENT2));
|
|
20297
|
-
const size = Math.max(
|
|
20297
|
+
const size = Math.max(MIN_TEXT_SIZE, Math.min(\u5E45\u3067, \u5E2F\u3067));
|
|
20298
20298
|
const \u5B57\u9AD8 = size * (ASCENT2 + DESCENT2);
|
|
20299
20299
|
const y = \u5B57\u9AD8 <= \u5E2F ? \u4E0A + \u5E2F / 2 + size * (ASCENT2 - DESCENT2) / 2 : \u4E0A > 0 ? \u4E0A + size * ASCENT2 : (\u9AD8\u3055 - \u5B57\u9AD8) / 2 + size * ASCENT2;
|
|
20300
20300
|
return { x: node.w / 2, y, size, anchor: "middle" };
|
|
@@ -22024,6 +22024,12 @@ function \u5E45\u3067\u5207\u308B(text, fontSize, \u4F7F\u3048\u308B\u5E452, \u6
|
|
|
22024
22024
|
}
|
|
22025
22025
|
return `${\u51FA}${\u7701\u7565}`;
|
|
22026
22026
|
}
|
|
22027
|
+
var \u7E2E\u3081\u306E\u4E0B\u9650 = MIN_TEXT_SIZE;
|
|
22028
|
+
function \u5E45\u306B\u53CE\u3081\u308B(text, fontSize, \u4F7F\u3048\u308B\u5E452, \u6E2C\u308B = textWidth) {
|
|
22029
|
+
let size = fontSize;
|
|
22030
|
+
while (size > \u7E2E\u3081\u306E\u4E0B\u9650 && \u6E2C\u308B(text, size) > \u4F7F\u3048\u308B\u5E452) size -= 1;
|
|
22031
|
+
return { text: \u5E45\u3067\u5207\u308B(text, size, \u4F7F\u3048\u308B\u5E452, \u6E2C\u308B), fontSize: size };
|
|
22032
|
+
}
|
|
22027
22033
|
function \u66F8\u8A18\u7D20\u306B\u5206\u3051\u308B(text) {
|
|
22028
22034
|
const \u533A\u5207\u308A = Intl.Segmenter;
|
|
22029
22035
|
if (typeof \u533A\u5207\u308A !== "function") return [...text];
|
|
@@ -22037,12 +22043,13 @@ function \u7BB1\u306B\u7A4D\u3080(\u884C, \u7BB1\u306E\u5E45, \u7BB1\u306E\u9AD8
|
|
|
22037
22043
|
const \u6B8B\u3059 = [...\u5019\u88DC];
|
|
22038
22044
|
while (\u6B8B\u3059.length > 1 && \u9AD8\u3055(\u6B8B\u3059) > \u4F7F\u3048\u308B\u9AD8\u3055) \u6B8B\u3059.pop();
|
|
22039
22045
|
const \u5E45 = \u4F7F\u3048\u308B\u5E45(\u7BB1\u306E\u5E45);
|
|
22040
|
-
const \
|
|
22046
|
+
const \u53CE\u3081\u305F = \u6B8B\u3059.map((r) => ({ ...r, ...\u5E45\u306B\u53CE\u3081\u308B(r.text, r.fontSize, \u5E45) }));
|
|
22047
|
+
const \u7DCF\u9AD8 = \u9AD8\u3055(\u53CE\u3081\u305F);
|
|
22041
22048
|
let \u7A4D\u307F = -\u7DCF\u9AD8 / 2;
|
|
22042
|
-
return \
|
|
22049
|
+
return \u53CE\u3081\u305F.map((r) => {
|
|
22043
22050
|
const dy = \u7A4D\u307F + (\u884C\u9001\u308A\u306E\u6BD4 + \u5B57\u306E\u9AD8\u3055\u306E\u6BD4) / 2 * r.fontSize;
|
|
22044
22051
|
\u7A4D\u307F += r.fontSize * \u884C\u9001\u308A\u306E\u6BD4;
|
|
22045
|
-
return { ...r,
|
|
22052
|
+
return { ...r, dy };
|
|
22046
22053
|
});
|
|
22047
22054
|
}
|
|
22048
22055
|
var MIND_TONES = ["accent", "teal", "success", "warning", "info", "error"];
|
|
@@ -22110,6 +22117,7 @@ function MindMapNode({
|
|
|
22110
22117
|
n.h
|
|
22111
22118
|
);
|
|
22112
22119
|
const \u88DC\u8DB3\u3042\u308A = (n.subtitle ?? "").trim() !== "";
|
|
22120
|
+
const \u53CE\u3081\u305F\u540D\u524D = \u88DC\u8DB3\u3042\u308A ? void 0 : \u5E45\u306B\u53CE\u3081\u308B(n.title, n.isRoot ? 15 : 13, \u4F7F\u3048\u308B\u5E45(n.w));
|
|
22113
22121
|
const \u6587\u5B57\u306E\u8272 = n.isRoot ? "var(--cdl-text-on-tone, #ffffff)" : "var(--cdl-chip-text, #1a1f2a)";
|
|
22114
22122
|
return /* @__PURE__ */ jsxs("g", { "data-cdl-unresolved": n.unresolved ? "true" : void 0, children: [
|
|
22115
22123
|
/* @__PURE__ */ jsx(
|
|
@@ -22125,7 +22133,7 @@ function MindMapNode({
|
|
|
22125
22133
|
strokeWidth: n.isRoot ? 2 : 1.75
|
|
22126
22134
|
}
|
|
22127
22135
|
),
|
|
22128
|
-
\
|
|
22136
|
+
\u53CE\u3081\u305F\u540D\u524D === void 0 ? \u884C.map((r) => /* @__PURE__ */ jsx(
|
|
22129
22137
|
"text",
|
|
22130
22138
|
{
|
|
22131
22139
|
"data-cdl-role": r.\u5F79\u5272 === "subtitle" ? "mind-node-subtitle" : void 0,
|
|
@@ -22142,17 +22150,18 @@ function MindMapNode({
|
|
|
22142
22150
|
)) : (
|
|
22143
22151
|
// 補足が無くても **幅に収める** (#526)。 `箱に積む` を通らないこの経路だけが
|
|
22144
22152
|
// 幅を見ておらず、長い名前がそのまま箱の外へ出て枝の線と重なっていた
|
|
22145
|
-
// (実測 = 中心の箱で文字 163px に対し箱 120px)
|
|
22153
|
+
// (実測 = 中心の箱で文字 163px に対し箱 120px)。
|
|
22154
|
+
// 収める手段は縮めるのが先で、切るのは下限まで縮めても入らない時だけ (#534)
|
|
22146
22155
|
/* @__PURE__ */ jsx(
|
|
22147
22156
|
"text",
|
|
22148
22157
|
{
|
|
22149
22158
|
x: n.x,
|
|
22150
22159
|
y: n.y + 5,
|
|
22151
|
-
fontSize:
|
|
22160
|
+
fontSize: \u53CE\u3081\u305F\u540D\u524D.fontSize,
|
|
22152
22161
|
fontWeight: n.isRoot ? 700 : 600,
|
|
22153
22162
|
textAnchor: "middle",
|
|
22154
22163
|
fill: \u6587\u5B57\u306E\u8272,
|
|
22155
|
-
children: \
|
|
22164
|
+
children: \u53CE\u3081\u305F\u540D\u524D.text
|
|
22156
22165
|
}
|
|
22157
22166
|
)
|
|
22158
22167
|
)
|
|
@@ -22748,6 +22757,7 @@ function TreeNode({
|
|
|
22748
22757
|
n.h
|
|
22749
22758
|
);
|
|
22750
22759
|
const \u88DC\u8DB3\u3042\u308A = (n.subtitle ?? "").trim() !== "";
|
|
22760
|
+
const \u53CE\u3081\u305F\u540D\u524D = \u88DC\u8DB3\u3042\u308A ? void 0 : \u5E45\u306B\u53CE\u3081\u308B(n.title, isRoot ? 13 : 12, \u4F7F\u3048\u308B\u5E45(n.w));
|
|
22751
22761
|
return /* @__PURE__ */ jsx(
|
|
22752
22762
|
"g",
|
|
22753
22763
|
{
|
|
@@ -22766,7 +22776,7 @@ function TreeNode({
|
|
|
22766
22776
|
fill: `url(#${gradientId})`
|
|
22767
22777
|
}
|
|
22768
22778
|
),
|
|
22769
|
-
\
|
|
22779
|
+
\u53CE\u3081\u305F\u540D\u524D === void 0 ? \u7BB1\u306E\u6587\u5B57({
|
|
22770
22780
|
\u884C,
|
|
22771
22781
|
x: n.w / 2,
|
|
22772
22782
|
\u7BB1\u306E\u9AD8\u3055: n.h,
|
|
@@ -22780,11 +22790,11 @@ function TreeNode({
|
|
|
22780
22790
|
{
|
|
22781
22791
|
x: n.w / 2,
|
|
22782
22792
|
y: n.h / 2 + 5,
|
|
22783
|
-
fontSize:
|
|
22793
|
+
fontSize: \u53CE\u3081\u305F\u540D\u524D.fontSize,
|
|
22784
22794
|
fontWeight: 700,
|
|
22785
22795
|
textAnchor: "middle",
|
|
22786
22796
|
fill: "var(--cdl-text-on-tone, #ffffff)",
|
|
22787
|
-
children: \
|
|
22797
|
+
children: \u53CE\u3081\u305F\u540D\u524D.text
|
|
22788
22798
|
}
|
|
22789
22799
|
)
|
|
22790
22800
|
)
|
|
@@ -22804,7 +22814,7 @@ function TreeNode({
|
|
|
22804
22814
|
}
|
|
22805
22815
|
),
|
|
22806
22816
|
/* @__PURE__ */ jsx("rect", { x: 0, y: 0, width: 4, height: n.h, rx: 2, fill: accent }),
|
|
22807
|
-
\
|
|
22817
|
+
\u53CE\u3081\u305F\u540D\u524D === void 0 ? \u7BB1\u306E\u6587\u5B57({
|
|
22808
22818
|
\u884C,
|
|
22809
22819
|
x: n.w / 2 + 2,
|
|
22810
22820
|
\u7BB1\u306E\u9AD8\u3055: n.h,
|
|
@@ -22815,11 +22825,11 @@ function TreeNode({
|
|
|
22815
22825
|
{
|
|
22816
22826
|
x: n.w / 2 + 2,
|
|
22817
22827
|
y: n.h / 2 + 4,
|
|
22818
|
-
fontSize:
|
|
22828
|
+
fontSize: \u53CE\u3081\u305F\u540D\u524D.fontSize,
|
|
22819
22829
|
fontWeight: 600,
|
|
22820
22830
|
textAnchor: "middle",
|
|
22821
22831
|
fill: "var(--cdl-chip-text, #1a1f2a)",
|
|
22822
|
-
children: \
|
|
22832
|
+
children: \u53CE\u3081\u305F\u540D\u524D.text
|
|
22823
22833
|
}
|
|
22824
22834
|
)
|
|
22825
22835
|
] })
|
|
@@ -24524,15 +24534,15 @@ var externalLabel = (node, cx, bottomY) => /* @__PURE__ */ jsxs(Fragment, { chil
|
|
|
24524
24534
|
)
|
|
24525
24535
|
] });
|
|
24526
24536
|
var LABEL_EYEBROW_SPACING = 2;
|
|
24527
|
-
function \u5E45\u306B\u53CE\u3081\
|
|
24537
|
+
function \u5E45\u306B\u53CE\u3081\u308B2(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45) {
|
|
24528
24538
|
const \u5E45 = textWidth(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593);
|
|
24529
24539
|
const \u500D\u7387 = \u5E45 > 0 && \u7BB1\u5E45 > 0 ? Math.min(1, \u7BB1\u5E45 / \u5E45) : 1;
|
|
24530
24540
|
return { size: \u5927\u304D\u3055 * \u500D\u7387, spacing: \u5B57\u9593 * \u500D\u7387 };
|
|
24531
24541
|
}
|
|
24532
24542
|
function bottomLabel(node, cx, plan) {
|
|
24533
|
-
const \u80A9 = \u5E45\u306B\u53CE\u3081\
|
|
24534
|
-
const \u540D = \u5E45\u306B\u53CE\u3081\
|
|
24535
|
-
const \u8AAC = \u5E45\u306B\u53CE\u3081\
|
|
24543
|
+
const \u80A9 = \u5E45\u306B\u53CE\u3081\u308B2(node.eyebrow ?? "", plan.\u80A9\u66F8?.size ?? 0, LABEL_EYEBROW_SPACING, node.w);
|
|
24544
|
+
const \u540D = \u5E45\u306B\u53CE\u3081\u308B2(node.title ?? "", plan.\u540D\u524D.size, 0, node.w);
|
|
24545
|
+
const \u8AAC = \u5E45\u306B\u53CE\u3081\u308B2(node.subtitle ?? "", plan.\u8AAC\u660E?.size ?? 0, 0, node.w);
|
|
24536
24546
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
24537
24547
|
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: node.eyebrow }),
|
|
24538
24548
|
/* @__PURE__ */ jsx("text", { "data-cdl-role": "node-label", x: cx, y: plan.\u540D\u524D.y, fontSize: \u540D.size, fontWeight: 700, textAnchor: "middle", fill: "var(--cdl-text, #1a1f2a)", children: node.title }),
|
|
@@ -25849,15 +25859,15 @@ function \u5B57\u5E45(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593) {
|
|
|
25849
25859
|
}
|
|
25850
25860
|
return \u5E45 + \u5B57\u9593 * \u5B57\u6570;
|
|
25851
25861
|
}
|
|
25852
|
-
function \u5E45\u306B\u53CE\u3081\
|
|
25862
|
+
function \u5E45\u306B\u53CE\u3081\u308B3(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45) {
|
|
25853
25863
|
const \u5E45 = \u5B57\u5E45(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593);
|
|
25854
25864
|
const \u500D\u7387 = \u5E45 > 0 && \u7BB1\u5E45 > 0 ? Math.min(1, \u7BB1\u5E45 / \u5E45) : 1;
|
|
25855
25865
|
return { size: \u5927\u304D\u3055 * \u500D\u7387, spacing: \u5B57\u9593 * \u500D\u7387 };
|
|
25856
25866
|
}
|
|
25857
25867
|
function bottomLabel3(node, cx, plan) {
|
|
25858
|
-
const \u80A9 = \u5E45\u306B\u53CE\u3081\
|
|
25859
|
-
const \u540D = \u5E45\u306B\u53CE\u3081\
|
|
25860
|
-
const \u8AAC = \u5E45\u306B\u53CE\u3081\
|
|
25868
|
+
const \u80A9 = \u5E45\u306B\u53CE\u3081\u308B3(node.eyebrow ?? "", plan.\u80A9\u66F8?.size ?? 0, LABEL_EYEBROW_SPACING2, node.w);
|
|
25869
|
+
const \u540D = \u5E45\u306B\u53CE\u3081\u308B3(node.title ?? "", plan.\u540D\u524D.size, 0, node.w);
|
|
25870
|
+
const \u8AAC = \u5E45\u306B\u53CE\u3081\u308B3(node.subtitle ?? "", plan.\u8AAC\u660E?.size ?? 0, 0, node.w);
|
|
25861
25871
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
25862
25872
|
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: node.eyebrow }),
|
|
25863
25873
|
/* @__PURE__ */ jsx("text", { "data-cdl-role": "node-label", x: cx, y: plan.\u540D\u524D.y, fontSize: \u540D.size, fontWeight: 700, textAnchor: "middle", fill: "var(--cdl-text, #1a1f2a)", children: node.title }),
|
|
@@ -26298,15 +26308,15 @@ function \u5B57\u5E452(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593) {
|
|
|
26298
26308
|
}
|
|
26299
26309
|
return \u5E45 + \u5B57\u9593 * \u5B57\u6570;
|
|
26300
26310
|
}
|
|
26301
|
-
function \u5E45\u306B\u53CE\u3081\
|
|
26311
|
+
function \u5E45\u306B\u53CE\u3081\u308B4(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45) {
|
|
26302
26312
|
const \u5E45 = \u5B57\u5E452(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593);
|
|
26303
26313
|
const \u500D\u7387 = \u5E45 > 0 && \u7BB1\u5E45 > 0 ? Math.min(1, \u7BB1\u5E45 / \u5E45) : 1;
|
|
26304
26314
|
return { size: \u5927\u304D\u3055 * \u500D\u7387, spacing: \u5B57\u9593 * \u500D\u7387 };
|
|
26305
26315
|
}
|
|
26306
26316
|
function bottomLabel4(node, cx, plan) {
|
|
26307
|
-
const \u80A9 = \u5E45\u306B\u53CE\u3081\
|
|
26308
|
-
const \u540D = \u5E45\u306B\u53CE\u3081\
|
|
26309
|
-
const \u8AAC = \u5E45\u306B\u53CE\u3081\
|
|
26317
|
+
const \u80A9 = \u5E45\u306B\u53CE\u3081\u308B4(node.eyebrow ?? "", plan.\u80A9\u66F8?.size ?? 0, LABEL_EYEBROW_SPACING3, node.w);
|
|
26318
|
+
const \u540D = \u5E45\u306B\u53CE\u3081\u308B4(node.title ?? "", plan.\u540D\u524D.size, 0, node.w);
|
|
26319
|
+
const \u8AAC = \u5E45\u306B\u53CE\u3081\u308B4(node.subtitle ?? "", plan.\u8AAC\u660E?.size ?? 0, 0, node.w);
|
|
26310
26320
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
26311
26321
|
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: node.eyebrow }),
|
|
26312
26322
|
/* @__PURE__ */ jsx("text", { "data-cdl-role": "node-label", x: cx, y: plan.\u540D\u524D.y, fontSize: \u540D.size, fontWeight: 700, textAnchor: "middle", fill: "var(--cdl-text, #1a1f2a)", children: node.title }),
|