fabricjs-document-engine 1.0.2 → 1.2.0

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

@@ -0,0 +1,41 @@
+//#region src/util/concurrency.ts
+/**
+* Runs `work` for every item with at most `limit` running at once, and
+* returns the results in the order of `items`.
+*/
+async function mapWithConcurrency(items, limit, work) {
+	const results = new Array(items.length);
+	const workers = Math.max(1, Math.min(Math.floor(limit) || 1, items.length));
+	let next = 0;
+	async function runWorker() {
+		while (next < items.length) {
+			const index = next;
+			next += 1;
+			results[index] = await work(items[index], index);
+		}
+	}
+	await Promise.all(Array.from({ length: workers }, runWorker));
+	return results;
+}
+/**
+* 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() {
+	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
+exports.mapWithConcurrency = mapWithConcurrency;
+exports.yieldToEventLoop = yieldToEventLoop;

package/dist/util/concurrency.js

@@ -0,0 +1,40 @@
+//#region src/util/concurrency.ts
+/**
+* Runs `work` for every item with at most `limit` running at once, and
+* returns the results in the order of `items`.
+*/
+async function mapWithConcurrency(items, limit, work) {
+	const results = new Array(items.length);
+	const workers = Math.max(1, Math.min(Math.floor(limit) || 1, items.length));
+	let next = 0;
+	async function runWorker() {
+		while (next < items.length) {
+			const index = next;
+			next += 1;
+			results[index] = await work(items[index], index);
+		}
+	}
+	await Promise.all(Array.from({ length: workers }, runWorker));
+	return results;
+}
+/**
+* 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() {
+	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
+export { mapWithConcurrency, yieldToEventLoop };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "fabricjs-document-engine",
-  "version": "1.0.2",
-  "description": "Fabric.js save and load, undo and redo, and autosave for an existing canvas: stable object ids, custom objects, export, recovery and save-conflict protection.",
+  "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",
     "fabric.js",
@@ -27,6 +27,12 @@
     "object id",
     "export svg",
     "export image",
+    "text on path",
+    "import svg",
+    "layers",
+    "copy paste",
+    "pdf",
+    "export pdf",
     "recovery",
     "indexeddb",
     "react",
@@ -91,6 +97,16 @@
         "default": "./dist/react.cjs"
       }
     },
+    "./pdf": {
+      "import": {
+        "types": "./dist/pdf.d.ts",
+        "default": "./dist/pdf.js"
+      },
+      "require": {
+        "types": "./dist/pdf.d.cts",
+        "default": "./dist/pdf.cjs"
+      }
+    },
     "./schema/document-v1.json": "./schema/document-v1.schema.json",
     "./package.json": "./package.json"
   },
@@ -109,7 +125,9 @@
   },
   "peerDependencies": {
     "fabric": "^6.0.0 || ^7.0.0",
-    "react": "^18.0.0 || ^19.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "jspdf": "^4.0.0",
+    "svg2pdf.js": "^2.7.0"
   },
   "publishConfig": {
     "access": "public",
@@ -136,10 +154,13 @@
     "ajv": "^8.20.0",
     "fabric": "^7.4.0",
     "fabric6": "npm:fabric@^6.9.1",
+    "jspdf": "^4.2.1",
+    "pdfjs-dist": "^6.3.289",
     "playwright": "^1.63.0",
     "publint": "^0.3.24",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
+    "svg2pdf.js": "^2.8.1",
     "tsdown": "^0.23.0",
     "typescript": "^5.9.3",
     "vitest": "^5.0.2"
@@ -147,6 +168,12 @@
   "peerDependenciesMeta": {
     "react": {
       "optional": true
+    },
+    "jspdf": {
+      "optional": true
+    },
+    "svg2pdf.js": {
+      "optional": true
     }
   }
 }

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" } },