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