@pixldocs/canvas-renderer 0.5.20 → 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 -34
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.js +12 -34
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -100,8 +100,8 @@ export declare function embedFontsInPdf(pdf: jsPDF, fontFamilies: Set<string>, f
|
|
|
100
100
|
* 1. Walks ALL text nodes (including clones/repeatables) collecting
|
|
101
101
|
* fontFamily + fontWeight + fontStyle.
|
|
102
102
|
* 2. Loads each unique family via Google Fonts CSS v1 (idempotent).
|
|
103
|
-
* 3.
|
|
104
|
-
*
|
|
103
|
+
* 3. Waits for each weight+style combo via `document.fonts.load()` so export
|
|
104
|
+
* capture never uses fallback font decoration metrics.
|
|
105
105
|
*
|
|
106
106
|
* Idempotent — safe to call multiple times for the same config.
|
|
107
107
|
*/
|
package/dist/index.js
CHANGED
|
@@ -11833,35 +11833,19 @@ async function ensureFontsForResolvedConfig(config) {
|
|
|
11833
11833
|
if (typeof document === "undefined") return;
|
|
11834
11834
|
const descriptors = collectFontDescriptorsFromConfig(config);
|
|
11835
11835
|
const families = new Set(descriptors.map((d) => d.family));
|
|
11836
|
-
|
|
11836
|
+
await withTimeout(Promise.all([...families].map((f) => loadGoogleFontCSS(f))), 6e3);
|
|
11837
11837
|
if (document.fonts) {
|
|
11838
|
-
descriptors.
|
|
11838
|
+
await withTimeout(Promise.all(descriptors.map((d) => {
|
|
11839
11839
|
const stylePrefix = d.style === "italic" ? "italic " : "";
|
|
11840
11840
|
const weightStr = String(d.weight);
|
|
11841
11841
|
const spec = `${stylePrefix}${weightStr} 16px "${d.family}"`;
|
|
11842
|
-
document.fonts.load(spec).catch(() => {
|
|
11842
|
+
return document.fonts.load(spec).catch(() => {
|
|
11843
11843
|
});
|
|
11844
|
-
});
|
|
11844
|
+
})), 6e3);
|
|
11845
|
+
await withTimeout(document.fonts.ready, 6e3);
|
|
11845
11846
|
}
|
|
11846
11847
|
}
|
|
11847
11848
|
const TEXT_TYPES = /* @__PURE__ */ new Set(["textbox", "text", "i-text"]);
|
|
11848
|
-
function getTextLines(obj) {
|
|
11849
|
-
const lines = Array.isArray(obj.textLines) && obj.textLines.length ? obj.textLines : String(obj.text || "").split("\n");
|
|
11850
|
-
return lines.map((line) => Array.isArray(line) ? line.join("") : String(line ?? ""));
|
|
11851
|
-
}
|
|
11852
|
-
function measureLineWidth(obj, line) {
|
|
11853
|
-
if (typeof document === "undefined") return 0;
|
|
11854
|
-
const canvas = document.createElement("canvas");
|
|
11855
|
-
const ctx = canvas.getContext("2d");
|
|
11856
|
-
if (!ctx) return 0;
|
|
11857
|
-
const fontStyle = obj.fontStyle || "normal";
|
|
11858
|
-
const fontWeight = obj.fontWeight || 400;
|
|
11859
|
-
const fontSize = obj.fontSize || 16;
|
|
11860
|
-
const fontFamily = obj.fontFamily || "sans-serif";
|
|
11861
|
-
ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
|
|
11862
|
-
const charSpacing = Number(obj.charSpacing || 0) / 1e3 * fontSize;
|
|
11863
|
-
return ctx.measureText(line).width + Math.max(0, line.length - 1) * charSpacing;
|
|
11864
|
-
}
|
|
11865
11849
|
function getFabricCanvasFromContainer(container) {
|
|
11866
11850
|
const registry2 = window.__fabricCanvasRegistry;
|
|
11867
11851
|
if (registry2 instanceof Map) {
|
|
@@ -11908,10 +11892,6 @@ function stabilizeFabricTextObjects(fabricInstance) {
|
|
|
11908
11892
|
obj.initDimensions();
|
|
11909
11893
|
(_b2 = obj.set) == null ? void 0 : _b2.call(obj, { width: saved.width, scaleX: saved.scaleX, scaleY: saved.scaleY });
|
|
11910
11894
|
}
|
|
11911
|
-
if (obj.underline || obj.linethrough) {
|
|
11912
|
-
const lineWidths = Array.isArray(obj.__lineWidths) ? obj.__lineWidths : [];
|
|
11913
|
-
obj.__lineWidths = getTextLines(obj).map((line, index) => Math.max(lineWidths[index] || 0, measureLineWidth(obj, line)));
|
|
11914
|
-
}
|
|
11915
11895
|
obj.dirty = true;
|
|
11916
11896
|
(_c2 = obj._clearCache) == null ? void 0 : _c2.call(obj);
|
|
11917
11897
|
(_d = obj.setCoords) == null ? void 0 : _d.call(obj);
|
|
@@ -12557,7 +12537,7 @@ class PixldocsRenderer {
|
|
|
12557
12537
|
container.style.cssText = `
|
|
12558
12538
|
position: fixed; left: -99999px; top: -99999px;
|
|
12559
12539
|
width: ${canvasWidth}px; height: ${canvasHeight}px;
|
|
12560
|
-
overflow: hidden; pointer-events: none;
|
|
12540
|
+
overflow: hidden; pointer-events: none; visibility: hidden;
|
|
12561
12541
|
`;
|
|
12562
12542
|
document.body.appendChild(container);
|
|
12563
12543
|
const timeout = setTimeout(() => {
|
|
@@ -12578,7 +12558,7 @@ class PixldocsRenderer {
|
|
|
12578
12558
|
finished = true;
|
|
12579
12559
|
this.waitForCanvasScene(container, config, pageIndex).then(async () => {
|
|
12580
12560
|
try {
|
|
12581
|
-
await this.waitForStableTextMetrics(container, config);
|
|
12561
|
+
await this.waitForStableTextMetrics(container, config, true);
|
|
12582
12562
|
await this.waitForCanvasScene(container, config, pageIndex, 2500, 50);
|
|
12583
12563
|
const fabricInstance = this.getFabricCanvasFromContainer(container);
|
|
12584
12564
|
const expectedImageCount = this.getExpectedImageCount(config, pageIndex);
|
|
@@ -12621,7 +12601,6 @@ class PixldocsRenderer {
|
|
|
12621
12601
|
pageIndex,
|
|
12622
12602
|
zoom: pixelRatio,
|
|
12623
12603
|
absoluteZoom: true,
|
|
12624
|
-
skipFontReadyWait: true,
|
|
12625
12604
|
onReady
|
|
12626
12605
|
})
|
|
12627
12606
|
);
|
|
@@ -12643,7 +12622,7 @@ class PixldocsRenderer {
|
|
|
12643
12622
|
container.style.cssText = `
|
|
12644
12623
|
position: fixed; left: -99999px; top: -99999px;
|
|
12645
12624
|
width: ${canvasWidth}px; height: ${canvasHeight}px;
|
|
12646
|
-
overflow: hidden; pointer-events: none;
|
|
12625
|
+
overflow: hidden; pointer-events: none; visibility: hidden;
|
|
12647
12626
|
`;
|
|
12648
12627
|
document.body.appendChild(container);
|
|
12649
12628
|
const timeout = setTimeout(() => {
|
|
@@ -12665,7 +12644,7 @@ class PixldocsRenderer {
|
|
|
12665
12644
|
this.waitForCanvasScene(container, config, pageIndex).then(async () => {
|
|
12666
12645
|
var _a, _b;
|
|
12667
12646
|
try {
|
|
12668
|
-
await this.waitForStableTextMetrics(container, config);
|
|
12647
|
+
await this.waitForStableTextMetrics(container, config, true);
|
|
12669
12648
|
await this.waitForCanvasScene(container, config, pageIndex, 2500, 50);
|
|
12670
12649
|
const fabricInstance = this.getFabricCanvasFromContainer(container);
|
|
12671
12650
|
if (!fabricInstance) {
|
|
@@ -12725,7 +12704,6 @@ class PixldocsRenderer {
|
|
|
12725
12704
|
zoom: 1,
|
|
12726
12705
|
// 1:1 — no UI scaling for SVG capture
|
|
12727
12706
|
absoluteZoom: true,
|
|
12728
|
-
skipFontReadyWait: true,
|
|
12729
12707
|
onReady
|
|
12730
12708
|
})
|
|
12731
12709
|
);
|
|
@@ -12788,10 +12766,10 @@ class PixldocsRenderer {
|
|
|
12788
12766
|
getFabricCanvasFromContainer(container) {
|
|
12789
12767
|
return getFabricCanvasFromContainer(container);
|
|
12790
12768
|
}
|
|
12791
|
-
async waitForStableTextMetrics(container, config) {
|
|
12769
|
+
async waitForStableTextMetrics(container, config, strictFontWait = false) {
|
|
12792
12770
|
if (typeof document !== "undefined") {
|
|
12793
|
-
|
|
12794
|
-
await this.waitForRelevantFonts(config);
|
|
12771
|
+
await ensureFontsForResolvedConfig(config);
|
|
12772
|
+
await this.waitForRelevantFonts(config, strictFontWait ? 6e3 : 1800);
|
|
12795
12773
|
}
|
|
12796
12774
|
const fabricInstance = this.getFabricCanvasFromContainer(container);
|
|
12797
12775
|
if (!(fabricInstance == null ? void 0 : fabricInstance.getObjects)) return;
|