fabricjs-document-engine 1.1.0 → 1.2.0

package/dist/history/create-history.cjs

@@ -1,6 +1,6 @@
+const require_snapshot = require("./snapshot.cjs");
 const require_apply_state = require("./apply-state.cjs");
 const require_history_stack = require("./history-stack.cjs");
-const require_snapshot = require("./snapshot.cjs");
 //#region src/history/create-history.ts
 const verbsByAction = {
 	drag: "Move",
@@ -24,18 +24,23 @@ function describePendingChanges(changes) {
 	return changes.length === 1 ? `${verb} ${changes[0].noun}` : `${verb} ${changes.length} objects`;
 }
 function createHistory(options) {
-	const { canvas, serializeObjects, onChange, onContentChange } = options;
+	const { canvas, serializeState, onChange, onContentChange, onLiveChange } = options;
+	const takeSnapshot = () => {
+		const { objects, page } = serializeState();
+		return require_snapshot.createSnapshot(objects, page);
+	};
 	const stack = require_history_stack.createHistoryStack({
 		steps: Math.max(1, options.limit ?? 100),
 		bytes: Math.max(0, options.maxBytes ?? 67108864)
 	});
-	let snapshot = require_snapshot.createSnapshot(serializeObjects());
+	let snapshot = takeSnapshot();
 	let pendingChanges = [];
 	let flushScheduled = false;
 	let transactionDepth = 0;
 	let pausedDepth = 0;
 	let applying = false;
 	let queue = Promise.resolve();
+	let epoch = 0;
 	function state() {
 		const undoLabels = stack.undoLabels();
 		const redoLabels = stack.redoLabels();
@@ -48,7 +53,7 @@ function createHistory(options) {
 	}
 	function commit(label) {
 		pendingChanges = [];
-		const nextSnapshot = require_snapshot.createSnapshot(serializeObjects());
+		const nextSnapshot = takeSnapshot();
 		const difference = require_snapshot.diffSnapshots(snapshot, nextSnapshot);
 		snapshot = nextSnapshot;
 		if (difference === null) return false;
@@ -86,26 +91,56 @@ function createHistory(options) {
 		notice(verbsByAction[action] ?? "Transform", event.target);
 	};
 	const handleTextEdited = ({ target }) => notice("Edit", target);
+	const handleTextChanged = () => {
+		if (!applying && pausedDepth === 0) onLiveChange?.();
+	};
 	const listeners = [
 		["object:added", handleAdded],
 		["object:removed", handleRemoved],
 		["object:modified", handleModified],
-		["text:editing:exited", handleTextEdited]
+		["text:editing:exited", handleTextEdited],
+		["text:changed", handleTextChanged]
 	];
 	const eventTarget = canvas;
 	listeners.forEach(([name, handler]) => eventTarget.on(name, handler));
-	function transaction(label, work) {
+	/**
+	* Puts the canvas back to the last recorded snapshot. The snapshot is the
+	* state before the transaction, so the difference to undo is exactly what
+	* the transaction changed: one serialization, then only the changed
+	* objects are rebuilt.
+	*/
+	function rollBack() {
+		const difference = require_snapshot.diffSnapshots(snapshot, takeSnapshot());
+		pendingChanges = [];
+		if (difference === null) return Promise.resolve();
+		applying = true;
+		return runInOrder(async () => {
+			try {
+				await require_apply_state.applyStateChange(canvas, difference.before);
+			} finally {
+				applying = false;
+			}
+		});
+	}
+	function transaction(label, work, transactionOptions = {}) {
 		if (transactionDepth === 0) commitPendingChanges();
+		const outermost = transactionDepth === 0;
 		transactionDepth += 1;
 		const finish = () => {
 			transactionDepth -= 1;
 			if (transactionDepth === 0) commit(label);
 		};
+		const fail = () => {
+			transactionDepth -= 1;
+			if (transactionDepth > 0) return void 0;
+			if (outermost && transactionOptions.rollback) return rollBack();
+			commit(label);
+		};
 		let result;
 		try {
 			result = work();
 		} catch (error) {
-			finish();
+			fail()?.catch(() => void 0);
 			throw error;
 		}
 		if (!isPromiseLike(result)) {
@@ -115,8 +150,8 @@ function createHistory(options) {
 		return Promise.resolve(result).then((value) => {
 			finish();
 			return value;
-		}, (error) => {
-			finish();
+		}, async (error) => {
+			await fail();
 			throw error;
 		});
 	}
@@ -148,16 +183,19 @@ function createHistory(options) {
 			commitPendingChanges();
 			const step = takeStep();
 			if (step === void 0) return false;
+			const startedIn = epoch;
 			applying = true;
+			let applied;
 			try {
-				await require_apply_state.applyStateChange(canvas, pickChange(step));
+				applied = await require_apply_state.applyStateChange(canvas, pickChange(step), () => epoch !== startedIn);
 			} catch (error) {
-				putBack(step);
+				if (epoch === startedIn) putBack(step);
 				throw error;
 			} finally {
 				applying = false;
 			}
-			snapshot = require_snapshot.createSnapshot(serializeObjects());
+			if (!applied) return false;
+			snapshot = takeSnapshot();
 			moveTo(step);
 			onContentChange();
 			onChange(state());
@@ -170,6 +208,7 @@ function createHistory(options) {
 			return commit(label);
 		},
 		transaction,
+		settled: () => queue.then(() => void 0),
 		undo: () => travel(() => stack.takeUndo(), (step) => step.before, (step) => stack.returnUndo(step), (step) => stack.returnRedo(step)),
 		redo: () => travel(() => stack.takeRedo(), (step) => step.after, (step) => stack.returnRedo(step), (step) => stack.returnUndo(step)),
 		state,
@@ -182,7 +221,8 @@ function createHistory(options) {
 		reset() {
 			pendingChanges = [];
 			stack.clear();
-			snapshot = require_snapshot.createSnapshot(serializeObjects());
+			epoch += 1;
+			snapshot = takeSnapshot();
 			onChange(state());
 		},
 		destroy() {

package/dist/history/create-history.d.cts

@@ -10,4 +10,12 @@ export interface HistoryState {
   undoLabel: string | undefined;
   redoLabel: string | undefined;
 }
+export interface TransactionOptions {
+  /**
+   * When `work` throws or rejects, put the canvas back as it was before the
+   * transaction, record no undo step and leave the document's unsaved state
+   * alone. Applies to the outermost transaction.
+   */
+  rollback?: boolean;
+}
 //#endregion

package/dist/history/create-history.d.ts

@@ -10,4 +10,12 @@ export interface HistoryState {
   undoLabel: string | undefined;
   redoLabel: string | undefined;
 }
+export interface TransactionOptions {
+  /**
+   * When `work` throws or rejects, put the canvas back as it was before the
+   * transaction, record no undo step and leave the document's unsaved state
+   * alone. Applies to the outermost transaction.
+   */
+  rollback?: boolean;
+}
 //#endregion

package/dist/history/create-history.js

@@ -1,6 +1,6 @@
+import { createSnapshot, diffSnapshots } from "./snapshot.js";
 import { applyStateChange } from "./apply-state.js";
 import { createHistoryStack } from "./history-stack.js";
-import { createSnapshot, diffSnapshots } from "./snapshot.js";
 //#region src/history/create-history.ts
 const verbsByAction = {
 	drag: "Move",
@@ -24,18 +24,23 @@ function describePendingChanges(changes) {
 	return changes.length === 1 ? `${verb} ${changes[0].noun}` : `${verb} ${changes.length} objects`;
 }
 function createHistory(options) {
-	const { canvas, serializeObjects, onChange, onContentChange } = options;
+	const { canvas, serializeState, onChange, onContentChange, onLiveChange } = options;
+	const takeSnapshot = () => {
+		const { objects, page } = serializeState();
+		return createSnapshot(objects, page);
+	};
 	const stack = createHistoryStack({
 		steps: Math.max(1, options.limit ?? 100),
 		bytes: Math.max(0, options.maxBytes ?? 67108864)
 	});
-	let snapshot = createSnapshot(serializeObjects());
+	let snapshot = takeSnapshot();
 	let pendingChanges = [];
 	let flushScheduled = false;
 	let transactionDepth = 0;
 	let pausedDepth = 0;
 	let applying = false;
 	let queue = Promise.resolve();
+	let epoch = 0;
 	function state() {
 		const undoLabels = stack.undoLabels();
 		const redoLabels = stack.redoLabels();
@@ -48,7 +53,7 @@ function createHistory(options) {
 	}
 	function commit(label) {
 		pendingChanges = [];
-		const nextSnapshot = createSnapshot(serializeObjects());
+		const nextSnapshot = takeSnapshot();
 		const difference = diffSnapshots(snapshot, nextSnapshot);
 		snapshot = nextSnapshot;
 		if (difference === null) return false;
@@ -86,26 +91,56 @@ function createHistory(options) {
 		notice(verbsByAction[action] ?? "Transform", event.target);
 	};
 	const handleTextEdited = ({ target }) => notice("Edit", target);
+	const handleTextChanged = () => {
+		if (!applying && pausedDepth === 0) onLiveChange?.();
+	};
 	const listeners = [
 		["object:added", handleAdded],
 		["object:removed", handleRemoved],
 		["object:modified", handleModified],
-		["text:editing:exited", handleTextEdited]
+		["text:editing:exited", handleTextEdited],
+		["text:changed", handleTextChanged]
 	];
 	const eventTarget = canvas;
 	listeners.forEach(([name, handler]) => eventTarget.on(name, handler));
-	function transaction(label, work) {
+	/**
+	* Puts the canvas back to the last recorded snapshot. The snapshot is the
+	* state before the transaction, so the difference to undo is exactly what
+	* the transaction changed: one serialization, then only the changed
+	* objects are rebuilt.
+	*/
+	function rollBack() {
+		const difference = diffSnapshots(snapshot, takeSnapshot());
+		pendingChanges = [];
+		if (difference === null) return Promise.resolve();
+		applying = true;
+		return runInOrder(async () => {
+			try {
+				await applyStateChange(canvas, difference.before);
+			} finally {
+				applying = false;
+			}
+		});
+	}
+	function transaction(label, work, transactionOptions = {}) {
 		if (transactionDepth === 0) commitPendingChanges();
+		const outermost = transactionDepth === 0;
 		transactionDepth += 1;
 		const finish = () => {
 			transactionDepth -= 1;
 			if (transactionDepth === 0) commit(label);
 		};
+		const fail = () => {
+			transactionDepth -= 1;
+			if (transactionDepth > 0) return void 0;
+			if (outermost && transactionOptions.rollback) return rollBack();
+			commit(label);
+		};
 		let result;
 		try {
 			result = work();
 		} catch (error) {
-			finish();
+			fail()?.catch(() => void 0);
 			throw error;
 		}
 		if (!isPromiseLike(result)) {
@@ -115,8 +150,8 @@ function createHistory(options) {
 		return Promise.resolve(result).then((value) => {
 			finish();
 			return value;
-		}, (error) => {
-			finish();
+		}, async (error) => {
+			await fail();
 			throw error;
 		});
 	}
@@ -148,16 +183,19 @@ function createHistory(options) {
 			commitPendingChanges();
 			const step = takeStep();
 			if (step === void 0) return false;
+			const startedIn = epoch;
 			applying = true;
+			let applied;
 			try {
-				await applyStateChange(canvas, pickChange(step));
+				applied = await applyStateChange(canvas, pickChange(step), () => epoch !== startedIn);
 			} catch (error) {
-				putBack(step);
+				if (epoch === startedIn) putBack(step);
 				throw error;
 			} finally {
 				applying = false;
 			}
-			snapshot = createSnapshot(serializeObjects());
+			if (!applied) return false;
+			snapshot = takeSnapshot();
 			moveTo(step);
 			onContentChange();
 			onChange(state());
@@ -170,6 +208,7 @@ function createHistory(options) {
 			return commit(label);
 		},
 		transaction,
+		settled: () => queue.then(() => void 0),
 		undo: () => travel(() => stack.takeUndo(), (step) => step.before, (step) => stack.returnUndo(step), (step) => stack.returnRedo(step)),
 		redo: () => travel(() => stack.takeRedo(), (step) => step.after, (step) => stack.returnRedo(step), (step) => stack.returnUndo(step)),
 		state,
@@ -182,7 +221,8 @@ function createHistory(options) {
 		reset() {
 			pendingChanges = [];
 			stack.clear();
-			snapshot = createSnapshot(serializeObjects());
+			epoch += 1;
+			snapshot = takeSnapshot();
 			onChange(state());
 		},
 		destroy() {

package/dist/history/snapshot.cjs

@@ -1,7 +1,15 @@
 //#region src/history/snapshot.ts
-function createSnapshot(objects) {
+/**
+* The page itself (size, background, overlay, mask) is one more entry in the
+* same map under this reserved key. It never appears in `order`, so the
+* diff stays proportional to what changed and object ordering is unaffected.
+* Object ids come from `createId`, which never produces this value.
+*/
+const PAGE_KEY = "__page__";
+function createSnapshot(objects, page) {
 	const objectsById = /* @__PURE__ */ new Map();
 	const order = [];
+	if (page !== void 0) objectsById.set(PAGE_KEY, JSON.stringify(page));
 	for (const object of objects) {
 		const id = object.id ?? "";
 		objectsById.set(id, JSON.stringify(object));
@@ -43,5 +51,6 @@ function diffSnapshots(previous, next) {
 	};
 }
 //#endregion
+exports.PAGE_KEY = PAGE_KEY;
 exports.createSnapshot = createSnapshot;
 exports.diffSnapshots = diffSnapshots;

package/dist/history/snapshot.js

@@ -1,7 +1,15 @@
 //#region src/history/snapshot.ts
-function createSnapshot(objects) {
+/**
+* The page itself (size, background, overlay, mask) is one more entry in the
+* same map under this reserved key. It never appears in `order`, so the
+* diff stays proportional to what changed and object ordering is unaffected.
+* Object ids come from `createId`, which never produces this value.
+*/
+const PAGE_KEY = "__page__";
+function createSnapshot(objects, page) {
 	const objectsById = /* @__PURE__ */ new Map();
 	const order = [];
+	if (page !== void 0) objectsById.set(PAGE_KEY, JSON.stringify(page));
 	for (const object of objects) {
 		const id = object.id ?? "";
 		objectsById.set(id, JSON.stringify(object));
@@ -43,4 +51,4 @@ function diffSnapshots(previous, next) {
 	};
 }
 //#endregion
-export { createSnapshot, diffSnapshots };
+export { PAGE_KEY, createSnapshot, diffSnapshots };

package/dist/index.d.cts

@@ -9,7 +9,7 @@ import { ContentLimits, isSafeImageUrl, refuseUnsafeImageUrls, secureDocument }
 import { SvgImportOptions, SvgImportResult, SvgImportWarning, SvgImportWarningCode } from "./import/svg-import.cjs";
 import { NewDocumentOptions } from "./document/create-document.cjs";
 import { CustomObjectDefinition } from "./fabric/object-registry.cjs";
-import { HistoryOptions, HistoryState } from "./history/create-history.cjs";
+import { HistoryOptions, HistoryState, TransactionOptions } from "./history/create-history.cjs";
 import { DocumentVersion, VersionKind, VersionOptions, VersionStorage, VersionSummary } from "./versions/document-version.cjs";
 import { RecoveryStore } from "./recovery/recovery-store.cjs";
 import { InterruptedLoad, RecoveryOptions, RecoveryRecord } from "./recovery/recovery-controller.cjs";
@@ -19,7 +19,7 @@ import { DocumentEngineError, DocumentEngineErrorDetails, DocumentErrorCode, Doc
 import { DocumentStorage, SaveContext, SaveResult } from "./storage/storage-contract.cjs";
 import { SaveOptions, SaveRetryEvent, SaveState, SaveStatus } from "./save/save-controller.cjs";
 import { Unsubscribe } from "./engine/event-emitter.cjs";
-import { DocumentEngine, DocumentEngineEvents, DocumentEngineOptions, ExportResult, ImportOptions, LoadOptions, LoadProgress, LoadStage, NewDocumentRequest, createDocumentEngine } from "./engine/create-document-engine.cjs";
+import { DocumentEngine, DocumentEngineEvents, DocumentEngineOptions, ExportResult, ImportOptions, LoadOptions, LoadProgress, LoadStage, NewDocumentRequest, PageChanges, RestoreRecoveryOptions, createDocumentEngine } from "./engine/create-document-engine.cjs";
 import { validateDocument } from "./document/validate-document.cjs";
 import { KeyboardShortcutOptions, UndoRedoTarget, bindKeyboardShortcuts } from "./history/keyboard-shortcuts.cjs";
 import { UnsavedChangesSource, bindUnsavedChangesWarning } from "./save/unsaved-changes-warning.cjs";
@@ -29,4 +29,4 @@ import { Migration, MigrationContext, MigrationResult, detectSchemaVersion, migr
 import { DocumentState, DocumentStateStore, createDocumentStateStore } from "./state/document-state-store.cjs";
 import { CLIPBOARD_FORMAT, Clipboard, ClipboardContent, ClipboardOptions, PasteOptions, createClipboard } from "./commands/clipboard.cjs";
 import { LayerInfo, LayerOptions, LayerPin, bringForward, bringToFront, getLayers, moveToIndex, sendBackward, sendToBack } from "./commands/layers.cjs";
-export { type AssetManifest, type AssetOptions, type AssetReport, type AssetWarning, type AssetWarningCode, type AutosaveOptions, CLIPBOARD_FORMAT, CURRENT_SCHEMA_VERSION, type Clipboard, type ClipboardContent, type ClipboardOptions, type ContentLimits, type CustomObjectDefinition, type DocumentCanvas, type DocumentEngine, DocumentEngineError, type DocumentEngineErrorDetails, type DocumentEngineEvents, type DocumentEngineOptions, type DocumentErrorCode, type DocumentInfo, type DocumentIssue, type DocumentState, type DocumentStateStore, type DocumentStorage, type DocumentVersion, type DownloadableExport, type ExportArea, type ExportBackground, type ExportFormat, type ExportOptions, type ExportPreflight, type ExportProblem, type ExportProblemCode, type ExportRect, type ExportResult, type FabricDocument, type FontAsset, type FontLoader, type FontSource, type HistoryOptions, type HistoryState, type ImageAsset, type ImageFailureReason, type ImageLoadFailure, type ImportOptions, type InterruptedLoad, type KeyboardShortcutOptions, type LayerInfo, type LayerOptions, type LayerPin, type LoadOptions, type LoadProgress, type LoadStage, type Migration, type MigrationContext, type MigrationResult, type NewDocumentOptions, type NewDocumentRequest, type PasteOptions, type RecoveryOptions, type RecoveryRecord, type RecoveryStore, type RenderDocumentsOptions, type RenderedDocument, type RetryOptions, type SaveContext, type SaveOptions, type SaveResult, type SaveRetryEvent, type SaveState, type SaveStatus, type SerializedFabricObject, type SvgExportOptions, type SvgImportOptions, type SvgImportResult, type SvgImportWarning, type SvgImportWarningCode, type UndoRedoTarget, type UnsavedChangesSource, type Unsubscribe, type UploadRequest, type VersionKind, type VersionOptions, type VersionStorage, type VersionSummary, bindKeyboardShortcuts, bindUnsavedChangesWarning, bringForward, bringToFront, createClipboard, createConflictError, createDocumentEngine, createDocumentStateStore, detectSchemaVersion, downloadExport, getLayers, isDocumentEngineError, isSafeImageUrl, migrateDocument, moveToIndex, refuseUnsafeImageUrls, renderDocuments, secureDocument, sendBackward, sendToBack, validateDocument };
+export { type AssetManifest, type AssetOptions, type AssetReport, type AssetWarning, type AssetWarningCode, type AutosaveOptions, CLIPBOARD_FORMAT, CURRENT_SCHEMA_VERSION, type Clipboard, type ClipboardContent, type ClipboardOptions, type ContentLimits, type CustomObjectDefinition, type DocumentCanvas, type DocumentEngine, DocumentEngineError, type DocumentEngineErrorDetails, type DocumentEngineEvents, type DocumentEngineOptions, type DocumentErrorCode, type DocumentInfo, type DocumentIssue, type DocumentState, type DocumentStateStore, type DocumentStorage, type DocumentVersion, type DownloadableExport, type ExportArea, type ExportBackground, type ExportFormat, type ExportOptions, type ExportPreflight, type ExportProblem, type ExportProblemCode, type ExportRect, type ExportResult, type FabricDocument, type FontAsset, type FontLoader, type FontSource, type HistoryOptions, type HistoryState, type ImageAsset, type ImageFailureReason, type ImageLoadFailure, type ImportOptions, type InterruptedLoad, type KeyboardShortcutOptions, type LayerInfo, type LayerOptions, type LayerPin, type LoadOptions, type LoadProgress, type LoadStage, type Migration, type MigrationContext, type MigrationResult, type NewDocumentOptions, type NewDocumentRequest, type PageChanges, type PasteOptions, type RecoveryOptions, type RecoveryRecord, type RecoveryStore, type RenderDocumentsOptions, type RenderedDocument, type RestoreRecoveryOptions, type RetryOptions, type SaveContext, type SaveOptions, type SaveResult, type SaveRetryEvent, type SaveState, type SaveStatus, type SerializedFabricObject, type SvgExportOptions, type SvgImportOptions, type SvgImportResult, type SvgImportWarning, type SvgImportWarningCode, type TransactionOptions, type UndoRedoTarget, type UnsavedChangesSource, type Unsubscribe, type UploadRequest, type VersionKind, type VersionOptions, type VersionStorage, type VersionSummary, bindKeyboardShortcuts, bindUnsavedChangesWarning, bringForward, bringToFront, createClipboard, createConflictError, createDocumentEngine, createDocumentStateStore, detectSchemaVersion, downloadExport, getLayers, isDocumentEngineError, isSafeImageUrl, migrateDocument, moveToIndex, refuseUnsafeImageUrls, renderDocuments, secureDocument, sendBackward, sendToBack, validateDocument };

package/dist/index.d.ts

@@ -9,7 +9,7 @@ import { ContentLimits, isSafeImageUrl, refuseUnsafeImageUrls, secureDocument }
 import { SvgImportOptions, SvgImportResult, SvgImportWarning, SvgImportWarningCode } from "./import/svg-import.js";
 import { NewDocumentOptions } from "./document/create-document.js";
 import { CustomObjectDefinition } from "./fabric/object-registry.js";
-import { HistoryOptions, HistoryState } from "./history/create-history.js";
+import { HistoryOptions, HistoryState, TransactionOptions } from "./history/create-history.js";
 import { DocumentVersion, VersionKind, VersionOptions, VersionStorage, VersionSummary } from "./versions/document-version.js";
 import { RecoveryStore } from "./recovery/recovery-store.js";
 import { InterruptedLoad, RecoveryOptions, RecoveryRecord } from "./recovery/recovery-controller.js";
@@ -19,7 +19,7 @@ import { DocumentEngineError, DocumentEngineErrorDetails, DocumentErrorCode, Doc
 import { DocumentStorage, SaveContext, SaveResult } from "./storage/storage-contract.js";
 import { SaveOptions, SaveRetryEvent, SaveState, SaveStatus } from "./save/save-controller.js";
 import { Unsubscribe } from "./engine/event-emitter.js";
-import { DocumentEngine, DocumentEngineEvents, DocumentEngineOptions, ExportResult, ImportOptions, LoadOptions, LoadProgress, LoadStage, NewDocumentRequest, createDocumentEngine } from "./engine/create-document-engine.js";
+import { DocumentEngine, DocumentEngineEvents, DocumentEngineOptions, ExportResult, ImportOptions, LoadOptions, LoadProgress, LoadStage, NewDocumentRequest, PageChanges, RestoreRecoveryOptions, createDocumentEngine } from "./engine/create-document-engine.js";
 import { validateDocument } from "./document/validate-document.js";
 import { KeyboardShortcutOptions, UndoRedoTarget, bindKeyboardShortcuts } from "./history/keyboard-shortcuts.js";
 import { UnsavedChangesSource, bindUnsavedChangesWarning } from "./save/unsaved-changes-warning.js";
@@ -29,4 +29,4 @@ import { Migration, MigrationContext, MigrationResult, detectSchemaVersion, migr
 import { DocumentState, DocumentStateStore, createDocumentStateStore } from "./state/document-state-store.js";
 import { CLIPBOARD_FORMAT, Clipboard, ClipboardContent, ClipboardOptions, PasteOptions, createClipboard } from "./commands/clipboard.js";
 import { LayerInfo, LayerOptions, LayerPin, bringForward, bringToFront, getLayers, moveToIndex, sendBackward, sendToBack } from "./commands/layers.js";
-export { type AssetManifest, type AssetOptions, type AssetReport, type AssetWarning, type AssetWarningCode, type AutosaveOptions, CLIPBOARD_FORMAT, CURRENT_SCHEMA_VERSION, type Clipboard, type ClipboardContent, type ClipboardOptions, type ContentLimits, type CustomObjectDefinition, type DocumentCanvas, type DocumentEngine, DocumentEngineError, type DocumentEngineErrorDetails, type DocumentEngineEvents, type DocumentEngineOptions, type DocumentErrorCode, type DocumentInfo, type DocumentIssue, type DocumentState, type DocumentStateStore, type DocumentStorage, type DocumentVersion, type DownloadableExport, type ExportArea, type ExportBackground, type ExportFormat, type ExportOptions, type ExportPreflight, type ExportProblem, type ExportProblemCode, type ExportRect, type ExportResult, type FabricDocument, type FontAsset, type FontLoader, type FontSource, type HistoryOptions, type HistoryState, type ImageAsset, type ImageFailureReason, type ImageLoadFailure, type ImportOptions, type InterruptedLoad, type KeyboardShortcutOptions, type LayerInfo, type LayerOptions, type LayerPin, type LoadOptions, type LoadProgress, type LoadStage, type Migration, type MigrationContext, type MigrationResult, type NewDocumentOptions, type NewDocumentRequest, type PasteOptions, type RecoveryOptions, type RecoveryRecord, type RecoveryStore, type RenderDocumentsOptions, type RenderedDocument, type RetryOptions, type SaveContext, type SaveOptions, type SaveResult, type SaveRetryEvent, type SaveState, type SaveStatus, type SerializedFabricObject, type SvgExportOptions, type SvgImportOptions, type SvgImportResult, type SvgImportWarning, type SvgImportWarningCode, type UndoRedoTarget, type UnsavedChangesSource, type Unsubscribe, type UploadRequest, type VersionKind, type VersionOptions, type VersionStorage, type VersionSummary, bindKeyboardShortcuts, bindUnsavedChangesWarning, bringForward, bringToFront, createClipboard, createConflictError, createDocumentEngine, createDocumentStateStore, detectSchemaVersion, downloadExport, getLayers, isDocumentEngineError, isSafeImageUrl, migrateDocument, moveToIndex, refuseUnsafeImageUrls, renderDocuments, secureDocument, sendBackward, sendToBack, validateDocument };
+export { type AssetManifest, type AssetOptions, type AssetReport, type AssetWarning, type AssetWarningCode, type AutosaveOptions, CLIPBOARD_FORMAT, CURRENT_SCHEMA_VERSION, type Clipboard, type ClipboardContent, type ClipboardOptions, type ContentLimits, type CustomObjectDefinition, type DocumentCanvas, type DocumentEngine, DocumentEngineError, type DocumentEngineErrorDetails, type DocumentEngineEvents, type DocumentEngineOptions, type DocumentErrorCode, type DocumentInfo, type DocumentIssue, type DocumentState, type DocumentStateStore, type DocumentStorage, type DocumentVersion, type DownloadableExport, type ExportArea, type ExportBackground, type ExportFormat, type ExportOptions, type ExportPreflight, type ExportProblem, type ExportProblemCode, type ExportRect, type ExportResult, type FabricDocument, type FontAsset, type FontLoader, type FontSource, type HistoryOptions, type HistoryState, type ImageAsset, type ImageFailureReason, type ImageLoadFailure, type ImportOptions, type InterruptedLoad, type KeyboardShortcutOptions, type LayerInfo, type LayerOptions, type LayerPin, type LoadOptions, type LoadProgress, type LoadStage, type Migration, type MigrationContext, type MigrationResult, type NewDocumentOptions, type NewDocumentRequest, type PageChanges, type PasteOptions, type RecoveryOptions, type RecoveryRecord, type RecoveryStore, type RenderDocumentsOptions, type RenderedDocument, type RestoreRecoveryOptions, type RetryOptions, type SaveContext, type SaveOptions, type SaveResult, type SaveRetryEvent, type SaveState, type SaveStatus, type SerializedFabricObject, type SvgExportOptions, type SvgImportOptions, type SvgImportResult, type SvgImportWarning, type SvgImportWarningCode, type TransactionOptions, type UndoRedoTarget, type UnsavedChangesSource, type Unsubscribe, type UploadRequest, type VersionKind, type VersionOptions, type VersionStorage, type VersionSummary, bindKeyboardShortcuts, bindUnsavedChangesWarning, bringForward, bringToFront, createClipboard, createConflictError, createDocumentEngine, createDocumentStateStore, detectSchemaVersion, downloadExport, getLayers, isDocumentEngineError, isSafeImageUrl, migrateDocument, moveToIndex, refuseUnsafeImageUrls, renderDocuments, secureDocument, sendBackward, sendToBack, validateDocument };

package/dist/migrations/migrate-document.cjs

@@ -1,3 +1,4 @@
+const require_page_state = require("../fabric/page-state.cjs");
 const require_errors = require("../engine/errors.cjs");
 require("../document/document-format.cjs");
 const require_ids = require("../document/ids.cjs");
@@ -19,7 +20,7 @@ function fromFabricJson(json, context) {
 		canvas: {
 			width: positiveNumberOr(json.width, context.canvasWidth),
 			height: positiveNumberOr(json.height, context.canvasHeight),
-			...json.background === void 0 ? {} : { background: json.background }
+			...require_page_state.pickPageFields(json)
 		},
 		objects: json.objects,
 		metadata: { ...context.metadata }

package/dist/migrations/migrate-document.js

@@ -1,3 +1,4 @@
+import { pickPageFields } from "../fabric/page-state.js";
 import { DocumentEngineError } from "../engine/errors.js";
 import "../document/document-format.js";
 import { createId } from "../document/ids.js";
@@ -19,7 +20,7 @@ function fromFabricJson(json, context) {
 		canvas: {
 			width: positiveNumberOr(json.width, context.canvasWidth),
 			height: positiveNumberOr(json.height, context.canvasHeight),
-			...json.background === void 0 ? {} : { background: json.background }
+			...pickPageFields(json)
 		},
 		objects: json.objects,
 		metadata: { ...context.metadata }

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: {}