fabricjs-document-engine 1.0.2 → 1.2.0

package/dist/history/create-history.cjs

@@ -1,6 +1,6 @@
+const require_snapshot = require("./snapshot.cjs");
 const require_apply_state = require("./apply-state.cjs");
 const require_history_stack = require("./history-stack.cjs");
-const require_snapshot = require("./snapshot.cjs");
 //#region src/history/create-history.ts
 const verbsByAction = {
 	drag: "Move",
@@ -24,18 +24,23 @@ function describePendingChanges(changes) {
 	return changes.length === 1 ? `${verb} ${changes[0].noun}` : `${verb} ${changes.length} objects`;
 }
 function createHistory(options) {
-	const { canvas, serializeObjects, onChange, onContentChange } = options;
+	const { canvas, serializeState, onChange, onContentChange, onLiveChange } = options;
+	const takeSnapshot = () => {
+		const { objects, page } = serializeState();
+		return require_snapshot.createSnapshot(objects, page);
+	};
 	const stack = require_history_stack.createHistoryStack({
 		steps: Math.max(1, options.limit ?? 100),
 		bytes: Math.max(0, options.maxBytes ?? 67108864)
 	});
-	let snapshot = require_snapshot.createSnapshot(serializeObjects());
+	let snapshot = takeSnapshot();
 	let pendingChanges = [];
 	let flushScheduled = false;
 	let transactionDepth = 0;
 	let pausedDepth = 0;
 	let applying = false;
 	let queue = Promise.resolve();
+	let epoch = 0;
 	function state() {
 		const undoLabels = stack.undoLabels();
 		const redoLabels = stack.redoLabels();
@@ -48,7 +53,7 @@ function createHistory(options) {
 	}
 	function commit(label) {
 		pendingChanges = [];
-		const nextSnapshot = require_snapshot.createSnapshot(serializeObjects());
+		const nextSnapshot = takeSnapshot();
 		const difference = require_snapshot.diffSnapshots(snapshot, nextSnapshot);
 		snapshot = nextSnapshot;
 		if (difference === null) return false;
@@ -86,26 +91,56 @@ function createHistory(options) {
 		notice(verbsByAction[action] ?? "Transform", event.target);
 	};
 	const handleTextEdited = ({ target }) => notice("Edit", target);
+	const handleTextChanged = () => {
+		if (!applying && pausedDepth === 0) onLiveChange?.();
+	};
 	const listeners = [
 		["object:added", handleAdded],
 		["object:removed", handleRemoved],
 		["object:modified", handleModified],
-		["text:editing:exited", handleTextEdited]
+		["text:editing:exited", handleTextEdited],
+		["text:changed", handleTextChanged]
 	];
 	const eventTarget = canvas;
 	listeners.forEach(([name, handler]) => eventTarget.on(name, handler));
-	function transaction(label, work) {
+	/**
+	* Puts the canvas back to the last recorded snapshot. The snapshot is the
+	* state before the transaction, so the difference to undo is exactly what
+	* the transaction changed: one serialization, then only the changed
+	* objects are rebuilt.
+	*/
+	function rollBack() {
+		const difference = require_snapshot.diffSnapshots(snapshot, takeSnapshot());
+		pendingChanges = [];
+		if (difference === null) return Promise.resolve();
+		applying = true;
+		return runInOrder(async () => {
+			try {
+				await require_apply_state.applyStateChange(canvas, difference.before);
+			} finally {
+				applying = false;
+			}
+		});
+	}
+	function transaction(label, work, transactionOptions = {}) {
 		if (transactionDepth === 0) commitPendingChanges();
+		const outermost = transactionDepth === 0;
 		transactionDepth += 1;
 		const finish = () => {
 			transactionDepth -= 1;
 			if (transactionDepth === 0) commit(label);
 		};
+		const fail = () => {
+			transactionDepth -= 1;
+			if (transactionDepth > 0) return void 0;
+			if (outermost && transactionOptions.rollback) return rollBack();
+			commit(label);
+		};
 		let result;
 		try {
 			result = work();
 		} catch (error) {
-			finish();
+			fail()?.catch(() => void 0);
 			throw error;
 		}
 		if (!isPromiseLike(result)) {
@@ -115,8 +150,8 @@ function createHistory(options) {
 		return Promise.resolve(result).then((value) => {
 			finish();
 			return value;
-		}, (error) => {
-			finish();
+		}, async (error) => {
+			await fail();
 			throw error;
 		});
 	}
@@ -148,16 +183,19 @@ function createHistory(options) {
 			commitPendingChanges();
 			const step = takeStep();
 			if (step === void 0) return false;
+			const startedIn = epoch;
 			applying = true;
+			let applied;
 			try {
-				await require_apply_state.applyStateChange(canvas, pickChange(step));
+				applied = await require_apply_state.applyStateChange(canvas, pickChange(step), () => epoch !== startedIn);
 			} catch (error) {
-				putBack(step);
+				if (epoch === startedIn) putBack(step);
 				throw error;
 			} finally {
 				applying = false;
 			}
-			snapshot = require_snapshot.createSnapshot(serializeObjects());
+			if (!applied) return false;
+			snapshot = takeSnapshot();
 			moveTo(step);
 			onContentChange();
 			onChange(state());
@@ -170,6 +208,7 @@ function createHistory(options) {
 			return commit(label);
 		},
 		transaction,
+		settled: () => queue.then(() => void 0),
 		undo: () => travel(() => stack.takeUndo(), (step) => step.before, (step) => stack.returnUndo(step), (step) => stack.returnRedo(step)),
 		redo: () => travel(() => stack.takeRedo(), (step) => step.after, (step) => stack.returnRedo(step), (step) => stack.returnUndo(step)),
 		state,
@@ -182,7 +221,8 @@ function createHistory(options) {
 		reset() {
 			pendingChanges = [];
 			stack.clear();
-			snapshot = require_snapshot.createSnapshot(serializeObjects());
+			epoch += 1;
+			snapshot = takeSnapshot();
 			onChange(state());
 		},
 		destroy() {

package/dist/history/create-history.d.cts

@@ -10,4 +10,12 @@ export interface HistoryState {
   undoLabel: string | undefined;
   redoLabel: string | undefined;
 }
+export interface TransactionOptions {
+  /**
+   * When `work` throws or rejects, put the canvas back as it was before the
+   * transaction, record no undo step and leave the document's unsaved state
+   * alone. Applies to the outermost transaction.
+   */
+  rollback?: boolean;
+}
 //#endregion

package/dist/history/create-history.d.ts

@@ -10,4 +10,12 @@ export interface HistoryState {
   undoLabel: string | undefined;
   redoLabel: string | undefined;
 }
+export interface TransactionOptions {
+  /**
+   * When `work` throws or rejects, put the canvas back as it was before the
+   * transaction, record no undo step and leave the document's unsaved state
+   * alone. Applies to the outermost transaction.
+   */
+  rollback?: boolean;
+}
 //#endregion

package/dist/history/create-history.js

@@ -1,6 +1,6 @@
+import { createSnapshot, diffSnapshots } from "./snapshot.js";
 import { applyStateChange } from "./apply-state.js";
 import { createHistoryStack } from "./history-stack.js";
-import { createSnapshot, diffSnapshots } from "./snapshot.js";
 //#region src/history/create-history.ts
 const verbsByAction = {
 	drag: "Move",
@@ -24,18 +24,23 @@ function describePendingChanges(changes) {
 	return changes.length === 1 ? `${verb} ${changes[0].noun}` : `${verb} ${changes.length} objects`;
 }
 function createHistory(options) {
-	const { canvas, serializeObjects, onChange, onContentChange } = options;
+	const { canvas, serializeState, onChange, onContentChange, onLiveChange } = options;
+	const takeSnapshot = () => {
+		const { objects, page } = serializeState();
+		return createSnapshot(objects, page);
+	};
 	const stack = createHistoryStack({
 		steps: Math.max(1, options.limit ?? 100),
 		bytes: Math.max(0, options.maxBytes ?? 67108864)
 	});
-	let snapshot = createSnapshot(serializeObjects());
+	let snapshot = takeSnapshot();
 	let pendingChanges = [];
 	let flushScheduled = false;
 	let transactionDepth = 0;
 	let pausedDepth = 0;
 	let applying = false;
 	let queue = Promise.resolve();
+	let epoch = 0;
 	function state() {
 		const undoLabels = stack.undoLabels();
 		const redoLabels = stack.redoLabels();
@@ -48,7 +53,7 @@ function createHistory(options) {
 	}
 	function commit(label) {
 		pendingChanges = [];
-		const nextSnapshot = createSnapshot(serializeObjects());
+		const nextSnapshot = takeSnapshot();
 		const difference = diffSnapshots(snapshot, nextSnapshot);
 		snapshot = nextSnapshot;
 		if (difference === null) return false;
@@ -86,26 +91,56 @@ function createHistory(options) {
 		notice(verbsByAction[action] ?? "Transform", event.target);
 	};
 	const handleTextEdited = ({ target }) => notice("Edit", target);
+	const handleTextChanged = () => {
+		if (!applying && pausedDepth === 0) onLiveChange?.();
+	};
 	const listeners = [
 		["object:added", handleAdded],
 		["object:removed", handleRemoved],
 		["object:modified", handleModified],
-		["text:editing:exited", handleTextEdited]
+		["text:editing:exited", handleTextEdited],
+		["text:changed", handleTextChanged]
 	];
 	const eventTarget = canvas;
 	listeners.forEach(([name, handler]) => eventTarget.on(name, handler));
-	function transaction(label, work) {
+	/**
+	* Puts the canvas back to the last recorded snapshot. The snapshot is the
+	* state before the transaction, so the difference to undo is exactly what
+	* the transaction changed: one serialization, then only the changed
+	* objects are rebuilt.
+	*/
+	function rollBack() {
+		const difference = diffSnapshots(snapshot, takeSnapshot());
+		pendingChanges = [];
+		if (difference === null) return Promise.resolve();
+		applying = true;
+		return runInOrder(async () => {
+			try {
+				await applyStateChange(canvas, difference.before);
+			} finally {
+				applying = false;
+			}
+		});
+	}
+	function transaction(label, work, transactionOptions = {}) {
 		if (transactionDepth === 0) commitPendingChanges();
+		const outermost = transactionDepth === 0;
 		transactionDepth += 1;
 		const finish = () => {
 			transactionDepth -= 1;
 			if (transactionDepth === 0) commit(label);
 		};
+		const fail = () => {
+			transactionDepth -= 1;
+			if (transactionDepth > 0) return void 0;
+			if (outermost && transactionOptions.rollback) return rollBack();
+			commit(label);
+		};
 		let result;
 		try {
 			result = work();
 		} catch (error) {
-			finish();
+			fail()?.catch(() => void 0);
 			throw error;
 		}
 		if (!isPromiseLike(result)) {
@@ -115,8 +150,8 @@ function createHistory(options) {
 		return Promise.resolve(result).then((value) => {
 			finish();
 			return value;
-		}, (error) => {
-			finish();
+		}, async (error) => {
+			await fail();
 			throw error;
 		});
 	}
@@ -148,16 +183,19 @@ function createHistory(options) {
 			commitPendingChanges();
 			const step = takeStep();
 			if (step === void 0) return false;
+			const startedIn = epoch;
 			applying = true;
+			let applied;
 			try {
-				await applyStateChange(canvas, pickChange(step));
+				applied = await applyStateChange(canvas, pickChange(step), () => epoch !== startedIn);
 			} catch (error) {
-				putBack(step);
+				if (epoch === startedIn) putBack(step);
 				throw error;
 			} finally {
 				applying = false;
 			}
-			snapshot = createSnapshot(serializeObjects());
+			if (!applied) return false;
+			snapshot = takeSnapshot();
 			moveTo(step);
 			onContentChange();
 			onChange(state());
@@ -170,6 +208,7 @@ function createHistory(options) {
 			return commit(label);
 		},
 		transaction,
+		settled: () => queue.then(() => void 0),
 		undo: () => travel(() => stack.takeUndo(), (step) => step.before, (step) => stack.returnUndo(step), (step) => stack.returnRedo(step)),
 		redo: () => travel(() => stack.takeRedo(), (step) => step.after, (step) => stack.returnRedo(step), (step) => stack.returnUndo(step)),
 		state,
@@ -182,7 +221,8 @@ function createHistory(options) {
 		reset() {
 			pendingChanges = [];
 			stack.clear();
-			snapshot = createSnapshot(serializeObjects());
+			epoch += 1;
+			snapshot = takeSnapshot();
 			onChange(state());
 		},
 		destroy() {

package/dist/history/snapshot.cjs

@@ -1,7 +1,15 @@
 //#region src/history/snapshot.ts
-function createSnapshot(objects) {
+/**
+* The page itself (size, background, overlay, mask) is one more entry in the
+* same map under this reserved key. It never appears in `order`, so the
+* diff stays proportional to what changed and object ordering is unaffected.
+* Object ids come from `createId`, which never produces this value.
+*/
+const PAGE_KEY = "__page__";
+function createSnapshot(objects, page) {
 	const objectsById = /* @__PURE__ */ new Map();
 	const order = [];
+	if (page !== void 0) objectsById.set(PAGE_KEY, JSON.stringify(page));
 	for (const object of objects) {
 		const id = object.id ?? "";
 		objectsById.set(id, JSON.stringify(object));
@@ -43,5 +51,6 @@ function diffSnapshots(previous, next) {
 	};
 }
 //#endregion
+exports.PAGE_KEY = PAGE_KEY;
 exports.createSnapshot = createSnapshot;
 exports.diffSnapshots = diffSnapshots;

package/dist/history/snapshot.js

@@ -1,7 +1,15 @@
 //#region src/history/snapshot.ts
-function createSnapshot(objects) {
+/**
+* The page itself (size, background, overlay, mask) is one more entry in the
+* same map under this reserved key. It never appears in `order`, so the
+* diff stays proportional to what changed and object ordering is unaffected.
+* Object ids come from `createId`, which never produces this value.
+*/
+const PAGE_KEY = "__page__";
+function createSnapshot(objects, page) {
 	const objectsById = /* @__PURE__ */ new Map();
 	const order = [];
+	if (page !== void 0) objectsById.set(PAGE_KEY, JSON.stringify(page));
 	for (const object of objects) {
 		const id = object.id ?? "";
 		objectsById.set(id, JSON.stringify(object));
@@ -43,4 +51,4 @@ function diffSnapshots(previous, next) {
 	};
 }
 //#endregion
-export { createSnapshot, diffSnapshots };
+export { PAGE_KEY, createSnapshot, diffSnapshots };

package/dist/import/svg-import.cjs

@@ -0,0 +1,256 @@
+const require_errors = require("../engine/errors.cjs");
+const require_content_limits = require("../security/content-limits.cjs");
+let fabric = require("fabric");
+//#region src/import/svg-import.ts
+const XLINK = "http://www.w3.org/1999/xlink";
+const REMOVED_ELEMENTS = [
+	"script",
+	"foreignObject",
+	"iframe",
+	"object",
+	"embed",
+	"audio",
+	"video",
+	"animate",
+	"set",
+	"animateTransform",
+	"animateMotion"
+];
+function refuse(message, cause) {
+	throw new require_errors.DocumentEngineError("SVG_IMPORT_FAILED", message, cause === void 0 ? {} : { cause });
+}
+function unsafe(message) {
+	throw new require_errors.DocumentEngineError("UNSAFE_DOCUMENT", `The SVG was refused: ${message}`, { issues: [{
+		code: "UNSAFE_DOCUMENT",
+		path: "",
+		message
+	}] });
+}
+function parse(svg) {
+	if (typeof DOMParser === "undefined") refuse("Importing SVG needs a browser DOM");
+	const document = new DOMParser().parseFromString(svg.trim(), "image/svg+xml");
+	const error = document.querySelector("parsererror");
+	if (error) refuse(`The SVG is not valid XML: ${(error.textContent ?? "").trim().slice(0, 200)}`);
+	if (document.documentElement.localName !== "svg") refuse("The file is not an SVG: its root element is not <svg>");
+	return document;
+}
+function depthOf(element) {
+	let deepest = 0;
+	const pending = [[element, 1]];
+	while (pending.length > 0) {
+		const [current, depth] = pending.pop();
+		deepest = Math.max(deepest, depth);
+		for (const child of Array.from(current.children)) pending.push([child, depth + 1]);
+	}
+	return deepest;
+}
+/**
+* Removes what an SVG can use to run code or reach other servers. Fabric
+* never runs scripts, but the same file may be shown elsewhere later.
+*/
+function sanitize(document, limits, warnings) {
+	const root = document.documentElement;
+	const elements = root.getElementsByTagName("*").length;
+	const maxObjects = limits.maxObjects ?? 5e4;
+	if (elements > maxObjects) unsafe(`it has ${elements} elements, the limit is ${maxObjects}`);
+	const maxDepth = limits.maxDepth ?? 100;
+	const depth = depthOf(root);
+	if (depth > maxDepth) unsafe(`it is nested ${depth} levels deep, the limit is ${maxDepth}`);
+	let removed = 0;
+	for (const name of REMOVED_ELEMENTS) for (const element of Array.from(root.getElementsByTagName(name))) {
+		element.remove();
+		removed += 1;
+	}
+	const isAllowed = limits.isAllowedUrl ?? require_content_limits.isSafeImageUrl;
+	for (const element of [root, ...Array.from(root.getElementsByTagName("*"))]) {
+		for (const attribute of Array.from(element.attributes)) if (/^on/i.test(attribute.name)) {
+			element.removeAttribute(attribute.name);
+			removed += 1;
+		}
+		const link = element.getAttribute("href") ?? element.getAttributeNS(XLINK, "href");
+		if (link === null) continue;
+		const target = link.trim();
+		if (element.localName === "image") {
+			if (!isAllowed(target) || /^javascript:/i.test(target)) {
+				warnings.push({
+					code: "SVG_IMAGE_BLOCKED",
+					message: `An image with the address ${target.slice(0, 80)} was left out because the address is not allowed`
+				});
+				element.remove();
+			}
+		} else if (!target.startsWith("#")) {
+			element.removeAttribute("href");
+			element.removeAttributeNS(XLINK, "href");
+			removed += 1;
+		}
+	}
+	for (const style of Array.from(root.getElementsByTagName("style"))) {
+		const css = style.textContent ?? "";
+		const cleaned = css.replace(/@import[^;]*;?/gi, "").replace(/url\(\s*['"]?(?!#)[^)]*\)/gi, "none");
+		if (cleaned !== css) {
+			style.textContent = cleaned;
+			removed += 1;
+		}
+	}
+	if (removed > 0) warnings.push({
+		code: "SVG_CONTENT_REMOVED",
+		message: `${removed} scripts, event handlers, embedded pages or links to other files were removed from the SVG`
+	});
+}
+function intersectsViewport(object, width, height) {
+	object.setCoords();
+	const box = object.getBoundingRect();
+	return box.left < width && box.top < height && box.left + box.width > 0 && box.top + box.height > 0;
+}
+function contentBounds(objects) {
+	let left = Infinity;
+	let top = Infinity;
+	let right = -Infinity;
+	let bottom = -Infinity;
+	for (const object of objects) {
+		object.setCoords();
+		const box = object.getBoundingRect();
+		left = Math.min(left, box.left);
+		top = Math.min(top, box.top);
+		right = Math.max(right, box.left + box.width);
+		bottom = Math.max(bottom, box.top + box.height);
+	}
+	return Number.isFinite(left) ? {
+		left,
+		top,
+		width: right - left,
+		height: bottom - top
+	} : {
+		left: 0,
+		top: 0,
+		width: 0,
+		height: 0
+	};
+}
+/** Parses and places an SVG. Adding the result to a canvas is up to the caller. */
+async function readSvg(svg, options = {}, limits = {}) {
+	if (typeof svg !== "string" || svg.trim().length === 0) refuse("The SVG is empty");
+	const warnings = [];
+	const document = parse(svg);
+	sanitize(document, limits, warnings);
+	let parsed;
+	try {
+		parsed = await (0, fabric.parseSVGDocument)(document, void 0, {
+			crossOrigin: options.crossOrigin === void 0 ? "anonymous" : options.crossOrigin,
+			signal: options.signal
+		});
+	} catch (error) {
+		if (require_errors.isDocumentEngineError(error)) throw error;
+		refuse(`Fabric could not read the SVG: ${error instanceof Error ? error.message : String(error)}`, error);
+	}
+	if (options.signal?.aborted) throw new require_errors.DocumentEngineError("LOAD_ABORTED", "The SVG import was cancelled");
+	let objects = parsed.objects.filter((object) => object !== null && object !== void 0);
+	const declared = {
+		width: parsed.options.width ?? 0,
+		height: parsed.options.height ?? 0
+	};
+	const useContent = options.viewport === "content" || declared.width <= 0 || declared.height <= 0;
+	const bounds = useContent ? contentBounds(objects) : {
+		left: 0,
+		top: 0,
+		...declared
+	};
+	const offscreen = options.offscreen ?? "keep";
+	if (offscreen === "drop" && !useContent) {
+		const kept = objects.filter((object) => intersectsViewport(object, bounds.width, bounds.height));
+		if (kept.length < objects.length) warnings.push({
+			code: "SVG_OFFSCREEN_DROPPED",
+			message: `${objects.length - kept.length} elements outside the SVG's viewport were left out`
+		});
+		objects = kept;
+	}
+	const viewport = {
+		width: bounds.width,
+		height: bounds.height
+	};
+	if (objects.length === 0) return {
+		objects: [],
+		viewport,
+		warnings
+	};
+	const group = new fabric.Group([], {
+		layoutManager: new fabric.LayoutManager(new fabric.FixedLayout()),
+		width: bounds.width,
+		height: bounds.height,
+		left: bounds.left + bounds.width / 2,
+		top: bounds.top + bounds.height / 2,
+		originX: "center",
+		originY: "center"
+	});
+	group.add(...objects);
+	if (offscreen === "clip") group.clipPath = new fabric.Rect({
+		width: bounds.width,
+		height: bounds.height,
+		originX: "center",
+		originY: "center",
+		left: 0,
+		top: 0
+	});
+	let scaleX = 1;
+	let scaleY = 1;
+	let shiftX = 0;
+	let shiftY = 0;
+	const fit = options.fit;
+	if (fit && bounds.width > 0 && bounds.height > 0) {
+		const sx = fit.width / bounds.width;
+		const sy = fit.height / bounds.height;
+		const mode = fit.mode ?? "contain";
+		if (mode === "fill") {
+			scaleX = sx;
+			scaleY = sy;
+		} else {
+			scaleX = scaleY = mode === "cover" ? Math.max(sx, sy) : Math.min(sx, sy);
+			shiftX = (fit.width - bounds.width * scaleX) / 2;
+			shiftY = (fit.height - bounds.height * scaleY) / 2;
+		}
+	}
+	group.set({
+		scaleX,
+		scaleY,
+		originX: "left",
+		originY: "top",
+		left: (options.left ?? 0) + shiftX,
+		top: (options.top ?? 0) + shiftY
+	});
+	group.setCoords();
+	if ((options.as ?? "group") === "group") return {
+		objects: [group],
+		viewport,
+		warnings
+	};
+	const clip = group.clipPath;
+	group.clipPath = void 0;
+	const loose = group.removeAll();
+	if (clip) {
+		const frame = group.calcTransformMatrix();
+		for (const object of loose) {
+			const absoluteClip = new fabric.Rect({
+				width: bounds.width,
+				height: bounds.height,
+				originX: "center",
+				originY: "center",
+				absolutePositioned: true
+			});
+			absoluteClip.set({
+				left: frame[4],
+				top: frame[5],
+				scaleX,
+				scaleY
+			});
+			object.clipPath = absoluteClip;
+		}
+	}
+	loose.forEach((object) => object.setCoords());
+	return {
+		objects: loose,
+		viewport,
+		warnings
+	};
+}
+//#endregion
+exports.readSvg = readSvg;

package/dist/import/svg-import.d.cts

@@ -0,0 +1,50 @@
+import { FabricObject } from "fabric";
+//#region src/import/svg-import.d.ts
+/**
+ * Opens SVG files as Fabric objects without moving them (fabric.js #10916).
+ *
+ * Fabric's parser already puts every element where the SVG's viewBox says.
+ * The usual next step, `util.groupSVGElements`, then sizes the group to the
+ * content, so an element outside the viewBox, or a hidden one, moves and
+ * resizes everything. This keeps the SVG's own viewport as the frame instead.
+ */
+export interface SvgImportOptions {
+  /**
+   * `preserve` (the default) keeps the SVG's viewport, so the artwork lands
+   * where it sits in the file. `content` uses the bounds of what is drawn,
+   * like `util.groupSVGElements`.
+   */
+  viewport?: "preserve" | "content";
+  /** What to do with elements entirely outside the viewport: keep them, drop them, or clip them. Default `keep`. */
+  offscreen?: "keep" | "drop" | "clip";
+  /** One group (the default), or separate objects. */
+  as?: "group" | "objects";
+  /** Where the viewport's top-left corner lands on the canvas. Default 0, 0. */
+  left?: number;
+  top?: number;
+  /** Scales the viewport into this box. `contain` keeps the whole SVG visible, `cover` fills the box, `fill` stretches. */
+  fit?: {
+    width: number;
+    height: number;
+    mode?: "contain" | "cover" | "fill";
+  };
+  /** Passed to images in the SVG. Default `anonymous`, so the canvas can still be exported. */
+  crossOrigin?: "anonymous" | "use-credentials" | null;
+  signal?: AbortSignal;
+}
+export type SvgImportWarningCode = "SVG_CONTENT_REMOVED" | "SVG_IMAGE_BLOCKED" | "SVG_OFFSCREEN_DROPPED";
+export interface SvgImportWarning {
+  code: SvgImportWarningCode;
+  message: string;
+}
+export interface SvgImportResult {
+  /** The objects added to the canvas: one group, or each object. */
+  objects: FabricObject[];
+  /** The size of the SVG's viewport in canvas units, before `fit`. */
+  viewport: {
+    width: number;
+    height: number;
+  };
+  warnings: SvgImportWarning[];
+}
+//#endregion