fabricjs-document-engine 1.1.0 → 1.3.0

package/dist/pdf/export-pdf.cjs

@@ -3,12 +3,13 @@ const require_object_ids = require("../fabric/object-ids.cjs");
 const require_walk_objects = require("../fabric/walk-objects.cjs");
 const require_overrides = require("../export/svg/overrides.cjs");
 const require_text_on_path = require("../export/svg/text-on-path.cjs");
+const require_raster_object = require("../export/svg/raster-object.cjs");
+const require_text_decorations = require("../export/svg/text-decorations.cjs");
 const require_render_export = require("../export/render-export.cjs");
 const require_embed_assets = require("../export/svg/embed-assets.cjs");
 const require_batch_render = require("../export/batch-render.cjs");
 const require_fonts = require("./fonts.cjs");
 const require_page_layout = require("./page-layout.cjs");
-const require_text_decorations = require("./text-decorations.cjs");
 //#region src/pdf/export-pdf.ts
 const RASTER_REASONS = {
 	shadow: "it has a shadow, which PDF vectors cannot draw",
@@ -16,7 +17,8 @@ const RASTER_REASONS = {
 	gradientStroke: "its outline is a gradient or pattern",
 	uniformStroke: "it keeps its outline width while scaled (strokeUniform)",
 	font: "its font has no TrueType file in fonts",
-	characters: "it uses characters the built-in PDF fonts do not have; add a TrueType font that has them"
+	characters: "it uses characters the built-in PDF fonts do not have; add a TrueType font that has them",
+	mask: "it uses an inverted or nested clip path, which PDF vectors cannot draw"
 };
 function stop(signal) {
 	if (signal?.aborted) throw new require_errors.DocumentEngineError("EXPORT_ABORTED", "The PDF export was cancelled");
@@ -74,6 +76,7 @@ function rasterReason(object, registered, missingFonts) {
 	require_walk_objects.walkObjects([object], (child) => {
 		if (reason) return;
 		if (child.shadow) reason = "shadow";
+		else if (child.clipPath?.inverted || child.clipPath?.clipPath) reason = "mask";
 		else if (child.globalCompositeOperation && child.globalCompositeOperation !== "source-over") reason = "blend";
 		else if (typeof child.stroke === "object" && child.stroke !== null && child.strokeWidth > 0) reason = "gradientStroke";
 		else if (child.strokeUniform && child.stroke && child.strokeWidth > 0) {
@@ -90,69 +93,6 @@ function rasterReason(object, registered, missingFonts) {
 	});
 	return reason;
 }
-function shadowPadding(object) {
-	let padding = 0;
-	require_walk_objects.walkObjects([object], (child) => {
-		const shadow = child.shadow;
-		if (shadow) padding = Math.max(padding, shadow.blur + Math.max(Math.abs(shadow.offsetX), Math.abs(shadow.offsetY)));
-	});
-	return padding + 2;
-}
-function usesBlendMode(object) {
-	let blends = false;
-	require_walk_objects.walkObjects([object], (child) => {
-		if (child.globalCompositeOperation && child.globalCompositeOperation !== "source-over") blends = true;
-	});
-	return blends;
-}
-/**
-* An object as a picture placed where it sits on the canvas. Usually the
-* object alone, so the vectors underneath show through. An object with a
-* blend mode mixes with what lies below it, so its picture includes
-* everything below it within its bounds, which covers those vectors exactly.
-*/
-function rasterMarkup(canvas, object, multiplier) {
-	object.setCoords();
-	const bounds = object.getBoundingRect();
-	const padding = shadowPadding(object);
-	const left = Math.max(0, Math.floor(bounds.left - padding));
-	const top = Math.max(0, Math.floor(bounds.top - padding));
-	const right = Math.min(canvas.getWidth(), Math.ceil(bounds.left + bounds.width + padding));
-	const bottom = Math.min(canvas.getHeight(), Math.ceil(bounds.top + bounds.height + padding));
-	if (right <= left || bottom <= top) return "";
-	const blends = usesBlendMode(object);
-	const stack = canvas.getObjects();
-	const position = stack.indexOf(object);
-	const saved = {
-		backgroundColor: canvas.backgroundColor,
-		backgroundImage: canvas.backgroundImage,
-		overlayColor: canvas.overlayColor,
-		overlayImage: canvas.overlayImage
-	};
-	if (!blends) {
-		canvas.backgroundColor = "";
-		canvas.backgroundImage = void 0;
-	}
-	canvas.overlayColor = "";
-	canvas.overlayImage = void 0;
-	let element;
-	try {
-		const filter = (candidate) => blends ? stack.indexOf(candidate) <= position : candidate === object;
-		element = canvas.toCanvasElement(multiplier, {
-			left,
-			top,
-			width: right - left,
-			height: bottom - top,
-			filter
-		});
-	} finally {
-		Object.assign(canvas, saved);
-	}
-	const url = element.toDataURL("image/png");
-	element.width = 0;
-	element.height = 0;
-	return `<image x="${left}" y="${top}" width="${right - left}" height="${bottom - top}" preserveAspectRatio="none" xlink:href="${url}" />\n`;
-}
 function quoteFamily(name) {
 	return /^[a-z-]+$/i.test(name) ? name : `"${name.replace(/"/g, "")}"`;
 }
@@ -238,7 +178,7 @@ function clipTo(context, draw) {
 }
 async function drawRasterPage(canvas, context) {
 	const { layout, options } = context;
-	const multiplier = layout.scale * (options.dpi ?? 300) / 72;
+	const multiplier = require_raster_object.safeMultiplier(layout.scale * (options.dpi ?? 300) / 72, canvas.getWidth(), canvas.getHeight(), options.limits);
 	const element = require_render_export.withExportView(canvas, options.background ?? "keep", "png", () => canvas.toCanvasElement(multiplier));
 	try {
 		await clipTo(context, () => {
@@ -262,7 +202,7 @@ async function drawVectorPage(canvas, context) {
 			const reason = rasterReason(object, registered, missingFonts);
 			if (!reason) continue;
 			if (mode === "hybrid") {
-				rasters.set(object, rasterMarkup(canvas, object, multiplier));
+				rasters.set(object, require_raster_object.rasterMarkup(canvas, object, multiplier, options.limits));
 				warnings.push({
 					code: "PDF_RASTERIZED",
 					message: `An object was drawn as a picture at ${options.dpi ?? 300} dpi because ${RASTER_REASONS[reason]}`,
@@ -295,6 +235,7 @@ async function drawVectorPage(canvas, context) {
 	});
 	const embedded = await require_embed_assets.embedSvgAssets(require_render_export.repairFabricSvg(svg), canvas, {
 		textOnPath: "vector",
+		textDecorations: "shapes",
 		embedImages: true,
 		maxEmbeddedImageBytes: Number.MAX_SAFE_INTEGER,
 		embedFonts: {}

package/dist/pdf/export-pdf.js

@@ -3,12 +3,13 @@ import { readObjectId } from "../fabric/object-ids.js";
 import { walkObjects } from "../fabric/walk-objects.js";
 import { withSvgOverrides } from "../export/svg/overrides.js";
 import { isTextOnPath, textOnPathToSVG } from "../export/svg/text-on-path.js";
+import { rasterMarkup, safeMultiplier } from "../export/svg/raster-object.js";
+import { decoratedTextToSVG, hasStraightDecorations } from "../export/svg/text-decorations.js";
 import { repairFabricSvg, withExportView } from "../export/render-export.js";
 import { embedSvgAssets } from "../export/svg/embed-assets.js";
 import { disposeObjects } from "../export/batch-render.js";
 import { jsPdfStyle, loadFonts, registerFonts, standardFamily } from "./fonts.js";
 import { layoutPage } from "./page-layout.js";
-import { decoratedTextToSVG, hasStraightDecorations } from "./text-decorations.js";
 //#region src/pdf/export-pdf.ts
 const RASTER_REASONS = {
 	shadow: "it has a shadow, which PDF vectors cannot draw",
@@ -16,7 +17,8 @@ const RASTER_REASONS = {
 	gradientStroke: "its outline is a gradient or pattern",
 	uniformStroke: "it keeps its outline width while scaled (strokeUniform)",
 	font: "its font has no TrueType file in fonts",
-	characters: "it uses characters the built-in PDF fonts do not have; add a TrueType font that has them"
+	characters: "it uses characters the built-in PDF fonts do not have; add a TrueType font that has them",
+	mask: "it uses an inverted or nested clip path, which PDF vectors cannot draw"
 };
 function stop(signal) {
 	if (signal?.aborted) throw new DocumentEngineError("EXPORT_ABORTED", "The PDF export was cancelled");
@@ -74,6 +76,7 @@ function rasterReason(object, registered, missingFonts) {
 	walkObjects([object], (child) => {
 		if (reason) return;
 		if (child.shadow) reason = "shadow";
+		else if (child.clipPath?.inverted || child.clipPath?.clipPath) reason = "mask";
 		else if (child.globalCompositeOperation && child.globalCompositeOperation !== "source-over") reason = "blend";
 		else if (typeof child.stroke === "object" && child.stroke !== null && child.strokeWidth > 0) reason = "gradientStroke";
 		else if (child.strokeUniform && child.stroke && child.strokeWidth > 0) {
@@ -90,69 +93,6 @@ function rasterReason(object, registered, missingFonts) {
 	});
 	return reason;
 }
-function shadowPadding(object) {
-	let padding = 0;
-	walkObjects([object], (child) => {
-		const shadow = child.shadow;
-		if (shadow) padding = Math.max(padding, shadow.blur + Math.max(Math.abs(shadow.offsetX), Math.abs(shadow.offsetY)));
-	});
-	return padding + 2;
-}
-function usesBlendMode(object) {
-	let blends = false;
-	walkObjects([object], (child) => {
-		if (child.globalCompositeOperation && child.globalCompositeOperation !== "source-over") blends = true;
-	});
-	return blends;
-}
-/**
-* An object as a picture placed where it sits on the canvas. Usually the
-* object alone, so the vectors underneath show through. An object with a
-* blend mode mixes with what lies below it, so its picture includes
-* everything below it within its bounds, which covers those vectors exactly.
-*/
-function rasterMarkup(canvas, object, multiplier) {
-	object.setCoords();
-	const bounds = object.getBoundingRect();
-	const padding = shadowPadding(object);
-	const left = Math.max(0, Math.floor(bounds.left - padding));
-	const top = Math.max(0, Math.floor(bounds.top - padding));
-	const right = Math.min(canvas.getWidth(), Math.ceil(bounds.left + bounds.width + padding));
-	const bottom = Math.min(canvas.getHeight(), Math.ceil(bounds.top + bounds.height + padding));
-	if (right <= left || bottom <= top) return "";
-	const blends = usesBlendMode(object);
-	const stack = canvas.getObjects();
-	const position = stack.indexOf(object);
-	const saved = {
-		backgroundColor: canvas.backgroundColor,
-		backgroundImage: canvas.backgroundImage,
-		overlayColor: canvas.overlayColor,
-		overlayImage: canvas.overlayImage
-	};
-	if (!blends) {
-		canvas.backgroundColor = "";
-		canvas.backgroundImage = void 0;
-	}
-	canvas.overlayColor = "";
-	canvas.overlayImage = void 0;
-	let element;
-	try {
-		const filter = (candidate) => blends ? stack.indexOf(candidate) <= position : candidate === object;
-		element = canvas.toCanvasElement(multiplier, {
-			left,
-			top,
-			width: right - left,
-			height: bottom - top,
-			filter
-		});
-	} finally {
-		Object.assign(canvas, saved);
-	}
-	const url = element.toDataURL("image/png");
-	element.width = 0;
-	element.height = 0;
-	return `<image x="${left}" y="${top}" width="${right - left}" height="${bottom - top}" preserveAspectRatio="none" xlink:href="${url}" />\n`;
-}
 function quoteFamily(name) {
 	return /^[a-z-]+$/i.test(name) ? name : `"${name.replace(/"/g, "")}"`;
 }
@@ -238,7 +178,7 @@ function clipTo(context, draw) {
 }
 async function drawRasterPage(canvas, context) {
 	const { layout, options } = context;
-	const multiplier = layout.scale * (options.dpi ?? 300) / 72;
+	const multiplier = safeMultiplier(layout.scale * (options.dpi ?? 300) / 72, canvas.getWidth(), canvas.getHeight(), options.limits);
 	const element = withExportView(canvas, options.background ?? "keep", "png", () => canvas.toCanvasElement(multiplier));
 	try {
 		await clipTo(context, () => {
@@ -262,7 +202,7 @@ async function drawVectorPage(canvas, context) {
 			const reason = rasterReason(object, registered, missingFonts);
 			if (!reason) continue;
 			if (mode === "hybrid") {
-				rasters.set(object, rasterMarkup(canvas, object, multiplier));
+				rasters.set(object, rasterMarkup(canvas, object, multiplier, options.limits));
 				warnings.push({
 					code: "PDF_RASTERIZED",
 					message: `An object was drawn as a picture at ${options.dpi ?? 300} dpi because ${RASTER_REASONS[reason]}`,
@@ -295,6 +235,7 @@ async function drawVectorPage(canvas, context) {
 	});
 	const embedded = await embedSvgAssets(repairFabricSvg(svg), canvas, {
 		textOnPath: "vector",
+		textDecorations: "shapes",
 		embedImages: true,
 		maxEmbeddedImageBytes: Number.MAX_SAFE_INTEGER,
 		embedFonts: {}

package/dist/performance/batch.cjs

@@ -0,0 +1,31 @@
+//#region src/performance/batch.ts
+const depths = /* @__PURE__ */ new WeakMap();
+function batchCanvasUpdates(canvas, work) {
+	const state = depths.get(canvas) ?? {
+		depth: 0,
+		renderOnAddRemove: canvas.renderOnAddRemove
+	};
+	if (state.depth === 0) state.renderOnAddRemove = canvas.renderOnAddRemove;
+	state.depth += 1;
+	depths.set(canvas, state);
+	canvas.renderOnAddRemove = false;
+	const finish = () => {
+		state.depth -= 1;
+		if (state.depth > 0) return;
+		depths.delete(canvas);
+		canvas.renderOnAddRemove = state.renderOnAddRemove;
+		canvas.requestRenderAll();
+	};
+	let result;
+	try {
+		result = work();
+	} catch (error) {
+		finish();
+		throw error;
+	}
+	if (result instanceof Promise) return result.finally(finish);
+	finish();
+	return result;
+}
+//#endregion
+exports.batchCanvasUpdates = batchCanvasUpdates;

package/dist/performance/batch.d.cts

@@ -0,0 +1,4 @@
+import { StaticCanvas } from "fabric";
+//#region src/performance/batch.d.ts
+export declare function batchCanvasUpdates<Result>(canvas: StaticCanvas, work: () => Result): Result;
+//#endregion

package/dist/performance/batch.d.ts

@@ -0,0 +1,4 @@
+import { StaticCanvas } from "fabric";
+//#region src/performance/batch.d.ts
+export declare function batchCanvasUpdates<Result>(canvas: StaticCanvas, work: () => Result): Result;
+//#endregion

package/dist/performance/batch.js

@@ -0,0 +1,31 @@
+//#region src/performance/batch.ts
+const depths = /* @__PURE__ */ new WeakMap();
+function batchCanvasUpdates(canvas, work) {
+	const state = depths.get(canvas) ?? {
+		depth: 0,
+		renderOnAddRemove: canvas.renderOnAddRemove
+	};
+	if (state.depth === 0) state.renderOnAddRemove = canvas.renderOnAddRemove;
+	state.depth += 1;
+	depths.set(canvas, state);
+	canvas.renderOnAddRemove = false;
+	const finish = () => {
+		state.depth -= 1;
+		if (state.depth > 0) return;
+		depths.delete(canvas);
+		canvas.renderOnAddRemove = state.renderOnAddRemove;
+		canvas.requestRenderAll();
+	};
+	let result;
+	try {
+		result = work();
+	} catch (error) {
+		finish();
+		throw error;
+	}
+	if (result instanceof Promise) return result.finally(finish);
+	finish();
+	return result;
+}
+//#endregion
+export { batchCanvasUpdates };