@cardenelabs/cdl 0.56.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 +18 -1
- package/dist/index.cjs +66 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +66 -2
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +66 -2
- package/dist/react.cjs.map +1 -1
- package/dist/react.js +66 -2
- 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/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
|
{
|