fabricjs-document-engine 1.1.0 → 1.3.0

package/dist/filters/pipeline.d.cts

@@ -0,0 +1,35 @@
+//#region src/filters/pipeline.d.ts
+export declare const PIXEL_FILTERS: ReadonlySet<string>;
+export declare const WORKER_FILTERS: ReadonlySet<string>;
+export interface PipelineFilter {
+  type: string;
+  applyTo2d(state: PipelineState): void;
+  isNeutralState?(): boolean;
+  subFilters?: PipelineFilter[];
+}
+export interface PipelineState {
+  sourceWidth: number;
+  sourceHeight: number;
+  imageData: ImageData;
+  originalImageData: ImageData;
+  originalEl: unknown;
+  canvasEl: unknown;
+  ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
+  filterBackend: unknown;
+}
+export interface PipelineOptions {
+  bandRows?: number;
+  onProgress?: (done: number) => void;
+  isCancelled?: () => boolean;
+  pause?: () => Promise<void>;
+}
+export declare function flattenFilters<Filter extends {
+  type?: unknown;
+  subFilters?: Filter[];
+}>(filters: readonly Filter[]): Filter[];
+export declare function canRunInWorker(filters: ReadonlyArray<{
+  type?: unknown;
+  subFilters?: unknown[];
+}>): boolean;
+export declare function runFilterPipeline(filters: readonly PipelineFilter[], state: PipelineState, options?: PipelineOptions): Promise<ImageData | undefined>;
+//#endregion

package/dist/filters/pipeline.d.ts

@@ -0,0 +1,35 @@
+//#region src/filters/pipeline.d.ts
+export declare const PIXEL_FILTERS: ReadonlySet<string>;
+export declare const WORKER_FILTERS: ReadonlySet<string>;
+export interface PipelineFilter {
+  type: string;
+  applyTo2d(state: PipelineState): void;
+  isNeutralState?(): boolean;
+  subFilters?: PipelineFilter[];
+}
+export interface PipelineState {
+  sourceWidth: number;
+  sourceHeight: number;
+  imageData: ImageData;
+  originalImageData: ImageData;
+  originalEl: unknown;
+  canvasEl: unknown;
+  ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
+  filterBackend: unknown;
+}
+export interface PipelineOptions {
+  bandRows?: number;
+  onProgress?: (done: number) => void;
+  isCancelled?: () => boolean;
+  pause?: () => Promise<void>;
+}
+export declare function flattenFilters<Filter extends {
+  type?: unknown;
+  subFilters?: Filter[];
+}>(filters: readonly Filter[]): Filter[];
+export declare function canRunInWorker(filters: ReadonlyArray<{
+  type?: unknown;
+  subFilters?: unknown[];
+}>): boolean;
+export declare function runFilterPipeline(filters: readonly PipelineFilter[], state: PipelineState, options?: PipelineOptions): Promise<ImageData | undefined>;
+//#endregion

package/dist/filters/pipeline.js

@@ -0,0 +1,87 @@
+//#region src/filters/pipeline.ts
+const PIXEL_FILTERS = /* @__PURE__ */ new Set([
+	"Brightness",
+	"Contrast",
+	"Saturation",
+	"Vibrance",
+	"Grayscale",
+	"Invert",
+	"Gamma",
+	"Noise",
+	"RemoveColor",
+	"BlendColor",
+	"HueRotation",
+	"ColorMatrix",
+	"Sepia",
+	"Brownie",
+	"Vintage",
+	"Kodachrome",
+	"Technicolor",
+	"Polaroid",
+	"BlackWhite"
+]);
+const WORKER_FILTERS = /* @__PURE__ */ new Set([
+	...PIXEL_FILTERS,
+	"Blur",
+	"Convolute",
+	"Pixelate"
+]);
+function typeOf(filter) {
+	const own = filter.type ?? filter.constructor?.type;
+	return typeof own === "string" ? own : "";
+}
+function flattenFilters(filters) {
+	const flat = [];
+	const visit = (filter) => {
+		if (typeOf(filter) === "Composed") (filter.subFilters ?? []).forEach(visit);
+		else flat.push(filter);
+	};
+	filters.forEach(visit);
+	return flat;
+}
+function canRunInWorker(filters) {
+	return flattenFilters(filters).every((filter) => WORKER_FILTERS.has(typeOf(filter)));
+}
+async function runFilterPipeline(filters, state, options = {}) {
+	const steps = [];
+	for (const filter of flattenFilters(filters)) {
+		if (filter.isNeutralState?.()) continue;
+		const last = steps[steps.length - 1];
+		if (PIXEL_FILTERS.has(typeOf(filter)) && last && PIXEL_FILTERS.has(typeOf(last[0]))) last.push(filter);
+		else steps.push([filter]);
+	}
+	const bandRows = Math.max(1, Math.floor(options.bandRows ?? 64));
+	const units = steps.reduce((sum, step) => sum + (PIXEL_FILTERS.has(typeOf(step[0])) ? Math.ceil(state.imageData.height / bandRows) : 1), 0);
+	let done = 0;
+	const advance = async () => {
+		done += 1;
+		options.onProgress?.(units === 0 ? 1 : done / units);
+		if (options.isCancelled?.()) return false;
+		await options.pause?.();
+		return !options.isCancelled?.();
+	};
+	for (const step of steps) {
+		if (!PIXEL_FILTERS.has(typeOf(step[0]))) {
+			step[0].applyTo2d(state);
+			if (!await advance()) return void 0;
+			continue;
+		}
+		const whole = state.imageData;
+		const rowBytes = whole.width * 4;
+		for (let row = 0; row < whole.height; row += bandRows) {
+			const rows = Math.min(bandRows, whole.height - row);
+			const band = new ImageData(new Uint8ClampedArray(whole.data.buffer, whole.data.byteOffset + row * rowBytes, rows * rowBytes), whole.width, rows);
+			const bandState = {
+				...state,
+				imageData: band,
+				sourceHeight: rows
+			};
+			for (const filter of step) filter.applyTo2d(bandState);
+			if (!await advance()) return void 0;
+		}
+	}
+	if (units === 0) options.onProgress?.(1);
+	return state.imageData;
+}
+//#endregion
+export { PIXEL_FILTERS, WORKER_FILTERS, canRunInWorker, flattenFilters, runFilterPipeline };

package/dist/filters/worker-entry.cjs

@@ -0,0 +1,78 @@
+const require_pipeline = require("./pipeline.cjs");
+let fabric = require("fabric");
+//#region src/filters/worker-entry.ts
+const scope = self;
+const running = /* @__PURE__ */ new Set();
+const cancelled = /* @__PURE__ */ new Set();
+const channel = new MessageChannel();
+const waiting = [];
+channel.port1.onmessage = () => waiting.shift()?.();
+const pause = () => new Promise((resolve) => {
+	waiting.push(resolve);
+	channel.port2.postMessage(null);
+});
+async function apply(message) {
+	const { id, bitmap } = message;
+	running.add(id);
+	try {
+		const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
+		const ctx = canvas.getContext("2d", { willReadFrequently: true });
+		ctx.drawImage(bitmap, 0, 0);
+		bitmap.close();
+		const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+		const filters = await Promise.all(message.filters.map((json) => fabric.classRegistry.getClass(String(json.type)).fromObject(json)));
+		const result = await require_pipeline.runFilterPipeline(filters, {
+			sourceWidth: canvas.width,
+			sourceHeight: canvas.height,
+			imageData,
+			originalImageData: imageData,
+			originalEl: canvas,
+			canvasEl: canvas,
+			ctx,
+			filterBackend: void 0
+		}, {
+			bandRows: message.bandRows,
+			pause,
+			isCancelled: () => cancelled.has(id),
+			onProgress: (done) => scope.postMessage({
+				type: "progress",
+				id,
+				done
+			})
+		});
+		if (!result) {
+			scope.postMessage({
+				type: "cancelled",
+				id
+			});
+			return;
+		}
+		if (result.width !== canvas.width || result.height !== canvas.height) {
+			canvas.width = result.width;
+			canvas.height = result.height;
+		}
+		ctx.putImageData(result, 0, 0);
+		const output = canvas.transferToImageBitmap();
+		scope.postMessage({
+			type: "done",
+			id,
+			bitmap: output
+		}, [output]);
+	} catch (error) {
+		scope.postMessage({
+			type: "error",
+			id,
+			message: error instanceof Error ? error.message : String(error)
+		});
+	} finally {
+		running.delete(id);
+		cancelled.delete(id);
+	}
+}
+scope.onmessage = (event) => {
+	const message = event.data;
+	if (message.type === "cancel") {
+		if (running.has(message.id)) cancelled.add(message.id);
+	} else apply(message);
+};
+//#endregion

package/dist/filters/worker-entry.d.cts

@@ -0,0 +1,29 @@
+//#region src/filters/worker-entry.d.ts
+export interface ApplyMessage {
+  type: "apply";
+  id: number;
+  bitmap: ImageBitmap;
+  filters: Array<Record<string, unknown>>;
+  bandRows?: number;
+}
+export interface CancelMessage {
+  type: "cancel";
+  id: number;
+}
+export type WorkerReply = {
+  type: "progress";
+  id: number;
+  done: number;
+} | {
+  type: "done";
+  id: number;
+  bitmap: ImageBitmap;
+} | {
+  type: "cancelled";
+  id: number;
+} | {
+  type: "error";
+  id: number;
+  message: string;
+};
+//#endregion

package/dist/filters/worker-entry.d.ts

@@ -0,0 +1,29 @@
+//#region src/filters/worker-entry.d.ts
+export interface ApplyMessage {
+  type: "apply";
+  id: number;
+  bitmap: ImageBitmap;
+  filters: Array<Record<string, unknown>>;
+  bandRows?: number;
+}
+export interface CancelMessage {
+  type: "cancel";
+  id: number;
+}
+export type WorkerReply = {
+  type: "progress";
+  id: number;
+  done: number;
+} | {
+  type: "done";
+  id: number;
+  bitmap: ImageBitmap;
+} | {
+  type: "cancelled";
+  id: number;
+} | {
+  type: "error";
+  id: number;
+  message: string;
+};
+//#endregion

package/dist/filters/worker-entry.js

@@ -0,0 +1,78 @@
+import { runFilterPipeline } from "./pipeline.js";
+import { classRegistry } from "fabric";
+//#region src/filters/worker-entry.ts
+const scope = self;
+const running = /* @__PURE__ */ new Set();
+const cancelled = /* @__PURE__ */ new Set();
+const channel = new MessageChannel();
+const waiting = [];
+channel.port1.onmessage = () => waiting.shift()?.();
+const pause = () => new Promise((resolve) => {
+	waiting.push(resolve);
+	channel.port2.postMessage(null);
+});
+async function apply(message) {
+	const { id, bitmap } = message;
+	running.add(id);
+	try {
+		const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
+		const ctx = canvas.getContext("2d", { willReadFrequently: true });
+		ctx.drawImage(bitmap, 0, 0);
+		bitmap.close();
+		const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+		const filters = await Promise.all(message.filters.map((json) => classRegistry.getClass(String(json.type)).fromObject(json)));
+		const result = await runFilterPipeline(filters, {
+			sourceWidth: canvas.width,
+			sourceHeight: canvas.height,
+			imageData,
+			originalImageData: imageData,
+			originalEl: canvas,
+			canvasEl: canvas,
+			ctx,
+			filterBackend: void 0
+		}, {
+			bandRows: message.bandRows,
+			pause,
+			isCancelled: () => cancelled.has(id),
+			onProgress: (done) => scope.postMessage({
+				type: "progress",
+				id,
+				done
+			})
+		});
+		if (!result) {
+			scope.postMessage({
+				type: "cancelled",
+				id
+			});
+			return;
+		}
+		if (result.width !== canvas.width || result.height !== canvas.height) {
+			canvas.width = result.width;
+			canvas.height = result.height;
+		}
+		ctx.putImageData(result, 0, 0);
+		const output = canvas.transferToImageBitmap();
+		scope.postMessage({
+			type: "done",
+			id,
+			bitmap: output
+		}, [output]);
+	} catch (error) {
+		scope.postMessage({
+			type: "error",
+			id,
+			message: error instanceof Error ? error.message : String(error)
+		});
+	} finally {
+		running.delete(id);
+		cancelled.delete(id);
+	}
+}
+scope.onmessage = (event) => {
+	const message = event.data;
+	if (message.type === "cancel") {
+		if (running.has(message.id)) cancelled.add(message.id);
+	} else apply(message);
+};
+//#endregion

package/dist/filters.cjs

@@ -0,0 +1,9 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_pipeline = require("./filters/pipeline.cjs");
+const require_filter_worker = require("./filters/filter-worker.cjs");
+exports.PIXEL_FILTERS = require_pipeline.PIXEL_FILTERS;
+exports.WORKER_FILTERS = require_pipeline.WORKER_FILTERS;
+exports.canRunInWorker = require_pipeline.canRunInWorker;
+exports.createFilterWorker = require_filter_worker.createFilterWorker;
+exports.flattenFilters = require_pipeline.flattenFilters;
+exports.runFilterPipeline = require_pipeline.runFilterPipeline;

package/dist/filters.d.cts

@@ -0,0 +1,3 @@
+import { ApplyFilterOptions, FilterWorker, FilterWorkerOptions, ImageFilter, createFilterWorker } from "./filters/filter-worker.cjs";
+import { PIXEL_FILTERS, PipelineFilter, PipelineOptions, PipelineState, WORKER_FILTERS, canRunInWorker, flattenFilters, runFilterPipeline } from "./filters/pipeline.cjs";
+export { type ApplyFilterOptions, type FilterWorker, type FilterWorkerOptions, type ImageFilter, PIXEL_FILTERS, type PipelineFilter, type PipelineOptions, type PipelineState, WORKER_FILTERS, canRunInWorker, createFilterWorker, flattenFilters, runFilterPipeline };

package/dist/filters.d.ts

@@ -0,0 +1,3 @@
+import { ApplyFilterOptions, FilterWorker, FilterWorkerOptions, ImageFilter, createFilterWorker } from "./filters/filter-worker.js";
+import { PIXEL_FILTERS, PipelineFilter, PipelineOptions, PipelineState, WORKER_FILTERS, canRunInWorker, flattenFilters, runFilterPipeline } from "./filters/pipeline.js";
+export { type ApplyFilterOptions, type FilterWorker, type FilterWorkerOptions, type ImageFilter, PIXEL_FILTERS, type PipelineFilter, type PipelineOptions, type PipelineState, WORKER_FILTERS, canRunInWorker, createFilterWorker, flattenFilters, runFilterPipeline };

package/dist/filters.js

@@ -0,0 +1,3 @@
+import { PIXEL_FILTERS, WORKER_FILTERS, canRunInWorker, flattenFilters, runFilterPipeline } from "./filters/pipeline.js";
+import { createFilterWorker } from "./filters/filter-worker.js";
+export { PIXEL_FILTERS, WORKER_FILTERS, canRunInWorker, createFilterWorker, flattenFilters, runFilterPipeline };

package/dist/history/apply-state.cjs

@@ -1,5 +1,7 @@
+const require_page_state = require("../fabric/page-state.cjs");
 const require_object_ids = require("../fabric/object-ids.cjs");
 const require_fabric_adapter = require("../fabric/fabric-adapter.cjs");
+const require_snapshot = require("./snapshot.cjs");
 //#region src/history/apply-state.ts
 function arrangeObjects(current, change, created) {
 	const arranged = [];
@@ -20,10 +22,24 @@ function arrangeObjects(current, change, created) {
 	const position = new Map(change.order.map((id, index) => [id, index]));
 	return arranged.sort((first, second) => (position.get(require_object_ids.readObjectId(first) ?? "") ?? Infinity) - (position.get(require_object_ids.readObjectId(second) ?? "") ?? Infinity));
 }
-async function applyStateChange(canvas, change) {
+/**
+* Applies a change. `isStale` is checked after every wait: when it returns
+* true the canvas now shows another document, so nothing is applied and the
+* call returns false.
+*/
+async function applyStateChange(canvas, change, isStale = () => false) {
+	const page = change.objects.get(require_snapshot.PAGE_KEY);
+	if (page) {
+		if (isStale()) return false;
+		await require_page_state.applyPage(canvas, JSON.parse(page));
+	}
 	const serializedObjects = [];
-	for (const json of change.objects.values()) if (json !== null) serializedObjects.push(JSON.parse(json));
+	for (const [id, json] of change.objects) if (id !== "__page__" && json !== null) serializedObjects.push(JSON.parse(json));
 	const createdObjects = await require_fabric_adapter.createObjects(serializedObjects);
+	if (isStale()) {
+		createdObjects.forEach((object) => object.dispose?.());
+		return false;
+	}
 	const createdById = new Map(createdObjects.map((object) => [require_object_ids.readObjectId(object) ?? "", object]));
 	canvas.discardActiveObject?.();
 	const current = canvas.getObjects();
@@ -45,6 +61,7 @@ async function applyStateChange(canvas, change) {
 		canvas.renderOnAddRemove = renderOnAddRemove;
 	}
 	canvas.requestRenderAll();
+	return true;
 }
 //#endregion
 exports.applyStateChange = applyStateChange;

package/dist/history/apply-state.js

@@ -1,5 +1,7 @@
+import { applyPage } from "../fabric/page-state.js";
 import { readObjectId } from "../fabric/object-ids.js";
 import { createObjects } from "../fabric/fabric-adapter.js";
+import { PAGE_KEY } from "./snapshot.js";
 //#region src/history/apply-state.ts
 function arrangeObjects(current, change, created) {
 	const arranged = [];
@@ -20,10 +22,24 @@ function arrangeObjects(current, change, created) {
 	const position = new Map(change.order.map((id, index) => [id, index]));
 	return arranged.sort((first, second) => (position.get(readObjectId(first) ?? "") ?? Infinity) - (position.get(readObjectId(second) ?? "") ?? Infinity));
 }
-async function applyStateChange(canvas, change) {
+/**
+* Applies a change. `isStale` is checked after every wait: when it returns
+* true the canvas now shows another document, so nothing is applied and the
+* call returns false.
+*/
+async function applyStateChange(canvas, change, isStale = () => false) {
+	const page = change.objects.get(PAGE_KEY);
+	if (page) {
+		if (isStale()) return false;
+		await applyPage(canvas, JSON.parse(page));
+	}
 	const serializedObjects = [];
-	for (const json of change.objects.values()) if (json !== null) serializedObjects.push(JSON.parse(json));
+	for (const [id, json] of change.objects) if (id !== "__page__" && json !== null) serializedObjects.push(JSON.parse(json));
 	const createdObjects = await createObjects(serializedObjects);
+	if (isStale()) {
+		createdObjects.forEach((object) => object.dispose?.());
+		return false;
+	}
 	const createdById = new Map(createdObjects.map((object) => [readObjectId(object) ?? "", object]));
 	canvas.discardActiveObject?.();
 	const current = canvas.getObjects();
@@ -45,6 +61,7 @@ async function applyStateChange(canvas, change) {
 		canvas.renderOnAddRemove = renderOnAddRemove;
 	}
 	canvas.requestRenderAll();
+	return true;
 }
 //#endregion
 export { applyStateChange };

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