fabricjs-document-engine 1.1.0 → 1.2.0

package/dist/security/content-limits.cjs

@@ -1,6 +1,23 @@
 const require_asset_references = require("../assets/asset-references.cjs");
 const require_errors = require("../engine/errors.cjs");
 //#region src/security/content-limits.ts
+const DEFAULT_MAX_CANVAS_SIDE = 16384;
+const DEFAULT_MAX_CANVAS_PIXELS = 67108864;
+const DEFAULT_MAX_IMAGE_PIXELS = 67108864;
+const DEFAULT_MAX_DOCUMENT_LENGTH = 1e8;
+/**
+* Why a drawing surface of this size is refused, or undefined when it fits.
+* Pure arithmetic, run before any canvas is created: a canvas over the
+* browser's limit fails silently or crashes the tab.
+*/
+function canvasSizeProblem(width, height, limits = {}) {
+	const maxSide = limits.maxCanvasSide ?? 16384;
+	const maxPixels = limits.maxCanvasPixels ?? 67108864;
+	const w = Math.ceil(width);
+	const h = Math.ceil(height);
+	if (w > maxSide || h > maxSide) return `${w} × ${h} pixels is larger than the ${maxSide}-pixel limit per side`;
+	if (w * h > maxPixels) return `${w} × ${h} pixels is ${w * h} pixels, more than the limit of ${maxPixels}`;
+}
 const dangerousKeys = /* @__PURE__ */ new Set([
 	"__proto__",
 	"constructor",
@@ -14,8 +31,18 @@ function isSafeImageUrl(url) {
 	if (scheme === "data") return trimmed.startsWith("data:image/");
 	return false;
 }
-function withoutDangerousKeys(value) {
-	return JSON.parse(JSON.stringify(value), (key, nested) => dangerousKeys.has(key) ? void 0 : nested);
+function withoutDangerousKeys(json) {
+	return JSON.parse(json, (key, nested) => dangerousKeys.has(key) ? void 0 : nested);
+}
+function pageSize(document) {
+	const canvas = document.canvas;
+	return typeof canvas === "object" && canvas !== null ? {
+		width: canvas.width,
+		height: canvas.height
+	} : {
+		width: document.width,
+		height: document.height
+	};
 }
 function deepestNesting(value) {
 	let deepest = 0;
@@ -56,8 +83,16 @@ function secureDocument(input, limits = {}) {
 	if (typeof input !== "object" || input === null) return input;
 	const maxDepth = limits.maxDepth ?? 100;
 	const maxObjects = limits.maxObjects ?? 5e4;
-	const document = withoutDangerousKeys(input);
+	const json = JSON.stringify(input);
+	const maxLength = limits.maxDocumentLength ?? 1e8;
+	if (json.length > maxLength) refuseWhenUnsafe([unsafe("", `the document is ${json.length} characters of JSON, the limit is ${maxLength}`)]);
+	const document = withoutDangerousKeys(json);
 	const issues = [];
+	const { width, height } = pageSize(document);
+	if (typeof width === "number" && typeof height === "number") {
+		const problem = canvasSizeProblem(width, height, limits);
+		if (problem) issues.push(unsafe("canvas", `the page is ${problem}`));
+	}
 	const depth = deepestNesting(document);
 	if (depth > maxDepth) issues.push(unsafe("", `the document is nested ${depth} levels deep, the limit is ${maxDepth}`));
 	if (Array.isArray(document.objects) && issues.length === 0) {
@@ -81,6 +116,11 @@ function refuseUnsafeImageUrls(objects, isAllowedUrl = isSafeImageUrl) {
 	refuseWhenUnsafe(issues);
 }
 //#endregion
+exports.DEFAULT_MAX_CANVAS_PIXELS = DEFAULT_MAX_CANVAS_PIXELS;
+exports.DEFAULT_MAX_CANVAS_SIDE = DEFAULT_MAX_CANVAS_SIDE;
+exports.DEFAULT_MAX_DOCUMENT_LENGTH = DEFAULT_MAX_DOCUMENT_LENGTH;
+exports.DEFAULT_MAX_IMAGE_PIXELS = DEFAULT_MAX_IMAGE_PIXELS;
+exports.canvasSizeProblem = canvasSizeProblem;
 exports.isSafeImageUrl = isSafeImageUrl;
 exports.refuseUnsafeImageUrls = refuseUnsafeImageUrls;
 exports.secureDocument = secureDocument;

package/dist/security/content-limits.d.cts

@@ -4,6 +4,14 @@ export interface ContentLimits {
   maxObjects?: number;
   maxDepth?: number;
   isAllowedUrl?: (url: string) => boolean;
+  /** Longest side of the page or of an export, in pixels. Default 16,384. */
+  maxCanvasSide?: number;
+  /** Largest page or export area, in pixels. Default 67,108,864 (8,192 × 8,192, what iOS 18 Safari can draw). */
+  maxCanvasPixels?: number;
+  /** Largest decoded image, in pixels. Default 67,108,864. */
+  maxImagePixels?: number;
+  /** Longest document, in characters of JSON. Default 100,000,000. */
+  maxDocumentLength?: number;
 }
 export declare function isSafeImageUrl(url: string): boolean;
 export declare function secureDocument(input: unknown, limits?: ContentLimits): unknown;

package/dist/security/content-limits.d.ts

@@ -4,6 +4,14 @@ export interface ContentLimits {
   maxObjects?: number;
   maxDepth?: number;
   isAllowedUrl?: (url: string) => boolean;
+  /** Longest side of the page or of an export, in pixels. Default 16,384. */
+  maxCanvasSide?: number;
+  /** Largest page or export area, in pixels. Default 67,108,864 (8,192 × 8,192, what iOS 18 Safari can draw). */
+  maxCanvasPixels?: number;
+  /** Largest decoded image, in pixels. Default 67,108,864. */
+  maxImagePixels?: number;
+  /** Longest document, in characters of JSON. Default 100,000,000. */
+  maxDocumentLength?: number;
 }
 export declare function isSafeImageUrl(url: string): boolean;
 export declare function secureDocument(input: unknown, limits?: ContentLimits): unknown;

package/dist/security/content-limits.js

@@ -1,6 +1,23 @@
 import { findImageReferences } from "../assets/asset-references.js";
 import { DocumentEngineError } from "../engine/errors.js";
 //#region src/security/content-limits.ts
+const DEFAULT_MAX_CANVAS_SIDE = 16384;
+const DEFAULT_MAX_CANVAS_PIXELS = 67108864;
+const DEFAULT_MAX_IMAGE_PIXELS = 67108864;
+const DEFAULT_MAX_DOCUMENT_LENGTH = 1e8;
+/**
+* Why a drawing surface of this size is refused, or undefined when it fits.
+* Pure arithmetic, run before any canvas is created: a canvas over the
+* browser's limit fails silently or crashes the tab.
+*/
+function canvasSizeProblem(width, height, limits = {}) {
+	const maxSide = limits.maxCanvasSide ?? 16384;
+	const maxPixels = limits.maxCanvasPixels ?? 67108864;
+	const w = Math.ceil(width);
+	const h = Math.ceil(height);
+	if (w > maxSide || h > maxSide) return `${w} × ${h} pixels is larger than the ${maxSide}-pixel limit per side`;
+	if (w * h > maxPixels) return `${w} × ${h} pixels is ${w * h} pixels, more than the limit of ${maxPixels}`;
+}
 const dangerousKeys = /* @__PURE__ */ new Set([
 	"__proto__",
 	"constructor",
@@ -14,8 +31,18 @@ function isSafeImageUrl(url) {
 	if (scheme === "data") return trimmed.startsWith("data:image/");
 	return false;
 }
-function withoutDangerousKeys(value) {
-	return JSON.parse(JSON.stringify(value), (key, nested) => dangerousKeys.has(key) ? void 0 : nested);
+function withoutDangerousKeys(json) {
+	return JSON.parse(json, (key, nested) => dangerousKeys.has(key) ? void 0 : nested);
+}
+function pageSize(document) {
+	const canvas = document.canvas;
+	return typeof canvas === "object" && canvas !== null ? {
+		width: canvas.width,
+		height: canvas.height
+	} : {
+		width: document.width,
+		height: document.height
+	};
 }
 function deepestNesting(value) {
 	let deepest = 0;
@@ -56,8 +83,16 @@ function secureDocument(input, limits = {}) {
 	if (typeof input !== "object" || input === null) return input;
 	const maxDepth = limits.maxDepth ?? 100;
 	const maxObjects = limits.maxObjects ?? 5e4;
-	const document = withoutDangerousKeys(input);
+	const json = JSON.stringify(input);
+	const maxLength = limits.maxDocumentLength ?? 1e8;
+	if (json.length > maxLength) refuseWhenUnsafe([unsafe("", `the document is ${json.length} characters of JSON, the limit is ${maxLength}`)]);
+	const document = withoutDangerousKeys(json);
 	const issues = [];
+	const { width, height } = pageSize(document);
+	if (typeof width === "number" && typeof height === "number") {
+		const problem = canvasSizeProblem(width, height, limits);
+		if (problem) issues.push(unsafe("canvas", `the page is ${problem}`));
+	}
 	const depth = deepestNesting(document);
 	if (depth > maxDepth) issues.push(unsafe("", `the document is nested ${depth} levels deep, the limit is ${maxDepth}`));
 	if (Array.isArray(document.objects) && issues.length === 0) {
@@ -81,4 +116,4 @@ function refuseUnsafeImageUrls(objects, isAllowedUrl = isSafeImageUrl) {
 	refuseWhenUnsafe(issues);
 }
 //#endregion
-export { isSafeImageUrl, refuseUnsafeImageUrls, secureDocument };
+export { DEFAULT_MAX_CANVAS_PIXELS, DEFAULT_MAX_CANVAS_SIDE, DEFAULT_MAX_DOCUMENT_LENGTH, DEFAULT_MAX_IMAGE_PIXELS, canvasSizeProblem, isSafeImageUrl, refuseUnsafeImageUrls, secureDocument };

package/dist/util/concurrency.cjs

@@ -17,10 +17,23 @@ async function mapWithConcurrency(items, limit, work) {
 	await Promise.all(Array.from({ length: workers }, runWorker));
 	return results;
 }
-/** Lets the browser paint and handle input before the next piece of work. */
+/**
+* Lets the browser paint, handle input and run other queued work, such as a
+* framework's re-render after a progress update, before the next piece of
+* work. A message-channel task runs after the tasks already queued and,
+* unlike `setTimeout`, is not delayed by timer clamping. `scheduler.yield()`
+* is not used: it resumes ahead of other queued tasks, so a UI waiting to
+* show progress would not render until the work had finished.
+*/
 function yieldToEventLoop() {
-	const scheduler = globalThis.scheduler;
-	if (typeof scheduler?.yield === "function") return scheduler.yield();
+	if (typeof MessageChannel === "function") return new Promise((resolve) => {
+		const channel = new MessageChannel();
+		channel.port1.onmessage = () => {
+			channel.port1.close();
+			resolve();
+		};
+		channel.port2.postMessage(void 0);
+	});
 	return new Promise((resolve) => setTimeout(resolve, 0));
 }
 //#endregion

package/dist/util/concurrency.js

@@ -17,10 +17,23 @@ async function mapWithConcurrency(items, limit, work) {
 	await Promise.all(Array.from({ length: workers }, runWorker));
 	return results;
 }
-/** Lets the browser paint and handle input before the next piece of work. */
+/**
+* Lets the browser paint, handle input and run other queued work, such as a
+* framework's re-render after a progress update, before the next piece of
+* work. A message-channel task runs after the tasks already queued and,
+* unlike `setTimeout`, is not delayed by timer clamping. `scheduler.yield()`
+* is not used: it resumes ahead of other queued tasks, so a UI waiting to
+* show progress would not render until the work had finished.
+*/
 function yieldToEventLoop() {
-	const scheduler = globalThis.scheduler;
-	if (typeof scheduler?.yield === "function") return scheduler.yield();
+	if (typeof MessageChannel === "function") return new Promise((resolve) => {
+		const channel = new MessageChannel();
+		channel.port1.onmessage = () => {
+			channel.port1.close();
+			resolve();
+		};
+		channel.port2.postMessage(void 0);
+	});
 	return new Promise((resolve) => setTimeout(resolve, 0));
 }
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fabricjs-document-engine",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Fabric.js save and load, undo and redo, and autosave for an existing canvas: stable object ids, custom objects, copy and paste, SVG import, PNG, SVG and PDF export, and recovery.",
   "keywords": [
     "fabricjs",

package/schema/document-v1.schema.json

@@ -18,7 +18,11 @@
       "properties": {
         "width": { "type": "number", "exclusiveMinimum": 0 },
         "height": { "type": "number", "exclusiveMinimum": 0 },
-        "background": {}
+        "background": {},
+        "backgroundImage": { "$ref": "#/$defs/fabricObject" },
+        "overlay": {},
+        "overlayImage": { "$ref": "#/$defs/fabricObject" },
+        "clipPath": { "$ref": "#/$defs/fabricObject" }
       }
     },
     "objects": { "type": "array", "items": { "$ref": "#/$defs/fabricObject" } },