@cardenelabs/cdl 0.106.0 → 0.107.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 +44 -1
- package/dist/index.cjs +70 -7
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +70 -7
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +70 -7
- package/dist/react.cjs.map +1 -1
- package/dist/react.js +70 -7
- package/dist/react.js.map +1 -1
- package/package.json +1 -1
- package/src/layout/spec.ts +81 -0
- package/src/layout/text-width.ts +52 -4
- package/src/visual-validate.ts +25 -5
package/dist/react.cjs
CHANGED
|
@@ -839,6 +839,11 @@ function isHalfwidthKana(code) {
|
|
|
839
839
|
}
|
|
840
840
|
var EMOJI_ADVANCE_EM = 1.05;
|
|
841
841
|
var MONO_EMOJI_ADVANCE_EM = 1.16;
|
|
842
|
+
var DRAWN_CJK_RATIO = 1.08;
|
|
843
|
+
var DRAWN_ASCII_RATIO = 1.16;
|
|
844
|
+
function isAscii(code) {
|
|
845
|
+
return code < 128;
|
|
846
|
+
}
|
|
842
847
|
var WIDE_SYMBOL_ADVANCE_EM = 0.95;
|
|
843
848
|
function isEmoji(code) {
|
|
844
849
|
return code >= 126976 && code <= 129791 || // 絵文字の主要面
|
|
@@ -877,29 +882,31 @@ function measureTextWidth(text, opts = {}) {
|
|
|
877
882
|
const fontSize = opts.fontSize ?? 22;
|
|
878
883
|
const letterSpacing = opts.letterSpacing ?? 0;
|
|
879
884
|
const fontFamily = opts.fontFamily ?? "sans";
|
|
885
|
+
const bound = opts.bound ?? "layout";
|
|
880
886
|
let advanceEmSum = 0;
|
|
881
887
|
let charCount = 0;
|
|
882
888
|
const \u6587\u5B57\u5217 = CLUSTER_JOINER_RE.test(text) ? segmentGraphemes(text) : [...text];
|
|
883
889
|
for (const ch of \u6587\u5B57\u5217) {
|
|
884
890
|
charCount++;
|
|
885
891
|
const code = ch.codePointAt(0) ?? 0;
|
|
892
|
+
const \u5272\u308A\u623B\u3057 = bound === "drawn" && !isEmojiGrapheme(ch, code) ? isAscii(code) ? DRAWN_ASCII_RATIO : isCJK(code) ? DRAWN_CJK_RATIO : 1 : 1;
|
|
886
893
|
if (isEmojiGrapheme(ch, code)) {
|
|
887
894
|
advanceEmSum += fontFamily === "mono" ? MONO_EMOJI_ADVANCE_EM : EMOJI_ADVANCE_EM;
|
|
888
895
|
continue;
|
|
889
896
|
}
|
|
890
897
|
if (fontFamily === "mono") {
|
|
891
|
-
advanceEmSum += isCJK(code) ? 1.08 : JETBRAINS_MONO_ADVANCE_EM;
|
|
898
|
+
advanceEmSum += (isCJK(code) ? 1.08 : JETBRAINS_MONO_ADVANCE_EM) / \u5272\u308A\u623B\u3057;
|
|
892
899
|
continue;
|
|
893
900
|
}
|
|
894
901
|
if (isCJK(code)) {
|
|
895
|
-
advanceEmSum += 1.08;
|
|
902
|
+
advanceEmSum += 1.08 / \u5272\u308A\u623B\u3057;
|
|
896
903
|
continue;
|
|
897
904
|
}
|
|
898
905
|
const table = ch.length === 1 ? INTER_BOLD_ADVANCE_EM[ch] : void 0;
|
|
899
|
-
advanceEmSum += table !== void 0 ? table : defaultAdvanceEm(ch, code);
|
|
906
|
+
advanceEmSum += (table !== void 0 ? table : defaultAdvanceEm(ch, code)) / \u5272\u308A\u623B\u3057;
|
|
900
907
|
}
|
|
901
908
|
const w = advanceEmSum * fontSize + letterSpacing * charCount;
|
|
902
|
-
return Math.max(w, fontSize * 1.2);
|
|
909
|
+
return bound === "drawn" ? w : Math.max(w, fontSize * 1.2);
|
|
903
910
|
}
|
|
904
911
|
function \u53CE\u3081\u308B\u500D\u7387(text, opts, \u5E45) {
|
|
905
912
|
if (!(\u5E45 > 0) || !(opts.fontSize > 0)) return 1;
|
|
@@ -1040,6 +1047,51 @@ function titleFontSize(kind) {
|
|
|
1040
1047
|
return TITLE_FONT_SIZE.get(kind ?? "") ?? TITLE_FONT_SIZE_DEFAULT;
|
|
1041
1048
|
}
|
|
1042
1049
|
var TITLE_BOX_PADDING = 52;
|
|
1050
|
+
var KINDS_SCALING_TITLE_WHEN_LOW = /* @__PURE__ */ new Set(["actor", "event", "function", "storage"]);
|
|
1051
|
+
var KINDS_SCALING_TITLE_ALWAYS = /* @__PURE__ */ new Set([
|
|
1052
|
+
"card",
|
|
1053
|
+
"shape-file",
|
|
1054
|
+
"shape-folder",
|
|
1055
|
+
"shape-cloud",
|
|
1056
|
+
"shape-cylinder",
|
|
1057
|
+
"shape-hexagon",
|
|
1058
|
+
"shape-diamond",
|
|
1059
|
+
"shape-stack",
|
|
1060
|
+
"shape-person",
|
|
1061
|
+
"shape-server-rack",
|
|
1062
|
+
"shape-network-node",
|
|
1063
|
+
"shape-mobile-device",
|
|
1064
|
+
"shape-satellite",
|
|
1065
|
+
"shape-smart-contract",
|
|
1066
|
+
"shape-rpc-node",
|
|
1067
|
+
"shape-wallet",
|
|
1068
|
+
"shape-nft",
|
|
1069
|
+
"shape-token",
|
|
1070
|
+
"shape-blockchain",
|
|
1071
|
+
"shape-bitcoin-chain",
|
|
1072
|
+
"shape-ethereum-chain",
|
|
1073
|
+
"shape-blockchain-node",
|
|
1074
|
+
"shape-bank",
|
|
1075
|
+
"shape-trust-bank",
|
|
1076
|
+
"shape-payment-provider",
|
|
1077
|
+
"shape-credit-card",
|
|
1078
|
+
"shape-brokerage",
|
|
1079
|
+
"shape-exchange",
|
|
1080
|
+
"shape-atm",
|
|
1081
|
+
"shape-website",
|
|
1082
|
+
"shape-storefront",
|
|
1083
|
+
"shape-warehouse",
|
|
1084
|
+
"shape-online-shop",
|
|
1085
|
+
"shape-cdn-edge",
|
|
1086
|
+
"shape-api-gateway"
|
|
1087
|
+
]);
|
|
1088
|
+
var COMPACT_TITLE_MAX_H = 100;
|
|
1089
|
+
function titleScalesToFit(kind, h) {
|
|
1090
|
+
const k = kind ?? "";
|
|
1091
|
+
if (KINDS_SCALING_TITLE_ALWAYS.has(k)) return true;
|
|
1092
|
+
return KINDS_SCALING_TITLE_WHEN_LOW.has(k) && h < COMPACT_TITLE_MAX_H;
|
|
1093
|
+
}
|
|
1094
|
+
var MIN_TITLE_FONT_SIZE = 11;
|
|
1043
1095
|
var KINDS_DRAWN_BY_GENERIC = [
|
|
1044
1096
|
"person",
|
|
1045
1097
|
"user-group",
|
|
@@ -6133,12 +6185,23 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes, \u5
|
|
|
6133
6185
|
if (!isRenderedNode(n)) continue;
|
|
6134
6186
|
const titleTrimmed = n.title?.trim() ?? "";
|
|
6135
6187
|
if (!titleTrimmed) continue;
|
|
6136
|
-
const
|
|
6137
|
-
|
|
6188
|
+
const \u4F59\u767D = drawsTitleOutsideBox(n.kind) ? 0 : TITLE_BOX_PADDING;
|
|
6189
|
+
const \u4F7F\u3048\u308B\u5E452 = n.w - \u4F59\u767D;
|
|
6190
|
+
const \u5B9F\u5E45 = measureTextWidth(titleTrimmed, { fontSize: titleFontSize(n.kind), bound: "drawn" });
|
|
6191
|
+
if (titleScalesToFit(n.kind, n.h)) {
|
|
6192
|
+
const \u7E2E\u3081\u305F\u5927\u304D\u3055 = \u5B9F\u5E45 > 0 ? titleFontSize(n.kind) * Math.min(1, \u4F7F\u3048\u308B\u5E452 / \u5B9F\u5E45) : titleFontSize(n.kind);
|
|
6193
|
+
if (\u7E2E\u3081\u305F\u5927\u304D\u3055 < MIN_TITLE_FONT_SIZE) {
|
|
6194
|
+
push(
|
|
6195
|
+
"text-readability",
|
|
6196
|
+
`node "${n.id}" title "${n.title}" \u304C node \u5E45 ${n.w}px \u306B\u53CE\u307E\u3089\u305A\u3001\u8AAD\u3081\u308B\u4E0B\u9650 ${MIN_TITLE_FONT_SIZE}px \u3092\u5272\u308B (\u7E2E\u3081\u3066 ${\u7E2E\u3081\u305F\u5927\u304D\u3055.toFixed(1)}px)`,
|
|
6197
|
+
"warn"
|
|
6198
|
+
);
|
|
6199
|
+
}
|
|
6200
|
+
} else if (\u5B9F\u5E45 > \u4F7F\u3048\u308B\u5E452 + 8) {
|
|
6138
6201
|
push(
|
|
6139
6202
|
"text-readability",
|
|
6140
6203
|
// 字ごとの実幅は小数になるので、読む人に出す時だけ丸める (判定は丸めない)
|
|
6141
|
-
`node "${n.id}" title "${n.title}" \u304C node \u5E45 ${n.w}px \u3092\u8D85\u904E\u3059\u308B\u53EF\u80FD\u6027 (\u671F\u5F85 ${Math.round(
|
|
6204
|
+
`node "${n.id}" title "${n.title}" \u304C node \u5E45 ${n.w}px \u3092\u8D85\u904E\u3059\u308B\u53EF\u80FD\u6027 (\u671F\u5F85 ${Math.round(\u5B9F\u5E45 + \u4F59\u767D)}px)`,
|
|
6142
6205
|
"warn"
|
|
6143
6206
|
);
|
|
6144
6207
|
}
|