fabricjs-document-engine 1.2.0 → 1.3.0

package/dist/performance/dirty-regions.js

@@ -0,0 +1,378 @@
+import { createSpatialIndex } from "./spatial-index.js";
+//#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 = 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
+export { enableDirtyRegionRendering };

package/dist/performance/monitor.cjs

@@ -0,0 +1,60 @@
+//#region src/performance/monitor.ts
+function createPerformanceMonitor(canvas, options = {}) {
+	const self = canvas;
+	const capacity = Math.max(1, options.samples ?? 120);
+	const times = new Float64Array(capacity);
+	let count = 0;
+	let next = 0;
+	let started = 0;
+	let objectsDrawn = 0;
+	let lastObjectsDrawn = 0;
+	const onBefore = ({ ctx }) => {
+		if (ctx !== self.getContext()) return;
+		started = performance.now();
+		objectsDrawn = 0;
+	};
+	const onAfter = ({ ctx }) => {
+		if (ctx !== self.getContext() || started === 0) return;
+		times[next] = performance.now() - started;
+		next = (next + 1) % capacity;
+		count = Math.min(count + 1, capacity);
+		lastObjectsDrawn = objectsDrawn;
+		started = 0;
+	};
+	const original = self._renderObjects;
+	const hadOwn = Object.prototype.hasOwnProperty.call(canvas, "_renderObjects");
+	function renderObjects(ctx, objects) {
+		if (ctx === self.getContext()) objectsDrawn += objects.length;
+		original.call(this, ctx, objects);
+	}
+	self._renderObjects = renderObjects;
+	self.on("before:render", onBefore);
+	self.on("after:render", onAfter);
+	return {
+		stats() {
+			const recorded = Array.from(times.subarray(0, count)).sort((first, second) => first - second);
+			const at = (share) => count === 0 ? 0 : recorded[Math.min(count - 1, Math.floor(share * count))];
+			return {
+				frames: count,
+				averageMs: count === 0 ? 0 : recorded.reduce((sum, time) => sum + time, 0) / count,
+				p50Ms: at(.5),
+				p95Ms: at(.95),
+				worstMs: count === 0 ? 0 : recorded[count - 1],
+				lastObjectsDrawn
+			};
+		},
+		reset() {
+			count = 0;
+			next = 0;
+		},
+		stop() {
+			self.off("before:render", onBefore);
+			self.off("after:render", onAfter);
+			if (self._renderObjects !== renderObjects) return;
+			if (hadOwn) self._renderObjects = original;
+			else delete canvas._renderObjects;
+		}
+	};
+}
+//#endregion
+exports.createPerformanceMonitor = createPerformanceMonitor;

package/dist/performance/monitor.d.cts

@@ -0,0 +1,20 @@
+import { StaticCanvas } from "fabric";
+//#region src/performance/monitor.d.ts
+export interface PerformanceMonitorOptions {
+  samples?: number;
+}
+export interface FrameStats {
+  frames: number;
+  averageMs: number;
+  p50Ms: number;
+  p95Ms: number;
+  worstMs: number;
+  lastObjectsDrawn: number;
+}
+export interface PerformanceMonitor {
+  stats(): FrameStats;
+  reset(): void;
+  stop(): void;
+}
+export declare function createPerformanceMonitor(canvas: StaticCanvas, options?: PerformanceMonitorOptions): PerformanceMonitor;
+//#endregion

package/dist/performance/monitor.d.ts

@@ -0,0 +1,20 @@
+import { StaticCanvas } from "fabric";
+//#region src/performance/monitor.d.ts
+export interface PerformanceMonitorOptions {
+  samples?: number;
+}
+export interface FrameStats {
+  frames: number;
+  averageMs: number;
+  p50Ms: number;
+  p95Ms: number;
+  worstMs: number;
+  lastObjectsDrawn: number;
+}
+export interface PerformanceMonitor {
+  stats(): FrameStats;
+  reset(): void;
+  stop(): void;
+}
+export declare function createPerformanceMonitor(canvas: StaticCanvas, options?: PerformanceMonitorOptions): PerformanceMonitor;
+//#endregion

package/dist/performance/monitor.js

@@ -0,0 +1,60 @@
+//#region src/performance/monitor.ts
+function createPerformanceMonitor(canvas, options = {}) {
+	const self = canvas;
+	const capacity = Math.max(1, options.samples ?? 120);
+	const times = new Float64Array(capacity);
+	let count = 0;
+	let next = 0;
+	let started = 0;
+	let objectsDrawn = 0;
+	let lastObjectsDrawn = 0;
+	const onBefore = ({ ctx }) => {
+		if (ctx !== self.getContext()) return;
+		started = performance.now();
+		objectsDrawn = 0;
+	};
+	const onAfter = ({ ctx }) => {
+		if (ctx !== self.getContext() || started === 0) return;
+		times[next] = performance.now() - started;
+		next = (next + 1) % capacity;
+		count = Math.min(count + 1, capacity);
+		lastObjectsDrawn = objectsDrawn;
+		started = 0;
+	};
+	const original = self._renderObjects;
+	const hadOwn = Object.prototype.hasOwnProperty.call(canvas, "_renderObjects");
+	function renderObjects(ctx, objects) {
+		if (ctx === self.getContext()) objectsDrawn += objects.length;
+		original.call(this, ctx, objects);
+	}
+	self._renderObjects = renderObjects;
+	self.on("before:render", onBefore);
+	self.on("after:render", onAfter);
+	return {
+		stats() {
+			const recorded = Array.from(times.subarray(0, count)).sort((first, second) => first - second);
+			const at = (share) => count === 0 ? 0 : recorded[Math.min(count - 1, Math.floor(share * count))];
+			return {
+				frames: count,
+				averageMs: count === 0 ? 0 : recorded.reduce((sum, time) => sum + time, 0) / count,
+				p50Ms: at(.5),
+				p95Ms: at(.95),
+				worstMs: count === 0 ? 0 : recorded[count - 1],
+				lastObjectsDrawn
+			};
+		},
+		reset() {
+			count = 0;
+			next = 0;
+		},
+		stop() {
+			self.off("before:render", onBefore);
+			self.off("after:render", onAfter);
+			if (self._renderObjects !== renderObjects) return;
+			if (hadOwn) self._renderObjects = original;
+			else delete canvas._renderObjects;
+		}
+	};
+}
+//#endregion
+export { createPerformanceMonitor };

package/dist/performance/spatial-index.cjs

@@ -0,0 +1,78 @@
+//#region src/performance/spatial-index.ts
+const OFFSET = 1 << 20;
+const keyOf = (column, row) => (column + OFFSET) * 2 ** 21 + (row + OFFSET);
+function createSpatialIndex(options = {}) {
+	const cellSize = options.cellSize ?? 256;
+	const maxCells = options.maxCellsPerItem ?? 64;
+	const cells = /* @__PURE__ */ new Map();
+	const placed = /* @__PURE__ */ new Map();
+	const large = /* @__PURE__ */ new Set();
+	const span = (bounds) => [
+		Math.floor(bounds.left / cellSize),
+		Math.floor(bounds.top / cellSize),
+		Math.floor((bounds.left + Math.max(0, bounds.width)) / cellSize),
+		Math.floor((bounds.top + Math.max(0, bounds.height)) / cellSize)
+	];
+	function remove(item) {
+		const where = placed.get(item);
+		if (where === void 0) return false;
+		placed.delete(item);
+		if (where === "large") {
+			large.delete(item);
+			return true;
+		}
+		for (const key of where) {
+			const bucket = cells.get(key);
+			bucket.delete(item);
+			if (bucket.size === 0) cells.delete(key);
+		}
+		return true;
+	}
+	return {
+		set(item, bounds) {
+			remove(item);
+			const [left, top, right, bottom] = span(bounds);
+			const count = (right - left + 1) * (bottom - top + 1);
+			if (!Number.isFinite(count) || count > maxCells) {
+				large.add(item);
+				placed.set(item, "large");
+				return;
+			}
+			const keys = [];
+			for (let column = left; column <= right; column += 1) for (let row = top; row <= bottom; row += 1) {
+				const key = keyOf(column, row);
+				let bucket = cells.get(key);
+				if (!bucket) cells.set(key, bucket = /* @__PURE__ */ new Set());
+				bucket.add(item);
+				keys.push(key);
+			}
+			placed.set(item, keys);
+		},
+		delete: remove,
+		has: (item) => placed.has(item),
+		query(bounds) {
+			const found = new Set(large);
+			const [left, top, right, bottom] = span(bounds);
+			if ((right - left + 1) * (bottom - top + 1) > cells.size) {
+				for (const [key, bucket] of cells) {
+					const column = Math.floor(key / 2 ** 21) - OFFSET;
+					const row = key % 2 ** 21 - OFFSET;
+					if (column >= left && column <= right && row >= top && row <= bottom) bucket.forEach((item) => found.add(item));
+				}
+				return found;
+			}
+			for (let column = left; column <= right; column += 1) for (let row = top; row <= bottom; row += 1) cells.get(keyOf(column, row))?.forEach((item) => found.add(item));
+			return found;
+		},
+		clear() {
+			cells.clear();
+			placed.clear();
+			large.clear();
+		},
+		get size() {
+			return placed.size;
+		}
+	};
+}
+//#endregion
+exports.createSpatialIndex = createSpatialIndex;

package/dist/performance/spatial-index.d.cts

@@ -0,0 +1,21 @@
+//#region src/performance/spatial-index.d.ts
+export interface Rect {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+export interface SpatialIndexOptions {
+  cellSize?: number;
+  maxCellsPerItem?: number;
+}
+export interface SpatialIndex<Item> {
+  set(item: Item, bounds: Rect): void;
+  delete(item: Item): boolean;
+  has(item: Item): boolean;
+  query(bounds: Rect): Set<Item>;
+  clear(): void;
+  readonly size: number;
+}
+export declare function createSpatialIndex<Item>(options?: SpatialIndexOptions): SpatialIndex<Item>;
+//#endregion

package/dist/performance/spatial-index.d.ts

@@ -0,0 +1,21 @@
+//#region src/performance/spatial-index.d.ts
+export interface Rect {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+export interface SpatialIndexOptions {
+  cellSize?: number;
+  maxCellsPerItem?: number;
+}
+export interface SpatialIndex<Item> {
+  set(item: Item, bounds: Rect): void;
+  delete(item: Item): boolean;
+  has(item: Item): boolean;
+  query(bounds: Rect): Set<Item>;
+  clear(): void;
+  readonly size: number;
+}
+export declare function createSpatialIndex<Item>(options?: SpatialIndexOptions): SpatialIndex<Item>;
+//#endregion