fabricjs-document-engine 1.1.0 → 1.3.0

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