fabricjs-document-engine 1.1.0 → 1.3.0

package/README.md

@@ -74,6 +74,8 @@ That is the whole setup for a first test. localStorage is fine here; in a real a
 - **Versions and migration.** Keep named versions, restore any of them as a new revision, and open plain Fabric JSON or documents saved by older versions of this package.
 - **Large documents.** Objects are created in chunks so the page stays responsive. Loads report progress and can be cancelled with an `AbortSignal`, and a cancelled load leaves the canvas as it was.
 - **Copy, paste and layers.** A clipboard that keeps group transforms and custom properties and gives every pasted object a new id, plus bring-to-front and send-to-back commands that keep a pinned background in place. Each is one undo step.
+- **Text that behaves.** A Textbox that keeps its width and can clip, add "…" or shrink to fit; cursor positions that match Arabic and ligatures; editable vertical Chinese, Japanese and Korean text; correct typing with Android and iOS keyboards; and text edits in code that keep each letter's style.
+- **Fast with many objects.** Dirty-region rendering redraws only what changed, and image filters run in a Web Worker with progress and cancel.
 - **Undo and redo.** One user action is one undo step. Transactions group several code changes into one labelled step, and ids survive undo and redo.
 - **React ready, framework free.** Hooks for React, and a small state store for any other framework.
 - **Hardened.** Imported documents and SVG files are cleaned and size-limited, undo history has a memory budget, and every feature is tested on Fabric 6 and 7 in Chromium, Firefox and WebKit. Exports are checked pixel by pixel against the canvas.
@@ -428,6 +430,7 @@ const { objects, viewport, warnings } = await engine.importSvg(svgText, {
 - The result is one group with a fixed layout the size of the viewport, or separate objects with `as: 'objects'`. Either way it is one undo step, and every object gets an id.
 - Scripts, event handlers, `foreignObject`, links to other files and image addresses that `limits.isAllowedUrl` refuses are removed, and `warnings` says what was removed.
 - Size limits apply as for documents, so a huge or deeply nested SVG is refused with `UNSAFE_DOCUMENT`.
+- `preserveGroups: true` keeps the SVG's `<g>` groups as Fabric groups, with their ids, opacity, clip paths, classes and `data-*` attributes (Fabric flattens them).
 
 ## Version history
 
@@ -593,6 +596,64 @@ 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.
 
+## Text, rendering speed and filters
+
+These fix long-standing Fabric.js issues. Each was reproduced on Fabric 6 and 7 first, and each fix is tested in Chromium, Firefox and WebKit.
+
+```ts
+import { BoundedTextbox, VerticalText, ShapedIText, attachMobileTextInput, textObjects } from 'fabricjs-document-engine/text';
+import { enableDirtyRegionRendering } from 'fabricjs-document-engine/performance';
+import { createFilterWorker } from 'fabricjs-document-engine/filters';
+import { createTextCommands } from 'fabricjs-document-engine';
+
+const engine = createDocumentEngine({ canvas, customObjects: textObjects });
+canvas.add(new BoundedTextbox(longText, { width: 240, maxHeight: 120, overflow: 'ellipsis' }));
+canvas.add(new VerticalText('縦書きのテキスト', { fontSize: 32 }));
+canvas.add(new ShapedIText('مرحبا بالعالم', { direction: 'rtl' }));
+attachMobileTextInput(canvas);
+createTextCommands(engine).insertText(title, 0, 'New: ');
+enableDirtyRegionRendering(canvas);
+await createFilterWorker({ engine }).apply(image, [new filters.Blur({ blur: 0.2 })], { onProgress });
+```
+
+- **`BoundedTextbox` (#2376).** Fabric widens a Textbox to its longest word. This one breaks such a word between letters, as CSS `overflow-wrap: anywhere` does. With `maxHeight`, extra lines are clipped or end in "…", or `fit: 'shrink'` makes the font smaller until the text fits. The saved font size does not change.
+- **`ShapedIText` and `ShapedTextbox` (#4815).** Fabric measures each letter alone but draws joined letters, so in Arabic the cursor can land two letters away. These measure from the text as the browser shapes it.
+- **`VerticalText` (#511).** Columns from right to left, upright CJK characters, turned Latin words (Unicode UAX #50), and two-digit numbers side by side. Arrow keys, selection, IME, SVG and PDF all work.
+- **`attachMobileTextInput` (#6588).** Reads each edit from the text itself, so Android autocorrect, suggestions and cursor swipes put letters and styles in the right place. It also opens the keyboard on tap and stops iOS from zooming.
+- **`createTextCommands` (#6133).** Insert, delete, replace and restyle text from code with styles that stay on their letters, one undo step each.
+- **`enableDirtyRegionRendering` (#9847).** Moving one of 5,000 shapes draws about 25 of them instead of all 5,000: under 2 ms per frame in place of nearly a second in headless Chromium.
+- **`createFilterWorker` (#9532).** Fabric's filters run in a worker on transferred bitmaps, with the same pixels as Fabric, progress, cancel, and only the newest run applied while a slider moves.
+
+## 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 +664,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

@@ -74,6 +74,8 @@ await engine.loadDocument(JSON.parse(localStorage.getItem(document.id)!));
 - **版本和迁移。** 保存命名版本，把任意版本恢复为新的修订，还能打开纯 Fabric JSON 或旧版本这个包保存的文档。
 - **大文档。** 对象分批创建，页面保持响应。加载会报告进度，并能用 `AbortSignal` 取消；取消后画布保持原样。
 - **复制、粘贴和图层。** 剪贴板会保留编组的变换和自定义属性，并给每个粘贴出的对象一个新 id；置顶、置底等图层命令可以让固定的背景保持不动。每个操作都是一步撤销。
+- **好用的文字。** 保持宽度、可以裁剪、加“…”或自动缩小字号的文本框；与阿拉伯文和连字一致的光标位置；可编辑的中日韩竖排文字；在 Android 和 iOS 键盘上正确输入；在代码里修改文字时每个字的样式保持不变。
+- **对象多也流畅。** 脏区域渲染只重绘变化的部分，图片滤镜在 Web Worker 中运行，支持进度和取消。
 - **撤销和重做。** 用户的一次操作就是一步撤销。事务可以把代码里的多处改动合成一个带标签的步骤，撤销和重做后 id 保持不变。
 - **支持 React，不绑定框架。** 为 React 提供 hooks，为其他框架提供一个小的状态 store。
 - **经过加固。** 导入的文档和 SVG 文件会被清理并限制大小，撤销历史有内存上限，每个功能都在 Fabric 6 和 7、Chromium、Firefox 和 WebKit 中测试过。导出结果会和画布逐像素比对。
@@ -428,6 +430,7 @@ const { objects, viewport, warnings } = await engine.importSvg(svgText, {
 - 结果是一个固定布局、大小等于视口的编组；使用 `as: 'objects'` 时则是分开的对象。两种方式都只算一步撤销，每个对象都有 id。
 - 脚本、事件处理器、`foreignObject`、指向其他文件的链接，以及 `limits.isAllowedUrl` 拒绝的图片地址都会被移除，`warnings` 会说明移除了什么。
 - 大小限制和文档相同，过大或嵌套过深的 SVG 会以 `UNSAFE_DOCUMENT` 被拒绝。
+- 使用 `preserveGroups: true` 时，SVG 的 `<g>` 编组会保留为 Fabric 编组，连同 id、透明度、裁剪路径、class 和 `data-*` 属性（Fabric 自己会把它们拍平）。
 
 ## 版本历史
 
@@ -593,6 +596,65 @@ getLayers(engine); // [{ id, type, name, index, visible, locked }], top first
 
 引擎会保存每个对象的 `name`，所以图层面板的名称不会丢。在 React 中，`fabricjs-document-engine/react` 的 `useLayers(engine)` 返回同样的列表，并在每次改动后更新。
 
+## 文字、渲染速度和滤镜
+
+这些功能修复了 Fabric.js 中长期存在的问题。每个问题都先在 Fabric 6 和 7 上复现，每个修复都在 Chromium、Firefox 和 WebKit 中测试过。
+
+```ts
+import { BoundedTextbox, VerticalText, ShapedIText, attachMobileTextInput, textObjects } from 'fabricjs-document-engine/text';
+import { enableDirtyRegionRendering } from 'fabricjs-document-engine/performance';
+import { createFilterWorker } from 'fabricjs-document-engine/filters';
+import { createTextCommands } from 'fabricjs-document-engine';
+
+const engine = createDocumentEngine({ canvas, customObjects: textObjects });
+
+canvas.add(new BoundedTextbox(longText, { width: 240, maxHeight: 120, overflow: 'ellipsis' }));
+canvas.add(new VerticalText('縦書きのテキスト', { fontSize: 32 }));
+canvas.add(new ShapedIText('مرحبا بالعالم', { direction: 'rtl' }));
+attachMobileTextInput(canvas);
+createTextCommands(engine).insertText(title, 0, 'New: ');
+enableDirtyRegionRendering(canvas);
+await createFilterWorker({ engine }).apply(image, [new filters.Blur({ blur: 0.2 })], { onProgress });
+```
+
+- **`BoundedTextbox`（#2376）。** Fabric 会把文本框撑到最长单词的宽度。它会像 CSS `overflow-wrap: anywhere` 一样在字母之间断开过长的单词。设置 `maxHeight` 后，多出的行可以被裁剪或以“…”结尾，或者用 `fit: 'shrink'` 缩小字号直到放得下。保存的字号不会改变。
+- **`ShapedIText` 和 `ShapedTextbox`（#4815）。** Fabric 单独测量每个字母，但绘制时字母是连在一起的，所以阿拉伯文的光标可能偏两个字母。它们按浏览器实际排版的文字来测量。
+- **`VerticalText`（#511）。** 从右到左的列，直立的中日韩字符，旋转的拉丁单词（Unicode UAX #50），两位数字并排放在一个方格里。方向键、选择、输入法、SVG 和 PDF 都可以使用。
+- **`attachMobileTextInput`（#6588）。** 从文字本身读取每次修改，所以 Android 的自动更正、联想和光标滑动都会把文字和样式放在正确的位置。它还会在点击时打开键盘，并防止 iOS 缩放页面。
+- **`createTextCommands`（#6133）。** 在代码中插入、删除、替换文字和修改样式，样式跟着字母走，每次一步撤销。
+- **`enableDirtyRegionRendering`（#9847）。** 在 5,000 个图形中移动一个时，只绘制大约 25 个，而不是全部 5,000 个：在无头 Chromium 中每帧不到 2 毫秒，原来接近一秒。
+- **`createFilterWorker`（#9532）。** Fabric 的滤镜在 Worker 中处理转移过去的位图，像素和 Fabric 相同，支持进度和取消，拖动滑块时只应用最新的一次。
+
+## 不会丢失的修改
+
+无论用户的操作和你的代码怎样交错，下面这些保证都成立：
+
+```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 +665,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);
 			});