@pixldocs/canvas-renderer 0.5.14 → 0.5.16
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/dist/index.cjs +39 -29
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +3 -4
- package/dist/index.js +39 -29
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -2656,6 +2656,19 @@ const FONTS_TO_PRELOAD = [
|
|
|
2656
2656
|
];
|
|
2657
2657
|
let fontsLoaded = false;
|
|
2658
2658
|
let fontsLoadingPromise = null;
|
|
2659
|
+
const withFontTimeout = async (promise, timeoutMs = 4e3) => {
|
|
2660
|
+
let timeoutId;
|
|
2661
|
+
try {
|
|
2662
|
+
return await Promise.race([
|
|
2663
|
+
promise,
|
|
2664
|
+
new Promise((resolve) => {
|
|
2665
|
+
timeoutId = setTimeout(resolve, timeoutMs);
|
|
2666
|
+
})
|
|
2667
|
+
]);
|
|
2668
|
+
} finally {
|
|
2669
|
+
if (timeoutId) clearTimeout(timeoutId);
|
|
2670
|
+
}
|
|
2671
|
+
};
|
|
2659
2672
|
const preloadFont = async (fontFamily) => {
|
|
2660
2673
|
try {
|
|
2661
2674
|
if (document.fonts) {
|
|
@@ -2676,11 +2689,11 @@ const preloadAllFonts = async () => {
|
|
|
2676
2689
|
}
|
|
2677
2690
|
fontsLoadingPromise = (async () => {
|
|
2678
2691
|
if (document.fonts) {
|
|
2679
|
-
await document.fonts.ready;
|
|
2692
|
+
await withFontTimeout(document.fonts.ready, 2500);
|
|
2680
2693
|
}
|
|
2681
|
-
await Promise.all(FONTS_TO_PRELOAD.map((font) => preloadFont(font)));
|
|
2694
|
+
await withFontTimeout(Promise.all(FONTS_TO_PRELOAD.map((font) => preloadFont(font))).then(() => void 0), 5e3);
|
|
2682
2695
|
if (document.fonts) {
|
|
2683
|
-
await document.fonts.ready;
|
|
2696
|
+
await withFontTimeout(document.fonts.ready, 2500);
|
|
2684
2697
|
}
|
|
2685
2698
|
fontsLoaded = true;
|
|
2686
2699
|
})();
|
|
@@ -2688,14 +2701,12 @@ const preloadAllFonts = async () => {
|
|
|
2688
2701
|
};
|
|
2689
2702
|
const waitForFontsReady = async () => {
|
|
2690
2703
|
if (!document.fonts) return;
|
|
2691
|
-
await document.fonts.ready;
|
|
2704
|
+
await withFontTimeout(document.fonts.ready, 2500);
|
|
2692
2705
|
};
|
|
2693
|
-
const DEFAULT_FONT_CHECK_TIMEOUT_MS = 3500;
|
|
2694
|
-
const FONT_CHECK_POLL_MS = 60;
|
|
2695
2706
|
const waitUntilFontsAvailable = async (fontFamilies, options) => {
|
|
2696
2707
|
if (!document.fonts || fontFamilies.length === 0) return;
|
|
2697
|
-
const timeoutMs =
|
|
2698
|
-
const pollMs =
|
|
2708
|
+
const timeoutMs = options == null ? void 0 : options.timeoutMs;
|
|
2709
|
+
const pollMs = options == null ? void 0 : options.pollIntervalMs;
|
|
2699
2710
|
const deadline = Date.now() + timeoutMs;
|
|
2700
2711
|
const check = () => fontFamilies.every(
|
|
2701
2712
|
(f) => document.fonts.check(`16px "${f}"`) && document.fonts.check(`bold 16px "${f}"`)
|
|
@@ -11694,6 +11705,17 @@ function normalizeFontFamily(fontStack) {
|
|
|
11694
11705
|
}
|
|
11695
11706
|
const loadedFonts = /* @__PURE__ */ new Set();
|
|
11696
11707
|
const loadingPromises = /* @__PURE__ */ new Map();
|
|
11708
|
+
function withTimeout(promise, timeoutMs = 4e3) {
|
|
11709
|
+
let timeoutId;
|
|
11710
|
+
return Promise.race([
|
|
11711
|
+
promise,
|
|
11712
|
+
new Promise((resolve) => {
|
|
11713
|
+
timeoutId = setTimeout(resolve, timeoutMs);
|
|
11714
|
+
})
|
|
11715
|
+
]).finally(() => {
|
|
11716
|
+
if (timeoutId) clearTimeout(timeoutId);
|
|
11717
|
+
});
|
|
11718
|
+
}
|
|
11697
11719
|
async function loadGoogleFontCSS(rawFontFamily) {
|
|
11698
11720
|
if (!rawFontFamily || typeof document === "undefined") return;
|
|
11699
11721
|
const fontFamily = normalizeFontFamily(rawFontFamily);
|
|
@@ -11714,10 +11736,6 @@ async function loadGoogleFontCSS(rawFontFamily) {
|
|
|
11714
11736
|
link.onerror = () => reject(new Error(`Failed to load font: ${fontFamily}`));
|
|
11715
11737
|
document.head.appendChild(link);
|
|
11716
11738
|
});
|
|
11717
|
-
if (document.fonts) {
|
|
11718
|
-
await document.fonts.load(`16px "${fontFamily}"`);
|
|
11719
|
-
await document.fonts.ready;
|
|
11720
|
-
}
|
|
11721
11739
|
loadedFonts.add(fontFamily);
|
|
11722
11740
|
} catch (e) {
|
|
11723
11741
|
console.warn(`[@pixldocs/canvas-renderer] Font load failed: ${fontFamily}`, e);
|
|
@@ -11829,17 +11847,15 @@ async function ensureFontsForResolvedConfig(config) {
|
|
|
11829
11847
|
if (typeof document === "undefined") return;
|
|
11830
11848
|
const descriptors = collectFontDescriptorsFromConfig(config);
|
|
11831
11849
|
const families = new Set(descriptors.map((d) => d.family));
|
|
11832
|
-
|
|
11850
|
+
void withTimeout(Promise.all([...families].map((f) => loadGoogleFontCSS(f))), 2500);
|
|
11833
11851
|
if (document.fonts) {
|
|
11834
|
-
|
|
11852
|
+
descriptors.forEach((d) => {
|
|
11835
11853
|
const stylePrefix = d.style === "italic" ? "italic " : "";
|
|
11836
11854
|
const weightStr = String(d.weight);
|
|
11837
11855
|
const spec = `${stylePrefix}${weightStr} 16px "${d.family}"`;
|
|
11838
|
-
|
|
11856
|
+
document.fonts.load(spec).catch(() => {
|
|
11839
11857
|
});
|
|
11840
11858
|
});
|
|
11841
|
-
await Promise.all(loadPromises);
|
|
11842
|
-
await document.fonts.ready;
|
|
11843
11859
|
}
|
|
11844
11860
|
}
|
|
11845
11861
|
function PixldocsPreview(props) {
|
|
@@ -12623,14 +12639,8 @@ class PixldocsRenderer {
|
|
|
12623
12639
|
return null;
|
|
12624
12640
|
}
|
|
12625
12641
|
async waitForStableTextMetrics(container, config) {
|
|
12626
|
-
var _a;
|
|
12627
12642
|
if (typeof document !== "undefined") {
|
|
12628
12643
|
await ensureFontsForResolvedConfig(config);
|
|
12629
|
-
await ((_a = document.fonts) == null ? void 0 : _a.ready);
|
|
12630
|
-
const fontFamilies = [...collectFontsFromConfig(config)].filter(Boolean);
|
|
12631
|
-
if (fontFamilies.length > 0) {
|
|
12632
|
-
await waitUntilFontsAvailable(fontFamilies, { timeoutMs: 4e3, pollIntervalMs: 50 });
|
|
12633
|
-
}
|
|
12634
12644
|
}
|
|
12635
12645
|
const fabricInstance = this.getFabricCanvasFromContainer(container);
|
|
12636
12646
|
if (!(fabricInstance == null ? void 0 : fabricInstance.getObjects)) return;
|
|
@@ -12640,9 +12650,9 @@ class PixldocsRenderer {
|
|
|
12640
12650
|
clearMeasurementCache();
|
|
12641
12651
|
};
|
|
12642
12652
|
const reflowTextboxes = () => {
|
|
12643
|
-
var
|
|
12653
|
+
var _a, _b, _c;
|
|
12644
12654
|
const walk = (obj) => {
|
|
12645
|
-
var
|
|
12655
|
+
var _a2, _b2, _c2, _d;
|
|
12646
12656
|
if (!obj) return;
|
|
12647
12657
|
const children = Array.isArray(obj._objects) ? obj._objects : Array.isArray(obj.objects) ? obj.objects : [];
|
|
12648
12658
|
if (children.length) children.forEach(walk);
|
|
@@ -12654,8 +12664,8 @@ class PixldocsRenderer {
|
|
|
12654
12664
|
scaleY: obj.scaleY
|
|
12655
12665
|
};
|
|
12656
12666
|
const resetTextboxLayoutInternals = () => {
|
|
12657
|
-
var
|
|
12658
|
-
(
|
|
12667
|
+
var _a3;
|
|
12668
|
+
(_a3 = obj._clearCache) == null ? void 0 : _a3.call(obj);
|
|
12659
12669
|
obj.__charBounds = [];
|
|
12660
12670
|
obj.__lineWidths = [];
|
|
12661
12671
|
obj.__lineHeights = [];
|
|
@@ -12669,7 +12679,7 @@ class PixldocsRenderer {
|
|
|
12669
12679
|
resetTextboxLayoutInternals();
|
|
12670
12680
|
obj.initDimensions();
|
|
12671
12681
|
if (saved.width != null) {
|
|
12672
|
-
(
|
|
12682
|
+
(_a2 = obj.set) == null ? void 0 : _a2.call(obj, {
|
|
12673
12683
|
width: saved.width,
|
|
12674
12684
|
scaleX: saved.scaleX,
|
|
12675
12685
|
scaleY: saved.scaleY
|
|
@@ -12688,7 +12698,7 @@ class PixldocsRenderer {
|
|
|
12688
12698
|
}
|
|
12689
12699
|
};
|
|
12690
12700
|
fabricInstance.getObjects().forEach(walk);
|
|
12691
|
-
(
|
|
12701
|
+
(_a = fabricInstance.calcOffset) == null ? void 0 : _a.call(fabricInstance);
|
|
12692
12702
|
(_b = fabricInstance.renderAll) == null ? void 0 : _b.call(fabricInstance);
|
|
12693
12703
|
(_c = fabricInstance.requestRenderAll) == null ? void 0 : _c.call(fabricInstance);
|
|
12694
12704
|
};
|