fabricjs-document-engine 1.0.2 → 1.2.0

package/dist/export/svg/text-on-path.js

@@ -0,0 +1,240 @@
+import { walkObjects } from "../../fabric/walk-objects.js";
+import { Color, util } from "fabric";
+//#region src/export/svg/text-on-path.ts
+function isTextOnPath(object) {
+	const candidate = object;
+	return Boolean(candidate.path) && Array.isArray(candidate._textLines) && typeof candidate.getCompleteStyleDeclaration === "function";
+}
+const DIGITS = 4;
+function num(value) {
+	if (!Number.isFinite(value)) return "0";
+	const fixed = value.toFixed(DIGITS);
+	return fixed.includes(".") ? fixed.replace(/\.?0+$/, "") || "0" : fixed;
+}
+function escapeXml(value) {
+	return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+/** CSS values that could break out of a style attribute are dropped, as Fabric 7 does. */
+function safeToken(value) {
+	if (value === void 0 || value === null) return void 0;
+	const text = String(value).trim();
+	if (text.length === 0 || /[;<>{}\\]|url\(|expression\(|javascript:|data:/i.test(text)) return void 0;
+	return text;
+}
+function isFiller(value) {
+	return typeof value === "object" && value !== null && typeof value.toSVG === "function";
+}
+/** `fill: rgb(...); fill-opacity: a` for a color, `url(#SVGID_id)` for a gradient or pattern. */
+function paint(property, value) {
+	if (isFiller(value)) return `${property}: url(#SVGID_${value.id}); `;
+	const token = typeof value === "string" ? safeToken(value) : void 0;
+	if (token === void 0 || token === "none" || token === "transparent") return `${property}: none; `;
+	const color = new Color(token);
+	const alpha = color.getAlpha();
+	const rgb = color.toRgb();
+	return alpha === 1 ? `${property}: ${rgb}; ` : `${property}: ${rgb}; ${property}-opacity: ${num(alpha)}; `;
+}
+function strokeDetails(text, strokeWidth) {
+	let style = `stroke-width: ${num(strokeWidth)}; `;
+	if (text.strokeDashArray && text.strokeDashArray.length > 0) style += `stroke-dasharray: ${text.strokeDashArray.map(num).join(" ")}; `;
+	const cap = safeToken(text.strokeLineCap);
+	const join = safeToken(text.strokeLineJoin);
+	if (cap) style += `stroke-linecap: ${cap}; `;
+	if (join) style += `stroke-linejoin: ${join}; `;
+	if (text.strokeMiterLimit !== void 0) style += `stroke-miterlimit: ${num(text.strokeMiterLimit)}; `;
+	return style;
+}
+function fontStyle(style) {
+	const family = safeToken(String(style.fontFamily ?? "").replace(/"/g, "'"));
+	const weight = safeToken(style.fontWeight);
+	const slant = safeToken(style.fontStyle);
+	let css = "";
+	if (family) css += `font-family: ${family}; `;
+	css += `font-size: ${num(style.fontSize ?? 0)}px; `;
+	if (weight) css += `font-weight: ${weight}; `;
+	if (slant) css += `font-style: ${slant}; `;
+	return css;
+}
+function frame(box) {
+	const angle = box.angle ?? 0;
+	const cos = Math.cos(angle);
+	const sin = Math.sin(angle);
+	return `matrix(${num(cos)} ${num(sin)} ${num(-sin)} ${num(cos)} ${num(box.renderLeft ?? 0)} ${num(box.renderTop ?? 0)})`;
+}
+let measuringContext;
+function measuring() {
+	if (measuringContext === void 0) measuringContext = typeof document === "undefined" ? null : document.createElement("canvas").getContext("2d");
+	return measuringContext;
+}
+const baselineShifts = /* @__PURE__ */ new Map();
+/**
+* How far below the path the alphabetic baseline sits when Fabric draws with
+* `pathAlign` (the canvas `textBaseline`). SVG has no portable way to say
+* this, so the shift is measured and written as a plain offset.
+*/
+function baselineShift(font, pathAlign) {
+	const baseline = pathAlign === "center" ? "middle" : pathAlign === "ascender" ? "top" : pathAlign === "descender" ? "bottom" : void 0;
+	if (baseline === void 0) return 0;
+	const key = `${baseline}|${font}`;
+	const known = baselineShifts.get(key);
+	if (known !== void 0) return known;
+	const context = measuring();
+	let shift = 0;
+	if (context) {
+		context.font = font;
+		context.textBaseline = baseline;
+		shift = -context.measureText("M").alphabeticBaseline;
+		if (!Number.isFinite(shift)) shift = 0;
+	}
+	baselineShifts.set(key, shift);
+	return shift;
+}
+function guidePath(text) {
+	const path = text.path;
+	if (!path || !path.visible || path.opacity === 0) return "";
+	const pathData = util.joinPath(path.path, DIGITS);
+	const strokeWidth = path.strokeWidth ?? 1;
+	let style = paint("fill", path.fill);
+	if (path.fillRule === "evenodd") style += "fill-rule: evenodd; ";
+	style += paint("stroke", path.stroke);
+	if (path.stroke) style += strokeDetails(path, strokeWidth);
+	return `\t\t<path d="${escapeXml(pathData)}" transform="translate(${num(-path.pathOffset.x)} ${num(-path.pathOffset.y)})" style="${style}" />\n`;
+}
+function fillerDefinitions(text) {
+	const seen = /* @__PURE__ */ new Set();
+	if (isFiller(text.fill)) seen.add(text.fill.id);
+	if (isFiller(text.stroke)) seen.add(text.stroke.id);
+	const path = text.path;
+	let markup = "";
+	const add = (value, owner) => {
+		if (!isFiller(value) || seen.has(value.id)) return;
+		seen.add(value.id);
+		markup += value.toSVG(owner);
+	};
+	if (path && path.visible && path.opacity !== 0) {
+		add(path.fill, path);
+		add(path.stroke, path);
+	}
+	text._textLines.forEach((line, lineIndex) => line.forEach((_, charIndex) => {
+		const style = text.getCompleteStyleDeclaration(lineIndex, charIndex);
+		add(style.fill, text);
+		add(style.stroke, text);
+	}));
+	return markup;
+}
+function decorationRects(text, type) {
+	const aligner = type === "linethrough" ? .5 : type === "overline" ? 1 : 0;
+	let markup = "";
+	text._textLines.forEach((line, lineIndex) => {
+		line.forEach((_, charIndex) => {
+			const style = text.getCompleteStyleDeclaration(lineIndex, charIndex);
+			if (!style[type] || !style.fill) return;
+			const box = text.__charBounds[lineIndex][charIndex];
+			const thickness = text.fontSize * (style.textDecorationThickness ?? 66.667) / 1e3;
+			const size = text.getHeightOfChar(lineIndex, charIndex);
+			const top = text.offsets[type] * size + (style.deltaY ?? 0) - aligner * thickness;
+			const color = style.textDecorationColor || style.fill;
+			markup += `\t\t<rect transform="${frame(box)}" x="${num(-box.kernedWidth / 2)}" y="${num(top)}" width="${num(box.kernedWidth)}" height="${num(thickness)}" style="${paint("fill", color)}" />\n`;
+		});
+	});
+	return markup;
+}
+function textBackgrounds(text) {
+	let markup = "";
+	text._textLines.forEach((line, lineIndex) => {
+		const height = text.getHeightOfLineImpl(lineIndex);
+		line.forEach((_, charIndex) => {
+			const color = text.getCompleteStyleDeclaration(lineIndex, charIndex).textBackgroundColor;
+			if (!color) return;
+			const box = text.__charBounds[lineIndex][charIndex];
+			markup += `\t\t<rect transform="${frame(box)}" x="${num(-box.width / 2)}" y="${num(-height * (1 - text._fontSizeFraction))}" width="${num(box.width)}" height="${num(height)}" style="${paint("fill", color)}" />\n`;
+		});
+	});
+	return markup;
+}
+/** One pass of characters: Fabric fills every character, then strokes every character (or the reverse). */
+function glyphs(text, pass) {
+	const rtl = text.direction === "rtl";
+	const nonScaling = text.strokeUniform ? " vector-effect=\"non-scaling-stroke\"" : "";
+	let markup = "";
+	text._textLines.forEach((line, lineIndex) => {
+		line.forEach((grapheme, charIndex) => {
+			if (grapheme.trim().length === 0) return;
+			const style = text.getCompleteStyleDeclaration(lineIndex, charIndex);
+			const strokeWidth = style.strokeWidth ?? 0;
+			if (pass === "fill" && !style.fill) return;
+			if (pass === "stroke" && (!style.stroke || strokeWidth === 0)) return;
+			const box = text.__charBounds[lineIndex][charIndex];
+			const y = baselineShift(text._getFontDeclaration(style), text.pathAlign) + (style.deltaY ?? 0);
+			const paintStyle = pass === "fill" ? `${paint("fill", style.fill)}stroke: none; ` : `fill: none; ${paint("stroke", style.stroke)}${strokeDetails(text, strokeWidth)}`;
+			const anchor = rtl ? " text-anchor=\"end\"" : "";
+			markup += `\t\t<text xml:space="preserve" transform="${frame(box)}" x="${num(-box.width / 2)}" y="${num(y)}"${anchor}${nonScaling} style="${fontStyle(style)}${paintStyle}white-space: pre;">${escapeXml(grapheme)}</text>\n`;
+		});
+	});
+	return markup;
+}
+function objectStyle(text) {
+	const parts = [];
+	if (text.opacity !== 1) parts.push(`opacity: ${num(text.opacity)};`);
+	if (!text.visible) parts.push("visibility: hidden;");
+	return parts.length > 0 ? ` style="${parts.join(" ")}"` : "";
+}
+function boxBackground(text) {
+	const color = text.backgroundColor;
+	if (!color) return "";
+	const { x, y } = text._getNonTransformedDimensions();
+	return `\t\t<rect x="${num(-x / 2)}" y="${num(-y / 2)}" width="${num(x)}" height="${num(y)}" style="${paint("fill", color)}" />\n`;
+}
+/**
+* Makes sure every character has its place on the path. Fabric measures
+* characters when it first draws them, and not at all when `path` was
+* assigned directly instead of through `set` or the constructor.
+*/
+function layOut(text) {
+	const measured = () => text._textLines.every((line, index) => line.length === 0 || text.__charBounds?.[index]?.[0]?.renderLeft !== void 0);
+	if (!text.path?.segmentsInfo) {
+		text.setPathInfo();
+		text.initDimensions();
+	}
+	text._textLines.forEach((_, index) => {
+		if (text.__charBounds?.[index]?.[0]?.renderLeft === void 0) text.getLineWidth(index);
+	});
+	if (!measured()) {
+		text.setPathInfo();
+		text.initDimensions();
+		text._textLines.forEach((_, index) => text.getLineWidth(index));
+	}
+}
+/** The SVG for one text on a path, in the same order Fabric draws it on the canvas. */
+function textOnPathToSVG(object, reviver) {
+	const text = object;
+	layOut(text);
+	const strokeFirst = text.paintFirst === "stroke";
+	const body = [
+		fillerDefinitions(text),
+		`\t<g${objectStyle(text)}>\n`,
+		boxBackground(text),
+		guidePath(text),
+		textBackgrounds(text),
+		decorationRects(text, "underline"),
+		strokeFirst ? glyphs(text, "stroke") : glyphs(text, "fill"),
+		strokeFirst ? glyphs(text, "fill") : glyphs(text, "stroke"),
+		decorationRects(text, "overline"),
+		decorationRects(text, "linethrough"),
+		"	</g>\n"
+	];
+	return text._createBaseSVGMarkup(body, {
+		reviver,
+		noStyle: true,
+		withShadow: true
+	});
+}
+function findTextOnPath(canvas) {
+	const found = [];
+	walkObjects(canvas.getObjects(), (object) => {
+		if (isTextOnPath(object)) found.push(object);
+	});
+	return found;
+}
+//#endregion
+export { findTextOnPath, isTextOnPath, textOnPathToSVG };

package/dist/fabric/fabric-adapter.cjs

@@ -1,3 +1,5 @@
+const require_page_state = require("./page-state.cjs");
+const require_concurrency = require("../util/concurrency.cjs");
 const require_walk_objects = require("./walk-objects.cjs");
 let fabric = require("fabric");
 //#region src/fabric/fabric-adapter.ts
@@ -24,7 +26,7 @@ function serializeCanvas(canvas, propertiesToInclude) {
 	keepOriginExplicit(canvas.getObjects(), objects);
 	return {
 		version: serialized.version,
-		background: serialized.background,
+		...require_page_state.pickPageFields(serialized),
 		objects
 	};
 }
@@ -61,11 +63,52 @@ const strictReviver = refuseMissingObjects;
 function createObjects(serializedObjects) {
 	return fabric.util.enlivenObjects(serializedObjects, { reviver: strictReviver });
 }
-async function loadIntoCanvas(canvas, content, signal) {
-	const json = { objects: content.objects };
-	if (content.version !== void 0) json.version = content.version;
-	if (content.background !== void 0) json.background = content.background;
-	await canvas.loadFromJSON(json, strictReviver, { signal });
+function abortError() {
+	const error = /* @__PURE__ */ new Error("aborted");
+	error.name = "AbortError";
+	return error;
+}
+/**
+* Loads content like `canvas.loadFromJSON`, but creates the objects a chunk at
+* a time and yields to the browser in between, so big documents do not
+* freeze the page. Like Fabric, every object is created before the canvas is
+* cleared: a failure or cancel leaves the old content in place.
+*/
+async function loadIntoCanvas(canvas, content, { signal, chunkSize = 100, onObjects, beforeSwap }) {
+	const total = content.objects.length;
+	const size = Math.max(1, Math.floor(chunkSize));
+	const created = [];
+	const background = require_page_state.enlivenPage(content, signal);
+	background.catch(() => void 0);
+	try {
+		onObjects?.(0, total);
+		for (let start = 0; start < total; start += size) {
+			if (signal.aborted) throw abortError();
+			const chunk = content.objects.slice(start, start + size);
+			created.push(...await fabric.util.enlivenObjects(chunk, {
+				reviver: strictReviver,
+				signal
+			}));
+			onObjects?.(created.length, total);
+			if (start + size < total) await require_concurrency.yieldToEventLoop();
+		}
+		const enlivenedBackground = await background;
+		if (signal.aborted) throw abortError();
+		beforeSwap?.();
+		const renderOnAddRemove = canvas.renderOnAddRemove;
+		canvas.renderOnAddRemove = false;
+		try {
+			canvas.clear();
+			canvas.add(...created);
+			if (content.version !== void 0) canvas.set({ version: content.version });
+			canvas.set(enlivenedBackground);
+		} finally {
+			canvas.renderOnAddRemove = renderOnAddRemove;
+		}
+	} catch (error) {
+		if (!created.some((object) => object.canvas === canvas)) created.forEach((object) => object.dispose?.());
+		throw error;
+	}
 }
 //#endregion
 exports.createObjects = createObjects;

package/dist/fabric/fabric-adapter.js

@@ -1,3 +1,5 @@
+import { enlivenPage, pickPageFields } from "./page-state.js";
+import { yieldToEventLoop } from "../util/concurrency.js";
 import { childrenOf, walkObjects } from "./walk-objects.js";
 import { util } from "fabric";
 //#region src/fabric/fabric-adapter.ts
@@ -24,7 +26,7 @@ function serializeCanvas(canvas, propertiesToInclude) {
 	keepOriginExplicit(canvas.getObjects(), objects);
 	return {
 		version: serialized.version,
-		background: serialized.background,
+		...pickPageFields(serialized),
 		objects
 	};
 }
@@ -61,11 +63,52 @@ const strictReviver = refuseMissingObjects;
 function createObjects(serializedObjects) {
 	return util.enlivenObjects(serializedObjects, { reviver: strictReviver });
 }
-async function loadIntoCanvas(canvas, content, signal) {
-	const json = { objects: content.objects };
-	if (content.version !== void 0) json.version = content.version;
-	if (content.background !== void 0) json.background = content.background;
-	await canvas.loadFromJSON(json, strictReviver, { signal });
+function abortError() {
+	const error = /* @__PURE__ */ new Error("aborted");
+	error.name = "AbortError";
+	return error;
+}
+/**
+* Loads content like `canvas.loadFromJSON`, but creates the objects a chunk at
+* a time and yields to the browser in between, so big documents do not
+* freeze the page. Like Fabric, every object is created before the canvas is
+* cleared: a failure or cancel leaves the old content in place.
+*/
+async function loadIntoCanvas(canvas, content, { signal, chunkSize = 100, onObjects, beforeSwap }) {
+	const total = content.objects.length;
+	const size = Math.max(1, Math.floor(chunkSize));
+	const created = [];
+	const background = enlivenPage(content, signal);
+	background.catch(() => void 0);
+	try {
+		onObjects?.(0, total);
+		for (let start = 0; start < total; start += size) {
+			if (signal.aborted) throw abortError();
+			const chunk = content.objects.slice(start, start + size);
+			created.push(...await util.enlivenObjects(chunk, {
+				reviver: strictReviver,
+				signal
+			}));
+			onObjects?.(created.length, total);
+			if (start + size < total) await yieldToEventLoop();
+		}
+		const enlivenedBackground = await background;
+		if (signal.aborted) throw abortError();
+		beforeSwap?.();
+		const renderOnAddRemove = canvas.renderOnAddRemove;
+		canvas.renderOnAddRemove = false;
+		try {
+			canvas.clear();
+			canvas.add(...created);
+			if (content.version !== void 0) canvas.set({ version: content.version });
+			canvas.set(enlivenedBackground);
+		} finally {
+			canvas.renderOnAddRemove = renderOnAddRemove;
+		}
+	} catch (error) {
+		if (!created.some((object) => object.canvas === canvas)) created.forEach((object) => object.dispose?.());
+		throw error;
+	}
 }
 //#endregion
 export { createObjects, loadIntoCanvas, serializeCanvas };

package/dist/fabric/object-registry.cjs

@@ -2,7 +2,7 @@ const require_errors = require("../engine/errors.cjs");
 let fabric = require("fabric");
 //#region src/fabric/object-registry.ts
 function createObjectRegistry(initialDefinitions = []) {
-	const extraProperties = /* @__PURE__ */ new Set(["id"]);
+	const extraProperties = /* @__PURE__ */ new Set(["id", "name"]);
 	function register(definition) {
 		const { fabricClass } = definition;
 		if (typeof fabricClass?.type !== "string" || fabricClass.type.length === 0) throw new require_errors.DocumentEngineError("INVALID_CUSTOM_OBJECT", "A custom object class needs a static \"type\" string, for example: static type = \"Sticker\"");

package/dist/fabric/object-registry.js

@@ -2,7 +2,7 @@ import { DocumentEngineError } from "../engine/errors.js";
 import { classRegistry } from "fabric";
 //#region src/fabric/object-registry.ts
 function createObjectRegistry(initialDefinitions = []) {
-	const extraProperties = /* @__PURE__ */ new Set(["id"]);
+	const extraProperties = /* @__PURE__ */ new Set(["id", "name"]);
 	function register(definition) {
 		const { fabricClass } = definition;
 		if (typeof fabricClass?.type !== "string" || fabricClass.type.length === 0) throw new DocumentEngineError("INVALID_CUSTOM_OBJECT", "A custom object class needs a static \"type\" string, for example: static type = \"Sticker\"");

package/dist/fabric/page-state.cjs

@@ -0,0 +1,69 @@
+let fabric = require("fabric");
+//#region src/fabric/page-state.ts
+/** The page fields saved with a document, besides its size. */
+const PAGE_FIELDS = [
+	"background",
+	"backgroundImage",
+	"overlay",
+	"overlayImage",
+	"clipPath"
+];
+/** Copies the page fields that are set from serialized canvas output. */
+function pickPageFields(source) {
+	const picked = {};
+	for (const field of PAGE_FIELDS) if (source[field] !== void 0 && source[field] !== null) picked[field] = source[field];
+	return picked;
+}
+/** The canvas-level objects that can hold images or other objects: background and overlay images and the mask. */
+function pageObjects(page) {
+	const objects = [];
+	for (const field of [
+		"backgroundImage",
+		"overlayImage",
+		"clipPath"
+	]) {
+		const value = page[field];
+		if (typeof value === "object" && value !== null && typeof value.type === "string") objects.push(value);
+	}
+	return objects;
+}
+/**
+* Creates the live values for `canvas.set`: Fabric objects for the images
+* and mask, gradients and patterns for colors. Missing fields become
+* `undefined`, which clears them on the canvas.
+*/
+function enlivenPage(page, signal) {
+	return fabric.util.enlivenObjectEnlivables({
+		backgroundColor: page.background,
+		backgroundImage: page.backgroundImage,
+		overlayColor: page.overlay,
+		overlayImage: page.overlayImage,
+		clipPath: page.clipPath
+	}, signal ? { signal } : {});
+}
+/** Applies a page state: the size first, then the enlivened fields. */
+async function applyPage(canvas, page) {
+	const live = await enlivenPage(page);
+	if (canvas.getWidth() !== page.width || canvas.getHeight() !== page.height) canvas.setDimensions({
+		width: page.width,
+		height: page.height
+	});
+	canvas.set(live);
+	canvas.requestRenderAll();
+}
+/**
+* Every top-level object a document holds: the objects on the page, then its
+* background image, overlay image and mask. Asset checks, address checks and
+* type checks walk this list, so they cover the page as well.
+*/
+function documentObjects(document) {
+	const page = document.canvas ? pageObjects(document.canvas) : [];
+	return page.length === 0 ? [...document.objects] : [...document.objects, ...page];
+}
+//#endregion
+exports.PAGE_FIELDS = PAGE_FIELDS;
+exports.applyPage = applyPage;
+exports.documentObjects = documentObjects;
+exports.enlivenPage = enlivenPage;
+exports.pageObjects = pageObjects;
+exports.pickPageFields = pickPageFields;

package/dist/fabric/page-state.js

@@ -0,0 +1,64 @@
+import { util } from "fabric";
+//#region src/fabric/page-state.ts
+/** The page fields saved with a document, besides its size. */
+const PAGE_FIELDS = [
+	"background",
+	"backgroundImage",
+	"overlay",
+	"overlayImage",
+	"clipPath"
+];
+/** Copies the page fields that are set from serialized canvas output. */
+function pickPageFields(source) {
+	const picked = {};
+	for (const field of PAGE_FIELDS) if (source[field] !== void 0 && source[field] !== null) picked[field] = source[field];
+	return picked;
+}
+/** The canvas-level objects that can hold images or other objects: background and overlay images and the mask. */
+function pageObjects(page) {
+	const objects = [];
+	for (const field of [
+		"backgroundImage",
+		"overlayImage",
+		"clipPath"
+	]) {
+		const value = page[field];
+		if (typeof value === "object" && value !== null && typeof value.type === "string") objects.push(value);
+	}
+	return objects;
+}
+/**
+* Creates the live values for `canvas.set`: Fabric objects for the images
+* and mask, gradients and patterns for colors. Missing fields become
+* `undefined`, which clears them on the canvas.
+*/
+function enlivenPage(page, signal) {
+	return util.enlivenObjectEnlivables({
+		backgroundColor: page.background,
+		backgroundImage: page.backgroundImage,
+		overlayColor: page.overlay,
+		overlayImage: page.overlayImage,
+		clipPath: page.clipPath
+	}, signal ? { signal } : {});
+}
+/** Applies a page state: the size first, then the enlivened fields. */
+async function applyPage(canvas, page) {
+	const live = await enlivenPage(page);
+	if (canvas.getWidth() !== page.width || canvas.getHeight() !== page.height) canvas.setDimensions({
+		width: page.width,
+		height: page.height
+	});
+	canvas.set(live);
+	canvas.requestRenderAll();
+}
+/**
+* Every top-level object a document holds: the objects on the page, then its
+* background image, overlay image and mask. Asset checks, address checks and
+* type checks walk this list, so they cover the page as well.
+*/
+function documentObjects(document) {
+	const page = document.canvas ? pageObjects(document.canvas) : [];
+	return page.length === 0 ? [...document.objects] : [...document.objects, ...page];
+}
+//#endregion
+export { PAGE_FIELDS, applyPage, documentObjects, enlivenPage, pageObjects, pickPageFields };

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 };