fabricjs-document-engine 1.2.0 → 1.3.0

package/dist/filters/filter-worker.cjs

@@ -0,0 +1,281 @@
+const require_concurrency = require("../util/concurrency.cjs");
+const require_pipeline = require("./pipeline.cjs");
+let fabric = require("fabric");
+//#region src/filters/filter-worker.ts
+function sizeOf(element) {
+	return {
+		width: element.naturalWidth || element.width,
+		height: element.naturalHeight || element.height
+	};
+}
+function abortReason(signal) {
+	return signal.reason ?? new DOMException("The filter run was aborted", "AbortError");
+}
+function createFilterWorker(options = {}) {
+	const engine = options.engine;
+	const latest = /* @__PURE__ */ new WeakMap();
+	const jobs = /* @__PURE__ */ new Map();
+	const queue = [];
+	let slots;
+	let workersFailed = options.worker === false;
+	let nextId = 0;
+	function makeWorker() {
+		if (typeof Worker === "undefined" || typeof OffscreenCanvas === "undefined" || typeof createImageBitmap === "undefined") return void 0;
+		try {
+			return options.createWorker ? options.createWorker() : new Worker(new URL("./worker-entry.js", void 0), { type: "module" });
+		} catch {
+			return;
+		}
+	}
+	function pool() {
+		if (workersFailed) return void 0;
+		if (slots) return slots;
+		const made = [];
+		for (let index = 0; index < Math.max(1, options.poolSize ?? 1); index += 1) {
+			const worker = makeWorker();
+			if (!worker) break;
+			const slot = {
+				worker,
+				job: void 0
+			};
+			worker.onmessage = (event) => onReply(slot, event.data);
+			worker.onerror = (event) => {
+				event.preventDefault?.();
+				workersFailed = true;
+				const job = slot.job;
+				slot.job = void 0;
+				slots?.forEach((each) => each.worker.terminate());
+				slots = void 0;
+				if (job && !job.settled) runOnMainThread(job);
+				queue.splice(0).forEach((waiting) => void runOnMainThread(waiting));
+			};
+			made.push(slot);
+		}
+		if (made.length === 0) {
+			workersFailed = true;
+			return;
+		}
+		return slots = made;
+	}
+	function settle(job, outcome) {
+		if (job.settled) return;
+		job.settled = true;
+		jobs.delete(job.id);
+		if ("error" in outcome) job.reject(outcome.error);
+		else job.resolve(outcome.updated);
+	}
+	function cancel(job, reason) {
+		if (job.settled) return;
+		if (job.slot) job.slot.worker.postMessage({
+			type: "cancel",
+			id: job.id
+		});
+		settle(job, reason === void 0 ? { updated: false } : { error: reason });
+	}
+	function commit(job, draw) {
+		if (job.settled) return;
+		if (latest.get(job.image) !== job.id || engine && engine.getDocumentInfo().session !== job.session) {
+			settle(job, { updated: false });
+			return;
+		}
+		const image = job.image;
+		const write = () => {
+			image.filters = job.filters;
+			image.removeTexture?.(`${image.cacheKey}_filtered`);
+			if (!draw) {
+				image._element = image._originalElement;
+				image._filteredEl = void 0;
+				image._filterScalingX = 1;
+				image._filterScalingY = 1;
+			} else {
+				const { width, height } = sizeOf(image._originalElement);
+				let target = image._filteredEl;
+				if (image._element === image._originalElement || !target) {
+					target = fabric.util.createCanvasElement();
+					image._filteredEl = target;
+				} else {
+					image._lastScaleX = 1;
+					image._lastScaleY = 1;
+				}
+				image._element = target;
+				target.width = width;
+				target.height = height;
+				draw(target.getContext("2d"), width, height);
+				if (target.width !== image._originalElement.width || target.height !== image._originalElement.height) {
+					image._filterScalingX = target.width / image._originalElement.width;
+					image._filterScalingY = target.height / image._originalElement.height;
+				}
+			}
+			job.image.set("dirty", true);
+		};
+		if (engine) engine.transaction("Apply filters", write);
+		else write();
+		job.image.canvas?.requestRenderAll();
+		settle(job, { updated: true });
+	}
+	async function runOnMainThread(job) {
+		if (job.settled) return;
+		const image = job.image;
+		const active = job.filters.filter((filter) => filter && !filter.isNeutralState());
+		if (!require_pipeline.canRunInWorker(active)) {
+			await require_concurrency.yieldToEventLoop();
+			if (job.settled || latest.get(job.image) !== job.id) return settle(job, { updated: false });
+			if (engine) engine.transaction("Apply filters", () => image.applyFilters(job.filters));
+			else image.applyFilters(job.filters);
+			image.filters = job.filters;
+			job.image.canvas?.requestRenderAll();
+			job.options.onProgress?.(1);
+			return settle(job, { updated: true });
+		}
+		const { width, height } = sizeOf(image._originalElement);
+		const scratch = fabric.util.createCanvasElement();
+		scratch.width = width;
+		scratch.height = height;
+		const ctx = scratch.getContext("2d", { willReadFrequently: true });
+		ctx.drawImage(image._originalElement, 0, 0, width, height);
+		const imageData = ctx.getImageData(0, 0, width, height);
+		try {
+			const result = await require_pipeline.runFilterPipeline(active, {
+				sourceWidth: width,
+				sourceHeight: height,
+				imageData,
+				originalImageData: imageData,
+				originalEl: image._originalElement,
+				canvasEl: scratch,
+				ctx,
+				filterBackend: void 0
+			}, {
+				bandRows: options.bandRows,
+				pause: require_concurrency.yieldToEventLoop,
+				isCancelled: () => job.settled,
+				onProgress: job.options.onProgress
+			});
+			if (!result) return;
+			commit(job, (target, targetWidth, targetHeight) => {
+				if (result.width !== targetWidth || result.height !== targetHeight) {
+					target.canvas.width = result.width;
+					target.canvas.height = result.height;
+				}
+				target.putImageData(result, 0, 0);
+			});
+		} catch (error) {
+			settle(job, { error });
+		} finally {
+			scratch.width = 0;
+			scratch.height = 0;
+		}
+	}
+	async function start(slot, job) {
+		slot.job = job;
+		job.slot = slot;
+		const image = job.image;
+		let bitmap;
+		try {
+			bitmap = await createImageBitmap(image._originalElement);
+		} catch (error) {
+			slot.job = void 0;
+			settle(job, { error });
+			pump();
+			return;
+		}
+		if (job.settled || slot.job !== job) {
+			bitmap.close();
+			if (slot.job === job) slot.job = void 0;
+			pump();
+			return;
+		}
+		const active = job.filters.filter((filter) => filter && !filter.isNeutralState());
+		const message = {
+			type: "apply",
+			id: job.id,
+			bitmap,
+			filters: active.map((filter) => filter.toObject()),
+			bandRows: options.bandRows
+		};
+		slot.worker.postMessage(message, [bitmap]);
+	}
+	function onReply(slot, reply) {
+		const job = slot.job?.id === reply.id ? slot.job : void 0;
+		if (reply.type === "progress") {
+			if (job && !job.settled) job.options.onProgress?.(reply.done);
+			return;
+		}
+		if (job) slot.job = void 0;
+		if (reply.type === "done") {
+			if (job) commit(job, (ctx) => {
+				if (reply.bitmap.width !== ctx.canvas.width || reply.bitmap.height !== ctx.canvas.height) {
+					ctx.canvas.width = reply.bitmap.width;
+					ctx.canvas.height = reply.bitmap.height;
+				}
+				ctx.drawImage(reply.bitmap, 0, 0);
+			});
+			reply.bitmap.close();
+		} else if (reply.type === "error" && job) settle(job, { error: /* @__PURE__ */ new Error(`The filter worker failed: ${reply.message}`) });
+		pump();
+	}
+	function pump() {
+		const available = pool();
+		if (!available) {
+			queue.splice(0).forEach((job) => void runOnMainThread(job));
+			return;
+		}
+		for (const slot of available) {
+			if (slot.job) continue;
+			let job = queue.shift();
+			while (job && job.settled) job = queue.shift();
+			if (!job) return;
+			start(slot, job);
+		}
+	}
+	return {
+		get mode() {
+			return pool() ? "worker" : "main-thread";
+		},
+		apply(image, filters, applyOptions = {}) {
+			const list = [...filters ?? image.filters ?? []];
+			const id = nextId += 1;
+			const previous = latest.get(image);
+			latest.set(image, id);
+			if (previous !== void 0) {
+				const replaced = jobs.get(previous);
+				if (replaced) cancel(replaced);
+			}
+			return new Promise((resolve, reject) => {
+				const job = {
+					id,
+					image,
+					filters: list,
+					options: applyOptions,
+					session: engine?.getDocumentInfo().session,
+					settled: false,
+					resolve,
+					reject
+				};
+				jobs.set(id, job);
+				const { signal } = applyOptions;
+				if (signal?.aborted) return cancel(job, abortReason(signal));
+				signal?.addEventListener("abort", () => cancel(job, abortReason(signal)), { once: true });
+				if (list.every((filter) => !filter || filter.isNeutralState())) {
+					commit(job, void 0);
+					applyOptions.onProgress?.(1);
+					return;
+				}
+				if (!require_pipeline.canRunInWorker(list.filter((filter) => filter && !filter.isNeutralState())) || !pool()) {
+					runOnMainThread(job);
+					return;
+				}
+				queue.push(job);
+				pump();
+			});
+		},
+		terminate() {
+			slots?.forEach((slot) => slot.worker.terminate());
+			slots = void 0;
+			workersFailed = true;
+			[...jobs.values()].forEach((job) => cancel(job));
+			queue.length = 0;
+		}
+	};
+}
+//#endregion
+exports.createFilterWorker = createFilterWorker;

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

@@ -0,0 +1,26 @@
+import { DocumentEngine } from "../engine/create-document-engine.cjs";
+import { FabricImage } from "fabric";
+//#region src/filters/filter-worker.d.ts
+export interface ImageFilter {
+  type?: string;
+  isNeutralState(): boolean;
+  toObject(): Record<string, unknown>;
+}
+export interface FilterWorkerOptions {
+  createWorker?: () => Worker;
+  worker?: boolean;
+  poolSize?: number;
+  bandRows?: number;
+  engine?: DocumentEngine;
+}
+export interface ApplyFilterOptions {
+  signal?: AbortSignal;
+  onProgress?: (done: number) => void;
+}
+export interface FilterWorker {
+  apply(image: FabricImage, filters?: ImageFilter[], options?: ApplyFilterOptions): Promise<boolean>;
+  readonly mode: "worker" | "main-thread";
+  terminate(): void;
+}
+export declare function createFilterWorker(options?: FilterWorkerOptions): FilterWorker;
+//#endregion

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

@@ -0,0 +1,26 @@
+import { DocumentEngine } from "../engine/create-document-engine.js";
+import { FabricImage } from "fabric";
+//#region src/filters/filter-worker.d.ts
+export interface ImageFilter {
+  type?: string;
+  isNeutralState(): boolean;
+  toObject(): Record<string, unknown>;
+}
+export interface FilterWorkerOptions {
+  createWorker?: () => Worker;
+  worker?: boolean;
+  poolSize?: number;
+  bandRows?: number;
+  engine?: DocumentEngine;
+}
+export interface ApplyFilterOptions {
+  signal?: AbortSignal;
+  onProgress?: (done: number) => void;
+}
+export interface FilterWorker {
+  apply(image: FabricImage, filters?: ImageFilter[], options?: ApplyFilterOptions): Promise<boolean>;
+  readonly mode: "worker" | "main-thread";
+  terminate(): void;
+}
+export declare function createFilterWorker(options?: FilterWorkerOptions): FilterWorker;
+//#endregion

package/dist/filters/filter-worker.js

@@ -0,0 +1,281 @@
+import { yieldToEventLoop } from "../util/concurrency.js";
+import { canRunInWorker, runFilterPipeline } from "./pipeline.js";
+import { util } from "fabric";
+//#region src/filters/filter-worker.ts
+function sizeOf(element) {
+	return {
+		width: element.naturalWidth || element.width,
+		height: element.naturalHeight || element.height
+	};
+}
+function abortReason(signal) {
+	return signal.reason ?? new DOMException("The filter run was aborted", "AbortError");
+}
+function createFilterWorker(options = {}) {
+	const engine = options.engine;
+	const latest = /* @__PURE__ */ new WeakMap();
+	const jobs = /* @__PURE__ */ new Map();
+	const queue = [];
+	let slots;
+	let workersFailed = options.worker === false;
+	let nextId = 0;
+	function makeWorker() {
+		if (typeof Worker === "undefined" || typeof OffscreenCanvas === "undefined" || typeof createImageBitmap === "undefined") return void 0;
+		try {
+			return options.createWorker ? options.createWorker() : new Worker(new URL("./worker-entry.js", import.meta.url), { type: "module" });
+		} catch {
+			return;
+		}
+	}
+	function pool() {
+		if (workersFailed) return void 0;
+		if (slots) return slots;
+		const made = [];
+		for (let index = 0; index < Math.max(1, options.poolSize ?? 1); index += 1) {
+			const worker = makeWorker();
+			if (!worker) break;
+			const slot = {
+				worker,
+				job: void 0
+			};
+			worker.onmessage = (event) => onReply(slot, event.data);
+			worker.onerror = (event) => {
+				event.preventDefault?.();
+				workersFailed = true;
+				const job = slot.job;
+				slot.job = void 0;
+				slots?.forEach((each) => each.worker.terminate());
+				slots = void 0;
+				if (job && !job.settled) runOnMainThread(job);
+				queue.splice(0).forEach((waiting) => void runOnMainThread(waiting));
+			};
+			made.push(slot);
+		}
+		if (made.length === 0) {
+			workersFailed = true;
+			return;
+		}
+		return slots = made;
+	}
+	function settle(job, outcome) {
+		if (job.settled) return;
+		job.settled = true;
+		jobs.delete(job.id);
+		if ("error" in outcome) job.reject(outcome.error);
+		else job.resolve(outcome.updated);
+	}
+	function cancel(job, reason) {
+		if (job.settled) return;
+		if (job.slot) job.slot.worker.postMessage({
+			type: "cancel",
+			id: job.id
+		});
+		settle(job, reason === void 0 ? { updated: false } : { error: reason });
+	}
+	function commit(job, draw) {
+		if (job.settled) return;
+		if (latest.get(job.image) !== job.id || engine && engine.getDocumentInfo().session !== job.session) {
+			settle(job, { updated: false });
+			return;
+		}
+		const image = job.image;
+		const write = () => {
+			image.filters = job.filters;
+			image.removeTexture?.(`${image.cacheKey}_filtered`);
+			if (!draw) {
+				image._element = image._originalElement;
+				image._filteredEl = void 0;
+				image._filterScalingX = 1;
+				image._filterScalingY = 1;
+			} else {
+				const { width, height } = sizeOf(image._originalElement);
+				let target = image._filteredEl;
+				if (image._element === image._originalElement || !target) {
+					target = util.createCanvasElement();
+					image._filteredEl = target;
+				} else {
+					image._lastScaleX = 1;
+					image._lastScaleY = 1;
+				}
+				image._element = target;
+				target.width = width;
+				target.height = height;
+				draw(target.getContext("2d"), width, height);
+				if (target.width !== image._originalElement.width || target.height !== image._originalElement.height) {
+					image._filterScalingX = target.width / image._originalElement.width;
+					image._filterScalingY = target.height / image._originalElement.height;
+				}
+			}
+			job.image.set("dirty", true);
+		};
+		if (engine) engine.transaction("Apply filters", write);
+		else write();
+		job.image.canvas?.requestRenderAll();
+		settle(job, { updated: true });
+	}
+	async function runOnMainThread(job) {
+		if (job.settled) return;
+		const image = job.image;
+		const active = job.filters.filter((filter) => filter && !filter.isNeutralState());
+		if (!canRunInWorker(active)) {
+			await yieldToEventLoop();
+			if (job.settled || latest.get(job.image) !== job.id) return settle(job, { updated: false });
+			if (engine) engine.transaction("Apply filters", () => image.applyFilters(job.filters));
+			else image.applyFilters(job.filters);
+			image.filters = job.filters;
+			job.image.canvas?.requestRenderAll();
+			job.options.onProgress?.(1);
+			return settle(job, { updated: true });
+		}
+		const { width, height } = sizeOf(image._originalElement);
+		const scratch = util.createCanvasElement();
+		scratch.width = width;
+		scratch.height = height;
+		const ctx = scratch.getContext("2d", { willReadFrequently: true });
+		ctx.drawImage(image._originalElement, 0, 0, width, height);
+		const imageData = ctx.getImageData(0, 0, width, height);
+		try {
+			const result = await runFilterPipeline(active, {
+				sourceWidth: width,
+				sourceHeight: height,
+				imageData,
+				originalImageData: imageData,
+				originalEl: image._originalElement,
+				canvasEl: scratch,
+				ctx,
+				filterBackend: void 0
+			}, {
+				bandRows: options.bandRows,
+				pause: yieldToEventLoop,
+				isCancelled: () => job.settled,
+				onProgress: job.options.onProgress
+			});
+			if (!result) return;
+			commit(job, (target, targetWidth, targetHeight) => {
+				if (result.width !== targetWidth || result.height !== targetHeight) {
+					target.canvas.width = result.width;
+					target.canvas.height = result.height;
+				}
+				target.putImageData(result, 0, 0);
+			});
+		} catch (error) {
+			settle(job, { error });
+		} finally {
+			scratch.width = 0;
+			scratch.height = 0;
+		}
+	}
+	async function start(slot, job) {
+		slot.job = job;
+		job.slot = slot;
+		const image = job.image;
+		let bitmap;
+		try {
+			bitmap = await createImageBitmap(image._originalElement);
+		} catch (error) {
+			slot.job = void 0;
+			settle(job, { error });
+			pump();
+			return;
+		}
+		if (job.settled || slot.job !== job) {
+			bitmap.close();
+			if (slot.job === job) slot.job = void 0;
+			pump();
+			return;
+		}
+		const active = job.filters.filter((filter) => filter && !filter.isNeutralState());
+		const message = {
+			type: "apply",
+			id: job.id,
+			bitmap,
+			filters: active.map((filter) => filter.toObject()),
+			bandRows: options.bandRows
+		};
+		slot.worker.postMessage(message, [bitmap]);
+	}
+	function onReply(slot, reply) {
+		const job = slot.job?.id === reply.id ? slot.job : void 0;
+		if (reply.type === "progress") {
+			if (job && !job.settled) job.options.onProgress?.(reply.done);
+			return;
+		}
+		if (job) slot.job = void 0;
+		if (reply.type === "done") {
+			if (job) commit(job, (ctx) => {
+				if (reply.bitmap.width !== ctx.canvas.width || reply.bitmap.height !== ctx.canvas.height) {
+					ctx.canvas.width = reply.bitmap.width;
+					ctx.canvas.height = reply.bitmap.height;
+				}
+				ctx.drawImage(reply.bitmap, 0, 0);
+			});
+			reply.bitmap.close();
+		} else if (reply.type === "error" && job) settle(job, { error: /* @__PURE__ */ new Error(`The filter worker failed: ${reply.message}`) });
+		pump();
+	}
+	function pump() {
+		const available = pool();
+		if (!available) {
+			queue.splice(0).forEach((job) => void runOnMainThread(job));
+			return;
+		}
+		for (const slot of available) {
+			if (slot.job) continue;
+			let job = queue.shift();
+			while (job && job.settled) job = queue.shift();
+			if (!job) return;
+			start(slot, job);
+		}
+	}
+	return {
+		get mode() {
+			return pool() ? "worker" : "main-thread";
+		},
+		apply(image, filters, applyOptions = {}) {
+			const list = [...filters ?? image.filters ?? []];
+			const id = nextId += 1;
+			const previous = latest.get(image);
+			latest.set(image, id);
+			if (previous !== void 0) {
+				const replaced = jobs.get(previous);
+				if (replaced) cancel(replaced);
+			}
+			return new Promise((resolve, reject) => {
+				const job = {
+					id,
+					image,
+					filters: list,
+					options: applyOptions,
+					session: engine?.getDocumentInfo().session,
+					settled: false,
+					resolve,
+					reject
+				};
+				jobs.set(id, job);
+				const { signal } = applyOptions;
+				if (signal?.aborted) return cancel(job, abortReason(signal));
+				signal?.addEventListener("abort", () => cancel(job, abortReason(signal)), { once: true });
+				if (list.every((filter) => !filter || filter.isNeutralState())) {
+					commit(job, void 0);
+					applyOptions.onProgress?.(1);
+					return;
+				}
+				if (!canRunInWorker(list.filter((filter) => filter && !filter.isNeutralState())) || !pool()) {
+					runOnMainThread(job);
+					return;
+				}
+				queue.push(job);
+				pump();
+			});
+		},
+		terminate() {
+			slots?.forEach((slot) => slot.worker.terminate());
+			slots = void 0;
+			workersFailed = true;
+			[...jobs.values()].forEach((job) => cancel(job));
+			queue.length = 0;
+		}
+	};
+}
+//#endregion
+export { createFilterWorker };

package/dist/filters/pipeline.cjs

@@ -0,0 +1,91 @@
+//#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
+exports.PIXEL_FILTERS = PIXEL_FILTERS;
+exports.WORKER_FILTERS = WORKER_FILTERS;
+exports.canRunInWorker = canRunInWorker;
+exports.flattenFilters = flattenFilters;
+exports.runFilterPipeline = runFilterPipeline;