@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/react.cjs
CHANGED
|
@@ -5570,10 +5570,10 @@ function fitTextSize(text, maxWidth, targetSize, minSize) {
|
|
|
5570
5570
|
}
|
|
5571
5571
|
var COMPACT_MAX_H = 100;
|
|
5572
5572
|
var COMPACT_PADDING_X = 16;
|
|
5573
|
-
var
|
|
5573
|
+
var MIN_TEXT_SIZE = 11;
|
|
5574
5574
|
var ASCENT = 0.72;
|
|
5575
5575
|
var DESCENT = 0.25;
|
|
5576
|
-
var MIN_BAND_H =
|
|
5576
|
+
var MIN_BAND_H = MIN_TEXT_SIZE * (ASCENT + DESCENT);
|
|
5577
5577
|
var EYEBROW_BASELINE = 38;
|
|
5578
5578
|
var EYEBROW_SIZE = 18;
|
|
5579
5579
|
var EYEBROW_GAP = 8;
|
|
@@ -5595,10 +5595,10 @@ function titlePlacement(node, \u901A\u5E38, opts = {}) {
|
|
|
5595
5595
|
node.title,
|
|
5596
5596
|
Math.max(0, node.w - COMPACT_PADDING_X),
|
|
5597
5597
|
\u901A\u5E38.size,
|
|
5598
|
-
|
|
5598
|
+
MIN_TEXT_SIZE
|
|
5599
5599
|
);
|
|
5600
5600
|
const \u5E2F\u3067 = Math.floor(\u5E2F / (ASCENT + DESCENT));
|
|
5601
|
-
const size = Math.max(
|
|
5601
|
+
const size = Math.max(MIN_TEXT_SIZE, Math.min(\u5E45\u3067, \u5E2F\u3067));
|
|
5602
5602
|
const \u5B57\u9AD8 = size * (ASCENT + DESCENT);
|
|
5603
5603
|
const y = \u5B57\u9AD8 <= \u5E2F ? \u4E0A + \u5E2F / 2 + size * (ASCENT - DESCENT) / 2 : \u4E0A > 0 ? \u4E0A + size * ASCENT : (\u9AD8\u3055 - \u5B57\u9AD8) / 2 + size * ASCENT;
|
|
5604
5604
|
return { x: node.w / 2, y, size, anchor: "middle" };
|
|
@@ -7328,6 +7328,12 @@ function \u5E45\u3067\u5207\u308B(text, fontSize, \u4F7F\u3048\u308B\u5E452, \u6
|
|
|
7328
7328
|
}
|
|
7329
7329
|
return `${\u51FA}${\u7701\u7565}`;
|
|
7330
7330
|
}
|
|
7331
|
+
var \u7E2E\u3081\u306E\u4E0B\u9650 = MIN_TEXT_SIZE;
|
|
7332
|
+
function \u5E45\u306B\u53CE\u3081\u308B(text, fontSize, \u4F7F\u3048\u308B\u5E452, \u6E2C\u308B = textWidth) {
|
|
7333
|
+
let size = fontSize;
|
|
7334
|
+
while (size > \u7E2E\u3081\u306E\u4E0B\u9650 && \u6E2C\u308B(text, size) > \u4F7F\u3048\u308B\u5E452) size -= 1;
|
|
7335
|
+
return { text: \u5E45\u3067\u5207\u308B(text, size, \u4F7F\u3048\u308B\u5E452, \u6E2C\u308B), fontSize: size };
|
|
7336
|
+
}
|
|
7331
7337
|
function \u66F8\u8A18\u7D20\u306B\u5206\u3051\u308B(text) {
|
|
7332
7338
|
const \u533A\u5207\u308A = Intl.Segmenter;
|
|
7333
7339
|
if (typeof \u533A\u5207\u308A !== "function") return [...text];
|
|
@@ -7341,12 +7347,13 @@ function \u7BB1\u306B\u7A4D\u3080(\u884C, \u7BB1\u306E\u5E45, \u7BB1\u306E\u9AD8
|
|
|
7341
7347
|
const \u6B8B\u3059 = [...\u5019\u88DC];
|
|
7342
7348
|
while (\u6B8B\u3059.length > 1 && \u9AD8\u3055(\u6B8B\u3059) > \u4F7F\u3048\u308B\u9AD8\u3055) \u6B8B\u3059.pop();
|
|
7343
7349
|
const \u5E45 = \u4F7F\u3048\u308B\u5E45(\u7BB1\u306E\u5E45);
|
|
7344
|
-
const \
|
|
7350
|
+
const \u53CE\u3081\u305F = \u6B8B\u3059.map((r) => ({ ...r, ...\u5E45\u306B\u53CE\u3081\u308B(r.text, r.fontSize, \u5E45) }));
|
|
7351
|
+
const \u7DCF\u9AD8 = \u9AD8\u3055(\u53CE\u3081\u305F);
|
|
7345
7352
|
let \u7A4D\u307F = -\u7DCF\u9AD8 / 2;
|
|
7346
|
-
return \
|
|
7353
|
+
return \u53CE\u3081\u305F.map((r) => {
|
|
7347
7354
|
const dy = \u7A4D\u307F + (\u884C\u9001\u308A\u306E\u6BD4 + \u5B57\u306E\u9AD8\u3055\u306E\u6BD4) / 2 * r.fontSize;
|
|
7348
7355
|
\u7A4D\u307F += r.fontSize * \u884C\u9001\u308A\u306E\u6BD4;
|
|
7349
|
-
return { ...r,
|
|
7356
|
+
return { ...r, dy };
|
|
7350
7357
|
});
|
|
7351
7358
|
}
|
|
7352
7359
|
var MIND_TONES = ["accent", "teal", "success", "warning", "info", "error"];
|
|
@@ -7414,6 +7421,7 @@ function MindMapNode({
|
|
|
7414
7421
|
n.h
|
|
7415
7422
|
);
|
|
7416
7423
|
const \u88DC\u8DB3\u3042\u308A = (n.subtitle ?? "").trim() !== "";
|
|
7424
|
+
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));
|
|
7417
7425
|
const \u6587\u5B57\u306E\u8272 = n.isRoot ? "var(--cdl-text-on-tone, #ffffff)" : "var(--cdl-chip-text, #1a1f2a)";
|
|
7418
7426
|
return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-unresolved": n.unresolved ? "true" : void 0, children: [
|
|
7419
7427
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -7429,7 +7437,7 @@ function MindMapNode({
|
|
|
7429
7437
|
strokeWidth: n.isRoot ? 2 : 1.75
|
|
7430
7438
|
}
|
|
7431
7439
|
),
|
|
7432
|
-
\
|
|
7440
|
+
\u53CE\u3081\u305F\u540D\u524D === void 0 ? \u884C.map((r) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
7433
7441
|
"text",
|
|
7434
7442
|
{
|
|
7435
7443
|
"data-cdl-role": r.\u5F79\u5272 === "subtitle" ? "mind-node-subtitle" : void 0,
|
|
@@ -7446,17 +7454,18 @@ function MindMapNode({
|
|
|
7446
7454
|
)) : (
|
|
7447
7455
|
// 補足が無くても **幅に収める** (#526)。 `箱に積む` を通らないこの経路だけが
|
|
7448
7456
|
// 幅を見ておらず、長い名前がそのまま箱の外へ出て枝の線と重なっていた
|
|
7449
|
-
// (実測 = 中心の箱で文字 163px に対し箱 120px)
|
|
7457
|
+
// (実測 = 中心の箱で文字 163px に対し箱 120px)。
|
|
7458
|
+
// 収める手段は縮めるのが先で、切るのは下限まで縮めても入らない時だけ (#534)
|
|
7450
7459
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
7451
7460
|
"text",
|
|
7452
7461
|
{
|
|
7453
7462
|
x: n.x,
|
|
7454
7463
|
y: n.y + 5,
|
|
7455
|
-
fontSize:
|
|
7464
|
+
fontSize: \u53CE\u3081\u305F\u540D\u524D.fontSize,
|
|
7456
7465
|
fontWeight: n.isRoot ? 700 : 600,
|
|
7457
7466
|
textAnchor: "middle",
|
|
7458
7467
|
fill: \u6587\u5B57\u306E\u8272,
|
|
7459
|
-
children: \
|
|
7468
|
+
children: \u53CE\u3081\u305F\u540D\u524D.text
|
|
7460
7469
|
}
|
|
7461
7470
|
)
|
|
7462
7471
|
)
|
|
@@ -8052,6 +8061,7 @@ function TreeNode({
|
|
|
8052
8061
|
n.h
|
|
8053
8062
|
);
|
|
8054
8063
|
const \u88DC\u8DB3\u3042\u308A = (n.subtitle ?? "").trim() !== "";
|
|
8064
|
+
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));
|
|
8055
8065
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
8056
8066
|
"g",
|
|
8057
8067
|
{
|
|
@@ -8070,7 +8080,7 @@ function TreeNode({
|
|
|
8070
8080
|
fill: `url(#${gradientId})`
|
|
8071
8081
|
}
|
|
8072
8082
|
),
|
|
8073
|
-
\
|
|
8083
|
+
\u53CE\u3081\u305F\u540D\u524D === void 0 ? \u7BB1\u306E\u6587\u5B57({
|
|
8074
8084
|
\u884C,
|
|
8075
8085
|
x: n.w / 2,
|
|
8076
8086
|
\u7BB1\u306E\u9AD8\u3055: n.h,
|
|
@@ -8084,11 +8094,11 @@ function TreeNode({
|
|
|
8084
8094
|
{
|
|
8085
8095
|
x: n.w / 2,
|
|
8086
8096
|
y: n.h / 2 + 5,
|
|
8087
|
-
fontSize:
|
|
8097
|
+
fontSize: \u53CE\u3081\u305F\u540D\u524D.fontSize,
|
|
8088
8098
|
fontWeight: 700,
|
|
8089
8099
|
textAnchor: "middle",
|
|
8090
8100
|
fill: "var(--cdl-text-on-tone, #ffffff)",
|
|
8091
|
-
children: \
|
|
8101
|
+
children: \u53CE\u3081\u305F\u540D\u524D.text
|
|
8092
8102
|
}
|
|
8093
8103
|
)
|
|
8094
8104
|
)
|
|
@@ -8108,7 +8118,7 @@ function TreeNode({
|
|
|
8108
8118
|
}
|
|
8109
8119
|
),
|
|
8110
8120
|
/* @__PURE__ */ jsxRuntime.jsx("rect", { x: 0, y: 0, width: 4, height: n.h, rx: 2, fill: accent }),
|
|
8111
|
-
\
|
|
8121
|
+
\u53CE\u3081\u305F\u540D\u524D === void 0 ? \u7BB1\u306E\u6587\u5B57({
|
|
8112
8122
|
\u884C,
|
|
8113
8123
|
x: n.w / 2 + 2,
|
|
8114
8124
|
\u7BB1\u306E\u9AD8\u3055: n.h,
|
|
@@ -8119,11 +8129,11 @@ function TreeNode({
|
|
|
8119
8129
|
{
|
|
8120
8130
|
x: n.w / 2 + 2,
|
|
8121
8131
|
y: n.h / 2 + 4,
|
|
8122
|
-
fontSize:
|
|
8132
|
+
fontSize: \u53CE\u3081\u305F\u540D\u524D.fontSize,
|
|
8123
8133
|
fontWeight: 600,
|
|
8124
8134
|
textAnchor: "middle",
|
|
8125
8135
|
fill: "var(--cdl-chip-text, #1a1f2a)",
|
|
8126
|
-
children: \
|
|
8136
|
+
children: \u53CE\u3081\u305F\u540D\u524D.text
|
|
8127
8137
|
}
|
|
8128
8138
|
)
|
|
8129
8139
|
] })
|
|
@@ -10009,15 +10019,15 @@ var externalLabel = (node, cx, bottomY) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRu
|
|
|
10009
10019
|
)
|
|
10010
10020
|
] });
|
|
10011
10021
|
var LABEL_EYEBROW_SPACING = 2;
|
|
10012
|
-
function \u5E45\u306B\u53CE\u3081\
|
|
10022
|
+
function \u5E45\u306B\u53CE\u3081\u308B2(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45) {
|
|
10013
10023
|
const \u5E45 = textWidth(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593);
|
|
10014
10024
|
const \u500D\u7387 = \u5E45 > 0 && \u7BB1\u5E45 > 0 ? Math.min(1, \u7BB1\u5E45 / \u5E45) : 1;
|
|
10015
10025
|
return { size: \u5927\u304D\u3055 * \u500D\u7387, spacing: \u5B57\u9593 * \u500D\u7387 };
|
|
10016
10026
|
}
|
|
10017
10027
|
function bottomLabel(node, cx, plan) {
|
|
10018
|
-
const \u80A9 = \u5E45\u306B\u53CE\u3081\
|
|
10019
|
-
const \u540D = \u5E45\u306B\u53CE\u3081\
|
|
10020
|
-
const \u8AAC = \u5E45\u306B\u53CE\u3081\
|
|
10028
|
+
const \u80A9 = \u5E45\u306B\u53CE\u3081\u308B2(node.eyebrow ?? "", plan.\u80A9\u66F8?.size ?? 0, LABEL_EYEBROW_SPACING, node.w);
|
|
10029
|
+
const \u540D = \u5E45\u306B\u53CE\u3081\u308B2(node.title ?? "", plan.\u540D\u524D.size, 0, node.w);
|
|
10030
|
+
const \u8AAC = \u5E45\u306B\u53CE\u3081\u308B2(node.subtitle ?? "", plan.\u8AAC\u660E?.size ?? 0, 0, node.w);
|
|
10021
10031
|
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
10022
10032
|
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: node.eyebrow }),
|
|
10023
10033
|
/* @__PURE__ */ jsxRuntime.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 }),
|
|
@@ -11334,15 +11344,15 @@ function \u5B57\u5E45(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593) {
|
|
|
11334
11344
|
}
|
|
11335
11345
|
return \u5E45 + \u5B57\u9593 * \u5B57\u6570;
|
|
11336
11346
|
}
|
|
11337
|
-
function \u5E45\u306B\u53CE\u3081\
|
|
11347
|
+
function \u5E45\u306B\u53CE\u3081\u308B3(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45) {
|
|
11338
11348
|
const \u5E45 = \u5B57\u5E45(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593);
|
|
11339
11349
|
const \u500D\u7387 = \u5E45 > 0 && \u7BB1\u5E45 > 0 ? Math.min(1, \u7BB1\u5E45 / \u5E45) : 1;
|
|
11340
11350
|
return { size: \u5927\u304D\u3055 * \u500D\u7387, spacing: \u5B57\u9593 * \u500D\u7387 };
|
|
11341
11351
|
}
|
|
11342
11352
|
function bottomLabel3(node, cx, plan) {
|
|
11343
|
-
const \u80A9 = \u5E45\u306B\u53CE\u3081\
|
|
11344
|
-
const \u540D = \u5E45\u306B\u53CE\u3081\
|
|
11345
|
-
const \u8AAC = \u5E45\u306B\u53CE\u3081\
|
|
11353
|
+
const \u80A9 = \u5E45\u306B\u53CE\u3081\u308B3(node.eyebrow ?? "", plan.\u80A9\u66F8?.size ?? 0, LABEL_EYEBROW_SPACING2, node.w);
|
|
11354
|
+
const \u540D = \u5E45\u306B\u53CE\u3081\u308B3(node.title ?? "", plan.\u540D\u524D.size, 0, node.w);
|
|
11355
|
+
const \u8AAC = \u5E45\u306B\u53CE\u3081\u308B3(node.subtitle ?? "", plan.\u8AAC\u660E?.size ?? 0, 0, node.w);
|
|
11346
11356
|
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
11347
11357
|
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: node.eyebrow }),
|
|
11348
11358
|
/* @__PURE__ */ jsxRuntime.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 }),
|
|
@@ -11783,15 +11793,15 @@ function \u5B57\u5E452(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593) {
|
|
|
11783
11793
|
}
|
|
11784
11794
|
return \u5E45 + \u5B57\u9593 * \u5B57\u6570;
|
|
11785
11795
|
}
|
|
11786
|
-
function \u5E45\u306B\u53CE\u3081\
|
|
11796
|
+
function \u5E45\u306B\u53CE\u3081\u308B4(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45) {
|
|
11787
11797
|
const \u5E45 = \u5B57\u5E452(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593);
|
|
11788
11798
|
const \u500D\u7387 = \u5E45 > 0 && \u7BB1\u5E45 > 0 ? Math.min(1, \u7BB1\u5E45 / \u5E45) : 1;
|
|
11789
11799
|
return { size: \u5927\u304D\u3055 * \u500D\u7387, spacing: \u5B57\u9593 * \u500D\u7387 };
|
|
11790
11800
|
}
|
|
11791
11801
|
function bottomLabel4(node, cx, plan) {
|
|
11792
|
-
const \u80A9 = \u5E45\u306B\u53CE\u3081\
|
|
11793
|
-
const \u540D = \u5E45\u306B\u53CE\u3081\
|
|
11794
|
-
const \u8AAC = \u5E45\u306B\u53CE\u3081\
|
|
11802
|
+
const \u80A9 = \u5E45\u306B\u53CE\u3081\u308B4(node.eyebrow ?? "", plan.\u80A9\u66F8?.size ?? 0, LABEL_EYEBROW_SPACING3, node.w);
|
|
11803
|
+
const \u540D = \u5E45\u306B\u53CE\u3081\u308B4(node.title ?? "", plan.\u540D\u524D.size, 0, node.w);
|
|
11804
|
+
const \u8AAC = \u5E45\u306B\u53CE\u3081\u308B4(node.subtitle ?? "", plan.\u8AAC\u660E?.size ?? 0, 0, node.w);
|
|
11795
11805
|
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
11796
11806
|
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: node.eyebrow }),
|
|
11797
11807
|
/* @__PURE__ */ jsxRuntime.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 }),
|