fabricjs-document-engine 1.1.0 → 1.2.0

package/dist/engine/create-document-engine.js

@@ -1,6 +1,7 @@
 import { buildAssetManifest } from "../assets/asset-manifest.js";
+import { documentObjects, pickPageFields } from "../fabric/page-state.js";
 import { DocumentEngineError, isDocumentEngineError } from "./errors.js";
-import { isSafeImageUrl, secureDocument } from "../security/content-limits.js";
+import { canvasSizeProblem, isSafeImageUrl, secureDocument } from "../security/content-limits.js";
 import { isSameUrl } from "../assets/image-check.js";
 import { inspectAssets, prepareAssetsForLoad, prepareAssetsForSave } from "../assets/asset-pipeline.js";
 import { resolveExportArea } from "../export/export-area.js";
@@ -38,11 +39,21 @@ function createDocumentEngine(options) {
 	const registry = createObjectRegistry(options.customObjects);
 	const events = createEventEmitter();
 	const objectsById = /* @__PURE__ */ new Map();
-	const assetOptions = options.assets ?? {};
+	const assetOptions = {
+		...options.assets,
+		maxImagePixels: options.limits?.maxImagePixels ?? 67108864
+	};
 	const uploadedUrls = /* @__PURE__ */ new Map();
 	let documentInfo = createDocumentInfo(options.document);
 	let activeLoad = null;
 	let destroyed = false;
+	let mutations = 0;
+	let session = 0;
+	/** Throws when async work started under `startedIn` would now change another document. */
+	function ensureSameSession(startedIn, what) {
+		ensureUsable();
+		if (session !== startedIn) throw new DocumentEngineError("DOCUMENT_CHANGED", `${what} was dropped because another document was opened while it ran`);
+	}
 	function ensureUsable() {
 		if (destroyed) throw new DocumentEngineError("ENGINE_DESTROYED", "This document engine was destroyed");
 	}
@@ -67,21 +78,41 @@ function createDocumentEngine(options) {
 		objectsById.clear();
 		canvas.getObjects().forEach(indexObjectTree);
 	}
-	const handleObjectAdded = ({ target }) => indexObjectTree(target);
-	const handleObjectRemoved = ({ target }) => removeObjectTreeFromIndex(target);
+	const handleObjectAdded = ({ target }) => {
+		mutations += 1;
+		indexObjectTree(target);
+	};
+	const handleObjectRemoved = ({ target }) => {
+		mutations += 1;
+		removeObjectTreeFromIndex(target);
+	};
+	const countMutation = () => {
+		mutations += 1;
+	};
 	canvas.on("object:added", handleObjectAdded);
 	canvas.on("object:removed", handleObjectRemoved);
+	canvas.on("object:modified", countMutation);
+	canvas.on("text:changed", countMutation);
 	rebuildIndex();
 	const history = createHistory({
 		canvas,
 		limit: options.history?.limit,
 		maxBytes: options.history?.maxBytes,
-		serializeObjects: () => {
+		serializeState: () => {
 			rebuildIndex();
-			return serializeCanvas(canvas, registry.propertiesToInclude()).objects;
+			const serialized = serializeCanvas(canvas, registry.propertiesToInclude());
+			return {
+				objects: serialized.objects,
+				page: {
+					width: canvas.getWidth(),
+					height: canvas.getHeight(),
+					...pickPageFields(serialized)
+				}
+			};
 		},
 		onChange: (state) => events.emit("history:change", state),
-		onContentChange: () => noteContentChange()
+		onContentChange: () => noteContentChange(),
+		onLiveChange: () => noteContentChange()
 	});
 	const saving = createSaveController({
 		getStorage: () => requireStorage(),
@@ -116,6 +147,7 @@ function createDocumentEngine(options) {
 		}
 	}) : void 0;
 	function noteContentChange() {
+		mutations += 1;
 		saving.noteContentChange();
 		recovery?.schedule();
 	}
@@ -138,11 +170,14 @@ function createDocumentEngine(options) {
 				height: canvas.getHeight()
 			},
 			objects: serialized.objects,
-			assets: buildAssetManifest(serialized.objects),
+			assets: buildAssetManifest(documentObjects({
+				objects: serialized.objects,
+				canvas: serialized
+			})),
 			metadata: { ...documentInfo.metadata }
 		};
 		if (serialized.version !== void 0) document.fabricVersion = serialized.version;
-		if (serialized.background !== void 0) document.canvas.background = serialized.background;
+		Object.assign(document.canvas, pickPageFields(serialized));
 		return document;
 	}
 	function toLoadError(error, controller) {
@@ -161,7 +196,7 @@ function createDocumentEngine(options) {
 			throw new DocumentEngineError(issues[0].code, `The document is not valid: ${summary}`, { issues });
 		}
 		const document = input;
-		const unknownTypes = registry.findUnknownTypes(collectSerializedTypes(document.objects));
+		const unknownTypes = registry.findUnknownTypes(collectSerializedTypes(documentObjects(document)));
 		if (unknownTypes.length > 0) throw new DocumentEngineError("UNKNOWN_OBJECT_TYPE", `The document uses object types that are not registered: ${unknownTypes.join(", ")}. Register them with customObjects or engine.registerObject before loading.`, { unknownTypes });
 		return document;
 	}
@@ -199,6 +234,7 @@ function createDocumentEngine(options) {
 		ensureUsable();
 		protectUnsavedChanges(loadOptions.discardUnsavedChanges);
 		const controller = startedLoad ?? startLoad(loadOptions.signal);
+		const mutationsAtStart = mutations;
 		const documentId = describeDocumentId(input);
 		const report = (stage, done, total) => {
 			if (controller.signal.aborted) return;
@@ -228,11 +264,15 @@ function createDocumentEngine(options) {
 			if (controller.signal.aborted) throw new Error("aborted");
 			await history.withoutRecording(() => loadIntoCanvas(canvas, {
 				version: document.fabricVersion,
-				background: document.canvas.background,
+				...pickPageFields(document.canvas),
 				objects: document.objects
 			}, {
 				signal: controller.signal,
-				onObjects: (done, total) => report("objects", done, total)
+				onObjects: (done, total) => report("objects", done, total),
+				beforeSwap: () => {
+					if (mutations !== mutationsAtStart && !loadOptions.discardUnsavedChanges) throw new DocumentEngineError("LOAD_CONFLICT", "The canvas was edited while the document loaded, so the load was stopped to keep the edits. Pass { discardUnsavedChanges: true } to replace them.");
+					session += 1;
+				}
 			}));
 			if (controller.signal.aborted) throw new Error("aborted");
 			if (loadOptions.restoreCanvasSize ?? true) canvas.setDimensions({
@@ -285,10 +325,37 @@ function createDocumentEngine(options) {
 			metadata
 		});
 	}
+	function setPage(changes, label = "Change page") {
+		ensureUsable();
+		const problem = canvasSizeProblem(changes.width ?? canvas.getWidth(), changes.height ?? canvas.getHeight(), options.limits);
+		if (problem) throw new DocumentEngineError("UNSAFE_DOCUMENT", `The page was not resized: it would be ${problem}`);
+		history.transaction(label, () => {
+			const width = changes.width ?? canvas.getWidth();
+			const height = changes.height ?? canvas.getHeight();
+			if (width !== canvas.getWidth() || height !== canvas.getHeight()) canvas.setDimensions({
+				width,
+				height
+			});
+			const live = {};
+			if (changes.background !== void 0) live.backgroundColor = changes.background ?? "";
+			if (changes.backgroundImage !== void 0) live.backgroundImage = changes.backgroundImage ?? void 0;
+			if (changes.overlay !== void 0) live.overlayColor = changes.overlay ?? "";
+			if (changes.overlayImage !== void 0) live.overlayImage = changes.overlayImage ?? void 0;
+			if (changes.clipPath !== void 0) live.clipPath = changes.clipPath ?? void 0;
+			canvas.set(live);
+		});
+		canvas.requestRenderAll();
+	}
 	async function importSvg(svg, importOptions = {}) {
 		ensureUsable();
+		const startedIn = session;
 		const result = await readSvg(svg, importOptions, options.limits);
-		ensureUsable();
+		try {
+			ensureSameSession(startedIn, "The SVG import");
+		} catch (error) {
+			result.objects.forEach((object) => object.dispose?.());
+			throw error;
+		}
 		if (result.objects.length > 0) {
 			history.transaction("Import SVG", () => canvas.add(...result.objects));
 			canvas.requestRenderAll();
@@ -408,6 +475,7 @@ function createDocumentEngine(options) {
 		protectUnsavedChanges(newOptions.discardUnsavedChanges);
 		activeLoad?.abort();
 		history.withoutRecording(() => canvas.clear());
+		session += 1;
 		objectsById.clear();
 		documentInfo = createDocumentInfo(newOptions);
 		uploadedUrls.clear();
@@ -434,10 +502,12 @@ function createDocumentEngine(options) {
 			if (isReplaceableImage(object) && isSameUrl(object.getSrc(), oldUrl)) images.push(object);
 		});
 		if (images.length === 0) return 0;
+		const startedIn = session;
 		await history.transaction("Replace image", () => Promise.all(images.map(async (image) => {
 			const displayedWidth = image.width * image.scaleX;
 			const displayedHeight = image.height * image.scaleY;
 			await image.setSrc(newUrl, { crossOrigin: image.crossOrigin ?? null });
+			ensureSameSession(startedIn, "Replacing the image");
 			image.set({
 				scaleX: displayedWidth / image.width,
 				scaleY: displayedHeight / image.height
@@ -486,14 +556,31 @@ function createDocumentEngine(options) {
 			const warnings = [...check.warnings];
 			const rendered = withExportView(canvas, settings.background, format, () => {
 				const area = resolveExportArea(canvas, settings.area, settings.padding);
+				if (format !== "svg") {
+					const problem = canvasSizeProblem(area.width * settings.scale, area.height * settings.scale, options.limits);
+					if (problem) {
+						const message = `The export would be ${problem}. Lower the scale or export a smaller area.`;
+						throw new DocumentEngineError("EXPORT_BLOCKED", message, { problems: [{
+							code: "TOO_LARGE",
+							message,
+							objectIds: []
+						}] });
+					}
+				}
 				return {
 					area,
-					content: format === "svg" ? Promise.resolve(renderSvg(canvas, area, settings.scale, settings.svg)) : renderRaster(canvas, area, format, settings.scale, settings.quality)
+					content: format === "svg" ? Promise.resolve(renderSvg(canvas, area, settings.scale, settings.svg, options.limits)) : renderRaster(canvas, area, format, settings.scale, settings.quality)
 				};
 			});
 			let blob;
 			if (format === "svg") {
-				const embedded = await embedSvgAssets(await rendered.content, canvas, settings.svg, settings.signal, options.limits?.isAllowedUrl ?? isSafeImageUrl);
+				const { svg, rasterizedObjectIds } = await rendered.content;
+				if (rasterizedObjectIds.length > 0) warnings.push({
+					code: "CLIP_PATH_RASTERIZED",
+					message: "Objects whose clip path has a clip path of its own were drawn as pictures: Fabric cannot write nested clip paths as SVG.",
+					objectIds: rasterizedObjectIds
+				});
+				const embedded = await embedSvgAssets(svg, canvas, settings.svg, settings.signal, options.limits?.isAllowedUrl ?? isSafeImageUrl);
 				stopIfCancelled();
 				if (settings.svg.embedImages === "require" && embedded.problems.length > 0) {
 					const problems = embedded.warnings.filter((warning) => warning.code === "IMAGE_NOT_EMBEDDED").map((warning) => ({
@@ -555,12 +642,14 @@ function createDocumentEngine(options) {
 		if (!recovery) throw new DocumentEngineError("RECOVERY_MISSING", "Pass recovery: { store } to createDocumentEngine to use recovery");
 		return recovery;
 	}
-	async function restoreRecovery(documentId, loadOptions) {
+	async function restoreRecovery(documentId, restoreOptions = {}) {
 		const source = requireRecovery();
 		const id = documentId ?? documentInfo.id;
-		const record = await source.read(id);
+		const { sessionId: branch, ...loadOptions } = restoreOptions;
+		const record = await source.read(id, branch);
 		if (!record) throw new DocumentEngineError("RECOVERY_NOT_FOUND", `There is no recovery copy for document "${id}"`);
 		const loaded = await loadDocument(await restoreRecordedFiles(record), loadOptions);
+		source.adopt(loaded.id, record.sessionId);
 		noteContentChange();
 		events.emit("recovery:restored", { document: loaded });
 		return loaded;
@@ -581,12 +670,15 @@ function createDocumentEngine(options) {
 		const { disposed } = canvas;
 		if (recovery && saving.state().isDirty && !disposed) recovery.writeNow();
 		destroyed = true;
+		session += 1;
 		activeLoad?.abort();
 		history.destroy();
 		saving.destroy();
 		recovery?.destroy();
 		canvas.off("object:added", handleObjectAdded);
 		canvas.off("object:removed", handleObjectRemoved);
+		canvas.off("object:modified", countMutation);
+		canvas.off("text:changed", countMutation);
 		objectsById.clear();
 		events.clear();
 	}
@@ -594,7 +686,8 @@ function createDocumentEngine(options) {
 		canvas,
 		getDocumentInfo: () => ({
 			...documentInfo,
-			metadata: { ...documentInfo.metadata }
+			metadata: { ...documentInfo.metadata },
+			session
 		}),
 		updateMetadata(changes) {
 			ensureUsable();
@@ -635,14 +728,15 @@ function createDocumentEngine(options) {
 		preflightExport: checkBeforeExport,
 		flushRecovery: async () => requireRecovery().flush(),
 		getRecoverableDocuments: async () => requireRecovery().list(),
-		getRecovery: async (documentId) => requireRecovery().read(documentId ?? documentInfo.id),
+		getRecovery: async (documentId, sessionId) => requireRecovery().read(documentId ?? documentInfo.id, sessionId),
 		restoreRecovery,
-		discardRecovery: async (documentId) => requireRecovery().remove(documentId ?? documentInfo.id),
+		discardRecovery: async (documentId, sessionId) => requireRecovery().discard(documentId ?? documentInfo.id, sessionId),
 		getInterruptedLoad: async () => requireRecovery().interruptedLoad(),
-		transaction(label, work) {
+		transaction(label, work, transactionOptions) {
 			ensureUsable();
-			return history.transaction(label, work);
+			return history.transaction(label, work, transactionOptions);
 		},
+		setPage,
 		commit(label = "Edit") {
 			ensureUsable();
 			return history.commit(label);

package/dist/engine/errors.d.cts

@@ -1,7 +1,7 @@
 import { FontAsset, ImageAsset } from "../assets/asset-manifest.cjs";
 import { ExportProblem } from "../export/preflight-export.cjs";
 //#region src/engine/errors.d.ts
-export type DocumentErrorCode = "INVALID_DOCUMENT" | "UNSAFE_DOCUMENT" | "UNSUPPORTED_SCHEMA" | "UNKNOWN_OBJECT_TYPE" | "INVALID_CUSTOM_OBJECT" | "LOAD_ABORTED" | "LOAD_FAILED" | "MISSING_ASSETS" | "MISSING_FONTS" | "ASSET_UPLOAD_FAILED" | "STORAGE_MISSING" | "UNSAVED_CHANGES" | "SAVE_FAILED" | "SAVE_CONFLICT" | "SAVE_CANCELLED" | "DOCUMENT_NOT_FOUND" | "HISTORY_FAILED" | "RECOVERY_MISSING" | "RECOVERY_NOT_FOUND" | "RECOVERY_FAILED" | "MIGRATION_FAILED" | "VERSIONS_UNSUPPORTED" | "VERSION_NOT_FOUND" | "VERSION_FAILED" | "INVALID_EXPORT_OPTIONS" | "EXPORT_BLOCKED" | "EXPORT_FAILED" | "EXPORT_ABORTED" | "SVG_IMPORT_FAILED" | "PDF_UNAVAILABLE" | "PDF_FAILED" | "ENGINE_DESTROYED";
+export type DocumentErrorCode = "INVALID_DOCUMENT" | "UNSAFE_DOCUMENT" | "UNSUPPORTED_SCHEMA" | "UNKNOWN_OBJECT_TYPE" | "INVALID_CUSTOM_OBJECT" | "LOAD_ABORTED" | "LOAD_FAILED" | "MISSING_ASSETS" | "MISSING_FONTS" | "ASSET_UPLOAD_FAILED" | "STORAGE_MISSING" | "UNSAVED_CHANGES" | "SAVE_FAILED" | "SAVE_CONFLICT" | "SAVE_CANCELLED" | "DOCUMENT_NOT_FOUND" | "HISTORY_FAILED" | "RECOVERY_MISSING" | "RECOVERY_NOT_FOUND" | "RECOVERY_FAILED" | "MIGRATION_FAILED" | "VERSIONS_UNSUPPORTED" | "VERSION_NOT_FOUND" | "VERSION_FAILED" | "INVALID_EXPORT_OPTIONS" | "EXPORT_BLOCKED" | "EXPORT_FAILED" | "EXPORT_ABORTED" | "SVG_IMPORT_FAILED" | "LOAD_CONFLICT" | "DOCUMENT_CHANGED" | "PDF_UNAVAILABLE" | "PDF_FAILED" | "ENGINE_DESTROYED";
 export interface DocumentIssue {
   code: DocumentErrorCode;
   path: string;

package/dist/engine/errors.d.ts

@@ -1,7 +1,7 @@
 import { FontAsset, ImageAsset } from "../assets/asset-manifest.js";
 import { ExportProblem } from "../export/preflight-export.js";
 //#region src/engine/errors.d.ts
-export type DocumentErrorCode = "INVALID_DOCUMENT" | "UNSAFE_DOCUMENT" | "UNSUPPORTED_SCHEMA" | "UNKNOWN_OBJECT_TYPE" | "INVALID_CUSTOM_OBJECT" | "LOAD_ABORTED" | "LOAD_FAILED" | "MISSING_ASSETS" | "MISSING_FONTS" | "ASSET_UPLOAD_FAILED" | "STORAGE_MISSING" | "UNSAVED_CHANGES" | "SAVE_FAILED" | "SAVE_CONFLICT" | "SAVE_CANCELLED" | "DOCUMENT_NOT_FOUND" | "HISTORY_FAILED" | "RECOVERY_MISSING" | "RECOVERY_NOT_FOUND" | "RECOVERY_FAILED" | "MIGRATION_FAILED" | "VERSIONS_UNSUPPORTED" | "VERSION_NOT_FOUND" | "VERSION_FAILED" | "INVALID_EXPORT_OPTIONS" | "EXPORT_BLOCKED" | "EXPORT_FAILED" | "EXPORT_ABORTED" | "SVG_IMPORT_FAILED" | "PDF_UNAVAILABLE" | "PDF_FAILED" | "ENGINE_DESTROYED";
+export type DocumentErrorCode = "INVALID_DOCUMENT" | "UNSAFE_DOCUMENT" | "UNSUPPORTED_SCHEMA" | "UNKNOWN_OBJECT_TYPE" | "INVALID_CUSTOM_OBJECT" | "LOAD_ABORTED" | "LOAD_FAILED" | "MISSING_ASSETS" | "MISSING_FONTS" | "ASSET_UPLOAD_FAILED" | "STORAGE_MISSING" | "UNSAVED_CHANGES" | "SAVE_FAILED" | "SAVE_CONFLICT" | "SAVE_CANCELLED" | "DOCUMENT_NOT_FOUND" | "HISTORY_FAILED" | "RECOVERY_MISSING" | "RECOVERY_NOT_FOUND" | "RECOVERY_FAILED" | "MIGRATION_FAILED" | "VERSIONS_UNSUPPORTED" | "VERSION_NOT_FOUND" | "VERSION_FAILED" | "INVALID_EXPORT_OPTIONS" | "EXPORT_BLOCKED" | "EXPORT_FAILED" | "EXPORT_ABORTED" | "SVG_IMPORT_FAILED" | "LOAD_CONFLICT" | "DOCUMENT_CHANGED" | "PDF_UNAVAILABLE" | "PDF_FAILED" | "ENGINE_DESTROYED";
 export interface DocumentIssue {
   code: DocumentErrorCode;
   path: string;

package/dist/export/export-options.cjs

@@ -36,6 +36,8 @@ function normalizeExportOptions(options) {
 	const svg = options.svg ?? {};
 	const textOnPath = svg.textOnPath ?? "vector";
 	if (textOnPath !== "vector" && textOnPath !== "fabric") throw invalid("svg.textOnPath must be \"vector\" or \"fabric\"");
+	const textDecorations = svg.textDecorations ?? "shapes";
+	if (textDecorations !== "shapes" && textDecorations !== "css") throw invalid("svg.textDecorations must be \"shapes\" or \"css\"");
 	const embedImages = svg.embedImages ?? false;
 	if (embedImages !== true && embedImages !== false && embedImages !== "require") throw invalid("svg.embedImages must be true, false or \"require\"");
 	const maxEmbeddedImageBytes = svg.maxEmbeddedImageBytes ?? 26214400;
@@ -52,6 +54,7 @@ function normalizeExportOptions(options) {
 		signal: options.signal,
 		svg: {
 			textOnPath,
+			textDecorations,
 			embedImages,
 			maxEmbeddedImageBytes,
 			embedFonts

package/dist/export/export-options.d.cts

@@ -18,6 +18,12 @@ export interface SvgExportOptions {
    * backgrounds and underlines straight.
    */
   textOnPath?: "vector" | "fabric";
+  /**
+   * How underlines, overlines and line-throughs of ordinary text are written.
+   * `shapes` (the default) draws them where the canvas does; `css` keeps
+   * Fabric's `text-decoration`, which readers place in their own way.
+   */
+  textDecorations?: "shapes" | "css";
   /**
    * Puts every image into the file as data, so the SVG opens anywhere
    * without the original image URLs. `require` blocks the export when an

package/dist/export/export-options.d.ts

@@ -18,6 +18,12 @@ export interface SvgExportOptions {
    * backgrounds and underlines straight.
    */
   textOnPath?: "vector" | "fabric";
+  /**
+   * How underlines, overlines and line-throughs of ordinary text are written.
+   * `shapes` (the default) draws them where the canvas does; `css` keeps
+   * Fabric's `text-decoration`, which readers place in their own way.
+   */
+  textDecorations?: "shapes" | "css";
   /**
    * Puts every image into the file as data, so the SVG opens anywhere
    * without the original image URLs. `require` blocks the export when an

package/dist/export/export-options.js

@@ -36,6 +36,8 @@ function normalizeExportOptions(options) {
 	const svg = options.svg ?? {};
 	const textOnPath = svg.textOnPath ?? "vector";
 	if (textOnPath !== "vector" && textOnPath !== "fabric") throw invalid("svg.textOnPath must be \"vector\" or \"fabric\"");
+	const textDecorations = svg.textDecorations ?? "shapes";
+	if (textDecorations !== "shapes" && textDecorations !== "css") throw invalid("svg.textDecorations must be \"shapes\" or \"css\"");
 	const embedImages = svg.embedImages ?? false;
 	if (embedImages !== true && embedImages !== false && embedImages !== "require") throw invalid("svg.embedImages must be true, false or \"require\"");
 	const maxEmbeddedImageBytes = svg.maxEmbeddedImageBytes ?? 26214400;
@@ -52,6 +54,7 @@ function normalizeExportOptions(options) {
 		signal: options.signal,
 		svg: {
 			textOnPath,
+			textDecorations,
 			embedImages,
 			maxEmbeddedImageBytes,
 			embedFonts

package/dist/export/preflight-export.d.cts

@@ -1,7 +1,7 @@
 import { AssetWarning } from "../assets/asset-pipeline.cjs";
 import { StaticCanvas } from "fabric";
 //#region src/export/preflight-export.d.ts
-export type ExportProblemCode = "MISSING_IMAGE" | "CROSS_ORIGIN_IMAGE" | "MISSING_FONT" | "IMAGE_NOT_EMBEDDED";
+export type ExportProblemCode = "MISSING_IMAGE" | "CROSS_ORIGIN_IMAGE" | "MISSING_FONT" | "IMAGE_NOT_EMBEDDED" | "TOO_LARGE";
 export interface ExportProblem {
   code: ExportProblemCode;
   message: string;

package/dist/export/preflight-export.d.ts

@@ -1,7 +1,7 @@
 import { AssetWarning } from "../assets/asset-pipeline.js";
 import { StaticCanvas } from "fabric";
 //#region src/export/preflight-export.d.ts
-export type ExportProblemCode = "MISSING_IMAGE" | "CROSS_ORIGIN_IMAGE" | "MISSING_FONT" | "IMAGE_NOT_EMBEDDED";
+export type ExportProblemCode = "MISSING_IMAGE" | "CROSS_ORIGIN_IMAGE" | "MISSING_FONT" | "IMAGE_NOT_EMBEDDED" | "TOO_LARGE";
 export interface ExportProblem {
   code: ExportProblemCode;
   message: string;

package/dist/export/render-export.cjs

@@ -1,4 +1,9 @@
+const require_object_ids = require("../fabric/object-ids.cjs");
+const require_overrides = require("./svg/overrides.cjs");
 const require_text_on_path = require("./svg/text-on-path.cjs");
+const require_clip_masks = require("./svg/clip-masks.cjs");
+const require_raster_object = require("./svg/raster-object.cjs");
+const require_text_decorations = require("./svg/text-decorations.cjs");
 //#region src/export/render-export.ts
 const identity = [
 	1,
@@ -51,8 +56,38 @@ function renderRaster(canvas, area, format, scale, quality) {
 function repairFabricSvg(svg) {
 	return svg.replace(/(rotate="[^"]*")(style=)/g, "$1 $2");
 }
-function renderSvg(canvas, area, scale, options) {
-	const write = () => canvas.toSVG({
+/**
+* Writes the SVG with the engine's corrections on top of Fabric's output:
+* curved text and decorations as the canvas draws them, inverted clip paths
+* as masks, and objects with nested clip paths as pictures. Every other
+* object is written by Fabric unchanged.
+*/
+function renderSvg(canvas, area, scale, options, limits) {
+	const textOnPath = (options?.textOnPath ?? "vector") === "vector";
+	const decorations = (options?.textDecorations ?? "shapes") === "shapes";
+	const rasterizedObjectIds = [];
+	const pictures = /* @__PURE__ */ new Map();
+	for (const object of canvas.getObjects()) {
+		if (!require_clip_masks.hasNestedClipPath(object)) continue;
+		pictures.set(object, require_raster_object.rasterMarkup(canvas, object, Math.max(2, scale * 2), limits));
+		const id = require_object_ids.readObjectId(object);
+		if (id !== void 0) rasterizedObjectIds.push(id);
+	}
+	const baseWriter = (object) => {
+		if (textOnPath && require_text_on_path.isTextOnPath(object)) return (reviver) => require_text_on_path.textOnPathToSVG(object, reviver);
+		if (decorations && require_text_decorations.hasStraightDecorations(object)) return (reviver) => require_text_decorations.decoratedTextToSVG(object, reviver);
+	};
+	const writerFor = (object) => {
+		const picture = pictures.get(object);
+		if (picture !== void 0) return () => picture;
+		const base = baseWriter(object);
+		if (require_clip_masks.ownClipPathIsInverted(object)) {
+			const prototypeWriter = (reviver) => Object.getPrototypeOf(object).toSVG.call(object, reviver);
+			return (reviver) => require_clip_masks.writeWithInvertedMask(object, base ?? prototypeWriter, reviver);
+		}
+		return base;
+	};
+	const svg = require_overrides.withSvgOverrides(canvas, writerFor, () => canvas.toSVG({
 		viewBox: {
 			x: area.left,
 			y: area.top,
@@ -61,8 +96,11 @@ function renderSvg(canvas, area, scale, options) {
 		},
 		width: String(area.width * scale),
 		height: String(area.height * scale)
-	});
-	return repairFabricSvg((options?.textOnPath ?? "vector") === "vector" ? require_text_on_path.withTextOnPathSVG(canvas, write).result : write());
+	})).result;
+	return {
+		svg: repairFabricSvg(svg),
+		rasterizedObjectIds
+	};
 }
 //#endregion
 exports.mimeTypes = mimeTypes;

package/dist/export/render-export.js

@@ -1,4 +1,9 @@
-import { withTextOnPathSVG } from "./svg/text-on-path.js";
+import { readObjectId } from "../fabric/object-ids.js";
+import { withSvgOverrides } from "./svg/overrides.js";
+import { isTextOnPath, textOnPathToSVG } from "./svg/text-on-path.js";
+import { hasNestedClipPath, ownClipPathIsInverted, writeWithInvertedMask } from "./svg/clip-masks.js";
+import { rasterMarkup } from "./svg/raster-object.js";
+import { decoratedTextToSVG, hasStraightDecorations } from "./svg/text-decorations.js";
 //#region src/export/render-export.ts
 const identity = [
 	1,
@@ -51,8 +56,38 @@ function renderRaster(canvas, area, format, scale, quality) {
 function repairFabricSvg(svg) {
 	return svg.replace(/(rotate="[^"]*")(style=)/g, "$1 $2");
 }
-function renderSvg(canvas, area, scale, options) {
-	const write = () => canvas.toSVG({
+/**
+* Writes the SVG with the engine's corrections on top of Fabric's output:
+* curved text and decorations as the canvas draws them, inverted clip paths
+* as masks, and objects with nested clip paths as pictures. Every other
+* object is written by Fabric unchanged.
+*/
+function renderSvg(canvas, area, scale, options, limits) {
+	const textOnPath = (options?.textOnPath ?? "vector") === "vector";
+	const decorations = (options?.textDecorations ?? "shapes") === "shapes";
+	const rasterizedObjectIds = [];
+	const pictures = /* @__PURE__ */ new Map();
+	for (const object of canvas.getObjects()) {
+		if (!hasNestedClipPath(object)) continue;
+		pictures.set(object, rasterMarkup(canvas, object, Math.max(2, scale * 2), limits));
+		const id = readObjectId(object);
+		if (id !== void 0) rasterizedObjectIds.push(id);
+	}
+	const baseWriter = (object) => {
+		if (textOnPath && isTextOnPath(object)) return (reviver) => textOnPathToSVG(object, reviver);
+		if (decorations && hasStraightDecorations(object)) return (reviver) => decoratedTextToSVG(object, reviver);
+	};
+	const writerFor = (object) => {
+		const picture = pictures.get(object);
+		if (picture !== void 0) return () => picture;
+		const base = baseWriter(object);
+		if (ownClipPathIsInverted(object)) {
+			const prototypeWriter = (reviver) => Object.getPrototypeOf(object).toSVG.call(object, reviver);
+			return (reviver) => writeWithInvertedMask(object, base ?? prototypeWriter, reviver);
+		}
+		return base;
+	};
+	const svg = withSvgOverrides(canvas, writerFor, () => canvas.toSVG({
 		viewBox: {
 			x: area.left,
 			y: area.top,
@@ -61,8 +96,11 @@ function renderSvg(canvas, area, scale, options) {
 		},
 		width: String(area.width * scale),
 		height: String(area.height * scale)
-	});
-	return repairFabricSvg((options?.textOnPath ?? "vector") === "vector" ? withTextOnPathSVG(canvas, write).result : write());
+	})).result;
+	return {
+		svg: repairFabricSvg(svg),
+		rasterizedObjectIds
+	};
 }
 //#endregion
 export { mimeTypes, renderRaster, renderSvg, repairFabricSvg, withExportView };

package/dist/export/svg/clip-masks.cjs

@@ -0,0 +1,39 @@
+const require_walk_objects = require("../../fabric/walk-objects.cjs");
+//#region src/export/svg/clip-masks.ts
+/** True when a clip path anywhere in the object's tree has a clip path of its own. */
+function hasNestedClipPath(object) {
+	let nested = false;
+	require_walk_objects.walkObjects([object], (child) => {
+		if (child.clipPath?.clipPath) nested = true;
+	});
+	return nested;
+}
+/** True when the object's own clip path is inverted (and simple). */
+function ownClipPathIsInverted(object) {
+	const clipPath = object.clipPath;
+	return Boolean(clipPath?.inverted) && !clipPath?.clipPath;
+}
+const FAR = 1e6;
+/**
+* Turns the object's own `<clipPath>` in Fabric's markup into an inverting
+* `<mask>`. `write` produces the markup with the clip path not inverted; the
+* id Fabric gave the clip path picks out exactly this object's definition.
+*/
+function writeWithInvertedMask(object, write, reviver) {
+	const clipPath = object.clipPath;
+	clipPath.inverted = false;
+	let markup;
+	try {
+		markup = write(reviver);
+	} finally {
+		clipPath.inverted = true;
+	}
+	const id = clipPath.clipPathId;
+	if (!id) return markup;
+	const definition = new RegExp(`<clipPath id="${id}"\\s*>([\\s\\S]*?)</clipPath>`);
+	return markup.replace(definition, (_, shape) => `<mask id="${id}" maskUnits="userSpaceOnUse" x="-1000000" y="-1000000" width="${2 * FAR}" height="${2 * FAR}">\n<rect x="-1000000" y="-1000000" width="${2 * FAR}" height="${2 * FAR}" fill="white" />\n<g fill="black" stroke="none">${shape}</g>\n</mask>`).replace(`clip-path="url(#${id})"`, `mask="url(#${id})"`);
+}
+//#endregion
+exports.hasNestedClipPath = hasNestedClipPath;
+exports.ownClipPathIsInverted = ownClipPathIsInverted;
+exports.writeWithInvertedMask = writeWithInvertedMask;

package/dist/export/svg/clip-masks.js

@@ -0,0 +1,37 @@
+import { walkObjects } from "../../fabric/walk-objects.js";
+//#region src/export/svg/clip-masks.ts
+/** True when a clip path anywhere in the object's tree has a clip path of its own. */
+function hasNestedClipPath(object) {
+	let nested = false;
+	walkObjects([object], (child) => {
+		if (child.clipPath?.clipPath) nested = true;
+	});
+	return nested;
+}
+/** True when the object's own clip path is inverted (and simple). */
+function ownClipPathIsInverted(object) {
+	const clipPath = object.clipPath;
+	return Boolean(clipPath?.inverted) && !clipPath?.clipPath;
+}
+const FAR = 1e6;
+/**
+* Turns the object's own `<clipPath>` in Fabric's markup into an inverting
+* `<mask>`. `write` produces the markup with the clip path not inverted; the
+* id Fabric gave the clip path picks out exactly this object's definition.
+*/
+function writeWithInvertedMask(object, write, reviver) {
+	const clipPath = object.clipPath;
+	clipPath.inverted = false;
+	let markup;
+	try {
+		markup = write(reviver);
+	} finally {
+		clipPath.inverted = true;
+	}
+	const id = clipPath.clipPathId;
+	if (!id) return markup;
+	const definition = new RegExp(`<clipPath id="${id}"\\s*>([\\s\\S]*?)</clipPath>`);
+	return markup.replace(definition, (_, shape) => `<mask id="${id}" maskUnits="userSpaceOnUse" x="-1000000" y="-1000000" width="${2 * FAR}" height="${2 * FAR}">\n<rect x="-1000000" y="-1000000" width="${2 * FAR}" height="${2 * FAR}" fill="white" />\n<g fill="black" stroke="none">${shape}</g>\n</mask>`).replace(`clip-path="url(#${id})"`, `mask="url(#${id})"`);
+}
+//#endregion
+export { hasNestedClipPath, ownClipPathIsInverted, writeWithInvertedMask };

package/dist/export/svg/embed-assets.cjs

@@ -77,6 +77,7 @@ function imagesOnCanvas(canvas) {
 	return images;
 }
 function drawToDataUrl(element) {
+	if (element.naturalWidth * element.naturalHeight > 67108864) throw new Error("the picture is too large to copy");
 	const canvas = document.createElement("canvas");
 	canvas.width = element.naturalWidth;
 	canvas.height = element.naturalHeight;

package/dist/export/svg/embed-assets.js

@@ -77,6 +77,7 @@ function imagesOnCanvas(canvas) {
 	return images;
 }
 function drawToDataUrl(element) {
+	if (element.naturalWidth * element.naturalHeight > 67108864) throw new Error("the picture is too large to copy");
 	const canvas = document.createElement("canvas");
 	canvas.width = element.naturalWidth;
 	canvas.height = element.naturalHeight;