fabricjs-document-engine 1.1.0 → 1.2.0

package/README.md

@@ -593,6 +593,36 @@ getLayers(engine); // [{ id, type, name, index, visible, locked }], top first
 
 The engine saves each object's `name`, so a layers panel keeps its labels. In React, `useLayers(engine)` from `fabricjs-document-engine/react` returns the same list and updates on every change.
 
+## Edits that are never lost
+
+These guarantees hold however the user and your code interleave work:
+
+```ts
+// Page settings are one undo step and count as unsaved work
+engine.setPage({ width: 1080, height: 1080, background: '#fff8e7' }, 'Square post');
+
+// All or nothing: a failure leaves the canvas as it was
+await engine.transaction('Apply template', async () => {
+  await addTemplateObjects(engine.canvas);
+}, { rollback: true });
+
+// A load refuses to overwrite edits made while it ran
+try {
+  await engine.load('poster-42');
+} catch (error) {
+  if (isDocumentEngineError(error) && error.code === 'LOAD_CONFLICT') askBeforeReplacing();
+}
+```
+
+- **The whole page is saved.** Background images, overlays and a mask on the canvas (`canvas.backgroundImage`, `overlayImage`, `clipPath`) are saved, reopened, checked for missing images and kept in versions and recovery copies.
+- **Page changes are undoable.** `setPage` changes the size, background, overlay or mask as one undo step, and changes made to the canvas inside a `transaction` count too.
+- **Typing counts at once.** Each keystroke marks the document unsaved and feeds autosave and recovery, while the whole edit stays one undo step.
+- **Loads keep edits.** If the canvas is edited while a document loads, the load stops with `LOAD_CONFLICT` and the edits stay, unless you pass `discardUnsavedChanges: true`.
+- **Async work stays in its document.** An SVG import, image replacement or paste that finishes after another document was opened is dropped with `DOCUMENT_CHANGED`, instead of landing in the wrong document.
+- **Each tab has its own recovery copy.** Two tabs editing the same document no longer overwrite each other's copy, and a save removes only the copy it covers.
+- **Sizes are checked before drawing.** Pages, exports and images over the browser's canvas limits are refused before any canvas is made, so a huge file cannot crash the tab. Limits are set with `limits`.
+- **Rollback when you want it.** `transaction(label, work, { rollback: true })` undoes everything `work` changed when it fails.
+
 ## Document format
 
 ```ts
@@ -603,7 +633,15 @@ interface FabricDocument {
   updatedAt: string;
   revision?: number;
   fabricVersion?: string;
-  canvas: { width: number; height: number; background?: unknown };
+  canvas: {
+    width: number;
+    height: number;
+    background?: unknown;       // color, gradient or pattern
+    backgroundImage?: object;   // Fabric image behind every object
+    overlay?: unknown;          // color drawn over every object
+    overlayImage?: object;      // Fabric image over every object
+    clipPath?: object;          // mask for the whole canvas
+  };
   objects: SerializedFabricObject[];
   assets?: {
     images: Array<{ url: string; objectIds: string[] }>;

package/README.zh-CN.md

@@ -593,6 +593,36 @@ getLayers(engine); // [{ id, type, name, index, visible, locked }], top first
 
 引擎会保存每个对象的 `name`，所以图层面板的名称不会丢。在 React 中，`fabricjs-document-engine/react` 的 `useLayers(engine)` 返回同样的列表，并在每次改动后更新。
 
+## 不会丢失的修改
+
+无论用户的操作和你的代码怎样交错，下面这些保证都成立：
+
+```ts
+// Page settings are one undo step and count as unsaved work
+engine.setPage({ width: 1080, height: 1080, background: '#fff8e7' }, 'Square post');
+
+// All or nothing: a failure leaves the canvas as it was
+await engine.transaction('Apply template', async () => {
+  await addTemplateObjects(engine.canvas);
+}, { rollback: true });
+
+// A load refuses to overwrite edits made while it ran
+try {
+  await engine.load('poster-42');
+} catch (error) {
+  if (isDocumentEngineError(error) && error.code === 'LOAD_CONFLICT') askBeforeReplacing();
+}
+```
+
+- **整个页面都会保存。** 画布上的背景图片、叠加层和蒙版（`canvas.backgroundImage`、`overlayImage`、`clipPath`）会被保存、重新打开、检查缺失图片，也会进入版本和恢复副本。
+- **页面修改可以撤销。** `setPage` 修改尺寸、背景、叠加层或蒙版，只算一步撤销；在 `transaction` 里直接修改画布也会被记录。
+- **输入立即算作修改。** 每次按键都会把文档标记为未保存，并触发自动保存和恢复副本，而整次编辑仍然只算一步撤销。
+- **加载不会覆盖修改。** 如果文档加载期间画布被修改，加载会以 `LOAD_CONFLICT` 停止并保留这些修改，除非传入 `discardUnsavedChanges: true`。
+- **异步操作留在原来的文档里。** 在打开另一份文档之后才完成的 SVG 导入、图片替换或粘贴会以 `DOCUMENT_CHANGED` 被丢弃，而不会落到错误的文档里。
+- **每个标签页有自己的恢复副本。** 两个标签页编辑同一份文档时不再互相覆盖副本，保存时只删除它覆盖的那一份。
+- **绘制前先检查尺寸。** 超过浏览器画布限制的页面、导出和图片，会在创建任何画布之前被拒绝，大文件不会让标签页崩溃。限制用 `limits` 设置。
+- **需要时可以回滚。** `transaction(label, work, { rollback: true })` 在 `work` 失败时撤回它做的所有修改。
+
 ## 文档格式
 
 ```ts
@@ -603,7 +633,15 @@ interface FabricDocument {
   updatedAt: string;
   revision?: number;
   fabricVersion?: string;
-  canvas: { width: number; height: number; background?: unknown };
+  canvas: {
+    width: number;
+    height: number;
+    background?: unknown;       // color, gradient or pattern
+    backgroundImage?: object;   // Fabric image behind every object
+    overlay?: unknown;          // color drawn over every object
+    overlayImage?: object;      // Fabric image over every object
+    clipPath?: object;          // mask for the whole canvas
+  };
   objects: SerializedFabricObject[];
   assets?: {
     images: Array<{ url: string; objectIds: string[] }>;

package/dist/assets/asset-pipeline.cjs

@@ -1,5 +1,6 @@
 const require_asset_references = require("./asset-references.cjs");
 const require_asset_manifest = require("./asset-manifest.cjs");
+const require_page_state = require("../fabric/page-state.cjs");
 const require_errors = require("../engine/errors.cjs");
 const require_font_check = require("./font-check.cjs");
 const require_content_limits = require("../security/content-limits.cjs");
@@ -8,7 +9,8 @@ const require_image_check = require("./image-check.cjs");
 function imageCheckOptions(options) {
 	return {
 		timeoutMs: options.imageTimeout,
-		concurrency: options.maxConcurrentImages
+		concurrency: options.maxConcurrentImages,
+		maxPixels: options.maxImagePixels
 	};
 }
 function cloneDocument(document) {
@@ -33,7 +35,7 @@ function pointTo(references, url) {
 	}
 }
 async function rewriteUrls(document, rewrite) {
-	const groups = groupByUrl(require_asset_references.findImageReferences(document.objects));
+	const groups = groupByUrl(require_asset_references.findImageReferences(require_page_state.documentObjects(document)));
 	await Promise.all([...groups].map(async ([url, references]) => {
 		const next = await rewrite(url, references);
 		if (next !== url) pointTo(references, next);
@@ -41,7 +43,7 @@ async function rewriteUrls(document, rewrite) {
 }
 function crossOriginWarnings(document) {
 	const warnings = [];
-	for (const [url, references] of groupByUrl(require_asset_references.findImageReferences(document.objects))) {
+	for (const [url, references] of groupByUrl(require_asset_references.findImageReferences(require_page_state.documentObjects(document)))) {
 		if (!require_image_check.isCrossOriginUrl(url) || references.every((reference) => reference.crossOrigin)) continue;
 		warnings.push({
 			code: "IMAGE_CROSS_ORIGIN",
@@ -61,8 +63,8 @@ function fontWarnings(fonts) {
 	}));
 }
 async function inspectAssets(document, options, signal, onImageProgress) {
-	const manifest = require_asset_manifest.buildAssetManifest(document.objects);
-	const uniqueImages = [...groupByUrl(require_asset_references.findImageReferences(document.objects).filter((reference) => !require_asset_manifest.isEmbeddedUrl(reference.url)))].map(([url, references]) => ({
+	const manifest = require_asset_manifest.buildAssetManifest(require_page_state.documentObjects(document));
+	const uniqueImages = [...groupByUrl(require_asset_references.findImageReferences(require_page_state.documentObjects(document)).filter((reference) => !require_asset_manifest.isEmbeddedUrl(reference.url)))].map(([url, references]) => ({
 		url,
 		crossOrigin: references[0].crossOrigin
 	}));
@@ -98,7 +100,7 @@ async function replaceMissingImages(document, missingImages, options, signal) {
 	})), signal, imageCheckOptions(options))).map((failure) => failure.url));
 	const stillMissing = [];
 	const warnings = [];
-	const groups = groupByUrl(require_asset_references.findImageReferences(document.objects));
+	const groups = groupByUrl(require_asset_references.findImageReferences(require_page_state.documentObjects(document)));
 	for (const image of missingImages) {
 		const replacement = replacements.get(image.url);
 		if (replacement === void 0 || brokenReplacements.has(replacement)) {
@@ -122,7 +124,7 @@ async function prepareAssetsForLoad(input, options, signal, isAllowedUrl, onImag
 	const document = cloneDocument(input);
 	const { resolveUrl } = options;
 	if (resolveUrl) await rewriteUrls(document, async (url) => resolveUrl(url));
-	require_content_limits.refuseUnsafeImageUrls(document.objects, isAllowedUrl);
+	require_content_limits.refuseUnsafeImageUrls(require_page_state.documentObjects(document), isAllowedUrl);
 	const report = await inspectAssets(document, options, signal, onImageProgress);
 	if (options.requireFonts && report.unavailableFonts.length > 0) {
 		const families = report.unavailableFonts.map((font) => font.family).join(", ");
@@ -176,7 +178,7 @@ async function prepareAssetsForSave(document, options, uploadedUrls) {
 		}
 		return uploading;
 	});
-	document.assets = require_asset_manifest.buildAssetManifest(document.objects);
+	document.assets = require_asset_manifest.buildAssetManifest(require_page_state.documentObjects(document));
 	return {
 		document,
 		warnings

package/dist/assets/asset-pipeline.d.cts

@@ -1,7 +1,7 @@
 import { AssetManifest, FontAsset, ImageAsset } from "./asset-manifest.cjs";
 import { FontLoader } from "./font-check.cjs";
 //#region src/assets/asset-pipeline.d.ts
-export type AssetWarningCode = "IMAGE_CROSS_ORIGIN" | "FONT_UNAVAILABLE" | "ASSET_NOT_PORTABLE" | "IMAGE_REPLACED" | "IMAGE_NOT_EMBEDDED" | "FONT_NOT_EMBEDDED" | "TEXT_ON_PATH_APPROXIMATED";
+export type AssetWarningCode = "IMAGE_CROSS_ORIGIN" | "FONT_UNAVAILABLE" | "ASSET_NOT_PORTABLE" | "IMAGE_REPLACED" | "IMAGE_NOT_EMBEDDED" | "FONT_NOT_EMBEDDED" | "TEXT_ON_PATH_APPROXIMATED" | "CLIP_PATH_RASTERIZED";
 export interface AssetWarning {
   code: AssetWarningCode;
   message: string;

package/dist/assets/asset-pipeline.d.ts

@@ -1,7 +1,7 @@
 import { AssetManifest, FontAsset, ImageAsset } from "./asset-manifest.js";
 import { FontLoader } from "./font-check.js";
 //#region src/assets/asset-pipeline.d.ts
-export type AssetWarningCode = "IMAGE_CROSS_ORIGIN" | "FONT_UNAVAILABLE" | "ASSET_NOT_PORTABLE" | "IMAGE_REPLACED" | "IMAGE_NOT_EMBEDDED" | "FONT_NOT_EMBEDDED" | "TEXT_ON_PATH_APPROXIMATED";
+export type AssetWarningCode = "IMAGE_CROSS_ORIGIN" | "FONT_UNAVAILABLE" | "ASSET_NOT_PORTABLE" | "IMAGE_REPLACED" | "IMAGE_NOT_EMBEDDED" | "FONT_NOT_EMBEDDED" | "TEXT_ON_PATH_APPROXIMATED" | "CLIP_PATH_RASTERIZED";
 export interface AssetWarning {
   code: AssetWarningCode;
   message: string;

package/dist/assets/asset-pipeline.js

@@ -1,5 +1,6 @@
 import { findImageReferences } from "./asset-references.js";
 import { buildAssetManifest, isEmbeddedUrl } from "./asset-manifest.js";
+import { documentObjects } from "../fabric/page-state.js";
 import { DocumentEngineError, isDocumentEngineError } from "../engine/errors.js";
 import { findUnavailableFonts } from "./font-check.js";
 import { refuseUnsafeImageUrls } from "../security/content-limits.js";
@@ -8,7 +9,8 @@ import { findMissingImages, isCrossOriginUrl, isPortableUrl } from "./image-chec
 function imageCheckOptions(options) {
 	return {
 		timeoutMs: options.imageTimeout,
-		concurrency: options.maxConcurrentImages
+		concurrency: options.maxConcurrentImages,
+		maxPixels: options.maxImagePixels
 	};
 }
 function cloneDocument(document) {
@@ -33,7 +35,7 @@ function pointTo(references, url) {
 	}
 }
 async function rewriteUrls(document, rewrite) {
-	const groups = groupByUrl(findImageReferences(document.objects));
+	const groups = groupByUrl(findImageReferences(documentObjects(document)));
 	await Promise.all([...groups].map(async ([url, references]) => {
 		const next = await rewrite(url, references);
 		if (next !== url) pointTo(references, next);
@@ -41,7 +43,7 @@ async function rewriteUrls(document, rewrite) {
 }
 function crossOriginWarnings(document) {
 	const warnings = [];
-	for (const [url, references] of groupByUrl(findImageReferences(document.objects))) {
+	for (const [url, references] of groupByUrl(findImageReferences(documentObjects(document)))) {
 		if (!isCrossOriginUrl(url) || references.every((reference) => reference.crossOrigin)) continue;
 		warnings.push({
 			code: "IMAGE_CROSS_ORIGIN",
@@ -61,8 +63,8 @@ function fontWarnings(fonts) {
 	}));
 }
 async function inspectAssets(document, options, signal, onImageProgress) {
-	const manifest = buildAssetManifest(document.objects);
-	const uniqueImages = [...groupByUrl(findImageReferences(document.objects).filter((reference) => !isEmbeddedUrl(reference.url)))].map(([url, references]) => ({
+	const manifest = buildAssetManifest(documentObjects(document));
+	const uniqueImages = [...groupByUrl(findImageReferences(documentObjects(document)).filter((reference) => !isEmbeddedUrl(reference.url)))].map(([url, references]) => ({
 		url,
 		crossOrigin: references[0].crossOrigin
 	}));
@@ -98,7 +100,7 @@ async function replaceMissingImages(document, missingImages, options, signal) {
 	})), signal, imageCheckOptions(options))).map((failure) => failure.url));
 	const stillMissing = [];
 	const warnings = [];
-	const groups = groupByUrl(findImageReferences(document.objects));
+	const groups = groupByUrl(findImageReferences(documentObjects(document)));
 	for (const image of missingImages) {
 		const replacement = replacements.get(image.url);
 		if (replacement === void 0 || brokenReplacements.has(replacement)) {
@@ -122,7 +124,7 @@ async function prepareAssetsForLoad(input, options, signal, isAllowedUrl, onImag
 	const document = cloneDocument(input);
 	const { resolveUrl } = options;
 	if (resolveUrl) await rewriteUrls(document, async (url) => resolveUrl(url));
-	refuseUnsafeImageUrls(document.objects, isAllowedUrl);
+	refuseUnsafeImageUrls(documentObjects(document), isAllowedUrl);
 	const report = await inspectAssets(document, options, signal, onImageProgress);
 	if (options.requireFonts && report.unavailableFonts.length > 0) {
 		const families = report.unavailableFonts.map((font) => font.family).join(", ");
@@ -176,7 +178,7 @@ async function prepareAssetsForSave(document, options, uploadedUrls) {
 		}
 		return uploading;
 	});
-	document.assets = buildAssetManifest(document.objects);
+	document.assets = buildAssetManifest(documentObjects(document));
 	return {
 		document,
 		warnings

package/dist/assets/image-check.cjs

@@ -73,7 +73,7 @@ async function explainFailure(image, signal) {
 	}
 	return failure(url, "NETWORK", "could not be reached. Check the URL and the network connection.");
 }
-async function checkImage(image, signal, timeoutMs) {
+async function checkImage(image, signal, timeoutMs, maxPixels) {
 	const attempt = new AbortController();
 	let timedOut = false;
 	const stop = () => attempt.abort();
@@ -84,10 +84,11 @@ async function checkImage(image, signal, timeoutMs) {
 	}, timeoutMs) : void 0;
 	try {
 		if (signal.aborted) attempt.abort();
-		await fabric.util.loadImage(image.url, {
+		const element = await fabric.util.loadImage(image.url, {
 			signal: attempt.signal,
 			crossOrigin: image.crossOrigin ?? null
 		});
+		if (element.naturalWidth * element.naturalHeight > maxPixels) return failure(image.url, "TOO_LARGE", `is ${element.naturalWidth} × ${element.naturalHeight} pixels, more than the limit of ${maxPixels}`);
 		return;
 	} catch {
 		if (timedOut) return failure(image.url, "TIMEOUT", `did not finish loading within ${timeoutMs} ms`, { timeoutMs });
@@ -104,7 +105,7 @@ async function findMissingImages(images, signal, options = {}) {
 	let done = 0;
 	options.onProgress?.(0, images.length);
 	return (await require_concurrency.mapWithConcurrency(images, options.concurrency ?? 6, async (image) => {
-		const result = await checkImage(image, signal, timeoutMs);
+		const result = await checkImage(image, signal, timeoutMs, options.maxPixels ?? Infinity);
 		done += 1;
 		options.onProgress?.(done, images.length);
 		return result;

package/dist/assets/image-check.d.cts

@@ -4,7 +4,7 @@
  * a server on another site that sends no CORS headers looks the same as a
  * network failure unless the image asked for CORS.
  */
-export type ImageFailureReason = "NOT_FOUND" | "HTTP_ERROR" | "CORS" | "NETWORK" | "TIMEOUT" | "DECODE" | "ABORTED";
+export type ImageFailureReason = "NOT_FOUND" | "HTTP_ERROR" | "CORS" | "NETWORK" | "TIMEOUT" | "DECODE" | "ABORTED" | "TOO_LARGE";
 export interface ImageLoadFailure {
   url: string;
   reason: ImageFailureReason;

package/dist/assets/image-check.d.ts

@@ -4,7 +4,7 @@
  * a server on another site that sends no CORS headers looks the same as a
  * network failure unless the image asked for CORS.
  */
-export type ImageFailureReason = "NOT_FOUND" | "HTTP_ERROR" | "CORS" | "NETWORK" | "TIMEOUT" | "DECODE" | "ABORTED";
+export type ImageFailureReason = "NOT_FOUND" | "HTTP_ERROR" | "CORS" | "NETWORK" | "TIMEOUT" | "DECODE" | "ABORTED" | "TOO_LARGE";
 export interface ImageLoadFailure {
   url: string;
   reason: ImageFailureReason;

package/dist/assets/image-check.js

@@ -73,7 +73,7 @@ async function explainFailure(image, signal) {
 	}
 	return failure(url, "NETWORK", "could not be reached. Check the URL and the network connection.");
 }
-async function checkImage(image, signal, timeoutMs) {
+async function checkImage(image, signal, timeoutMs, maxPixels) {
 	const attempt = new AbortController();
 	let timedOut = false;
 	const stop = () => attempt.abort();
@@ -84,10 +84,11 @@ async function checkImage(image, signal, timeoutMs) {
 	}, timeoutMs) : void 0;
 	try {
 		if (signal.aborted) attempt.abort();
-		await util.loadImage(image.url, {
+		const element = await util.loadImage(image.url, {
 			signal: attempt.signal,
 			crossOrigin: image.crossOrigin ?? null
 		});
+		if (element.naturalWidth * element.naturalHeight > maxPixels) return failure(image.url, "TOO_LARGE", `is ${element.naturalWidth} × ${element.naturalHeight} pixels, more than the limit of ${maxPixels}`);
 		return;
 	} catch {
 		if (timedOut) return failure(image.url, "TIMEOUT", `did not finish loading within ${timeoutMs} ms`, { timeoutMs });
@@ -104,7 +105,7 @@ async function findMissingImages(images, signal, options = {}) {
 	let done = 0;
 	options.onProgress?.(0, images.length);
 	return (await mapWithConcurrency(images, options.concurrency ?? 6, async (image) => {
-		const result = await checkImage(image, signal, timeoutMs);
+		const result = await checkImage(image, signal, timeoutMs, options.maxPixels ?? Infinity);
 		done += 1;
 		options.onProgress?.(done, images.length);
 		return result;

package/dist/commands/clipboard.cjs

@@ -111,7 +111,12 @@ function createClipboard(engine, options = {}) {
 			const distance = offset * pastes;
 			const serialized = content.objects.map((object) => moved(withoutIds(object), distance));
 			refuseUnknownTypes(serialized);
+			const startedIn = target.getDocumentInfo().session;
 			const created = await require_fabric_adapter.createObjects(clone(serialized));
+			if (target.getDocumentInfo().session !== startedIn) {
+				created.forEach((object) => object.dispose?.());
+				throw new require_errors.DocumentEngineError("DOCUMENT_CHANGED", "The paste was dropped because another document was opened while it ran");
+			}
 			target.transaction(created.length === 1 ? "Paste" : `Paste ${created.length} objects`, () => {
 				target.canvas.add(...created);
 			});

package/dist/commands/clipboard.js

@@ -111,7 +111,12 @@ function createClipboard(engine, options = {}) {
 			const distance = offset * pastes;
 			const serialized = content.objects.map((object) => moved(withoutIds(object), distance));
 			refuseUnknownTypes(serialized);
+			const startedIn = target.getDocumentInfo().session;
 			const created = await createObjects(clone(serialized));
+			if (target.getDocumentInfo().session !== startedIn) {
+				created.forEach((object) => object.dispose?.());
+				throw new DocumentEngineError("DOCUMENT_CHANGED", "The paste was dropped because another document was opened while it ran");
+			}
 			target.transaction(created.length === 1 ? "Paste" : `Paste ${created.length} objects`, () => {
 				target.canvas.add(...created);
 			});

package/dist/document/document-format.d.cts

@@ -11,7 +11,16 @@ export interface SerializedFabricObject {
 export interface DocumentCanvas {
   width: number;
   height: number;
+  /** A color, gradient or pattern behind everything. */
   background?: unknown;
+  /** A Fabric image drawn behind every object. */
+  backgroundImage?: SerializedFabricObject;
+  /** A color, gradient or pattern drawn over every object. */
+  overlay?: unknown;
+  /** A Fabric image drawn over every object. */
+  overlayImage?: SerializedFabricObject;
+  /** A Fabric object that clips the whole canvas. */
+  clipPath?: SerializedFabricObject;
 }
 export interface FabricDocument {
   schemaVersion: number;
@@ -30,5 +39,11 @@ export interface DocumentInfo {
   createdAt: string;
   updatedAt: string;
   metadata: Record<string, unknown>;
+  /**
+   * Goes up each time the canvas shows a different document: a load, a new
+   * document or a restore. Async work started under one session must not
+   * change the canvas in another. Set by `getDocumentInfo()`.
+   */
+  session?: number;
 }
 //#endregion

package/dist/document/document-format.d.ts

@@ -11,7 +11,16 @@ export interface SerializedFabricObject {
 export interface DocumentCanvas {
   width: number;
   height: number;
+  /** A color, gradient or pattern behind everything. */
   background?: unknown;
+  /** A Fabric image drawn behind every object. */
+  backgroundImage?: SerializedFabricObject;
+  /** A color, gradient or pattern drawn over every object. */
+  overlay?: unknown;
+  /** A Fabric image drawn over every object. */
+  overlayImage?: SerializedFabricObject;
+  /** A Fabric object that clips the whole canvas. */
+  clipPath?: SerializedFabricObject;
 }
 export interface FabricDocument {
   schemaVersion: number;
@@ -30,5 +39,11 @@ export interface DocumentInfo {
   createdAt: string;
   updatedAt: string;
   metadata: Record<string, unknown>;
+  /**
+   * Goes up each time the canvas shows a different document: a load, a new
+   * document or a restore. Async work started under one session must not
+   * change the canvas in another. Set by `getDocumentInfo()`.
+   */
+  session?: number;
 }
 //#endregion

package/dist/document/validate-document.cjs

@@ -67,6 +67,14 @@ function validateDocument(value) {
 	else {
 		if (!isPositiveNumber(value.canvas.width)) issues.push(invalid("canvas.width", "must be a positive number"));
 		if (!isPositiveNumber(value.canvas.height)) issues.push(invalid("canvas.height", "must be a positive number"));
+		for (const field of [
+			"backgroundImage",
+			"overlayImage",
+			"clipPath"
+		]) {
+			const pageObject = value.canvas[field];
+			if (pageObject !== void 0 && pageObject !== null) validateObjectList([pageObject], `canvas.${field}`, issues);
+		}
 	}
 	validateObjectList(value.objects, "objects", issues);
 	return issues;

package/dist/document/validate-document.js

@@ -67,6 +67,14 @@ function validateDocument(value) {
 	else {
 		if (!isPositiveNumber(value.canvas.width)) issues.push(invalid("canvas.width", "must be a positive number"));
 		if (!isPositiveNumber(value.canvas.height)) issues.push(invalid("canvas.height", "must be a positive number"));
+		for (const field of [
+			"backgroundImage",
+			"overlayImage",
+			"clipPath"
+		]) {
+			const pageObject = value.canvas[field];
+			if (pageObject !== void 0 && pageObject !== null) validateObjectList([pageObject], `canvas.${field}`, issues);
+		}
 	}
 	validateObjectList(value.objects, "objects", issues);
 	return issues;