@cardenelabs/cdl 0.61.0 → 0.63.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 +36 -1
- package/dist/index.cjs +156 -126
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +156 -126
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +32 -5
- package/dist/react.cjs.map +1 -1
- package/dist/react.js +32 -5
- package/dist/react.js.map +1 -1
- package/package.json +1 -1
- package/src/lang.ts +18 -0
- package/src/presets.ts +13 -6
- package/src/render/interactive-panel.tsx +25 -4
package/dist/index.js
CHANGED
|
@@ -558,6 +558,18 @@ var en = {
|
|
|
558
558
|
"readout.kanban.inprogress": "In Progress",
|
|
559
559
|
/** `kanban-board` の列の見出し (値は `done` で読む) */
|
|
560
560
|
"readout.kanban.done": "Done",
|
|
561
|
+
/** `status-timeline` の区間の字 (値は `active` で読む) */
|
|
562
|
+
"readout.statusTimeline.active": "ACTIVE",
|
|
563
|
+
/** `status-timeline` の区間の字 (値は `idle` で読む) */
|
|
564
|
+
"readout.statusTimeline.idle": "IDLE",
|
|
565
|
+
/** `status-timeline` の区間の字 (値は `error` で読む) */
|
|
566
|
+
"readout.statusTimeline.error": "ERROR",
|
|
567
|
+
/** `user-presence` の状態の字 (値は `online` で読む) */
|
|
568
|
+
"readout.presence.online": "online",
|
|
569
|
+
/** `user-presence` の状態の字 (値は `away` で読む) */
|
|
570
|
+
"readout.presence.away": "away",
|
|
571
|
+
/** `user-presence` の状態の字 (値は `offline` で読む) */
|
|
572
|
+
"readout.presence.offline": "offline",
|
|
561
573
|
/** `traffic-light` の赤の灯の見出し (値は `red` で読む) */
|
|
562
574
|
"readout.trafficLight.red": "red",
|
|
563
575
|
/** `traffic-light` の黄の灯の見出し (値は `yellow` / `amber` で読む) */
|
|
@@ -666,6 +678,12 @@ var ja = {
|
|
|
666
678
|
"readout.kanban.todo": "\u672A\u7740\u624B",
|
|
667
679
|
"readout.kanban.inprogress": "\u9032\u884C\u4E2D",
|
|
668
680
|
"readout.kanban.done": "\u5B8C\u4E86",
|
|
681
|
+
"readout.statusTimeline.active": "\u7A3C\u50CD",
|
|
682
|
+
"readout.statusTimeline.idle": "\u5F85\u6A5F",
|
|
683
|
+
"readout.statusTimeline.error": "\u7570\u5E38",
|
|
684
|
+
"readout.presence.online": "\u30AA\u30F3\u30E9\u30A4\u30F3",
|
|
685
|
+
"readout.presence.away": "\u96E2\u5E2D",
|
|
686
|
+
"readout.presence.offline": "\u30AA\u30D5\u30E9\u30A4\u30F3",
|
|
669
687
|
"readout.trafficLight.red": "\u8D64",
|
|
670
688
|
"readout.trafficLight.yellow": "\u9EC4",
|
|
671
689
|
"readout.trafficLight.green": "\u7DD1"
|
|
@@ -1695,6 +1713,111 @@ function requiredRowsWidth(rows, kind) {
|
|
|
1695
1713
|
if (kind === void 0) return Math.ceil(Math.max(storage, generic));
|
|
1696
1714
|
return Math.ceil(kind === "storage" ? storage : generic);
|
|
1697
1715
|
}
|
|
1716
|
+
|
|
1717
|
+
// src/kinds/compact-title.ts
|
|
1718
|
+
function estimateTextWidth(text, fontSize) {
|
|
1719
|
+
let w = 0;
|
|
1720
|
+
for (const ch of text) {
|
|
1721
|
+
const isFullWidth = /[\u3000-\u9FFF\uFF00-\uFFEF]/.test(ch);
|
|
1722
|
+
w += fontSize * (isFullWidth ? 1.05 : 0.62);
|
|
1723
|
+
}
|
|
1724
|
+
return w;
|
|
1725
|
+
}
|
|
1726
|
+
function fitTextSize(text, maxWidth, targetSize, minSize) {
|
|
1727
|
+
let size = targetSize;
|
|
1728
|
+
while (size > minSize && estimateTextWidth(text, size) > maxWidth) {
|
|
1729
|
+
size -= 1;
|
|
1730
|
+
}
|
|
1731
|
+
return size;
|
|
1732
|
+
}
|
|
1733
|
+
var COMPACT_MAX_H = 100;
|
|
1734
|
+
var COMPACT_PADDING_X = 16;
|
|
1735
|
+
var MIN_TEXT_SIZE = 11;
|
|
1736
|
+
var ASCENT = 0.72;
|
|
1737
|
+
var DESCENT = 0.25;
|
|
1738
|
+
var MIN_BAND_H = MIN_TEXT_SIZE * (ASCENT + DESCENT);
|
|
1739
|
+
var EYEBROW_BASELINE = 38;
|
|
1740
|
+
var EYEBROW_SIZE = 18;
|
|
1741
|
+
var EYEBROW_GAP = 8;
|
|
1742
|
+
var BOTTOM_INSET = 4;
|
|
1743
|
+
var eyebrowBottom = () => EYEBROW_BASELINE + EYEBROW_SIZE * DESCENT;
|
|
1744
|
+
var titleBandTop = (hasEyebrow) => eyebrowBottom() + EYEBROW_GAP ;
|
|
1745
|
+
var isCompactBox = (h) => h < COMPACT_MAX_H;
|
|
1746
|
+
function titlePlacement(node, \u901A\u5E38, opts = {}) {
|
|
1747
|
+
if (!isCompactBox(node.h)) {
|
|
1748
|
+
return { x: \u901A\u5E38.x, y: \u901A\u5E38.y, size: \u901A\u5E38.size, anchor: "start" };
|
|
1749
|
+
}
|
|
1750
|
+
const \u9AD8\u3055 = Math.max(0, node.h);
|
|
1751
|
+
const \u76EE\u5370\u3042\u308A = opts.hasEyebrow === true;
|
|
1752
|
+
const \u4E0A = \u76EE\u5370\u3042\u308A && \u9AD8\u3055 >= eyebrowBottom() ? titleBandTop() : 0;
|
|
1753
|
+
const \u751F\u306E\u5E2F = Math.max(0, \u9AD8\u3055 - \u4E0A);
|
|
1754
|
+
const \u4E0B\u4F59\u767D = \u751F\u306E\u5E2F >= MIN_BAND_H + BOTTOM_INSET ? BOTTOM_INSET : 0;
|
|
1755
|
+
const \u5E2F = \u751F\u306E\u5E2F - \u4E0B\u4F59\u767D;
|
|
1756
|
+
const \u5E45\u3067 = fitTextSize(
|
|
1757
|
+
node.title,
|
|
1758
|
+
Math.max(0, node.w - COMPACT_PADDING_X),
|
|
1759
|
+
\u901A\u5E38.size,
|
|
1760
|
+
MIN_TEXT_SIZE
|
|
1761
|
+
);
|
|
1762
|
+
const \u5E2F\u3067 = Math.floor(\u5E2F / (ASCENT + DESCENT));
|
|
1763
|
+
const size = Math.max(MIN_TEXT_SIZE, Math.min(\u5E45\u3067, \u5E2F\u3067));
|
|
1764
|
+
const \u5B57\u9AD8 = size * (ASCENT + DESCENT);
|
|
1765
|
+
const y = \u5B57\u9AD8 <= \u5E2F ? \u4E0A + \u5E2F / 2 + size * (ASCENT - DESCENT) / 2 : \u4E0A > 0 ? \u4E0A + size * ASCENT : (\u9AD8\u3055 - \u5B57\u9AD8) / 2 + size * ASCENT;
|
|
1766
|
+
return { x: node.w / 2, y, size, anchor: "middle" };
|
|
1767
|
+
}
|
|
1768
|
+
|
|
1769
|
+
// src/kinds/box-lines.ts
|
|
1770
|
+
var \u884C\u9001\u308A\u306E\u6BD4 = 1.15;
|
|
1771
|
+
var \u5B57\u306E\u9AD8\u3055\u306E\u6BD4 = 0.72;
|
|
1772
|
+
var \u4E0A\u4E0B\u306E\u4F59\u767D = 2;
|
|
1773
|
+
var \u5DE6\u53F3\u306E\u4F59\u767D = 8;
|
|
1774
|
+
function \u4F7F\u3048\u308B\u5E45(\u7BB1\u306E\u5E45) {
|
|
1775
|
+
return \u7BB1\u306E\u5E45 - \u5DE6\u53F3\u306E\u4F59\u767D * 2;
|
|
1776
|
+
}
|
|
1777
|
+
function \u5E45\u3067\u5207\u308B(text, fontSize, \u4F7F\u3048\u308B\u5E452, \u6E2C\u308B = textWidth) {
|
|
1778
|
+
if (\u4F7F\u3048\u308B\u5E452 <= 0) return "";
|
|
1779
|
+
if (\u6E2C\u308B(text, fontSize) <= \u4F7F\u3048\u308B\u5E452) return text;
|
|
1780
|
+
const \u7701\u7565 = "\u2026";
|
|
1781
|
+
const \u7701\u7565\u306E\u5E45 = \u6E2C\u308B(\u7701\u7565, fontSize);
|
|
1782
|
+
if (\u7701\u7565\u306E\u5E45 > \u4F7F\u3048\u308B\u5E452) return "";
|
|
1783
|
+
let \u51FA = "";
|
|
1784
|
+
let \u5E45 = 0;
|
|
1785
|
+
for (const c of \u66F8\u8A18\u7D20\u306B\u5206\u3051\u308B(text)) {
|
|
1786
|
+
const \u5B57\u306E\u5E452 = \u6E2C\u308B(c, fontSize);
|
|
1787
|
+
if (\u5E45 + \u5B57\u306E\u5E452 + \u7701\u7565\u306E\u5E45 > \u4F7F\u3048\u308B\u5E452) break;
|
|
1788
|
+
\u5E45 += \u5B57\u306E\u5E452;
|
|
1789
|
+
\u51FA += c;
|
|
1790
|
+
}
|
|
1791
|
+
return `${\u51FA}${\u7701\u7565}`;
|
|
1792
|
+
}
|
|
1793
|
+
var \u7E2E\u3081\u306E\u4E0B\u9650 = MIN_TEXT_SIZE;
|
|
1794
|
+
function \u5E45\u306B\u53CE\u3081\u308B(text, fontSize, \u4F7F\u3048\u308B\u5E452, \u6E2C\u308B = textWidth) {
|
|
1795
|
+
let size = fontSize;
|
|
1796
|
+
while (size > \u7E2E\u3081\u306E\u4E0B\u9650 && \u6E2C\u308B(text, size) > \u4F7F\u3048\u308B\u5E452) size -= 1;
|
|
1797
|
+
return { text: \u5E45\u3067\u5207\u308B(text, size, \u4F7F\u3048\u308B\u5E452, \u6E2C\u308B), fontSize: size };
|
|
1798
|
+
}
|
|
1799
|
+
function \u66F8\u8A18\u7D20\u306B\u5206\u3051\u308B(text) {
|
|
1800
|
+
const \u533A\u5207\u308A = Intl.Segmenter;
|
|
1801
|
+
if (typeof \u533A\u5207\u308A !== "function") return [...text];
|
|
1802
|
+
return [...new \u533A\u5207\u308A(void 0, { granularity: "grapheme" }).segment(text)].map((g) => g.segment);
|
|
1803
|
+
}
|
|
1804
|
+
function \u7BB1\u306B\u7A4D\u3080(\u884C, \u7BB1\u306E\u5E45, \u7BB1\u306E\u9AD8\u30553) {
|
|
1805
|
+
const \u5019\u88DC = \u884C.filter((r, i) => i === 0 || r.text.trim() !== "");
|
|
1806
|
+
if (\u5019\u88DC.length === 0) return [];
|
|
1807
|
+
const \u4F7F\u3048\u308B\u9AD8\u3055 = \u7BB1\u306E\u9AD8\u30553 - \u4E0A\u4E0B\u306E\u4F59\u767D * 2;
|
|
1808
|
+
const \u9AD8\u3055 = (rs) => rs.reduce((a, r) => a + r.fontSize * \u884C\u9001\u308A\u306E\u6BD4, 0);
|
|
1809
|
+
const \u6B8B\u3059 = [...\u5019\u88DC];
|
|
1810
|
+
while (\u6B8B\u3059.length > 1 && \u9AD8\u3055(\u6B8B\u3059) > \u4F7F\u3048\u308B\u9AD8\u3055) \u6B8B\u3059.pop();
|
|
1811
|
+
const \u5E45 = \u4F7F\u3048\u308B\u5E45(\u7BB1\u306E\u5E45);
|
|
1812
|
+
const \u53CE\u3081\u305F = \u6B8B\u3059.map((r) => ({ ...r, ...\u5E45\u306B\u53CE\u3081\u308B(r.text, r.fontSize, \u5E45) }));
|
|
1813
|
+
const \u7DCF\u9AD8 = \u9AD8\u3055(\u53CE\u3081\u305F);
|
|
1814
|
+
let \u7A4D\u307F = -\u7DCF\u9AD8 / 2;
|
|
1815
|
+
return \u53CE\u3081\u305F.map((r) => {
|
|
1816
|
+
const dy = \u7A4D\u307F + (\u884C\u9001\u308A\u306E\u6BD4 + \u5B57\u306E\u9AD8\u3055\u306E\u6BD4) / 2 * r.fontSize;
|
|
1817
|
+
\u7A4D\u307F += r.fontSize * \u884C\u9001\u308A\u306E\u6BD4;
|
|
1818
|
+
return { ...r, dy };
|
|
1819
|
+
});
|
|
1820
|
+
}
|
|
1698
1821
|
var \u64CD\u4F5C\u90E8\u306E\u8A00\u8A9E = createContext("en");
|
|
1699
1822
|
function use\u5B57\u5F15() {
|
|
1700
1823
|
const lang = useContext(\u64CD\u4F5C\u90E8\u306E\u8A00\u8A9E);
|
|
@@ -7826,12 +7949,14 @@ function StatusTimelineReadout({
|
|
|
7826
7949
|
} catch {
|
|
7827
7950
|
}
|
|
7828
7951
|
}
|
|
7952
|
+
const \u5F15\u304F = use\u5B57\u5F15();
|
|
7829
7953
|
const colorLookup = new Map(colorMap.map((c) => [c.status.toLowerCase(), c.color]));
|
|
7830
7954
|
const shown = events.slice(0, max);
|
|
7831
7955
|
const stripHeight = 28;
|
|
7832
7956
|
const width = 320;
|
|
7833
7957
|
const cellW = shown.length > 0 ? (width - 20) / shown.length : 0;
|
|
7834
7958
|
const height = stripHeight + 40;
|
|
7959
|
+
const \u533A\u9593\u306E\u5B57 = (status) => status === "active" || status === "idle" || status === "error" ? \u5F15\u304F(`readout.statusTimeline.${status}`) : status.toUpperCase();
|
|
7835
7960
|
return /* @__PURE__ */ jsxs("div", { className: "cdl-ip-item cdl-ip-readout-status-timeline", "data-cdl-readout": id, children: [
|
|
7836
7961
|
/* @__PURE__ */ jsx("span", { className: "cdl-ip-label", children: label }),
|
|
7837
7962
|
/* @__PURE__ */ jsx(
|
|
@@ -7844,9 +7969,11 @@ function StatusTimelineReadout({
|
|
|
7844
7969
|
children: shown.map((ev, i) => {
|
|
7845
7970
|
const x = 10 + i * cellW;
|
|
7846
7971
|
const c = colorLookup.get(ev.status) ?? "#cbd5e1";
|
|
7847
|
-
|
|
7972
|
+
const \u5B572 = \u533A\u9593\u306E\u5B57(ev.status);
|
|
7973
|
+
const \u63CF\u304F\u5B57 = \u5E45\u3067\u5207\u308B(\u5B572, 10, cellW - 8);
|
|
7974
|
+
return /* @__PURE__ */ jsxs("g", { "data-cdl-status-event": i, "data-cdl-status": ev.status, children: [
|
|
7848
7975
|
/* @__PURE__ */ jsx("rect", { x, y: 10, width: cellW - 2, height: stripHeight, fill: c, rx: 2 }),
|
|
7849
|
-
/* @__PURE__ */
|
|
7976
|
+
/* @__PURE__ */ jsxs(
|
|
7850
7977
|
"text",
|
|
7851
7978
|
{
|
|
7852
7979
|
x: x + cellW / 2,
|
|
@@ -7856,7 +7983,10 @@ function StatusTimelineReadout({
|
|
|
7856
7983
|
fill: "#ffffff",
|
|
7857
7984
|
fontWeight: 600,
|
|
7858
7985
|
style: { userSelect: "none" },
|
|
7859
|
-
children:
|
|
7986
|
+
children: [
|
|
7987
|
+
\u63CF\u304F\u5B57 !== \u5B572 ? /* @__PURE__ */ jsx("title", { children: \u5B572 }) : null,
|
|
7988
|
+
\u63CF\u304F\u5B57
|
|
7989
|
+
]
|
|
7860
7990
|
}
|
|
7861
7991
|
),
|
|
7862
7992
|
/* @__PURE__ */ jsx(
|
|
@@ -8174,6 +8304,8 @@ function UserPresenceReadout({
|
|
|
8174
8304
|
const width = 260;
|
|
8175
8305
|
const height = shown.length * rowH + (overflow > 0 ? 20 : 0) + 8;
|
|
8176
8306
|
const statusColor = (s) => s === "online" ? "#22c55e" : s === "away" ? "#eab308" : "#94a3b8";
|
|
8307
|
+
const \u5F15\u304F = use\u5B57\u5F15();
|
|
8308
|
+
const \u72B6\u614B\u306E\u5B57 = (s) => s === "online" || s === "away" || s === "offline" ? \u5F15\u304F(`readout.presence.${s}`) : s;
|
|
8177
8309
|
return /* @__PURE__ */ jsxs("div", { className: "cdl-ip-item cdl-ip-readout-user-presence", "data-cdl-readout": id, children: [
|
|
8178
8310
|
/* @__PURE__ */ jsx("span", { className: "cdl-ip-label", children: label }),
|
|
8179
8311
|
/* @__PURE__ */ jsxs(
|
|
@@ -8186,7 +8318,7 @@ function UserPresenceReadout({
|
|
|
8186
8318
|
children: [
|
|
8187
8319
|
shown.map((u, i) => {
|
|
8188
8320
|
const y = 4 + i * rowH;
|
|
8189
|
-
return /* @__PURE__ */ jsxs("g", { "data-cdl-presence-user": i, children: [
|
|
8321
|
+
return /* @__PURE__ */ jsxs("g", { "data-cdl-presence-user": i, "data-cdl-presence-status": u.status, children: [
|
|
8190
8322
|
/* @__PURE__ */ jsx("circle", { cx: 12, cy: y + rowH / 2, r: 6, fill: statusColor(u.status) }),
|
|
8191
8323
|
/* @__PURE__ */ jsx(
|
|
8192
8324
|
"text",
|
|
@@ -8209,7 +8341,7 @@ function UserPresenceReadout({
|
|
|
8209
8341
|
textAnchor: "end",
|
|
8210
8342
|
fill: "#64748b",
|
|
8211
8343
|
style: { userSelect: "none" },
|
|
8212
|
-
children: u.status
|
|
8344
|
+
children: \u72B6\u614B\u306E\u5B57(u.status)
|
|
8213
8345
|
}
|
|
8214
8346
|
)
|
|
8215
8347
|
] }, i);
|
|
@@ -14286,8 +14418,8 @@ var TITLE_RATIO = 0.17;
|
|
|
14286
14418
|
var SUB_RATIO = 0.72;
|
|
14287
14419
|
var LINE_GAP = 3;
|
|
14288
14420
|
var BOTTOM_PAD = 4;
|
|
14289
|
-
var
|
|
14290
|
-
var
|
|
14421
|
+
var ASCENT2 = 0.72;
|
|
14422
|
+
var DESCENT2 = 0.25;
|
|
14291
14423
|
var ART_GAP = 4;
|
|
14292
14424
|
var ART_MIN_BAND = 45;
|
|
14293
14425
|
var \u843D\u3068\u3057\u3066\u3082\u63CF\u304F\u7A2E\u5225 = {
|
|
@@ -14345,9 +14477,9 @@ function labelPlan(node) {
|
|
|
14345
14477
|
y -= \u540D\u524D\u5927 + LINE_GAP;
|
|
14346
14478
|
const \u80A9\u66F8 = \u80A9\u66F8\u3042\u308A2 ? { y, size: \u5C0F\u3055\u3044\u5B57 } : null;
|
|
14347
14479
|
const \u4E0A\u306E\u884C = \u80A9\u66F8 ?? \u540D\u524D;
|
|
14348
|
-
return { \u540D\u524D, \u8AAC\u660E, \u80A9\u66F8, \u4E0A\u7AEF: \u4E0A\u306E\u884C.y - \u4E0A\u306E\u884C.size *
|
|
14480
|
+
return { \u540D\u524D, \u8AAC\u660E, \u80A9\u66F8, \u4E0A\u7AEF: \u4E0A\u306E\u884C.y - \u4E0A\u306E\u884C.size * ASCENT2 };
|
|
14349
14481
|
};
|
|
14350
|
-
const \u5165\u308B = (\u8AAC\u660E\u3042\u308A2, \u80A9\u66F8\u3042\u308A2) => \u7A4D\u3080(1, \u8AAC\u660E\u3042\u308A2, \u80A9\u66F8\u3042\u308A2, 1 *
|
|
14482
|
+
const \u5165\u308B = (\u8AAC\u660E\u3042\u308A2, \u80A9\u66F8\u3042\u308A2) => \u7A4D\u3080(1, \u8AAC\u660E\u3042\u308A2, \u80A9\u66F8\u3042\u308A2, 1 * DESCENT2).\u4E0A\u7AEF >= \u5929;
|
|
14351
14483
|
let \u8AAC\u660E\u3042\u308A = Boolean(node.subtitle);
|
|
14352
14484
|
let \u80A9\u66F8\u3042\u308A = Boolean(node.eyebrow);
|
|
14353
14485
|
const \u843D\u3068\u3057\u305F = [];
|
|
@@ -14365,14 +14497,14 @@ function labelPlan(node) {
|
|
|
14365
14497
|
for (let size = \u4E0A\u9650; size >= 1; size--) {
|
|
14366
14498
|
const \u5C0F\u3055\u3044\u5B572 = Math.max(1, Math.round(size * SUB_RATIO));
|
|
14367
14499
|
const \u4E0B\u306E\u884C\u5927 = \u8AAC\u660E\u3042\u308A2 ? \u5C0F\u3055\u3044\u5B572 : size;
|
|
14368
|
-
if (\u7A4D\u3080(size, \u8AAC\u660E\u3042\u308A2, \u80A9\u66F8\u3042\u308A2, \u4E0B\u306E\u884C\u5927 *
|
|
14500
|
+
if (\u7A4D\u3080(size, \u8AAC\u660E\u3042\u308A2, \u80A9\u66F8\u3042\u308A2, \u4E0B\u306E\u884C\u5927 * DESCENT2).\u4E0A\u7AEF >= \u5929) {
|
|
14369
14501
|
\u540D\u524D\u5927 = size;
|
|
14370
14502
|
break;
|
|
14371
14503
|
}
|
|
14372
14504
|
}
|
|
14373
|
-
if (\u540D\u524D\u5927 === 0) \u540D\u524D\u5927 = \u9AD8\u3055 / (
|
|
14505
|
+
if (\u540D\u524D\u5927 === 0) \u540D\u524D\u5927 = \u9AD8\u3055 / (ASCENT2 + DESCENT2);
|
|
14374
14506
|
const \u5C0F\u3055\u3044\u5B57 = Math.max(1, Math.round(\u540D\u524D\u5927 * SUB_RATIO));
|
|
14375
|
-
const \u5F35\u308A\u51FA\u3057 = (\u8AAC\u660E\u3042\u308A2 ? \u5C0F\u3055\u3044\u5B57 : \u540D\u524D\u5927) *
|
|
14507
|
+
const \u5F35\u308A\u51FA\u3057 = (\u8AAC\u660E\u3042\u308A2 ? \u5C0F\u3055\u3044\u5B57 : \u540D\u524D\u5927) * DESCENT2;
|
|
14376
14508
|
const \u4F59\u308A = Math.max(0, \u7A4D\u3080(\u540D\u524D\u5927, \u8AAC\u660E\u3042\u308A2, \u80A9\u66F8\u3042\u308A2, \u5F35\u308A\u51FA\u3057).\u4E0A\u7AEF - \u5929);
|
|
14377
14509
|
const \u4E0B\u4F59\u767D = Math.min(Math.max(BOTTOM_PAD, \u5F35\u308A\u51FA\u3057), \u5F35\u308A\u51FA\u3057 + \u4F59\u308A);
|
|
14378
14510
|
return \u7A4D\u3080(\u540D\u524D\u5927, \u8AAC\u660E\u3042\u308A2, \u80A9\u66F8\u3042\u308A2, \u4E0B\u4F59\u767D);
|
|
@@ -14462,111 +14594,6 @@ function fitArt(region, extent, art) {
|
|
|
14462
14594
|
return /* @__PURE__ */ jsx("g", { transform: `translate(${dx} ${dy}) scale(${s})`, children: art });
|
|
14463
14595
|
}
|
|
14464
14596
|
|
|
14465
|
-
// src/kinds/compact-title.ts
|
|
14466
|
-
function estimateTextWidth(text, fontSize) {
|
|
14467
|
-
let w = 0;
|
|
14468
|
-
for (const ch of text) {
|
|
14469
|
-
const isFullWidth = /[\u3000-\u9FFF\uFF00-\uFFEF]/.test(ch);
|
|
14470
|
-
w += fontSize * (isFullWidth ? 1.05 : 0.62);
|
|
14471
|
-
}
|
|
14472
|
-
return w;
|
|
14473
|
-
}
|
|
14474
|
-
function fitTextSize(text, maxWidth, targetSize, minSize) {
|
|
14475
|
-
let size = targetSize;
|
|
14476
|
-
while (size > minSize && estimateTextWidth(text, size) > maxWidth) {
|
|
14477
|
-
size -= 1;
|
|
14478
|
-
}
|
|
14479
|
-
return size;
|
|
14480
|
-
}
|
|
14481
|
-
var COMPACT_MAX_H = 100;
|
|
14482
|
-
var COMPACT_PADDING_X = 16;
|
|
14483
|
-
var MIN_TEXT_SIZE = 11;
|
|
14484
|
-
var ASCENT2 = 0.72;
|
|
14485
|
-
var DESCENT2 = 0.25;
|
|
14486
|
-
var MIN_BAND_H = MIN_TEXT_SIZE * (ASCENT2 + DESCENT2);
|
|
14487
|
-
var EYEBROW_BASELINE = 38;
|
|
14488
|
-
var EYEBROW_SIZE = 18;
|
|
14489
|
-
var EYEBROW_GAP = 8;
|
|
14490
|
-
var BOTTOM_INSET = 4;
|
|
14491
|
-
var eyebrowBottom = () => EYEBROW_BASELINE + EYEBROW_SIZE * DESCENT2;
|
|
14492
|
-
var titleBandTop = (hasEyebrow) => eyebrowBottom() + EYEBROW_GAP ;
|
|
14493
|
-
var isCompactBox = (h) => h < COMPACT_MAX_H;
|
|
14494
|
-
function titlePlacement(node, \u901A\u5E38, opts = {}) {
|
|
14495
|
-
if (!isCompactBox(node.h)) {
|
|
14496
|
-
return { x: \u901A\u5E38.x, y: \u901A\u5E38.y, size: \u901A\u5E38.size, anchor: "start" };
|
|
14497
|
-
}
|
|
14498
|
-
const \u9AD8\u3055 = Math.max(0, node.h);
|
|
14499
|
-
const \u76EE\u5370\u3042\u308A = opts.hasEyebrow === true;
|
|
14500
|
-
const \u4E0A = \u76EE\u5370\u3042\u308A && \u9AD8\u3055 >= eyebrowBottom() ? titleBandTop() : 0;
|
|
14501
|
-
const \u751F\u306E\u5E2F = Math.max(0, \u9AD8\u3055 - \u4E0A);
|
|
14502
|
-
const \u4E0B\u4F59\u767D = \u751F\u306E\u5E2F >= MIN_BAND_H + BOTTOM_INSET ? BOTTOM_INSET : 0;
|
|
14503
|
-
const \u5E2F = \u751F\u306E\u5E2F - \u4E0B\u4F59\u767D;
|
|
14504
|
-
const \u5E45\u3067 = fitTextSize(
|
|
14505
|
-
node.title,
|
|
14506
|
-
Math.max(0, node.w - COMPACT_PADDING_X),
|
|
14507
|
-
\u901A\u5E38.size,
|
|
14508
|
-
MIN_TEXT_SIZE
|
|
14509
|
-
);
|
|
14510
|
-
const \u5E2F\u3067 = Math.floor(\u5E2F / (ASCENT2 + DESCENT2));
|
|
14511
|
-
const size = Math.max(MIN_TEXT_SIZE, Math.min(\u5E45\u3067, \u5E2F\u3067));
|
|
14512
|
-
const \u5B57\u9AD8 = size * (ASCENT2 + DESCENT2);
|
|
14513
|
-
const y = \u5B57\u9AD8 <= \u5E2F ? \u4E0A + \u5E2F / 2 + size * (ASCENT2 - DESCENT2) / 2 : \u4E0A > 0 ? \u4E0A + size * ASCENT2 : (\u9AD8\u3055 - \u5B57\u9AD8) / 2 + size * ASCENT2;
|
|
14514
|
-
return { x: node.w / 2, y, size, anchor: "middle" };
|
|
14515
|
-
}
|
|
14516
|
-
|
|
14517
|
-
// src/kinds/box-lines.ts
|
|
14518
|
-
var \u884C\u9001\u308A\u306E\u6BD4 = 1.15;
|
|
14519
|
-
var \u5B57\u306E\u9AD8\u3055\u306E\u6BD4 = 0.72;
|
|
14520
|
-
var \u4E0A\u4E0B\u306E\u4F59\u767D = 2;
|
|
14521
|
-
var \u5DE6\u53F3\u306E\u4F59\u767D = 8;
|
|
14522
|
-
function \u4F7F\u3048\u308B\u5E45(\u7BB1\u306E\u5E45) {
|
|
14523
|
-
return \u7BB1\u306E\u5E45 - \u5DE6\u53F3\u306E\u4F59\u767D * 2;
|
|
14524
|
-
}
|
|
14525
|
-
function \u5E45\u3067\u5207\u308B(text, fontSize, \u4F7F\u3048\u308B\u5E452, \u6E2C\u308B = textWidth) {
|
|
14526
|
-
if (\u4F7F\u3048\u308B\u5E452 <= 0) return "";
|
|
14527
|
-
if (\u6E2C\u308B(text, fontSize) <= \u4F7F\u3048\u308B\u5E452) return text;
|
|
14528
|
-
const \u7701\u7565 = "\u2026";
|
|
14529
|
-
const \u7701\u7565\u306E\u5E45 = \u6E2C\u308B(\u7701\u7565, fontSize);
|
|
14530
|
-
if (\u7701\u7565\u306E\u5E45 > \u4F7F\u3048\u308B\u5E452) return "";
|
|
14531
|
-
let \u51FA = "";
|
|
14532
|
-
let \u5E45 = 0;
|
|
14533
|
-
for (const c of \u66F8\u8A18\u7D20\u306B\u5206\u3051\u308B(text)) {
|
|
14534
|
-
const \u5B57\u306E\u5E452 = \u6E2C\u308B(c, fontSize);
|
|
14535
|
-
if (\u5E45 + \u5B57\u306E\u5E452 + \u7701\u7565\u306E\u5E45 > \u4F7F\u3048\u308B\u5E452) break;
|
|
14536
|
-
\u5E45 += \u5B57\u306E\u5E452;
|
|
14537
|
-
\u51FA += c;
|
|
14538
|
-
}
|
|
14539
|
-
return `${\u51FA}${\u7701\u7565}`;
|
|
14540
|
-
}
|
|
14541
|
-
var \u7E2E\u3081\u306E\u4E0B\u9650 = MIN_TEXT_SIZE;
|
|
14542
|
-
function \u5E45\u306B\u53CE\u3081\u308B(text, fontSize, \u4F7F\u3048\u308B\u5E452, \u6E2C\u308B = textWidth) {
|
|
14543
|
-
let size = fontSize;
|
|
14544
|
-
while (size > \u7E2E\u3081\u306E\u4E0B\u9650 && \u6E2C\u308B(text, size) > \u4F7F\u3048\u308B\u5E452) size -= 1;
|
|
14545
|
-
return { text: \u5E45\u3067\u5207\u308B(text, size, \u4F7F\u3048\u308B\u5E452, \u6E2C\u308B), fontSize: size };
|
|
14546
|
-
}
|
|
14547
|
-
function \u66F8\u8A18\u7D20\u306B\u5206\u3051\u308B(text) {
|
|
14548
|
-
const \u533A\u5207\u308A = Intl.Segmenter;
|
|
14549
|
-
if (typeof \u533A\u5207\u308A !== "function") return [...text];
|
|
14550
|
-
return [...new \u533A\u5207\u308A(void 0, { granularity: "grapheme" }).segment(text)].map((g) => g.segment);
|
|
14551
|
-
}
|
|
14552
|
-
function \u7BB1\u306B\u7A4D\u3080(\u884C, \u7BB1\u306E\u5E45, \u7BB1\u306E\u9AD8\u30553) {
|
|
14553
|
-
const \u5019\u88DC = \u884C.filter((r, i) => i === 0 || r.text.trim() !== "");
|
|
14554
|
-
if (\u5019\u88DC.length === 0) return [];
|
|
14555
|
-
const \u4F7F\u3048\u308B\u9AD8\u3055 = \u7BB1\u306E\u9AD8\u30553 - \u4E0A\u4E0B\u306E\u4F59\u767D * 2;
|
|
14556
|
-
const \u9AD8\u3055 = (rs) => rs.reduce((a, r) => a + r.fontSize * \u884C\u9001\u308A\u306E\u6BD4, 0);
|
|
14557
|
-
const \u6B8B\u3059 = [...\u5019\u88DC];
|
|
14558
|
-
while (\u6B8B\u3059.length > 1 && \u9AD8\u3055(\u6B8B\u3059) > \u4F7F\u3048\u308B\u9AD8\u3055) \u6B8B\u3059.pop();
|
|
14559
|
-
const \u5E45 = \u4F7F\u3048\u308B\u5E45(\u7BB1\u306E\u5E45);
|
|
14560
|
-
const \u53CE\u3081\u305F = \u6B8B\u3059.map((r) => ({ ...r, ...\u5E45\u306B\u53CE\u3081\u308B(r.text, r.fontSize, \u5E45) }));
|
|
14561
|
-
const \u7DCF\u9AD8 = \u9AD8\u3055(\u53CE\u3081\u305F);
|
|
14562
|
-
let \u7A4D\u307F = -\u7DCF\u9AD8 / 2;
|
|
14563
|
-
return \u53CE\u3081\u305F.map((r) => {
|
|
14564
|
-
const dy = \u7A4D\u307F + (\u884C\u9001\u308A\u306E\u6BD4 + \u5B57\u306E\u9AD8\u3055\u306E\u6BD4) / 2 * r.fontSize;
|
|
14565
|
-
\u7A4D\u307F += r.fontSize * \u884C\u9001\u308A\u306E\u6BD4;
|
|
14566
|
-
return { ...r, dy };
|
|
14567
|
-
});
|
|
14568
|
-
}
|
|
14569
|
-
|
|
14570
14597
|
// src/render/tone.ts
|
|
14571
14598
|
var TONE = {
|
|
14572
14599
|
accent: "var(--cdl-tone-accent, #2d6a8f)",
|
|
@@ -23864,7 +23891,7 @@ function CardNode({ node, active }) {
|
|
|
23864
23891
|
const textAnchor = compact ? "middle" : "start";
|
|
23865
23892
|
const subtitleY = 124 - \u305A\u3089\u3057;
|
|
23866
23893
|
const \u6700\u5927\u306E\u884C\u9001\u308A = SUBTITLE_SIZE * \u884C\u9001\u308A\u306E\u500D\u7387;
|
|
23867
|
-
const \u4E8C\u884C\u304C\u5165\u308B = !compact && subtitleY - \u6700\u5927\u306E\u884C\u9001\u308A / 2 - SUBTITLE_SIZE *
|
|
23894
|
+
const \u4E8C\u884C\u304C\u5165\u308B = !compact && subtitleY - \u6700\u5927\u306E\u884C\u9001\u308A / 2 - SUBTITLE_SIZE * ASCENT > titleY + titleSize * DESCENT && subtitleY + \u6700\u5927\u306E\u884C\u9001\u308A / 2 + SUBTITLE_SIZE * DESCENT <= node.h - 4;
|
|
23868
23895
|
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;
|
|
23869
23896
|
const subtitleSize = \u8AAC\u660E?.size ?? 21;
|
|
23870
23897
|
const \u884C\u9001\u308A = subtitleSize * \u884C\u9001\u308A\u306E\u500D\u7387;
|
|
@@ -27676,8 +27703,8 @@ var EYEBROW_TRACKING = 2;
|
|
|
27676
27703
|
var SUB_SIZE = 11;
|
|
27677
27704
|
var SUB_GAP = 4;
|
|
27678
27705
|
function labelBlock(node, pos, size, band) {
|
|
27679
|
-
const \u4E0A = node.eyebrow ? size + EYEBROW_GAP2 + EYEBROW_SIZE2 *
|
|
27680
|
-
const \u4E0B = node.subtitle ? size + SUB_GAP + SUB_SIZE *
|
|
27706
|
+
const \u4E0A = node.eyebrow ? size + EYEBROW_GAP2 + EYEBROW_SIZE2 * ASCENT2 : size * ASCENT2;
|
|
27707
|
+
const \u4E0B = node.subtitle ? size + SUB_GAP + SUB_SIZE * DESCENT2 : size * DESCENT2;
|
|
27681
27708
|
const \u5E45 = Math.max(
|
|
27682
27709
|
textWidth(node.title ?? "", size),
|
|
27683
27710
|
node.eyebrow ? textWidth(node.eyebrow, EYEBROW_SIZE2, EYEBROW_TRACKING) : 0,
|
|
@@ -32900,7 +32927,8 @@ var FSM_ACTION_MARK = {
|
|
|
32900
32927
|
function stateMachine(preset) {
|
|
32901
32928
|
const stateW = resolveStateW(preset.stateWidth, "stateMachine");
|
|
32902
32929
|
const tone = preset.defaultTone ?? "accent";
|
|
32903
|
-
const
|
|
32930
|
+
const diagramType = "state";
|
|
32931
|
+
const b = diagram(preset.id, { topic: preset.topic, type: diagramType });
|
|
32904
32932
|
const phaseActivate = [];
|
|
32905
32933
|
const stateOrder = /* @__PURE__ */ new Map();
|
|
32906
32934
|
const \u72B6\u614B = [];
|
|
@@ -33001,7 +33029,7 @@ function stateMachine(preset) {
|
|
|
33001
33029
|
b.phase(
|
|
33002
33030
|
"fsm",
|
|
33003
33031
|
{ duration: 2400, title: preset.topic, body: "\u3059\u3079\u3066\u306E\u72B6\u614B\u3068\u9077\u79FB\u3092\u4E26\u3079\u305F\u59FF\u3002" },
|
|
33004
|
-
(p) => p.activate(...phaseActivate).badge(
|
|
33032
|
+
(p) => p.activate(...phaseActivate).badge(diagramType)
|
|
33005
33033
|
);
|
|
33006
33034
|
return b.build();
|
|
33007
33035
|
}
|
|
@@ -33260,7 +33288,8 @@ function userJourney(preset) {
|
|
|
33260
33288
|
function mindMap(preset) {
|
|
33261
33289
|
const canvasW = preset.branchWidth ? preset.branchWidth * 2 : 720;
|
|
33262
33290
|
const canvasH = 480;
|
|
33263
|
-
const
|
|
33291
|
+
const diagramType = "mind";
|
|
33292
|
+
const b = diagram(preset.id, { topic: preset.topic, type: diagramType });
|
|
33264
33293
|
const branches = [];
|
|
33265
33294
|
const api = {
|
|
33266
33295
|
branch(br) {
|
|
@@ -33294,7 +33323,7 @@ function mindMap(preset) {
|
|
|
33294
33323
|
b.phase(
|
|
33295
33324
|
"mindmap",
|
|
33296
33325
|
{ duration: 2400, title: preset.topic, body: "\u4E2D\u5FC3\u306E\u4E3B\u984C\u304B\u3089\u3001\u3059\u3079\u3066\u306E\u679D\u3092\u653E\u5C04\u72B6\u306B\u5E83\u3052\u305F\u59FF\u3002" },
|
|
33297
|
-
(p) => p.activate(nodeId).badge(
|
|
33326
|
+
(p) => p.activate(nodeId).badge(diagramType)
|
|
33298
33327
|
);
|
|
33299
33328
|
return b.build();
|
|
33300
33329
|
}
|
|
@@ -33627,7 +33656,8 @@ function stateMachine2(preset) {
|
|
|
33627
33656
|
const stateW = resolveStateW(preset.stateWidth, "stateMachine2");
|
|
33628
33657
|
const laneW = boxLaneW(stateW);
|
|
33629
33658
|
const tone = preset.defaultTone ?? "accent";
|
|
33630
|
-
const
|
|
33659
|
+
const diagramType = "state";
|
|
33660
|
+
const b = diagram(preset.id, { topic: preset.topic, type: diagramType });
|
|
33631
33661
|
const stateOrder = /* @__PURE__ */ new Map();
|
|
33632
33662
|
const phaseActivate = [];
|
|
33633
33663
|
let transIdx = 0;
|
|
@@ -33683,7 +33713,7 @@ function stateMachine2(preset) {
|
|
|
33683
33713
|
title: preset.topic,
|
|
33684
33714
|
body: "\u5165\u308C\u5B50\u306E\u72B6\u614B\u3068\u3001\u5165\u308B\u6642\u30FB\u51FA\u308B\u6642\u306E\u51E6\u7406\u3092\u542B\u3081\u305F\u3001\u3059\u3079\u3066\u306E\u72B6\u614B\u3068\u9077\u79FB\u3002"
|
|
33685
33715
|
},
|
|
33686
|
-
(p) => p.activate(...phaseActivate).badge(
|
|
33716
|
+
(p) => p.activate(...phaseActivate).badge(diagramType)
|
|
33687
33717
|
);
|
|
33688
33718
|
const d = b.build();
|
|
33689
33719
|
return {
|