@cardenelabs/cdl 0.55.0 → 0.57.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 +30 -1
- package/dist/index.cjs +74 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +74 -3
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +74 -3
- package/dist/react.cjs.map +1 -1
- package/dist/react.js +74 -3
- package/dist/react.js.map +1 -1
- package/package.json +1 -1
- package/src/kinds/card.tsx +27 -7
- package/src/kinds/compact-title.ts +2 -2
- package/src/kinds/subtitle-lines.ts +99 -0
- package/src/kinds/user-journey.tsx +9 -1
package/dist/index.js
CHANGED
|
@@ -23385,6 +23385,55 @@ function ActorNode({ node, active, value }) {
|
|
|
23385
23385
|
)
|
|
23386
23386
|
] });
|
|
23387
23387
|
}
|
|
23388
|
+
|
|
23389
|
+
// src/kinds/subtitle-lines.ts
|
|
23390
|
+
var SUBTITLE_SIZE = 21;
|
|
23391
|
+
var SUBTITLE_MIN_SIZE = 12;
|
|
23392
|
+
var \u884C\u9001\u308A\u306E\u500D\u7387 = 1.2;
|
|
23393
|
+
function \u8AAC\u660E\u6587\u3092\u5272\u308A\u4ED8\u3051\u308B(text, maxWidth, opts) {
|
|
23394
|
+
const \u76EE\u6A19 = opts.targetSize ?? SUBTITLE_SIZE;
|
|
23395
|
+
const \u8AAD\u3081\u308B\u5927\u304D\u3055 = fitTextSize(text, maxWidth, \u76EE\u6A19, SUBTITLE_MIN_SIZE);
|
|
23396
|
+
if (estimateTextWidth(text, \u8AAD\u3081\u308B\u5927\u304D\u3055) <= maxWidth) return { size: \u8AAD\u3081\u308B\u5927\u304D\u3055, lines: [text] };
|
|
23397
|
+
if (opts.\u4E8C\u884C\u307E\u3067) {
|
|
23398
|
+
for (let size = \u76EE\u6A19; size >= SUBTITLE_MIN_SIZE; size -= 1) {
|
|
23399
|
+
const \u884C = \u4E8C\u884C\u306B\u5272\u308B(text, maxWidth, size);
|
|
23400
|
+
if (\u884C) return { size, lines: \u884C };
|
|
23401
|
+
}
|
|
23402
|
+
}
|
|
23403
|
+
return { size: fitTextSize(text, maxWidth, \u76EE\u6A19, MIN_TEXT_SIZE), lines: [text] };
|
|
23404
|
+
}
|
|
23405
|
+
function \u4E8C\u884C\u306B\u5272\u308B(text, maxWidth, size) {
|
|
23406
|
+
let \u4E00\u756A\u826F\u3044;
|
|
23407
|
+
let \u4E00\u756A\u72ED\u3044 = Infinity;
|
|
23408
|
+
for (const [\u5DE6, \u53F3] of \u5272\u308B\u5019\u88DC(text)) {
|
|
23409
|
+
const \u5E45 = Math.max(estimateTextWidth(\u5DE6, size), estimateTextWidth(\u53F3, size));
|
|
23410
|
+
if (\u5E45 > maxWidth || \u5E45 >= \u4E00\u756A\u72ED\u3044) continue;
|
|
23411
|
+
\u4E00\u756A\u72ED\u3044 = \u5E45;
|
|
23412
|
+
\u4E00\u756A\u826F\u3044 = [\u5DE6, \u53F3];
|
|
23413
|
+
}
|
|
23414
|
+
return \u4E00\u756A\u826F\u3044;
|
|
23415
|
+
}
|
|
23416
|
+
function \u5272\u308B\u5019\u88DC(text) {
|
|
23417
|
+
const \u533A\u5207\u308A = [];
|
|
23418
|
+
for (const m of text.matchAll(/\s*\/\s*/g)) {
|
|
23419
|
+
\u533A\u5207\u308A.push([text.slice(0, m.index).trim(), text.slice(m.index + m[0].length).trim()]);
|
|
23420
|
+
}
|
|
23421
|
+
if (\u533A\u5207\u308A.length > 0) return \u533A\u5207\u308A.filter(\u5165\u3063\u3066\u3044\u308B);
|
|
23422
|
+
const \u7A7A\u767D = [];
|
|
23423
|
+
for (const m of text.matchAll(/\s+/g)) {
|
|
23424
|
+
\u7A7A\u767D.push([text.slice(0, m.index).trim(), text.slice(m.index + m[0].length).trim()]);
|
|
23425
|
+
}
|
|
23426
|
+
if (\u7A7A\u767D.length > 0) return \u7A7A\u767D.filter(\u5165\u3063\u3066\u3044\u308B);
|
|
23427
|
+
const \u5B57 = [];
|
|
23428
|
+
const \u4E26\u3073 = [...text];
|
|
23429
|
+
for (let i = 1; i < \u4E26\u3073.length; i += 1) {
|
|
23430
|
+
\u5B57.push([\u4E26\u3073.slice(0, i).join(""), \u4E26\u3073.slice(i).join("")]);
|
|
23431
|
+
}
|
|
23432
|
+
return \u5B57.filter(\u5165\u3063\u3066\u3044\u308B);
|
|
23433
|
+
}
|
|
23434
|
+
function \u5165\u3063\u3066\u3044\u308B([\u5DE6, \u53F3]) {
|
|
23435
|
+
return \u5DE6 !== "" && \u53F3 !== "";
|
|
23436
|
+
}
|
|
23388
23437
|
function CardNode({ node, active }) {
|
|
23389
23438
|
const accent = nodeAccent(node, "var(--cdl-tone-accent, #2d6a8f)");
|
|
23390
23439
|
const x = node.cx - node.w / 2;
|
|
@@ -23409,7 +23458,12 @@ function CardNode({ node, active }) {
|
|
|
23409
23458
|
const initialTitleSize = compact ? 20 : 24;
|
|
23410
23459
|
const titleSize = fitTextSize(node.title, availableW, initialTitleSize, 11);
|
|
23411
23460
|
const textAnchor = compact ? "middle" : "start";
|
|
23412
|
-
const
|
|
23461
|
+
const subtitleY = 124 - \u305A\u3089\u3057;
|
|
23462
|
+
const \u6700\u5927\u306E\u884C\u9001\u308A = SUBTITLE_SIZE * \u884C\u9001\u308A\u306E\u500D\u7387;
|
|
23463
|
+
const \u4E8C\u884C\u304C\u5165\u308B = !compact && subtitleY - \u6700\u5927\u306E\u884C\u9001\u308A / 2 - SUBTITLE_SIZE * ASCENT2 > titleY + titleSize * DESCENT2 && subtitleY + \u6700\u5927\u306E\u884C\u9001\u308A / 2 + SUBTITLE_SIZE * DESCENT2 <= node.h - 4;
|
|
23464
|
+
const \u8AAC\u660E = node.subtitle ? \u8AAC\u660E\u6587\u3092\u5272\u308A\u4ED8\u3051\u308B(node.subtitle, availableW, { \u4E8C\u884C\u307E\u3067: \u4E8C\u884C\u304C\u5165\u308B }) : void 0;
|
|
23465
|
+
const subtitleSize = \u8AAC\u660E?.size ?? 21;
|
|
23466
|
+
const \u884C\u9001\u308A = subtitleSize * \u884C\u9001\u308A\u306E\u500D\u7387;
|
|
23413
23467
|
return /* @__PURE__ */ jsxs("g", { transform: `translate(${x} ${y})`, children: [
|
|
23414
23468
|
/* @__PURE__ */ jsx(
|
|
23415
23469
|
"rect",
|
|
@@ -23439,7 +23493,17 @@ function CardNode({ node, active }) {
|
|
|
23439
23493
|
children: node.title
|
|
23440
23494
|
}
|
|
23441
23495
|
),
|
|
23442
|
-
!compact &&
|
|
23496
|
+
!compact && \u8AAC\u660E?.lines.map((\u884C, i) => /* @__PURE__ */ jsx(
|
|
23497
|
+
"text",
|
|
23498
|
+
{
|
|
23499
|
+
x: 26,
|
|
23500
|
+
y: subtitleY + (i - (\u8AAC\u660E.lines.length - 1) / 2) * \u884C\u9001\u308A,
|
|
23501
|
+
fontSize: subtitleSize,
|
|
23502
|
+
fill: "var(--cdl-text-dim, #5a6270)",
|
|
23503
|
+
children: \u884C
|
|
23504
|
+
},
|
|
23505
|
+
`sub-${i}`
|
|
23506
|
+
)),
|
|
23443
23507
|
\u5C0F\u578B\u306B\u547C\u3073\u540D && /* @__PURE__ */ jsx(
|
|
23444
23508
|
"text",
|
|
23445
23509
|
{
|
|
@@ -26974,6 +27038,13 @@ function UserJourneyNode({
|
|
|
26974
27038
|
frustrated: "\u{1F615}",
|
|
26975
27039
|
angry: "\u{1F620}"
|
|
26976
27040
|
};
|
|
27041
|
+
const emotionLabel = {
|
|
27042
|
+
delighted: "\u5927\u6E80\u8DB3",
|
|
27043
|
+
happy: "\u6E80\u8DB3",
|
|
27044
|
+
neutral: "\u3075\u3064\u3046",
|
|
27045
|
+
frustrated: "\u4E0D\u6E80",
|
|
27046
|
+
angry: "\u6012\u308A"
|
|
27047
|
+
};
|
|
26977
27048
|
const rowH = canvasH / 5;
|
|
26978
27049
|
const colW = canvasW / Math.max(steps.length, 1);
|
|
26979
27050
|
const xAt = (idx) => PAD_LEFT2 + (steps.length <= 1 ? canvasW / 2 : colW / 2 + colW * idx);
|
|
@@ -27038,7 +27109,7 @@ function UserJourneyNode({
|
|
|
27038
27109
|
fontWeight: 600,
|
|
27039
27110
|
textAnchor: "end",
|
|
27040
27111
|
fill: emotionColor[e],
|
|
27041
|
-
children: e
|
|
27112
|
+
children: emotionLabel[e]
|
|
27042
27113
|
}
|
|
27043
27114
|
)
|
|
27044
27115
|
] }, `band-${e}`)),
|