@pixldocs/canvas-renderer 0.5.16 → 0.5.17
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 +51 -5
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.js +51 -5
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -12300,6 +12300,49 @@ class PixldocsRenderer {
|
|
|
12300
12300
|
setTimeout(check, 0);
|
|
12301
12301
|
});
|
|
12302
12302
|
}
|
|
12303
|
+
waitForCanvasScene(container, config, pageIndex, maxWaitMs = 8e3, pollMs = 50) {
|
|
12304
|
+
return new Promise((resolve) => {
|
|
12305
|
+
var _a, _b;
|
|
12306
|
+
const start = Date.now();
|
|
12307
|
+
const pageHasContent = (((_b = (_a = config.pages[pageIndex]) == null ? void 0 : _a.children) == null ? void 0 : _b.length) ?? 0) > 0;
|
|
12308
|
+
const settle = () => requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
|
|
12309
|
+
const check = () => {
|
|
12310
|
+
const fabricCanvas = this.getFabricCanvasFromContainer(container);
|
|
12311
|
+
const lowerCanvas = (fabricCanvas == null ? void 0 : fabricCanvas.lowerCanvasEl) || container.querySelector("canvas.lower-canvas, canvas");
|
|
12312
|
+
const objectCount = typeof (fabricCanvas == null ? void 0 : fabricCanvas.getObjects) === "function" ? fabricCanvas.getObjects().length : 0;
|
|
12313
|
+
const ready = !!lowerCanvas && (!pageHasContent || objectCount > 0);
|
|
12314
|
+
if (ready) {
|
|
12315
|
+
console.log(`[canvas-renderer][scene-wait] ready after ${Date.now() - start}ms (objects=${objectCount})`);
|
|
12316
|
+
settle();
|
|
12317
|
+
return;
|
|
12318
|
+
}
|
|
12319
|
+
if (Date.now() - start >= maxWaitMs) {
|
|
12320
|
+
console.warn(`[canvas-renderer][scene-wait-timeout] elapsed=${Date.now() - start}ms objects=${objectCount} pageHasContent=${pageHasContent}`);
|
|
12321
|
+
settle();
|
|
12322
|
+
return;
|
|
12323
|
+
}
|
|
12324
|
+
setTimeout(check, pollMs);
|
|
12325
|
+
};
|
|
12326
|
+
setTimeout(check, 0);
|
|
12327
|
+
});
|
|
12328
|
+
}
|
|
12329
|
+
async waitForRelevantFonts(config, maxWaitMs = 1800) {
|
|
12330
|
+
if (typeof document === "undefined" || !document.fonts) return;
|
|
12331
|
+
const descriptors = collectFontDescriptorsFromConfig(config);
|
|
12332
|
+
if (descriptors.length === 0) return;
|
|
12333
|
+
const loads = Promise.all(
|
|
12334
|
+
descriptors.map((descriptor) => {
|
|
12335
|
+
const stylePrefix = descriptor.style === "italic" ? "italic " : "";
|
|
12336
|
+
const spec = `${stylePrefix}${descriptor.weight} 16px "${descriptor.family}"`;
|
|
12337
|
+
return document.fonts.load(spec).catch(() => []);
|
|
12338
|
+
})
|
|
12339
|
+
).then(() => void 0);
|
|
12340
|
+
await Promise.race([
|
|
12341
|
+
loads,
|
|
12342
|
+
new Promise((resolve) => setTimeout(resolve, maxWaitMs))
|
|
12343
|
+
]);
|
|
12344
|
+
await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
|
|
12345
|
+
}
|
|
12303
12346
|
getNormalizedGradientStops(gradient) {
|
|
12304
12347
|
const stops = Array.isArray(gradient == null ? void 0 : gradient.stops) ? gradient.stops.map((stop) => ({
|
|
12305
12348
|
offset: Math.max(0, Math.min(1, Number((stop == null ? void 0 : stop.offset) ?? 0))),
|
|
@@ -12412,10 +12455,11 @@ class PixldocsRenderer {
|
|
|
12412
12455
|
);
|
|
12413
12456
|
return;
|
|
12414
12457
|
}
|
|
12415
|
-
|
|
12416
|
-
this.waitForCanvasImages(container, expectedImageCount).then(async () => {
|
|
12458
|
+
this.waitForCanvasScene(container, config, pageIndex).then(async () => {
|
|
12417
12459
|
try {
|
|
12418
12460
|
const fabricInstance = this.getFabricCanvasFromContainer(container);
|
|
12461
|
+
const expectedImageCount = this.getExpectedImageCount(config, pageIndex);
|
|
12462
|
+
await this.waitForCanvasImages(container, expectedImageCount);
|
|
12419
12463
|
await this.waitForStableTextMetrics(container, config);
|
|
12420
12464
|
const fabricCanvas = container.querySelector("canvas.upper-canvas, canvas");
|
|
12421
12465
|
const sourceCanvas = (fabricInstance == null ? void 0 : fabricInstance.lowerCanvasEl) || container.querySelector("canvas.lower-canvas") || fabricCanvas;
|
|
@@ -12506,8 +12550,7 @@ class PixldocsRenderer {
|
|
|
12506
12550
|
);
|
|
12507
12551
|
return;
|
|
12508
12552
|
}
|
|
12509
|
-
|
|
12510
|
-
this.waitForCanvasImages(container, expectedImageCount).then(async () => {
|
|
12553
|
+
this.waitForCanvasScene(container, config, pageIndex).then(async () => {
|
|
12511
12554
|
var _a, _b;
|
|
12512
12555
|
try {
|
|
12513
12556
|
const fabricInstance = this.getFabricCanvasFromContainer(container);
|
|
@@ -12516,6 +12559,8 @@ class PixldocsRenderer {
|
|
|
12516
12559
|
reject(new Error("No Fabric canvas instance found for SVG capture"));
|
|
12517
12560
|
return;
|
|
12518
12561
|
}
|
|
12562
|
+
const expectedImageCount = this.getExpectedImageCount(config, pageIndex);
|
|
12563
|
+
await this.waitForCanvasImages(container, expectedImageCount);
|
|
12519
12564
|
await this.waitForStableTextMetrics(container, config);
|
|
12520
12565
|
const prevVPT = fabricInstance.viewportTransform ? [...fabricInstance.viewportTransform] : void 0;
|
|
12521
12566
|
const prevSvgVPT = fabricInstance.svgViewportTransformation;
|
|
@@ -12640,7 +12685,8 @@ class PixldocsRenderer {
|
|
|
12640
12685
|
}
|
|
12641
12686
|
async waitForStableTextMetrics(container, config) {
|
|
12642
12687
|
if (typeof document !== "undefined") {
|
|
12643
|
-
|
|
12688
|
+
void ensureFontsForResolvedConfig(config);
|
|
12689
|
+
await this.waitForRelevantFonts(config);
|
|
12644
12690
|
}
|
|
12645
12691
|
const fabricInstance = this.getFabricCanvasFromContainer(container);
|
|
12646
12692
|
if (!(fabricInstance == null ? void 0 : fabricInstance.getObjects)) return;
|