@pixldocs/canvas-renderer 0.5.21 → 0.5.22
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 +12 -38
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.js +12 -38
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -11852,41 +11852,19 @@ async function ensureFontsForResolvedConfig(config) {
|
|
|
11852
11852
|
if (typeof document === "undefined") return;
|
|
11853
11853
|
const descriptors = collectFontDescriptorsFromConfig(config);
|
|
11854
11854
|
const families = new Set(descriptors.map((d) => d.family));
|
|
11855
|
-
|
|
11855
|
+
await withTimeout(Promise.all([...families].map((f) => loadGoogleFontCSS(f))), 6e3);
|
|
11856
11856
|
if (document.fonts) {
|
|
11857
|
-
descriptors.
|
|
11857
|
+
await withTimeout(Promise.all(descriptors.map((d) => {
|
|
11858
11858
|
const stylePrefix = d.style === "italic" ? "italic " : "";
|
|
11859
11859
|
const weightStr = String(d.weight);
|
|
11860
11860
|
const spec = `${stylePrefix}${weightStr} 16px "${d.family}"`;
|
|
11861
|
-
document.fonts.load(spec).catch(() => {
|
|
11861
|
+
return document.fonts.load(spec).catch(() => {
|
|
11862
11862
|
});
|
|
11863
|
-
});
|
|
11863
|
+
})), 6e3);
|
|
11864
|
+
await withTimeout(document.fonts.ready, 6e3);
|
|
11864
11865
|
}
|
|
11865
11866
|
}
|
|
11866
11867
|
const TEXT_TYPES = /* @__PURE__ */ new Set(["textbox", "text", "i-text"]);
|
|
11867
|
-
function getTextLines(obj) {
|
|
11868
|
-
const lines = Array.isArray(obj.textLines) && obj.textLines.length ? obj.textLines : String(obj.text || "").split("\n");
|
|
11869
|
-
return lines.map((line) => Array.isArray(line) ? line.join("") : String(line ?? ""));
|
|
11870
|
-
}
|
|
11871
|
-
function measureLineWidth(obj, line) {
|
|
11872
|
-
if (typeof document === "undefined") return 0;
|
|
11873
|
-
const canvas = document.createElement("canvas");
|
|
11874
|
-
const ctx = canvas.getContext("2d");
|
|
11875
|
-
if (!ctx) return 0;
|
|
11876
|
-
const fontStyle = obj.fontStyle || "normal";
|
|
11877
|
-
const fontWeight = obj.fontWeight || 400;
|
|
11878
|
-
const fontSize = obj.fontSize || 16;
|
|
11879
|
-
const fontFamily = obj.fontFamily || "sans-serif";
|
|
11880
|
-
ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
|
|
11881
|
-
const charSpacing = Number(obj.charSpacing || 0) / 1e3 * fontSize;
|
|
11882
|
-
return ctx.measureText(line).width + Math.max(0, line.length - 1) * charSpacing;
|
|
11883
|
-
}
|
|
11884
|
-
function getDecorationPadding(obj) {
|
|
11885
|
-
var _a;
|
|
11886
|
-
const strokeWidth = Number(obj.strokeWidth || 0);
|
|
11887
|
-
const shadowBlur = Number(((_a = obj.shadow) == null ? void 0 : _a.blur) || 0);
|
|
11888
|
-
return Math.max(0, strokeWidth) + Math.max(0, shadowBlur * 0.25);
|
|
11889
|
-
}
|
|
11890
11868
|
function getFabricCanvasFromContainer(container) {
|
|
11891
11869
|
const registry2 = window.__fabricCanvasRegistry;
|
|
11892
11870
|
if (registry2 instanceof Map) {
|
|
@@ -11933,10 +11911,6 @@ function stabilizeFabricTextObjects(fabricInstance) {
|
|
|
11933
11911
|
obj.initDimensions();
|
|
11934
11912
|
(_b2 = obj.set) == null ? void 0 : _b2.call(obj, { width: saved.width, scaleX: saved.scaleX, scaleY: saved.scaleY });
|
|
11935
11913
|
}
|
|
11936
|
-
if (obj.underline || obj.linethrough) {
|
|
11937
|
-
const decorationPadding = getDecorationPadding(obj);
|
|
11938
|
-
obj.__lineWidths = getTextLines(obj).map((line) => Math.max(0, measureLineWidth(obj, line) + decorationPadding));
|
|
11939
|
-
}
|
|
11940
11914
|
obj.dirty = true;
|
|
11941
11915
|
(_c2 = obj._clearCache) == null ? void 0 : _c2.call(obj);
|
|
11942
11916
|
(_d = obj.setCoords) == null ? void 0 : _d.call(obj);
|
|
@@ -12582,7 +12556,7 @@ class PixldocsRenderer {
|
|
|
12582
12556
|
container.style.cssText = `
|
|
12583
12557
|
position: fixed; left: -99999px; top: -99999px;
|
|
12584
12558
|
width: ${canvasWidth}px; height: ${canvasHeight}px;
|
|
12585
|
-
overflow: hidden; pointer-events: none;
|
|
12559
|
+
overflow: hidden; pointer-events: none; visibility: hidden;
|
|
12586
12560
|
`;
|
|
12587
12561
|
document.body.appendChild(container);
|
|
12588
12562
|
const timeout = setTimeout(() => {
|
|
@@ -12603,7 +12577,7 @@ class PixldocsRenderer {
|
|
|
12603
12577
|
finished = true;
|
|
12604
12578
|
this.waitForCanvasScene(container, config, pageIndex).then(async () => {
|
|
12605
12579
|
try {
|
|
12606
|
-
await this.waitForStableTextMetrics(container, config);
|
|
12580
|
+
await this.waitForStableTextMetrics(container, config, true);
|
|
12607
12581
|
await this.waitForCanvasScene(container, config, pageIndex, 2500, 50);
|
|
12608
12582
|
const fabricInstance = this.getFabricCanvasFromContainer(container);
|
|
12609
12583
|
const expectedImageCount = this.getExpectedImageCount(config, pageIndex);
|
|
@@ -12667,7 +12641,7 @@ class PixldocsRenderer {
|
|
|
12667
12641
|
container.style.cssText = `
|
|
12668
12642
|
position: fixed; left: -99999px; top: -99999px;
|
|
12669
12643
|
width: ${canvasWidth}px; height: ${canvasHeight}px;
|
|
12670
|
-
overflow: hidden; pointer-events: none;
|
|
12644
|
+
overflow: hidden; pointer-events: none; visibility: hidden;
|
|
12671
12645
|
`;
|
|
12672
12646
|
document.body.appendChild(container);
|
|
12673
12647
|
const timeout = setTimeout(() => {
|
|
@@ -12689,7 +12663,7 @@ class PixldocsRenderer {
|
|
|
12689
12663
|
this.waitForCanvasScene(container, config, pageIndex).then(async () => {
|
|
12690
12664
|
var _a, _b;
|
|
12691
12665
|
try {
|
|
12692
|
-
await this.waitForStableTextMetrics(container, config);
|
|
12666
|
+
await this.waitForStableTextMetrics(container, config, true);
|
|
12693
12667
|
await this.waitForCanvasScene(container, config, pageIndex, 2500, 50);
|
|
12694
12668
|
const fabricInstance = this.getFabricCanvasFromContainer(container);
|
|
12695
12669
|
if (!fabricInstance) {
|
|
@@ -12811,10 +12785,10 @@ class PixldocsRenderer {
|
|
|
12811
12785
|
getFabricCanvasFromContainer(container) {
|
|
12812
12786
|
return getFabricCanvasFromContainer(container);
|
|
12813
12787
|
}
|
|
12814
|
-
async waitForStableTextMetrics(container, config) {
|
|
12788
|
+
async waitForStableTextMetrics(container, config, strictFontWait = false) {
|
|
12815
12789
|
if (typeof document !== "undefined") {
|
|
12816
|
-
|
|
12817
|
-
await this.waitForRelevantFonts(config);
|
|
12790
|
+
await ensureFontsForResolvedConfig(config);
|
|
12791
|
+
await this.waitForRelevantFonts(config, strictFontWait ? 6e3 : 1800);
|
|
12818
12792
|
}
|
|
12819
12793
|
const fabricInstance = this.getFabricCanvasFromContainer(container);
|
|
12820
12794
|
if (!(fabricInstance == null ? void 0 : fabricInstance.getObjects)) return;
|