@cardenelabs/cdl 0.72.0 → 0.74.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 +68 -1
- package/dist/index.cjs +77 -23
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +77 -23
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +137 -83
- package/dist/react.cjs.map +1 -1
- package/dist/react.js +137 -83
- package/dist/react.js.map +1 -1
- package/package.json +1 -1
- package/src/kinds/shape-blockchain.tsx +58 -12
- package/src/kinds/shape-region.tsx +113 -7
package/dist/index.js
CHANGED
|
@@ -14594,20 +14594,52 @@ function fitLabel(band, block, pos) {
|
|
|
14594
14594
|
};
|
|
14595
14595
|
}
|
|
14596
14596
|
function fitArt(region, extent, art) {
|
|
14597
|
+
const \u7D44\u3080 = (k) => typeof art === "function" ? art(k) : art;
|
|
14597
14598
|
const \u7E26 = extent.\u4E0A + extent.\u4E0B;
|
|
14598
14599
|
const \u6A2A = extent.\u5DE6 + extent.\u53F3;
|
|
14599
|
-
if (!Number.isFinite(\u7E26) || !Number.isFinite(\u6A2A) || \u7E26 <= 0 || \u6A2A <= 0) return
|
|
14600
|
+
if (!Number.isFinite(\u7E26) || !Number.isFinite(\u6A2A) || \u7E26 <= 0 || \u6A2A <= 0) return \u7D44\u3080(1);
|
|
14600
14601
|
if (!Number.isFinite(region.availH) || !Number.isFinite(region.availW) || region.availH <= 0 || region.availW <= 0) {
|
|
14601
|
-
return
|
|
14602
|
+
return \u7D44\u3080(1);
|
|
14602
14603
|
}
|
|
14603
14604
|
const s = Math.min(1, region.availH / \u7E26, region.availW / \u6A2A);
|
|
14604
|
-
if (!Number.isFinite(s) || s <= 0) return
|
|
14605
|
+
if (!Number.isFinite(s) || s <= 0) return \u7D44\u3080(1);
|
|
14605
14606
|
const \u7D75cx = region.cx + (extent.\u53F3 - extent.\u5DE6) / 2;
|
|
14606
14607
|
const \u7D75cy = region.cy + (extent.\u4E0B - extent.\u4E0A) / 2;
|
|
14607
14608
|
const dx = region.cx - s * \u7D75cx;
|
|
14608
14609
|
const dy = region.cy - s * \u7D75cy;
|
|
14609
|
-
if (s >= 1 && dx === 0 && dy === 0) return
|
|
14610
|
-
return
|
|
14610
|
+
if (s >= 1 && dx === 0 && dy === 0) return \u7D44\u3080(1);
|
|
14611
|
+
return (
|
|
14612
|
+
/*
|
|
14613
|
+
* 包みに印を付ける (#886)。 **`scale(` を持つ変換は他にもある** = `event` は目立たせる
|
|
14614
|
+
* ための脈動を `scale(0.78)` から `scale(1)` で描き、絵を箱に収める縮小ではない。
|
|
14615
|
+
* 祖先の変換を正規表現で見る形だと、その脈動まで「絵の縮小」 として数える。
|
|
14616
|
+
*/
|
|
14617
|
+
/* @__PURE__ */ jsx("g", { "data-cdl-art-fit": "1", transform: `translate(${dx} ${dy}) scale(${s})`, children: \u7D44\u3080(s) })
|
|
14618
|
+
);
|
|
14619
|
+
}
|
|
14620
|
+
var \u5E2F\u306E\u9AD8\u3055\u306B\u5BFE\u3059\u308B\u4E0A\u9650 = 0.8;
|
|
14621
|
+
function \u7D75\u306E\u4E2D\u306E\u5B57\u306E\u5E45(text, size, letterSpacing = 0) {
|
|
14622
|
+
return Math.max(
|
|
14623
|
+
displayWidth(text) * size * MONO_ADVANCE_RATIO,
|
|
14624
|
+
textWidth(text, size, letterSpacing)
|
|
14625
|
+
);
|
|
14626
|
+
}
|
|
14627
|
+
function \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u5B57\u3089) {
|
|
14628
|
+
const \u623B\u3057 = Number.isFinite(\u500D\u7387) && \u500D\u7387 > 0 ? 1 / \u500D\u7387 : 1;
|
|
14629
|
+
let \u4E0A\u9650 = Number.POSITIVE_INFINITY;
|
|
14630
|
+
for (const \u5B572 of \u5B57\u3089) {
|
|
14631
|
+
if (!(Number.isFinite(\u5B572.size) && \u5B572.size > 0)) continue;
|
|
14632
|
+
const { \u5E45, \u9AD8\u3055 } = \u5B572.\u5E2F;
|
|
14633
|
+
if (Number.isFinite(\u9AD8\u3055) && \u9AD8\u3055 > 0) {
|
|
14634
|
+
\u4E0A\u9650 = Math.min(\u4E0A\u9650, \u9AD8\u3055 * \u5E2F\u306E\u9AD8\u3055\u306B\u5BFE\u3059\u308B\u4E0A\u9650 / \u5B572.size);
|
|
14635
|
+
}
|
|
14636
|
+
const \u5B9F\u5E45 = \u7D75\u306E\u4E2D\u306E\u5B57\u306E\u5E45(\u5B572.text, \u5B572.size, \u5B572.letterSpacing ?? 0);
|
|
14637
|
+
if (Number.isFinite(\u5E45) && \u5E45 > 0 && \u5B9F\u5E45 > 0) {
|
|
14638
|
+
\u4E0A\u9650 = Math.min(\u4E0A\u9650, \u5E45 / \u5B9F\u5E45);
|
|
14639
|
+
}
|
|
14640
|
+
}
|
|
14641
|
+
if (!Number.isFinite(\u4E0A\u9650)) return 1;
|
|
14642
|
+
return Math.max(1, Math.min(\u623B\u3057, \u4E0A\u9650));
|
|
14611
14643
|
}
|
|
14612
14644
|
|
|
14613
14645
|
// src/render/tone.ts
|
|
@@ -29841,6 +29873,11 @@ var SMART_CONTRACT_W = 220;
|
|
|
29841
29873
|
var SMART_CONTRACT_H = 220;
|
|
29842
29874
|
var BLOCK_W = 240;
|
|
29843
29875
|
var BLOCK_H = 220;
|
|
29876
|
+
var \u898B\u51FA\u3057\u306E\u5B57 = 13;
|
|
29877
|
+
var \u540D\u306E\u5B57 = 10.5;
|
|
29878
|
+
var \u5024\u306E\u5B57 = 11;
|
|
29879
|
+
var \u884C\u306E\u9593\u9694 = 22;
|
|
29880
|
+
var \u898B\u51FA\u3057\u306E\u5E2F = 32;
|
|
29844
29881
|
var BLOCK_SHADOW = 6;
|
|
29845
29882
|
var NFT_W = 220;
|
|
29846
29883
|
var NFT_H = 240;
|
|
@@ -29987,7 +30024,7 @@ function ShapeSmartContractNode({ node, active, lang }) {
|
|
|
29987
30024
|
bottomLabel2(node, r.cx, r.label)
|
|
29988
30025
|
] });
|
|
29989
30026
|
}
|
|
29990
|
-
var \u5B57\u306E\u5E45 = (text, size) =>
|
|
30027
|
+
var \u5B57\u306E\u5E45 = (text, size) => \u7D75\u306E\u4E2D\u306E\u5B57\u306E\u5E45(text, size);
|
|
29991
30028
|
var BLOCK_DEFAULT_FIELDS = [
|
|
29992
30029
|
{ key: "hash", label: "blockchainBlock.hash", value: { text: "0xaf31c9d2..." } },
|
|
29993
30030
|
{ key: "prev", label: "blockchainBlock.prev", value: { text: "0x7b3f92c1..." } },
|
|
@@ -30016,23 +30053,40 @@ function ShapeBlockchainBlockNode({ node, active, lang }) {
|
|
|
30016
30053
|
};
|
|
30017
30054
|
});
|
|
30018
30055
|
const \u898B\u51FA\u3057\u306E\u5E45 = bw - 14 - 30;
|
|
30019
|
-
const
|
|
30020
|
-
|
|
30021
|
-
|
|
30022
|
-
|
|
30023
|
-
|
|
30024
|
-
|
|
30025
|
-
|
|
30026
|
-
|
|
30027
|
-
|
|
30028
|
-
|
|
30029
|
-
|
|
30030
|
-
|
|
30031
|
-
|
|
30032
|
-
|
|
30033
|
-
|
|
30034
|
-
|
|
30035
|
-
|
|
30056
|
+
const \u6253\u3061\u6D88\u3059\u5B57\u3089 = [
|
|
30057
|
+
{ text: \u898B\u51FA\u3057, size: \u898B\u51FA\u3057\u306E\u5B57, \u5E2F: { \u5E45: \u898B\u51FA\u3057\u306E\u5E45, \u9AD8\u3055: \u898B\u51FA\u3057\u306E\u5E2F } },
|
|
30058
|
+
...fields.flatMap((f) => [
|
|
30059
|
+
{ text: f.label, size: \u540D\u306E\u5B57, \u5E2F: { \u5E45: bw - 28, \u9AD8\u3055: \u884C\u306E\u9593\u9694 } },
|
|
30060
|
+
{
|
|
30061
|
+
text: f.value,
|
|
30062
|
+
size: \u5024\u306E\u5B57,
|
|
30063
|
+
\u5E2F: { \u5E45: bw - 28 - \u5B57\u306E\u5E45(f.label, \u540D\u306E\u5B57) - 8, \u9AD8\u3055: \u884C\u306E\u9593\u9694 }
|
|
30064
|
+
}
|
|
30065
|
+
])
|
|
30066
|
+
];
|
|
30067
|
+
const art = (\u500D\u7387) => {
|
|
30068
|
+
const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089);
|
|
30069
|
+
const \u984C\u306E\u5927\u304D\u3055 = \u898B\u51FA\u3057\u306E\u5B57 * \u500D;
|
|
30070
|
+
const \u540D\u306E\u5927\u304D\u3055 = \u540D\u306E\u5B57 * \u500D;
|
|
30071
|
+
const \u5024\u306E\u5927\u304D\u3055 = \u5024\u306E\u5B57 * \u500D;
|
|
30072
|
+
return /* @__PURE__ */ jsxs("g", { children: [
|
|
30073
|
+
/* @__PURE__ */ jsx("rect", { x: x + 6, y: y + 6, width: bw, height: bh, rx: 8, fill: frame.stroke, opacity: 0.2, stroke: "none" }),
|
|
30074
|
+
/* @__PURE__ */ jsx("rect", { "data-cdl-role": "node-body", x, y, width: bw, height: bh, rx: 8, ...frame }),
|
|
30075
|
+
/* @__PURE__ */ jsx("path", { d: `M ${x} ${y + 32} L ${x} ${y + 8} Q ${x} ${y}, ${x + 8} ${y} L ${x + bw - 8} ${y} Q ${x + bw} ${y}, ${x + bw} ${y + 8} L ${x + bw} ${y + 32} Z`, fill: "var(--cdl-tone-accent, #2d6a8f)", fillOpacity: 0.9, stroke: "none" }),
|
|
30076
|
+
/* @__PURE__ */ jsx("text", { "data-cdl-role": "blockchain-block-title", "data-cdl-counter-scaled": "1", x: x + 14, y: y + 22, fontSize: \u984C\u306E\u5927\u304D\u3055, fontWeight: 700, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fill: "#ffffff", children: \u5E45\u3067\u5207\u308B(\u898B\u51FA\u3057, \u984C\u306E\u5927\u304D\u3055, \u898B\u51FA\u3057\u306E\u5E45, \u5B57\u306E\u5E45) }),
|
|
30077
|
+
/* @__PURE__ */ jsx("circle", { cx: x + bw - 16, cy: y + 16, r: 5.5, fill: "#7cd88f", stroke: "#ffffff", strokeWidth: 1.5 }),
|
|
30078
|
+
fields.map((f, i) => /* @__PURE__ */ jsxs("g", { children: [
|
|
30079
|
+
/* @__PURE__ */ jsx("text", { "data-cdl-counter-scaled": "1", x: x + 14, y: y + 54 + i * \u884C\u306E\u9593\u9694, fontSize: \u540D\u306E\u5927\u304D\u3055, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fill: "var(--cdl-text-dim, #5a6270)", children: f.label }),
|
|
30080
|
+
/* @__PURE__ */ jsx("text", { "data-cdl-role": `blockchain-block-${f.key}`, "data-cdl-counter-scaled": "1", x: x + bw - 14, y: y + 54 + i * \u884C\u306E\u9593\u9694, fontSize: \u5024\u306E\u5927\u304D\u3055, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontWeight: 600, textAnchor: "end", fill: "var(--cdl-text, #1a1f2a)", children: \u5E45\u3067\u5207\u308B(f.value, \u5024\u306E\u5927\u304D\u3055, bw - 28 - \u5B57\u306E\u5E45(f.label, \u540D\u306E\u5927\u304D\u3055) - 8, \u5B57\u306E\u5E45) }),
|
|
30081
|
+
/* @__PURE__ */ jsx("line", { x1: x + 14, y1: y + 60 + i * \u884C\u306E\u9593\u9694, x2: x + bw - 14, y2: y + 60 + i * \u884C\u306E\u9593\u9694, stroke: "var(--cdl-divider, #d4d4d8)", strokeWidth: 0.5, opacity: 0.5 })
|
|
30082
|
+
] }, i)),
|
|
30083
|
+
/* @__PURE__ */ jsxs("g", { transform: `translate(${cx - 32}, ${y + bh - 26})`, children: [
|
|
30084
|
+
/* @__PURE__ */ jsx("rect", { x: 0, y: 0, width: 22, height: 18, rx: 3, fill: "none", stroke: frame.stroke, strokeWidth: 1.5 }),
|
|
30085
|
+
/* @__PURE__ */ jsx("line", { x1: 22, y1: 9, x2: 42, y2: 9, stroke: frame.stroke, strokeWidth: 1.5 }),
|
|
30086
|
+
/* @__PURE__ */ jsx("rect", { x: 42, y: 0, width: 22, height: 18, rx: 3, fill: "var(--cdl-tone-accent, #2d6a8f)", fillOpacity: 0.5, stroke: frame.stroke, strokeWidth: 1.5 })
|
|
30087
|
+
] })
|
|
30088
|
+
] });
|
|
30089
|
+
};
|
|
30036
30090
|
return /* @__PURE__ */ jsx("g", { children: fitArt(r, blockchainBlockExtent(frame.strokeWidth), art) });
|
|
30037
30091
|
}
|
|
30038
30092
|
function ShapeBlockchainNode({ node, active }) {
|