@cardenelabs/cdl 0.105.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 +67 -1
- package/dist/index.cjs +71 -8
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +71 -8
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +71 -8
- package/dist/react.cjs.map +1 -1
- package/dist/react.js +71 -8
- 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 +31 -6
package/dist/index.js
CHANGED
|
@@ -12239,6 +12239,11 @@ function isHalfwidthKana(code) {
|
|
|
12239
12239
|
}
|
|
12240
12240
|
var EMOJI_ADVANCE_EM = 1.05;
|
|
12241
12241
|
var MONO_EMOJI_ADVANCE_EM = 1.16;
|
|
12242
|
+
var DRAWN_CJK_RATIO = 1.08;
|
|
12243
|
+
var DRAWN_ASCII_RATIO = 1.16;
|
|
12244
|
+
function isAscii(code) {
|
|
12245
|
+
return code < 128;
|
|
12246
|
+
}
|
|
12242
12247
|
var WIDE_SYMBOL_ADVANCE_EM = 0.95;
|
|
12243
12248
|
function isEmoji(code) {
|
|
12244
12249
|
return code >= 126976 && code <= 129791 || // 絵文字の主要面
|
|
@@ -12277,29 +12282,31 @@ function measureTextWidth(text, opts = {}) {
|
|
|
12277
12282
|
const fontSize = opts.fontSize ?? 22;
|
|
12278
12283
|
const letterSpacing = opts.letterSpacing ?? 0;
|
|
12279
12284
|
const fontFamily = opts.fontFamily ?? "sans";
|
|
12285
|
+
const bound = opts.bound ?? "layout";
|
|
12280
12286
|
let advanceEmSum = 0;
|
|
12281
12287
|
let charCount = 0;
|
|
12282
12288
|
const \u6587\u5B57\u5217 = CLUSTER_JOINER_RE.test(text) ? segmentGraphemes(text) : [...text];
|
|
12283
12289
|
for (const ch of \u6587\u5B57\u5217) {
|
|
12284
12290
|
charCount++;
|
|
12285
12291
|
const code = ch.codePointAt(0) ?? 0;
|
|
12292
|
+
const \u5272\u308A\u623B\u3057 = bound === "drawn" && !isEmojiGrapheme(ch, code) ? isAscii(code) ? DRAWN_ASCII_RATIO : isCJK(code) ? DRAWN_CJK_RATIO : 1 : 1;
|
|
12286
12293
|
if (isEmojiGrapheme(ch, code)) {
|
|
12287
12294
|
advanceEmSum += fontFamily === "mono" ? MONO_EMOJI_ADVANCE_EM : EMOJI_ADVANCE_EM;
|
|
12288
12295
|
continue;
|
|
12289
12296
|
}
|
|
12290
12297
|
if (fontFamily === "mono") {
|
|
12291
|
-
advanceEmSum += isCJK(code) ? 1.08 : JETBRAINS_MONO_ADVANCE_EM;
|
|
12298
|
+
advanceEmSum += (isCJK(code) ? 1.08 : JETBRAINS_MONO_ADVANCE_EM) / \u5272\u308A\u623B\u3057;
|
|
12292
12299
|
continue;
|
|
12293
12300
|
}
|
|
12294
12301
|
if (isCJK(code)) {
|
|
12295
|
-
advanceEmSum += 1.08;
|
|
12302
|
+
advanceEmSum += 1.08 / \u5272\u308A\u623B\u3057;
|
|
12296
12303
|
continue;
|
|
12297
12304
|
}
|
|
12298
12305
|
const table = ch.length === 1 ? INTER_BOLD_ADVANCE_EM[ch] : void 0;
|
|
12299
|
-
advanceEmSum += table !== void 0 ? table : defaultAdvanceEm(ch, code);
|
|
12306
|
+
advanceEmSum += (table !== void 0 ? table : defaultAdvanceEm(ch, code)) / \u5272\u308A\u623B\u3057;
|
|
12300
12307
|
}
|
|
12301
12308
|
const w = advanceEmSum * fontSize + letterSpacing * charCount;
|
|
12302
|
-
return Math.max(w, fontSize * 1.2);
|
|
12309
|
+
return bound === "drawn" ? w : Math.max(w, fontSize * 1.2);
|
|
12303
12310
|
}
|
|
12304
12311
|
function \u53CE\u3081\u308B\u500D\u7387(text, opts, \u5E45) {
|
|
12305
12312
|
if (!(\u5E45 > 0) || !(opts.fontSize > 0)) return 1;
|
|
@@ -12440,6 +12447,51 @@ function titleFontSize(kind) {
|
|
|
12440
12447
|
return TITLE_FONT_SIZE.get(kind ?? "") ?? TITLE_FONT_SIZE_DEFAULT;
|
|
12441
12448
|
}
|
|
12442
12449
|
var TITLE_BOX_PADDING = 52;
|
|
12450
|
+
var KINDS_SCALING_TITLE_WHEN_LOW = /* @__PURE__ */ new Set(["actor", "event", "function", "storage"]);
|
|
12451
|
+
var KINDS_SCALING_TITLE_ALWAYS = /* @__PURE__ */ new Set([
|
|
12452
|
+
"card",
|
|
12453
|
+
"shape-file",
|
|
12454
|
+
"shape-folder",
|
|
12455
|
+
"shape-cloud",
|
|
12456
|
+
"shape-cylinder",
|
|
12457
|
+
"shape-hexagon",
|
|
12458
|
+
"shape-diamond",
|
|
12459
|
+
"shape-stack",
|
|
12460
|
+
"shape-person",
|
|
12461
|
+
"shape-server-rack",
|
|
12462
|
+
"shape-network-node",
|
|
12463
|
+
"shape-mobile-device",
|
|
12464
|
+
"shape-satellite",
|
|
12465
|
+
"shape-smart-contract",
|
|
12466
|
+
"shape-rpc-node",
|
|
12467
|
+
"shape-wallet",
|
|
12468
|
+
"shape-nft",
|
|
12469
|
+
"shape-token",
|
|
12470
|
+
"shape-blockchain",
|
|
12471
|
+
"shape-bitcoin-chain",
|
|
12472
|
+
"shape-ethereum-chain",
|
|
12473
|
+
"shape-blockchain-node",
|
|
12474
|
+
"shape-bank",
|
|
12475
|
+
"shape-trust-bank",
|
|
12476
|
+
"shape-payment-provider",
|
|
12477
|
+
"shape-credit-card",
|
|
12478
|
+
"shape-brokerage",
|
|
12479
|
+
"shape-exchange",
|
|
12480
|
+
"shape-atm",
|
|
12481
|
+
"shape-website",
|
|
12482
|
+
"shape-storefront",
|
|
12483
|
+
"shape-warehouse",
|
|
12484
|
+
"shape-online-shop",
|
|
12485
|
+
"shape-cdn-edge",
|
|
12486
|
+
"shape-api-gateway"
|
|
12487
|
+
]);
|
|
12488
|
+
var COMPACT_TITLE_MAX_H = 100;
|
|
12489
|
+
function titleScalesToFit(kind, h) {
|
|
12490
|
+
const k = kind ?? "";
|
|
12491
|
+
if (KINDS_SCALING_TITLE_ALWAYS.has(k)) return true;
|
|
12492
|
+
return KINDS_SCALING_TITLE_WHEN_LOW.has(k) && h < COMPACT_TITLE_MAX_H;
|
|
12493
|
+
}
|
|
12494
|
+
var MIN_TITLE_FONT_SIZE = 11;
|
|
12443
12495
|
var KINDS_DRAWN_BY_GENERIC = [
|
|
12444
12496
|
"person",
|
|
12445
12497
|
"user-group",
|
|
@@ -17223,12 +17275,23 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes, \u5
|
|
|
17223
17275
|
if (!isRenderedNode(n)) continue;
|
|
17224
17276
|
const titleTrimmed = n.title?.trim() ?? "";
|
|
17225
17277
|
if (!titleTrimmed) continue;
|
|
17226
|
-
const
|
|
17227
|
-
const
|
|
17228
|
-
|
|
17278
|
+
const \u4F59\u767D = drawsTitleOutsideBox(n.kind) ? 0 : TITLE_BOX_PADDING;
|
|
17279
|
+
const \u4F7F\u3048\u308B\u5E452 = n.w - \u4F59\u767D;
|
|
17280
|
+
const \u5B9F\u5E45 = measureTextWidth(titleTrimmed, { fontSize: titleFontSize(n.kind), bound: "drawn" });
|
|
17281
|
+
if (titleScalesToFit(n.kind, n.h)) {
|
|
17282
|
+
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);
|
|
17283
|
+
if (\u7E2E\u3081\u305F\u5927\u304D\u3055 < MIN_TITLE_FONT_SIZE) {
|
|
17284
|
+
push(
|
|
17285
|
+
"text-readability",
|
|
17286
|
+
`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)`,
|
|
17287
|
+
"warn"
|
|
17288
|
+
);
|
|
17289
|
+
}
|
|
17290
|
+
} else if (\u5B9F\u5E45 > \u4F7F\u3048\u308B\u5E452 + 8) {
|
|
17229
17291
|
push(
|
|
17230
17292
|
"text-readability",
|
|
17231
|
-
|
|
17293
|
+
// 字ごとの実幅は小数になるので、読む人に出す時だけ丸める (判定は丸めない)
|
|
17294
|
+
`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)`,
|
|
17232
17295
|
"warn"
|
|
17233
17296
|
);
|
|
17234
17297
|
}
|