fabricjs-document-engine 1.2.0 → 1.3.0

package/dist/index.cjs

@@ -12,6 +12,7 @@ const require_batch_render = require("./export/batch-render.cjs");
 const require_document_state_store = require("./state/document-state-store.cjs");
 const require_clipboard = require("./commands/clipboard.cjs");
 const require_layers = require("./commands/layers.cjs");
+const require_text_edit = require("./commands/text-edit.cjs");
 exports.CLIPBOARD_FORMAT = require_clipboard.CLIPBOARD_FORMAT;
 exports.CURRENT_SCHEMA_VERSION = require_document_format.CURRENT_SCHEMA_VERSION;
 exports.DocumentEngineError = require_errors.DocumentEngineError;
@@ -23,6 +24,7 @@ exports.createClipboard = require_clipboard.createClipboard;
 exports.createConflictError = require_errors.createConflictError;
 exports.createDocumentEngine = require_create_document_engine.createDocumentEngine;
 exports.createDocumentStateStore = require_document_state_store.createDocumentStateStore;
+exports.createTextCommands = require_text_edit.createTextCommands;
 exports.detectSchemaVersion = require_migrate_document.detectSchemaVersion;
 exports.downloadExport = require_download_export.downloadExport;
 exports.getLayers = require_layers.getLayers;
@@ -30,9 +32,14 @@ exports.isDocumentEngineError = require_errors.isDocumentEngineError;
 exports.isSafeImageUrl = require_content_limits.isSafeImageUrl;
 exports.migrateDocument = require_migrate_document.migrateDocument;
 exports.moveToIndex = require_layers.moveToIndex;
+exports.readStyleRuns = require_text_edit.readStyleRuns;
 exports.refuseUnsafeImageUrls = require_content_limits.refuseUnsafeImageUrls;
 exports.renderDocuments = require_batch_render.renderDocuments;
+exports.replaceTextRange = require_text_edit.replaceTextRange;
 exports.secureDocument = require_content_limits.secureDocument;
 exports.sendBackward = require_layers.sendBackward;
 exports.sendToBack = require_layers.sendToBack;
+exports.setTextRangeStyle = require_text_edit.setTextRangeStyle;
+exports.shiftStyleRuns = require_text_edit.shiftStyleRuns;
 exports.validateDocument = require_validate_document.validateDocument;
+exports.writeStyleRuns = require_text_edit.writeStyleRuns;

package/dist/index.d.cts

@@ -29,4 +29,5 @@ 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 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 };
+import { EditableTextObject, InsertedStyle, StyleRun, TextCommands, createTextCommands, readStyleRuns, replaceTextRange, setTextRangeStyle, shiftStyleRuns, writeStyleRuns } from "./commands/text-edit.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 EditableTextObject, 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 InsertedStyle, 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 StyleRun, type SvgExportOptions, type SvgImportOptions, type SvgImportResult, type SvgImportWarning, type SvgImportWarningCode, type TextCommands, 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, createTextCommands, detectSchemaVersion, downloadExport, getLayers, isDocumentEngineError, isSafeImageUrl, migrateDocument, moveToIndex, readStyleRuns, refuseUnsafeImageUrls, renderDocuments, replaceTextRange, secureDocument, sendBackward, sendToBack, setTextRangeStyle, shiftStyleRuns, validateDocument, writeStyleRuns };

package/dist/index.d.ts

@@ -29,4 +29,5 @@ 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 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 };
+import { EditableTextObject, InsertedStyle, StyleRun, TextCommands, createTextCommands, readStyleRuns, replaceTextRange, setTextRangeStyle, shiftStyleRuns, writeStyleRuns } from "./commands/text-edit.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 EditableTextObject, 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 InsertedStyle, 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 StyleRun, type SvgExportOptions, type SvgImportOptions, type SvgImportResult, type SvgImportWarning, type SvgImportWarningCode, type TextCommands, 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, createTextCommands, detectSchemaVersion, downloadExport, getLayers, isDocumentEngineError, isSafeImageUrl, migrateDocument, moveToIndex, readStyleRuns, refuseUnsafeImageUrls, renderDocuments, replaceTextRange, secureDocument, sendBackward, sendToBack, setTextRangeStyle, shiftStyleRuns, validateDocument, writeStyleRuns };

package/dist/index.js

@@ -11,4 +11,5 @@ import { renderDocuments } from "./export/batch-render.js";
 import { createDocumentStateStore } from "./state/document-state-store.js";
 import { CLIPBOARD_FORMAT, createClipboard } from "./commands/clipboard.js";
 import { bringForward, bringToFront, getLayers, moveToIndex, sendBackward, sendToBack } from "./commands/layers.js";
-export { CLIPBOARD_FORMAT, CURRENT_SCHEMA_VERSION, DocumentEngineError, bindKeyboardShortcuts, bindUnsavedChangesWarning, bringForward, bringToFront, createClipboard, createConflictError, createDocumentEngine, createDocumentStateStore, detectSchemaVersion, downloadExport, getLayers, isDocumentEngineError, isSafeImageUrl, migrateDocument, moveToIndex, refuseUnsafeImageUrls, renderDocuments, secureDocument, sendBackward, sendToBack, validateDocument };
+import { createTextCommands, readStyleRuns, replaceTextRange, setTextRangeStyle, shiftStyleRuns, writeStyleRuns } from "./commands/text-edit.js";
+export { CLIPBOARD_FORMAT, CURRENT_SCHEMA_VERSION, DocumentEngineError, bindKeyboardShortcuts, bindUnsavedChangesWarning, bringForward, bringToFront, createClipboard, createConflictError, createDocumentEngine, createDocumentStateStore, createTextCommands, detectSchemaVersion, downloadExport, getLayers, isDocumentEngineError, isSafeImageUrl, migrateDocument, moveToIndex, readStyleRuns, refuseUnsafeImageUrls, renderDocuments, replaceTextRange, secureDocument, sendBackward, sendToBack, setTextRangeStyle, shiftStyleRuns, validateDocument, writeStyleRuns };

package/dist/performance/batch.cjs

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

package/dist/performance/batch.d.cts

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

package/dist/performance/batch.d.ts

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

package/dist/performance/batch.js

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

package/dist/performance/dirty-regions.cjs

@@ -0,0 +1,378 @@
+const require_spatial_index = require("./spatial-index.cjs");
+//#region src/performance/dirty-regions.ts
+const UNBOUNDED_COMPOSITES = /* @__PURE__ */ new Set([
+	"source-in",
+	"source-out",
+	"destination-in",
+	"destination-atop",
+	"copy"
+]);
+function union(first, second) {
+	const left = Math.min(first.left, second.left);
+	const top = Math.min(first.top, second.top);
+	return {
+		left,
+		top,
+		width: Math.max(first.left + first.width, second.left + second.width) - left,
+		height: Math.max(first.top + first.height, second.top + second.height) - top
+	};
+}
+function intersects(first, second, gap = 0) {
+	return first.left <= second.left + second.width + gap && second.left <= first.left + first.width + gap && first.top <= second.top + second.height + gap && second.top <= first.top + first.height + gap;
+}
+const area = (rect) => Math.max(0, rect.width) * Math.max(0, rect.height);
+function overhang(object) {
+	const self = object;
+	let x = 0;
+	let y = 0;
+	if (self.stroke && self.strokeWidth) x = y = self.strokeWidth * Math.max(1, self.strokeMiterLimit ?? 4) / 2;
+	if (typeof self.fontSize === "number" && typeof self.text === "string") {
+		x = Math.max(x, self.fontSize * .5);
+		y = Math.max(y, self.fontSize * .5);
+	}
+	for (const child of self._objects ?? []) {
+		const inner = overhang(child);
+		const childShadow = shadowReach(child);
+		x = Math.max(x, inner.x + childShadow.x);
+		y = Math.max(y, inner.y + childShadow.y);
+	}
+	return {
+		x,
+		y
+	};
+}
+function shadowReach(object) {
+	const shadow = object.shadow;
+	if (!shadow) return {
+		x: 0,
+		y: 0
+	};
+	return {
+		x: Math.abs(shadow.offsetX) + shadow.blur * 2,
+		y: Math.abs(shadow.offsetY) + shadow.blur * 2
+	};
+}
+function drawnBounds(object) {
+	object.setCoords();
+	const box = object.getBoundingRect();
+	const scaling = object.getObjectScaling();
+	const scaleX = Math.abs(scaling.x);
+	const scaleY = Math.abs(scaling.y);
+	const reach = overhang(object);
+	const shadow = shadowReach(object);
+	const nonScaling = Boolean(object.shadow?.nonScaling);
+	const grow = Math.max(reach.x * scaleX, reach.y * scaleY) + Math.max(shadow.x, shadow.y) * (nonScaling ? 1 : Math.max(scaleX, scaleY));
+	let bounds = {
+		left: box.left - grow,
+		top: box.top - grow,
+		width: box.width + grow * 2,
+		height: box.height + grow * 2
+	};
+	for (const child of object._objects ?? []) bounds = union(bounds, drawnBounds(child));
+	return bounds;
+}
+function fingerprint(object, index, into = []) {
+	const self = object;
+	const matrix = object.calcTransformMatrix();
+	const shadow = self.shadow;
+	into.push(index, matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5], self.width, self.height, self.visible, self.opacity, self.strokeWidth, self.globalCompositeOperation, self._element, self.clipPath, shadow, shadow?.blur, shadow?.offsetX, shadow?.offsetY);
+	self._objects?.forEach((child, position) => fingerprint(child, position, into));
+	return into;
+}
+function isDirty(object) {
+	const self = object;
+	return Boolean(self.dirty) || (self._objects ?? []).some(isDirty);
+}
+function sameFingerprint(first, second) {
+	if (first.length !== second.length) return false;
+	for (let index = 0; index < first.length; index += 1) if (first[index] !== second[index]) return false;
+	return true;
+}
+function toViewport(rect, matrix) {
+	const [a, b, c, d, e, f] = matrix;
+	const xs = [];
+	const ys = [];
+	for (const [x, y] of [
+		[rect.left, rect.top],
+		[rect.left + rect.width, rect.top],
+		[rect.left, rect.top + rect.height],
+		[rect.left + rect.width, rect.top + rect.height]
+	]) {
+		xs.push(a * x + c * y + e);
+		ys.push(b * x + d * y + f);
+	}
+	const left = Math.min(...xs);
+	const top = Math.min(...ys);
+	return {
+		left,
+		top,
+		width: Math.max(...xs) - left,
+		height: Math.max(...ys) - top
+	};
+}
+function toScene(rect, matrix) {
+	const [a, b, c, d, e, f] = matrix;
+	const determinant = a * d - b * c;
+	return toViewport(rect, [
+		d / determinant,
+		-b / determinant,
+		-c / determinant,
+		a / determinant,
+		(c * f - d * e) / determinant,
+		(b * e - a * f) / determinant
+	]);
+}
+function controlsArea(canvas) {
+	const active = canvas.getActiveObject?.();
+	if (!active) return {
+		key: [],
+		rect: void 0
+	};
+	const self = active;
+	const points = Object.values(self.oCoords ?? {});
+	if (points.length === 0 || !self.hasControls && !self.hasBorders) return {
+		key: [active],
+		rect: void 0
+	};
+	const reach = Math.max(self.cornerSize ?? 13, self.touchCornerSize ?? 0) / 2 + (self.padding ?? 0) + 4;
+	let left = Infinity;
+	let top = Infinity;
+	let right = -Infinity;
+	let bottom = -Infinity;
+	const key = [
+		active,
+		self.hasControls,
+		self.hasBorders
+	];
+	for (const point of points) {
+		left = Math.min(left, point.x);
+		top = Math.min(top, point.y);
+		right = Math.max(right, point.x);
+		bottom = Math.max(bottom, point.y);
+		key.push(point.x, point.y);
+	}
+	return {
+		key,
+		rect: {
+			left: left - reach,
+			top: top - reach,
+			width: right - left + reach * 2,
+			height: bottom - top + reach * 2
+		}
+	};
+}
+function mergeRects(rects, limit) {
+	if (rects.length > 64) return [rects.reduce(union)];
+	const merged = [...rects];
+	let changed = true;
+	while (changed) {
+		changed = false;
+		for (let first = 0; first < merged.length && !changed; first += 1) for (let second = first + 1; second < merged.length; second += 1) if (intersects(merged[first], merged[second], 8)) {
+			merged[first] = union(merged[first], merged[second]);
+			merged.splice(second, 1);
+			changed = true;
+			break;
+		}
+	}
+	while (merged.length > limit) {
+		let best = [0, 1];
+		let bestGrowth = Infinity;
+		for (let first = 0; first < merged.length; first += 1) for (let second = first + 1; second < merged.length; second += 1) {
+			const growth = area(union(merged[first], merged[second])) - area(merged[first]) - area(merged[second]);
+			if (growth < bestGrowth) {
+				bestGrowth = growth;
+				best = [first, second];
+			}
+		}
+		merged[best[0]] = union(merged[best[0]], merged[best[1]]);
+		merged.splice(best[1], 1);
+	}
+	return merged;
+}
+function enableDirtyRegionRendering(canvas, options = {}) {
+	const self = canvas;
+	const fullRatio = options.fullRedrawRatio ?? .4;
+	const maxRegions = Math.max(1, options.maxRegions ?? 4);
+	const index = require_spatial_index.createSpatialIndex({ cellSize: options.cellSize ?? 256 });
+	const states = /* @__PURE__ */ new Map();
+	const unbounded = /* @__PURE__ */ new Set();
+	const original = self.renderCanvas;
+	const hadOwn = Object.prototype.hasOwnProperty.call(canvas, "renderCanvas");
+	const stats = {
+		frames: 0,
+		fullFrames: 0,
+		skippedFrames: 0,
+		lastObjectsDrawn: 0,
+		lastAreaRatio: 0,
+		lastRegions: []
+	};
+	let frame = 0;
+	let forceFull = true;
+	let lastPage = [];
+	let lastControls = {
+		key: [],
+		rect: void 0
+	};
+	const pageKey = () => [
+		...self.viewportTransform,
+		self.width,
+		self.height,
+		self.getRetinaScaling(),
+		self.backgroundColor,
+		self.backgroundImage,
+		self.backgroundImage?.dirty,
+		self.overlayColor,
+		self.overlayImage,
+		self.overlayImage?.dirty,
+		self.clipPath,
+		self.clipPath?.dirty
+	];
+	function track(object, position) {
+		const print = fingerprint(object, position);
+		const state = states.get(object);
+		if (state) {
+			state.seen = frame;
+			if (!isDirty(object) && sameFingerprint(state.fingerprint, print)) return [];
+		}
+		const bounds = drawnBounds(object);
+		states.set(object, {
+			fingerprint: print,
+			bounds,
+			seen: frame
+		});
+		index.set(object, bounds);
+		const composite = object.globalCompositeOperation ?? "source-over";
+		if (UNBOUNDED_COMPOSITES.has(composite)) unbounded.add(object);
+		else unbounded.delete(object);
+		return state ? [state.bounds, bounds] : [bounds];
+	}
+	function drawFull(ctx, objects) {
+		stats.fullFrames += 1;
+		stats.lastObjectsDrawn = objects.length;
+		stats.lastAreaRatio = 1;
+		stats.lastRegions = [];
+		original.call(canvas, ctx, objects);
+	}
+	function renderCanvas(ctx, objects) {
+		if (ctx !== self.getContext()) {
+			original.call(canvas, ctx, objects);
+			return;
+		}
+		frame += 1;
+		stats.frames += 1;
+		const changed = [];
+		self._objects.forEach((object, position) => changed.push(...track(object, position)));
+		for (const [object, state] of states) {
+			if (state.seen === frame) continue;
+			changed.push(state.bounds);
+			states.delete(object);
+			index.delete(object);
+			unbounded.delete(object);
+		}
+		const page = pageKey();
+		const controls = controlsArea(self);
+		const pageChanged = !sameFingerprint(page, lastPage) || page.length !== lastPage.length;
+		const controlsChanged = !sameFingerprint(controls.key, lastControls.key) || controls.key.length !== lastControls.key.length;
+		const viewportChanged = [];
+		if (controlsChanged) {
+			if (lastControls.rect) viewportChanged.push(lastControls.rect);
+			if (controls.rect) viewportChanged.push(controls.rect);
+			const before = lastControls.key[0];
+			const after = controls.key[0];
+			for (const object of [before, after]) {
+				const state = object ? states.get(object) : void 0;
+				if (state) changed.push(state.bounds);
+			}
+		}
+		lastPage = page;
+		lastControls = controls;
+		if (forceFull || pageChanged) {
+			forceFull = false;
+			drawFull(ctx, objects);
+			return;
+		}
+		const matrix = self.viewportTransform;
+		const retina = self.getRetinaScaling();
+		const canvasRect = {
+			left: 0,
+			top: 0,
+			width: self.width,
+			height: self.height
+		};
+		const regions = [];
+		for (const rect of [...changed.map((scene) => toViewport(scene, matrix)), ...viewportChanged]) {
+			const pad = 2 / retina;
+			const left = Math.max(0, Math.floor((rect.left - pad) * retina) / retina);
+			const top = Math.max(0, Math.floor((rect.top - pad) * retina) / retina);
+			const right = Math.min(self.width, Math.ceil((rect.left + rect.width + pad) * retina) / retina);
+			const bottom = Math.min(self.height, Math.ceil((rect.top + rect.height + pad) * retina) / retina);
+			if (right > left && bottom > top) regions.push({
+				left,
+				top,
+				width: right - left,
+				height: bottom - top
+			});
+		}
+		if (regions.length === 0) {
+			stats.skippedFrames += 1;
+			stats.lastObjectsDrawn = 0;
+			stats.lastAreaRatio = 0;
+			stats.lastRegions = [];
+			self.fire("before:render", { ctx });
+			self.fire("after:render", { ctx });
+			return;
+		}
+		const merged = mergeRects(regions, maxRegions);
+		const drawnArea = merged.reduce((sum, rect) => sum + area(rect), 0);
+		if (drawnArea > area(canvasRect) * fullRatio) {
+			drawFull(ctx, objects);
+			return;
+		}
+		const wanted = new Set(unbounded);
+		for (const rect of merged) {
+			const pad = 2 / retina;
+			const scene = toScene({
+				left: rect.left - pad,
+				top: rect.top - pad,
+				width: rect.width + pad * 2,
+				height: rect.height + pad * 2
+			}, matrix);
+			index.query(scene).forEach((object) => {
+				const bounds = states.get(object)?.bounds;
+				if (!bounds || intersects(bounds, scene)) wanted.add(object);
+			});
+		}
+		const toDraw = objects.filter((object) => wanted.has(object));
+		stats.lastObjectsDrawn = toDraw.length;
+		stats.lastAreaRatio = drawnArea / area(canvasRect);
+		stats.lastRegions = merged;
+		ctx.save();
+		ctx.beginPath();
+		for (const rect of merged) ctx.rect(rect.left, rect.top, rect.width, rect.height);
+		ctx.clip();
+		try {
+			original.call(canvas, ctx, toDraw);
+		} finally {
+			ctx.restore();
+		}
+	}
+	self.renderCanvas = renderCanvas;
+	return {
+		invalidate() {
+			forceFull = true;
+		},
+		stats: () => ({
+			...stats,
+			lastRegions: [...stats.lastRegions]
+		}),
+		disable() {
+			if (self.renderCanvas !== renderCanvas) return;
+			if (hadOwn) self.renderCanvas = original;
+			else delete canvas.renderCanvas;
+			index.clear();
+			states.clear();
+		}
+	};
+}
+//#endregion
+exports.enableDirtyRegionRendering = enableDirtyRegionRendering;

package/dist/performance/dirty-regions.d.cts

@@ -0,0 +1,23 @@
+import { Rect } from "./spatial-index.cjs";
+import { StaticCanvas } from "fabric";
+//#region src/performance/dirty-regions.d.ts
+export interface DirtyRegionOptions {
+  fullRedrawRatio?: number;
+  maxRegions?: number;
+  cellSize?: number;
+}
+export interface DirtyRegionStats {
+  frames: number;
+  fullFrames: number;
+  skippedFrames: number;
+  lastObjectsDrawn: number;
+  lastAreaRatio: number;
+  lastRegions: Rect[];
+}
+export interface DirtyRegionRenderer {
+  invalidate(): void;
+  stats(): DirtyRegionStats;
+  disable(): void;
+}
+export declare function enableDirtyRegionRendering(canvas: StaticCanvas, options?: DirtyRegionOptions): DirtyRegionRenderer;
+//#endregion

package/dist/performance/dirty-regions.d.ts

@@ -0,0 +1,23 @@
+import { Rect as Rect$1 } from "./spatial-index.js";
+import { StaticCanvas } from "fabric";
+//#region src/performance/dirty-regions.d.ts
+export interface DirtyRegionOptions {
+  fullRedrawRatio?: number;
+  maxRegions?: number;
+  cellSize?: number;
+}
+export interface DirtyRegionStats {
+  frames: number;
+  fullFrames: number;
+  skippedFrames: number;
+  lastObjectsDrawn: number;
+  lastAreaRatio: number;
+  lastRegions: Rect$1[];
+}
+export interface DirtyRegionRenderer {
+  invalidate(): void;
+  stats(): DirtyRegionStats;
+  disable(): void;
+}
+export declare function enableDirtyRegionRendering(canvas: StaticCanvas, options?: DirtyRegionOptions): DirtyRegionRenderer;
+//#endregion