fabricjs-document-engine 1.2.0 → 1.3.0

package/dist/filters/pipeline.d.cts

@@ -0,0 +1,35 @@
+//#region src/filters/pipeline.d.ts
+export declare const PIXEL_FILTERS: ReadonlySet<string>;
+export declare const WORKER_FILTERS: ReadonlySet<string>;
+export interface PipelineFilter {
+  type: string;
+  applyTo2d(state: PipelineState): void;
+  isNeutralState?(): boolean;
+  subFilters?: PipelineFilter[];
+}
+export interface PipelineState {
+  sourceWidth: number;
+  sourceHeight: number;
+  imageData: ImageData;
+  originalImageData: ImageData;
+  originalEl: unknown;
+  canvasEl: unknown;
+  ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
+  filterBackend: unknown;
+}
+export interface PipelineOptions {
+  bandRows?: number;
+  onProgress?: (done: number) => void;
+  isCancelled?: () => boolean;
+  pause?: () => Promise<void>;
+}
+export declare function flattenFilters<Filter extends {
+  type?: unknown;
+  subFilters?: Filter[];
+}>(filters: readonly Filter[]): Filter[];
+export declare function canRunInWorker(filters: ReadonlyArray<{
+  type?: unknown;
+  subFilters?: unknown[];
+}>): boolean;
+export declare function runFilterPipeline(filters: readonly PipelineFilter[], state: PipelineState, options?: PipelineOptions): Promise<ImageData | undefined>;
+//#endregion

package/dist/filters/pipeline.d.ts

@@ -0,0 +1,35 @@
+//#region src/filters/pipeline.d.ts
+export declare const PIXEL_FILTERS: ReadonlySet<string>;
+export declare const WORKER_FILTERS: ReadonlySet<string>;
+export interface PipelineFilter {
+  type: string;
+  applyTo2d(state: PipelineState): void;
+  isNeutralState?(): boolean;
+  subFilters?: PipelineFilter[];
+}
+export interface PipelineState {
+  sourceWidth: number;
+  sourceHeight: number;
+  imageData: ImageData;
+  originalImageData: ImageData;
+  originalEl: unknown;
+  canvasEl: unknown;
+  ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
+  filterBackend: unknown;
+}
+export interface PipelineOptions {
+  bandRows?: number;
+  onProgress?: (done: number) => void;
+  isCancelled?: () => boolean;
+  pause?: () => Promise<void>;
+}
+export declare function flattenFilters<Filter extends {
+  type?: unknown;
+  subFilters?: Filter[];
+}>(filters: readonly Filter[]): Filter[];
+export declare function canRunInWorker(filters: ReadonlyArray<{
+  type?: unknown;
+  subFilters?: unknown[];
+}>): boolean;
+export declare function runFilterPipeline(filters: readonly PipelineFilter[], state: PipelineState, options?: PipelineOptions): Promise<ImageData | undefined>;
+//#endregion

package/dist/filters/pipeline.js

@@ -0,0 +1,87 @@
+//#region src/filters/pipeline.ts
+const PIXEL_FILTERS = /* @__PURE__ */ new Set([
+	"Brightness",
+	"Contrast",
+	"Saturation",
+	"Vibrance",
+	"Grayscale",
+	"Invert",
+	"Gamma",
+	"Noise",
+	"RemoveColor",
+	"BlendColor",
+	"HueRotation",
+	"ColorMatrix",
+	"Sepia",
+	"Brownie",
+	"Vintage",
+	"Kodachrome",
+	"Technicolor",
+	"Polaroid",
+	"BlackWhite"
+]);
+const WORKER_FILTERS = /* @__PURE__ */ new Set([
+	...PIXEL_FILTERS,
+	"Blur",
+	"Convolute",
+	"Pixelate"
+]);
+function typeOf(filter) {
+	const own = filter.type ?? filter.constructor?.type;
+	return typeof own === "string" ? own : "";
+}
+function flattenFilters(filters) {
+	const flat = [];
+	const visit = (filter) => {
+		if (typeOf(filter) === "Composed") (filter.subFilters ?? []).forEach(visit);
+		else flat.push(filter);
+	};
+	filters.forEach(visit);
+	return flat;
+}
+function canRunInWorker(filters) {
+	return flattenFilters(filters).every((filter) => WORKER_FILTERS.has(typeOf(filter)));
+}
+async function runFilterPipeline(filters, state, options = {}) {
+	const steps = [];
+	for (const filter of flattenFilters(filters)) {
+		if (filter.isNeutralState?.()) continue;
+		const last = steps[steps.length - 1];
+		if (PIXEL_FILTERS.has(typeOf(filter)) && last && PIXEL_FILTERS.has(typeOf(last[0]))) last.push(filter);
+		else steps.push([filter]);
+	}
+	const bandRows = Math.max(1, Math.floor(options.bandRows ?? 64));
+	const units = steps.reduce((sum, step) => sum + (PIXEL_FILTERS.has(typeOf(step[0])) ? Math.ceil(state.imageData.height / bandRows) : 1), 0);
+	let done = 0;
+	const advance = async () => {
+		done += 1;
+		options.onProgress?.(units === 0 ? 1 : done / units);
+		if (options.isCancelled?.()) return false;
+		await options.pause?.();
+		return !options.isCancelled?.();
+	};
+	for (const step of steps) {
+		if (!PIXEL_FILTERS.has(typeOf(step[0]))) {
+			step[0].applyTo2d(state);
+			if (!await advance()) return void 0;
+			continue;
+		}
+		const whole = state.imageData;
+		const rowBytes = whole.width * 4;
+		for (let row = 0; row < whole.height; row += bandRows) {
+			const rows = Math.min(bandRows, whole.height - row);
+			const band = new ImageData(new Uint8ClampedArray(whole.data.buffer, whole.data.byteOffset + row * rowBytes, rows * rowBytes), whole.width, rows);
+			const bandState = {
+				...state,
+				imageData: band,
+				sourceHeight: rows
+			};
+			for (const filter of step) filter.applyTo2d(bandState);
+			if (!await advance()) return void 0;
+		}
+	}
+	if (units === 0) options.onProgress?.(1);
+	return state.imageData;
+}
+//#endregion
+export { PIXEL_FILTERS, WORKER_FILTERS, canRunInWorker, flattenFilters, runFilterPipeline };

package/dist/filters/worker-entry.cjs

@@ -0,0 +1,78 @@
+const require_pipeline = require("./pipeline.cjs");
+let fabric = require("fabric");
+//#region src/filters/worker-entry.ts
+const scope = self;
+const running = /* @__PURE__ */ new Set();
+const cancelled = /* @__PURE__ */ new Set();
+const channel = new MessageChannel();
+const waiting = [];
+channel.port1.onmessage = () => waiting.shift()?.();
+const pause = () => new Promise((resolve) => {
+	waiting.push(resolve);
+	channel.port2.postMessage(null);
+});
+async function apply(message) {
+	const { id, bitmap } = message;
+	running.add(id);
+	try {
+		const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
+		const ctx = canvas.getContext("2d", { willReadFrequently: true });
+		ctx.drawImage(bitmap, 0, 0);
+		bitmap.close();
+		const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+		const filters = await Promise.all(message.filters.map((json) => fabric.classRegistry.getClass(String(json.type)).fromObject(json)));
+		const result = await require_pipeline.runFilterPipeline(filters, {
+			sourceWidth: canvas.width,
+			sourceHeight: canvas.height,
+			imageData,
+			originalImageData: imageData,
+			originalEl: canvas,
+			canvasEl: canvas,
+			ctx,
+			filterBackend: void 0
+		}, {
+			bandRows: message.bandRows,
+			pause,
+			isCancelled: () => cancelled.has(id),
+			onProgress: (done) => scope.postMessage({
+				type: "progress",
+				id,
+				done
+			})
+		});
+		if (!result) {
+			scope.postMessage({
+				type: "cancelled",
+				id
+			});
+			return;
+		}
+		if (result.width !== canvas.width || result.height !== canvas.height) {
+			canvas.width = result.width;
+			canvas.height = result.height;
+		}
+		ctx.putImageData(result, 0, 0);
+		const output = canvas.transferToImageBitmap();
+		scope.postMessage({
+			type: "done",
+			id,
+			bitmap: output
+		}, [output]);
+	} catch (error) {
+		scope.postMessage({
+			type: "error",
+			id,
+			message: error instanceof Error ? error.message : String(error)
+		});
+	} finally {
+		running.delete(id);
+		cancelled.delete(id);
+	}
+}
+scope.onmessage = (event) => {
+	const message = event.data;
+	if (message.type === "cancel") {
+		if (running.has(message.id)) cancelled.add(message.id);
+	} else apply(message);
+};
+//#endregion

package/dist/filters/worker-entry.d.cts

@@ -0,0 +1,29 @@
+//#region src/filters/worker-entry.d.ts
+export interface ApplyMessage {
+  type: "apply";
+  id: number;
+  bitmap: ImageBitmap;
+  filters: Array<Record<string, unknown>>;
+  bandRows?: number;
+}
+export interface CancelMessage {
+  type: "cancel";
+  id: number;
+}
+export type WorkerReply = {
+  type: "progress";
+  id: number;
+  done: number;
+} | {
+  type: "done";
+  id: number;
+  bitmap: ImageBitmap;
+} | {
+  type: "cancelled";
+  id: number;
+} | {
+  type: "error";
+  id: number;
+  message: string;
+};
+//#endregion

package/dist/filters/worker-entry.d.ts

@@ -0,0 +1,29 @@
+//#region src/filters/worker-entry.d.ts
+export interface ApplyMessage {
+  type: "apply";
+  id: number;
+  bitmap: ImageBitmap;
+  filters: Array<Record<string, unknown>>;
+  bandRows?: number;
+}
+export interface CancelMessage {
+  type: "cancel";
+  id: number;
+}
+export type WorkerReply = {
+  type: "progress";
+  id: number;
+  done: number;
+} | {
+  type: "done";
+  id: number;
+  bitmap: ImageBitmap;
+} | {
+  type: "cancelled";
+  id: number;
+} | {
+  type: "error";
+  id: number;
+  message: string;
+};
+//#endregion

package/dist/filters/worker-entry.js

@@ -0,0 +1,78 @@
+import { runFilterPipeline } from "./pipeline.js";
+import { classRegistry } from "fabric";
+//#region src/filters/worker-entry.ts
+const scope = self;
+const running = /* @__PURE__ */ new Set();
+const cancelled = /* @__PURE__ */ new Set();
+const channel = new MessageChannel();
+const waiting = [];
+channel.port1.onmessage = () => waiting.shift()?.();
+const pause = () => new Promise((resolve) => {
+	waiting.push(resolve);
+	channel.port2.postMessage(null);
+});
+async function apply(message) {
+	const { id, bitmap } = message;
+	running.add(id);
+	try {
+		const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
+		const ctx = canvas.getContext("2d", { willReadFrequently: true });
+		ctx.drawImage(bitmap, 0, 0);
+		bitmap.close();
+		const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+		const filters = await Promise.all(message.filters.map((json) => classRegistry.getClass(String(json.type)).fromObject(json)));
+		const result = await runFilterPipeline(filters, {
+			sourceWidth: canvas.width,
+			sourceHeight: canvas.height,
+			imageData,
+			originalImageData: imageData,
+			originalEl: canvas,
+			canvasEl: canvas,
+			ctx,
+			filterBackend: void 0
+		}, {
+			bandRows: message.bandRows,
+			pause,
+			isCancelled: () => cancelled.has(id),
+			onProgress: (done) => scope.postMessage({
+				type: "progress",
+				id,
+				done
+			})
+		});
+		if (!result) {
+			scope.postMessage({
+				type: "cancelled",
+				id
+			});
+			return;
+		}
+		if (result.width !== canvas.width || result.height !== canvas.height) {
+			canvas.width = result.width;
+			canvas.height = result.height;
+		}
+		ctx.putImageData(result, 0, 0);
+		const output = canvas.transferToImageBitmap();
+		scope.postMessage({
+			type: "done",
+			id,
+			bitmap: output
+		}, [output]);
+	} catch (error) {
+		scope.postMessage({
+			type: "error",
+			id,
+			message: error instanceof Error ? error.message : String(error)
+		});
+	} finally {
+		running.delete(id);
+		cancelled.delete(id);
+	}
+}
+scope.onmessage = (event) => {
+	const message = event.data;
+	if (message.type === "cancel") {
+		if (running.has(message.id)) cancelled.add(message.id);
+	} else apply(message);
+};
+//#endregion

package/dist/filters.cjs

@@ -0,0 +1,9 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_pipeline = require("./filters/pipeline.cjs");
+const require_filter_worker = require("./filters/filter-worker.cjs");
+exports.PIXEL_FILTERS = require_pipeline.PIXEL_FILTERS;
+exports.WORKER_FILTERS = require_pipeline.WORKER_FILTERS;
+exports.canRunInWorker = require_pipeline.canRunInWorker;
+exports.createFilterWorker = require_filter_worker.createFilterWorker;
+exports.flattenFilters = require_pipeline.flattenFilters;
+exports.runFilterPipeline = require_pipeline.runFilterPipeline;

package/dist/filters.d.cts

@@ -0,0 +1,3 @@
+import { ApplyFilterOptions, FilterWorker, FilterWorkerOptions, ImageFilter, createFilterWorker } from "./filters/filter-worker.cjs";
+import { PIXEL_FILTERS, PipelineFilter, PipelineOptions, PipelineState, WORKER_FILTERS, canRunInWorker, flattenFilters, runFilterPipeline } from "./filters/pipeline.cjs";
+export { type ApplyFilterOptions, type FilterWorker, type FilterWorkerOptions, type ImageFilter, PIXEL_FILTERS, type PipelineFilter, type PipelineOptions, type PipelineState, WORKER_FILTERS, canRunInWorker, createFilterWorker, flattenFilters, runFilterPipeline };

package/dist/filters.d.ts

@@ -0,0 +1,3 @@
+import { ApplyFilterOptions, FilterWorker, FilterWorkerOptions, ImageFilter, createFilterWorker } from "./filters/filter-worker.js";
+import { PIXEL_FILTERS, PipelineFilter, PipelineOptions, PipelineState, WORKER_FILTERS, canRunInWorker, flattenFilters, runFilterPipeline } from "./filters/pipeline.js";
+export { type ApplyFilterOptions, type FilterWorker, type FilterWorkerOptions, type ImageFilter, PIXEL_FILTERS, type PipelineFilter, type PipelineOptions, type PipelineState, WORKER_FILTERS, canRunInWorker, createFilterWorker, flattenFilters, runFilterPipeline };

package/dist/filters.js

@@ -0,0 +1,3 @@
+import { PIXEL_FILTERS, WORKER_FILTERS, canRunInWorker, flattenFilters, runFilterPipeline } from "./filters/pipeline.js";
+import { createFilterWorker } from "./filters/filter-worker.js";
+export { PIXEL_FILTERS, WORKER_FILTERS, canRunInWorker, createFilterWorker, flattenFilters, runFilterPipeline };

package/dist/import/svg-import.cjs

@@ -127,12 +127,110 @@ function contentBounds(objects) {
 		height: 0
 	};
 }
+function dropBrokenUses(document) {
+	for (const use of Array.from(document.getElementsByTagName("use"))) {
+		const link = (use.getAttribute("href") ?? use.getAttributeNS(XLINK, "href") ?? "").trim();
+		if (!link.startsWith("#") || link.length === 1 || document.getElementById(link.slice(1)) === null) use.remove();
+	}
+}
+const GROUP_MARK = "data-fde-svg-group";
+function markGroups(document) {
+	for (const name of ["g", "a"]) for (const element of Array.from(document.documentElement.getElementsByTagName(name))) element.setAttribute(GROUP_MARK, "");
+}
+function svgMetadata(element) {
+	const metadata = {};
+	const id = element.getAttribute("id");
+	if (id) metadata.svgId = id;
+	const className = element.getAttribute("class");
+	if (className) metadata.svgClass = className;
+	for (const attribute of Array.from(element.attributes)) {
+		if (!attribute.name.startsWith("data-") || attribute.name === GROUP_MARK) continue;
+		(metadata.svgData ?? (metadata.svgData = {}))[attribute.name.slice(5)] = attribute.value;
+	}
+	return metadata;
+}
+function ownOpacity(element) {
+	const fromStyle = /(?:^|;)\s*opacity\s*:\s*([0-9.]+)/.exec(element.getAttribute("style") ?? "")?.[1];
+	const value = Number.parseFloat(fromStyle ?? element.getAttribute("opacity") ?? "1");
+	return Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : 1;
+}
+function rebuildGroups(objects, elements, root) {
+	const top = [];
+	const nodes = /* @__PURE__ */ new Map();
+	const groupNodes = /* @__PURE__ */ new Set();
+	const chains = /* @__PURE__ */ new Map();
+	const elementOf = /* @__PURE__ */ new Map();
+	objects.forEach((object, index) => {
+		const element = elements[index];
+		elementOf.set(object, element);
+		const chain = [];
+		for (let parent = element.parentElement; parent && parent !== root; parent = parent.parentElement) if (parent.hasAttribute(GROUP_MARK)) chain.push(parent);
+		chains.set(object, chain);
+		let children = top;
+		for (let level = chain.length - 1; level >= 0; level -= 1) {
+			const groupElement = chain[level];
+			let node = nodes.get(groupElement);
+			if (!node) {
+				node = {
+					element: groupElement,
+					children: []
+				};
+				nodes.set(groupElement, node);
+				groupNodes.add(node);
+				children.push(node);
+			}
+			children = node.children;
+		}
+		children.push(object);
+		const own = element.getAttribute("id");
+		const leaf = object;
+		if (!own && chain.length > 0 && leaf.id !== void 0) delete leaf.id;
+		const inherited = chain.reduce((product, groupElement) => product * ownOpacity(groupElement), 1);
+		if (inherited > 0) object.opacity = Math.min(1, object.opacity / inherited);
+		object.set(svgMetadata(element));
+	});
+	const hoistClip = (node, group) => {
+		if (!node.element.hasAttribute("clip-path")) return;
+		let clip;
+		for (const object of objects) {
+			const chain = chains.get(object);
+			const at = chain.indexOf(node.element);
+			if (at === -1) continue;
+			if (elementOf.get(object).hasAttribute("clip-path") || chain.slice(0, at).some((between) => between.hasAttribute("clip-path")) || !object.clipPath) continue;
+			if (!clip) {
+				const absolute = fabric.util.multiplyTransformMatrices(object.calcTransformMatrix(), object.clipPath.calcTransformMatrix());
+				clip = object.clipPath;
+				fabric.util.applyTransformToObject(clip, fabric.util.multiplyTransformMatrices(fabric.util.invertTransform(group.calcTransformMatrix()), absolute));
+			}
+			object.clipPath = void 0;
+			object.set("dirty", true);
+		}
+		if (clip) group.clipPath = clip;
+	};
+	const build = (item) => {
+		if (!groupNodes.has(item)) return item;
+		const node = item;
+		const group = new fabric.Group(node.children.map(build));
+		group.set({
+			opacity: ownOpacity(node.element),
+			...svgMetadata(node.element)
+		});
+		const id = node.element.getAttribute("id");
+		if (id) group.id = id;
+		hoistClip(node, group);
+		group.setCoords();
+		return group;
+	};
+	return top.map(build);
+}
 /** 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);
+	dropBrokenUses(document);
+	if (options.preserveGroups) markGroups(document);
 	let parsed;
 	try {
 		parsed = await (0, fabric.parseSVGDocument)(document, void 0, {
@@ -145,6 +243,10 @@ async function readSvg(svg, options = {}, limits = {}) {
 	}
 	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);
+	if (options.preserveGroups) {
+		const elements = parsed.elements.filter((_, index) => parsed.objects[index] !== null && parsed.objects[index] !== void 0);
+		objects = rebuildGroups(objects, elements, document.documentElement);
+	}
 	const declared = {
 		width: parsed.options.width ?? 0,
 		height: parsed.options.height ?? 0

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

@@ -19,6 +19,7 @@ export interface SvgImportOptions {
   offscreen?: "keep" | "drop" | "clip";
   /** One group (the default), or separate objects. */
   as?: "group" | "objects";
+  preserveGroups?: boolean;
   /** Where the viewport's top-left corner lands on the canvas. Default 0, 0. */
   left?: number;
   top?: number;

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

@@ -19,6 +19,7 @@ export interface SvgImportOptions {
   offscreen?: "keep" | "drop" | "clip";
   /** One group (the default), or separate objects. */
   as?: "group" | "objects";
+  preserveGroups?: boolean;
   /** Where the viewport's top-left corner lands on the canvas. Default 0, 0. */
   left?: number;
   top?: number;

package/dist/import/svg-import.js

@@ -1,6 +1,6 @@
 import { DocumentEngineError, isDocumentEngineError } from "../engine/errors.js";
 import { isSafeImageUrl } from "../security/content-limits.js";
-import { FixedLayout, Group, LayoutManager, Rect, parseSVGDocument } from "fabric";
+import { FixedLayout, Group, LayoutManager, Rect, parseSVGDocument, util } from "fabric";
 //#region src/import/svg-import.ts
 const XLINK = "http://www.w3.org/1999/xlink";
 const REMOVED_ELEMENTS = [
@@ -127,12 +127,110 @@ function contentBounds(objects) {
 		height: 0
 	};
 }
+function dropBrokenUses(document) {
+	for (const use of Array.from(document.getElementsByTagName("use"))) {
+		const link = (use.getAttribute("href") ?? use.getAttributeNS(XLINK, "href") ?? "").trim();
+		if (!link.startsWith("#") || link.length === 1 || document.getElementById(link.slice(1)) === null) use.remove();
+	}
+}
+const GROUP_MARK = "data-fde-svg-group";
+function markGroups(document) {
+	for (const name of ["g", "a"]) for (const element of Array.from(document.documentElement.getElementsByTagName(name))) element.setAttribute(GROUP_MARK, "");
+}
+function svgMetadata(element) {
+	const metadata = {};
+	const id = element.getAttribute("id");
+	if (id) metadata.svgId = id;
+	const className = element.getAttribute("class");
+	if (className) metadata.svgClass = className;
+	for (const attribute of Array.from(element.attributes)) {
+		if (!attribute.name.startsWith("data-") || attribute.name === GROUP_MARK) continue;
+		(metadata.svgData ?? (metadata.svgData = {}))[attribute.name.slice(5)] = attribute.value;
+	}
+	return metadata;
+}
+function ownOpacity(element) {
+	const fromStyle = /(?:^|;)\s*opacity\s*:\s*([0-9.]+)/.exec(element.getAttribute("style") ?? "")?.[1];
+	const value = Number.parseFloat(fromStyle ?? element.getAttribute("opacity") ?? "1");
+	return Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : 1;
+}
+function rebuildGroups(objects, elements, root) {
+	const top = [];
+	const nodes = /* @__PURE__ */ new Map();
+	const groupNodes = /* @__PURE__ */ new Set();
+	const chains = /* @__PURE__ */ new Map();
+	const elementOf = /* @__PURE__ */ new Map();
+	objects.forEach((object, index) => {
+		const element = elements[index];
+		elementOf.set(object, element);
+		const chain = [];
+		for (let parent = element.parentElement; parent && parent !== root; parent = parent.parentElement) if (parent.hasAttribute(GROUP_MARK)) chain.push(parent);
+		chains.set(object, chain);
+		let children = top;
+		for (let level = chain.length - 1; level >= 0; level -= 1) {
+			const groupElement = chain[level];
+			let node = nodes.get(groupElement);
+			if (!node) {
+				node = {
+					element: groupElement,
+					children: []
+				};
+				nodes.set(groupElement, node);
+				groupNodes.add(node);
+				children.push(node);
+			}
+			children = node.children;
+		}
+		children.push(object);
+		const own = element.getAttribute("id");
+		const leaf = object;
+		if (!own && chain.length > 0 && leaf.id !== void 0) delete leaf.id;
+		const inherited = chain.reduce((product, groupElement) => product * ownOpacity(groupElement), 1);
+		if (inherited > 0) object.opacity = Math.min(1, object.opacity / inherited);
+		object.set(svgMetadata(element));
+	});
+	const hoistClip = (node, group) => {
+		if (!node.element.hasAttribute("clip-path")) return;
+		let clip;
+		for (const object of objects) {
+			const chain = chains.get(object);
+			const at = chain.indexOf(node.element);
+			if (at === -1) continue;
+			if (elementOf.get(object).hasAttribute("clip-path") || chain.slice(0, at).some((between) => between.hasAttribute("clip-path")) || !object.clipPath) continue;
+			if (!clip) {
+				const absolute = util.multiplyTransformMatrices(object.calcTransformMatrix(), object.clipPath.calcTransformMatrix());
+				clip = object.clipPath;
+				util.applyTransformToObject(clip, util.multiplyTransformMatrices(util.invertTransform(group.calcTransformMatrix()), absolute));
+			}
+			object.clipPath = void 0;
+			object.set("dirty", true);
+		}
+		if (clip) group.clipPath = clip;
+	};
+	const build = (item) => {
+		if (!groupNodes.has(item)) return item;
+		const node = item;
+		const group = new Group(node.children.map(build));
+		group.set({
+			opacity: ownOpacity(node.element),
+			...svgMetadata(node.element)
+		});
+		const id = node.element.getAttribute("id");
+		if (id) group.id = id;
+		hoistClip(node, group);
+		group.setCoords();
+		return group;
+	};
+	return top.map(build);
+}
 /** 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);
+	dropBrokenUses(document);
+	if (options.preserveGroups) markGroups(document);
 	let parsed;
 	try {
 		parsed = await parseSVGDocument(document, void 0, {
@@ -145,6 +243,10 @@ async function readSvg(svg, options = {}, limits = {}) {
 	}
 	if (options.signal?.aborted) throw new DocumentEngineError("LOAD_ABORTED", "The SVG import was cancelled");
 	let objects = parsed.objects.filter((object) => object !== null && object !== void 0);
+	if (options.preserveGroups) {
+		const elements = parsed.elements.filter((_, index) => parsed.objects[index] !== null && parsed.objects[index] !== void 0);
+		objects = rebuildGroups(objects, elements, document.documentElement);
+	}
 	const declared = {
 		width: parsed.options.width ?? 0,
 		height: parsed.options.height ?? 0