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