js-draw 0.15.1 → 0.16.0

package/src/Editor.loadFrom.test.ts

@@ -0,0 +1,24 @@
+import Color4 from './Color4';
+import { imageBackgroundCSSClassName } from './components/ImageBackground';
+import { RestyleableComponent } from './lib';
+import SVGLoader from './SVGLoader';
+import createEditor from './testing/createEditor';
+
+describe('Editor.loadFrom', () => {
+	it('should remove existing BackgroundComponents when loading new BackgroundComponents', async () => {
+		const editor = createEditor();
+		await editor.dispatch(editor.setBackgroundColor(Color4.red));
+
+		let backgroundComponents = editor.image.getBackgroundComponents();
+		expect(backgroundComponents).toHaveLength(1);
+		expect((backgroundComponents[0] as RestyleableComponent).getStyle().color).objEq(Color4.red);
+
+		await editor.loadFrom(SVGLoader.fromString(`<svg viewBox='0 0 100 100'>
+			<path class='${imageBackgroundCSSClassName}' d='m0,0 L100,0 L100,100 L0,100 z' fill='#000'/>
+		</svg>`, true));
+
+		backgroundComponents = editor.image.getBackgroundComponents();
+		expect(backgroundComponents).toHaveLength(1);
+		expect((backgroundComponents[0] as RestyleableComponent).getStyle().color).objEq(Color4.black);
+	});
+});

package/src/Editor.ts

@@ -26,6 +26,8 @@ import fileToBase64 from './util/fileToBase64';
 import uniteCommands from './commands/uniteCommands';
 import SelectionTool from './tools/SelectionTool/SelectionTool';
 import AbstractComponent from './components/AbstractComponent';
+import Erase from './commands/Erase';
+import ImageBackground, { BackgroundType } from './components/ImageBackground';
 
 type HTMLPointerEventType = 'pointerdown'|'pointermove'|'pointerup'|'pointercancel';
 type HTMLPointerEventFilter = (eventName: HTMLPointerEventType, event: PointerEvent)=>boolean;
@@ -109,9 +111,6 @@ export class Editor {
 	 */
 	public readonly image: EditorImage;
 
-	/** Viewport for the exported/imported image. */
-	private importExportViewport: Viewport;
-
 	/**
 	 * Allows transforming the view and querying information about
 	 * what is currently visible.
@@ -215,8 +214,13 @@ export class Editor {
 		this.renderingRegion.setAttribute('alt', '');
 
 		this.notifier = new EventDispatcher();
-		this.importExportViewport = new Viewport(this.notifier);
-		this.viewport = new Viewport(this.notifier);
+		this.viewport = new Viewport((oldTransform, newTransform) => {
+			this.notifier.dispatch(EditorEventType.ViewportChanged, {
+				kind: EditorEventType.ViewportChanged,
+				newTransform,
+				oldTransform,
+			});
+		});
 		this.display = new Display(this, this.settings.renderingMode, this.renderingRegion);
 		this.image = new EditorImage();
 		this.history = new UndoRedoHistory(this, this.announceRedoCallback, this.announceUndoCallback);
@@ -224,9 +228,6 @@ export class Editor {
 
 		parent.appendChild(this.container);
 
-		// Default to a 500x500 image
-		this.importExportViewport.updateScreenSize(Vec2.of(500, 500));
-
 		this.viewport.updateScreenSize(
 			Vec2.of(this.display.width, this.display.height)
 		);
@@ -356,9 +357,10 @@ export class Editor {
 			this.viewport.updateScreenSize(
 				Vec2.of(this.display.width, this.display.height)
 			);
+			this.queueRerender();
 		});
 
-		window.addEventListener('resize', () => {
+		const handleResize = () => {
 			this.notifier.dispatch(EditorEventType.DisplayResized, {
 				kind: EditorEventType.DisplayResized,
 				newSize: Vec2.of(
@@ -366,8 +368,14 @@ export class Editor {
 					this.display.height
 				),
 			});
-			this.queueRerender();
-		});
+		};
+
+		if ('ResizeObserver' in (window as any)) {
+			const resizeObserver = new ResizeObserver(handleResize);
+			resizeObserver.observe(this.container);
+		} else {
+			addEventListener('resize', handleResize);
+		}
 
 		this.accessibilityControlArea.addEventListener('input', () => {
 			this.accessibilityControlArea.value = '';
@@ -773,7 +781,7 @@ export class Editor {
 			const exportRectFill = { fill: Color4.fromHex('#44444455') };
 			const exportRectStrokeWidth = 5 * this.viewport.getSizeOfPixelOnCanvas();
 			renderer.drawRect(
-				this.importExportViewport.visibleRect,
+				this.getImportExportRect(),
 				exportRectStrokeWidth,
 				exportRectFill
 			);
@@ -920,13 +928,14 @@ export class Editor {
 	public toDataURL(format: 'image/png'|'image/jpeg'|'image/webp' = 'image/png'): string {
 		const canvas = document.createElement('canvas');
 
-		const resolution = this.importExportViewport.getScreenRectSize();
+		const importExportViewport = this.image.getImportExportViewport();
+		const resolution = importExportViewport.getScreenRectSize();
 
 		canvas.width = resolution.x;
 		canvas.height = resolution.y;
 
 		const ctx = canvas.getContext('2d')!;
-		const renderer = new CanvasRenderer(ctx, this.importExportViewport);
+		const renderer = new CanvasRenderer(ctx, importExportViewport);
 
 		this.image.renderAll(renderer);
 
@@ -935,12 +944,12 @@ export class Editor {
 	}
 
 	public toSVG(): SVGElement {
-		const importExportViewport = this.importExportViewport;
+		const importExportViewport = this.image.getImportExportViewport().getTemporaryClone();
 		const svgNameSpace = 'http://www.w3.org/2000/svg';
 		const result = document.createElementNS(svgNameSpace, 'svg');
 		const renderer = new SVGRenderer(result, importExportViewport);
 
-		const origTransform = this.importExportViewport.canvasToScreenTransform;
+		const origTransform = importExportViewport.canvasToScreenTransform;
 		// Render with (0,0) at (0,0) — we'll handle translation with
 		// the viewBox property.
 		importExportViewport.resetTransform(Mat33.identity);
@@ -966,10 +975,18 @@ export class Editor {
 		return result;
 	}
 
+	/**
+	 * Load editor data from an `ImageLoader` (e.g. an {@link SVGLoader}).
+	 * 
+	 * @see loadFromSVG
+	 */
 	public async loadFrom(loader: ImageLoader) {
 		this.showLoadingWarning(0);
 		this.display.setDraftMode(true);
 
+		const originalBackgrounds = this.image.getBackgroundComponents();
+		const eraseBackgroundCommand = new Erase(originalBackgrounds);
+
 		await loader.start(async (component) => {
 			await this.dispatchNoAnnounce(EditorImage.addElement(component));
 		}, (countProcessed: number, totalToProcess: number) => {
@@ -984,41 +1001,58 @@ export class Editor {
 			this.dispatchNoAnnounce(this.setImportExportRect(importExportRect), false);
 			this.dispatchNoAnnounce(this.viewport.zoomTo(importExportRect), false);
 		});
+
+		// Ensure that we don't have multiple overlapping BackgroundComponents. Remove
+		// old BackgroundComponents.
+		// Overlapping BackgroundComponents may cause changing the background color to
+		// not work properly.
+		if (this.image.getBackgroundComponents().length !== originalBackgrounds.length) {
+			await this.dispatchNoAnnounce(eraseBackgroundCommand);
+		}
+
 		this.hideLoadingWarning();
 
 		this.display.setDraftMode(false);
 		this.queueRerender();
 	}
 
+	private getTopmostBackgroundComponent(): ImageBackground|null {
+		let background: ImageBackground|null = null;
+
+		// Find a background component, if one exists.
+		// Use the last (topmost) background component if there are multiple.
+		for (const component of this.image.getBackgroundComponents()) {
+			if (component instanceof ImageBackground) {
+				background = component;
+			}
+		}
+
+		return background;
+	}
+
+	/**
+	 * Set the background color of the image.
+	 */
+	public setBackgroundColor(color: Color4): Command {
+		let background = this.getTopmostBackgroundComponent();
+
+		if (!background) {
+			const backgroundType = color.eq(Color4.transparent) ? BackgroundType.None : BackgroundType.SolidColor;
+			background = new ImageBackground(backgroundType, color);
+			return this.image.addElement(background);
+		} else {
+			return background.updateStyle({ color });
+		}
+	}
+
 	// Returns the size of the visible region of the output SVG
 	public getImportExportRect(): Rect2 {
-		return this.importExportViewport.visibleRect;
+		return this.image.getImportExportViewport().visibleRect;
 	}
 
 	// Resize the output SVG to match `imageRect`.
 	public setImportExportRect(imageRect: Rect2): Command {
-		const origSize = this.importExportViewport.visibleRect.size;
-		const origTransform = this.importExportViewport.canvasToScreenTransform;
-
-		return new class extends Command {
-			public apply(editor: Editor) {
-				const viewport = editor.importExportViewport;
-				viewport.updateScreenSize(imageRect.size);
-				viewport.resetTransform(Mat33.translation(imageRect.topLeft.times(-1)));
-				editor.queueRerender();
-			}
-
-			public unapply(editor: Editor) {
-				const viewport = editor.importExportViewport;
-				viewport.updateScreenSize(origSize);
-				viewport.resetTransform(origTransform);
-				editor.queueRerender();
-			}
-
-			public description(_editor: Editor, localizationTable: EditorLocalization) {
-				return localizationTable.resizeOutputCommand(imageRect);
-			}
-		};
+		return this.image.setImportExportRect(imageRect);
 	}
 
 	/**

package/src/EditorImage.ts

@@ -6,32 +6,105 @@ import Rect2 from './math/Rect2';
 import { EditorLocalization } from './localization';
 import RenderingCache from './rendering/caching/RenderingCache';
 import SerializableCommand from './commands/SerializableCommand';
+import EventDispatcher from './EventDispatcher';
+import { Vec2 } from './math/Vec2';
+import Command from './commands/Command';
+import Mat33 from './math/Mat33';
 
 // @internal Sort by z-index, low to high
 export const sortLeavesByZIndex = (leaves: Array<ImageNode>) => {
 	leaves.sort((a, b) => a.getContent()!.getZIndex() - b.getContent()!.getZIndex());
 };
 
+export enum EditorImageEventType {
+	ExportViewportChanged
+}
+
+export type EditorImageNotifier = EventDispatcher<EditorImageEventType, { image: EditorImage }>;
+
 // Handles lookup/storage of elements in the image
 export default class EditorImage {
 	private root: ImageNode;
+	private background: ImageNode;
 	private componentsById: Record<string, AbstractComponent>;
 
+	/** Viewport for the exported/imported image. */
+	private importExportViewport: Viewport;
+
+	// @internal
+	public readonly notifier: EditorImageNotifier;
+
 	// @internal
 	public constructor() {
 		this.root = new ImageNode();
+		this.background = new ImageNode();
 		this.componentsById = {};
+
+		this.notifier = new EventDispatcher();
+		this.importExportViewport = new Viewport(() => {
+			this.notifier.dispatch(EditorImageEventType.ExportViewportChanged, {
+				image: this,
+			});
+		});
+
+		// Default to a 500x500 image
+		this.importExportViewport.updateScreenSize(Vec2.of(500, 500));
 	}
 
-	// Returns the parent of the given element, if it exists.
-	public findParent(elem: AbstractComponent): ImageNode|null {
-		const candidates = this.root.getLeavesIntersectingRegion(elem.getBBox());
-		for (const candidate of candidates) {
-			if (candidate.getContent() === elem) {
-				return candidate;
+	/**
+	 * @returns a `Viewport` for rendering the image when importing/exporting.
+	 */
+	public getImportExportViewport() {
+		return this.importExportViewport;
+	}
+
+	public setImportExportRect(imageRect: Rect2): Command {
+		const importExportViewport = this.getImportExportViewport();
+		const origSize = importExportViewport.visibleRect.size;
+		const origTransform = importExportViewport.canvasToScreenTransform;
+
+		return new class extends Command {
+			public apply(editor: Editor) {
+				const viewport = editor.image.getImportExportViewport();
+				viewport.updateScreenSize(imageRect.size);
+				viewport.resetTransform(Mat33.translation(imageRect.topLeft.times(-1)));
+				editor.queueRerender();
+			}
+
+			public unapply(editor: Editor) {
+				const viewport = editor.image.getImportExportViewport();
+				viewport.updateScreenSize(origSize);
+				viewport.resetTransform(origTransform);
+				editor.queueRerender();
+			}
+
+			public description(_editor: Editor, localizationTable: EditorLocalization) {
+				return localizationTable.resizeOutputCommand(imageRect);
+			}
+		};
+	}
+
+	// Returns all components that make up the background of this image. These
+	// components are rendered below all other components.
+	public getBackgroundComponents(): AbstractComponent[] {
+		const result = [];
+
+		const leaves = this.background.getLeaves();
+		sortLeavesByZIndex(leaves);
+
+		for (const leaf of leaves) {
+			const content = leaf.getContent();
+
+			if (content) {
+				result.push(content);
 			}
 		}
-		return null;
+		return result;
+	}
+
+	// Returns the parent of the given element, if it exists.
+	public findParent(elem: AbstractComponent): ImageNode|null {
+		return this.background.getChildWithContent(elem) ?? this.root.getChildWithContent(elem);
 	}
 
 	// Forces a re-render of `elem` when the image is next re-rendered as a whole.
@@ -49,22 +122,22 @@ export default class EditorImage {
 
 	/** @internal */
 	public renderWithCache(screenRenderer: AbstractRenderer, cache: RenderingCache, viewport: Viewport) {
+		this.background.render(screenRenderer, viewport.visibleRect);
 		cache.render(screenRenderer, this.root, viewport);
 	}
 
-	/** @internal */
-	public render(renderer: AbstractRenderer, viewport: Viewport) {
-		this.root.render(renderer, viewport.visibleRect);
+	/**
+	 * Renders all nodes visible from `viewport` (or all nodes if `viewport = null`)
+	 * @internal
+	 */
+	public render(renderer: AbstractRenderer, viewport: Viewport|null) {
+		this.background.render(renderer, viewport?.visibleRect);
+		this.root.render(renderer, viewport?.visibleRect);
 	}
 
 	/** Renders all nodes, even ones not within the viewport. @internal */
 	public renderAll(renderer: AbstractRenderer) {
-		const leaves = this.root.getLeaves();
-		sortLeavesByZIndex(leaves);
-
-		for (const leaf of leaves) {
-			leaf.getContent()!.render(renderer, leaf.getBBox());
-		}
+		this.render(renderer, null);
 	}
 
 	/** @returns all elements in the image, sorted by z-index. This can be slow for large images. */
@@ -98,8 +171,26 @@ export default class EditorImage {
 	}
 
 	private addElementDirectly(elem: AbstractComponent): ImageNode {
+		elem.onAddToImage(this);
+
 		this.componentsById[elem.getId()] = elem;
-		return this.root.addLeaf(elem);
+
+		// If a background component, add to the background. Else,
+		// add to the normal component tree.
+		const parentTree = elem.isBackground() ? this.background : this.root;
+		return parentTree.addLeaf(elem);
+	}
+
+	private removeElementDirectly(element: AbstractComponent) {
+		const container = this.findParent(element);
+		container?.remove();
+
+		if (container) {
+			this.onDestroyElement(element);
+			return true;
+		}
+
+		return false;
 	}
 
 	/**
@@ -113,6 +204,11 @@ export default class EditorImage {
 		return new EditorImage.AddElementCommand(elem, applyByFlattening);
 	}
 
+	/** @see EditorImage.addElement */
+	public addElement(elem: AbstractComponent, applyByFlattening?: boolean) {
+		return EditorImage.addElement(elem, applyByFlattening);
+	}
+
 	// A Command that can access private [EditorImage] functionality
 	private static AddElementCommand = class extends SerializableCommand {
 		private serializedElem: any;
@@ -147,8 +243,7 @@ export default class EditorImage {
 		}
 
 		public unapply(editor: Editor) {
-			const container = editor.image.findParent(this.element);
-			container?.remove();
+			editor.image.removeElementDirectly(this.element);
 			editor.queueRerender();
 		}
 
@@ -255,6 +350,19 @@ export class ImageNode {
 		return result;
 	}
 
+	// Returns the child of this with the target content or `null` if no
+	// such child exists.
+	public getChildWithContent(target: AbstractComponent): ImageNode|null {
+		const candidates = this.getLeavesIntersectingRegion(target.getBBox());
+		for (const candidate of candidates) {
+			if (candidate.getContent() === target) {
+				return candidate;
+			}
+		}
+
+		return null;
+	}
+
 	// Returns a list of leaves with this as an ancestor.
 	// Like getLeavesInRegion, but does not check whether ancestors are in a given rectangle
 	public getLeaves(): ImageNode[] {
@@ -388,6 +496,8 @@ export class ImageNode {
 
 	// Remove this node and all of its children
 	public remove() {
+		this.content?.onRemoveFromImage();
+
 		if (!this.parent) {
 			this.content = null;
 			this.children = [];
@@ -417,8 +527,13 @@ export class ImageNode {
 		this.children = [];
 	}
 
-	public render(renderer: AbstractRenderer, visibleRect: Rect2) {
-		const leaves = this.getLeavesIntersectingRegion(visibleRect, rect => renderer.isTooSmallToRender(rect));
+	public render(renderer: AbstractRenderer, visibleRect?: Rect2) {
+		let leaves;
+		if (visibleRect) {
+			leaves = this.getLeavesIntersectingRegion(visibleRect, rect => renderer.isTooSmallToRender(rect));
+		} else {
+			leaves = this.getLeaves();
+		}
 		sortLeavesByZIndex(leaves);
 
 		for (const leaf of leaves) {

package/src/EventDispatcher.ts

@@ -20,6 +20,9 @@
 
 type Listener<Value> = (data: Value)=> void;
 type CallbackHandler<EventType> = (data: EventType)=> void;
+export interface DispatcherEventListener {
+	remove: ()=>void;
+}
 
 // { @inheritDoc EventDispatcher! }
 export default class EventDispatcher<EventKeyType extends string|symbol|number, EventMessageType> {
@@ -38,7 +41,7 @@ export default class EventDispatcher<EventKeyType extends string|symbol|number,
 		}
 	}
 
-	public on(eventName: EventKeyType, callback: CallbackHandler<EventMessageType>) {
+	public on(eventName: EventKeyType, callback: CallbackHandler<EventMessageType>): DispatcherEventListener {
 		if (!this.listeners[eventName]) this.listeners[eventName] = [];
 		this.listeners[eventName]!.push(callback);
 

package/src/SVGLoader.ts

@@ -1,5 +1,6 @@
 import Color4 from './Color4';
 import AbstractComponent from './components/AbstractComponent';
+import ImageBackground, { BackgroundType, imageBackgroundCSSClassName } from './components/ImageBackground';
 import ImageComponent from './components/ImageComponent';
 import Stroke from './components/Stroke';
 import SVGGlobalAttributesObject from './components/SVGGlobalAttributesObject';
@@ -186,6 +187,12 @@ export default class SVGLoader implements ImageLoader {
 		await this.onAddComponent?.(elem);
 	}
 
+	private async addBackground(node: SVGPathElement) {
+		const fill = Color4.fromString(node.getAttribute('fill') ?? node.style.fill ?? 'black');
+		const elem = new ImageBackground(BackgroundType.SolidColor, fill);
+		await this.onAddComponent?.(elem);
+	}
+
 	// If given, 'supportedAttrs' will have x, y, etc. attributes that were used in computing the transform added to it,
 	// to prevent storing duplicate transform information when saving the component.
 	private getTransform(elem: SVGElement, supportedAttrs?: string[], computedStyles?: CSSStyleDeclaration): Mat33 {
@@ -359,7 +366,11 @@ export default class SVGLoader implements ImageLoader {
 			// Continue -- visit the node's children.
 			break;
 		case 'path':
-			await this.addPath(node as SVGPathElement);
+			if (node.classList.contains(imageBackgroundCSSClassName)) {
+				await this.addBackground(node as SVGPathElement);
+			} else {
+				await this.addPath(node as SVGPathElement);
+			}
 			break;
 		case 'text':
 			await this.addText(node as SVGTextElement);

package/src/Viewport.ts

@@ -6,7 +6,6 @@ import Rect2 from './math/Rect2';
 import { Point2, Vec2 } from './math/Vec2';
 import Vec3 from './math/Vec3';
 import { StrokeDataPoint } from './types';
-import { EditorEventType, EditorNotifier } from './types';
 
 // Returns the base type of some type of point/number
 type PointDataType<T extends Point2|StrokeDataPoint|number> = T extends Point2 ? Point2 : number;
@@ -15,6 +14,8 @@ export abstract class ViewportTransform extends Command {
 	public abstract readonly transform: Mat33;
 }
 
+type TransformChangeCallback = (oldTransform: Mat33, newTransform: Mat33)=> void;
+
 export class Viewport {
 	// Command that translates/scales the viewport.
 	private static ViewportTransform = class extends ViewportTransform {
@@ -82,11 +83,24 @@ export class Viewport {
 	private screenRect: Rect2;
 
 	// @internal
-	public constructor(private notifier: EditorNotifier) {
+	public constructor(private onTransformChangeCallback: TransformChangeCallback) {
 		this.resetTransform(Mat33.identity);
 		this.screenRect = Rect2.empty;
 	}
 
+	/**
+	 * @returns a temporary copy of `this` that does not notify when modified. This is
+	 * useful when rendering with a temporarily different viewport.
+	 */
+	public getTemporaryClone(): Viewport {
+		const result = new Viewport(() => {});
+		result.transform = this.transform;
+		result.inverseTransform = this.inverseTransform;
+		result.screenRect = this.screenRect;
+
+		return result;
+	}
+
 	// @internal
 	public updateScreenSize(screenSize: Vec2) {
 		this.screenRect = this.screenRect.resizedTo(screenSize);
@@ -120,11 +134,7 @@ export class Viewport {
 		const oldTransform = this.transform;
 		this.transform = newTransform;
 		this.inverseTransform = newTransform.inverse();
-		this.notifier.dispatch(EditorEventType.ViewportChanged, {
-			kind: EditorEventType.ViewportChanged,
-			newTransform,
-			oldTransform,
-		});
+		this.onTransformChangeCallback?.(oldTransform, newTransform);
 	}
 
 	public get screenToCanvasTransform(): Mat33 {

package/src/components/AbstractComponent.ts

@@ -37,9 +37,15 @@ export default abstract class AbstractComponent {
 	protected constructor(
 		// A unique identifier for the type of component
 		private readonly componentKind: string,
+		initialZIndex?: number,
 	) {
 		this.lastChangedTime = (new Date()).getTime();
-		this.zIndex = AbstractComponent.zIndexCounter++;
+
+		if (initialZIndex !== undefined) {
+			this.zIndex = initialZIndex;
+		} else {
+			this.zIndex = AbstractComponent.zIndexCounter++;
+		}
 
 		// Create a unique ID.
 		this.id = `${new Date().getTime()}-${Math.random()}`;
@@ -96,6 +102,10 @@ export default abstract class AbstractComponent {
 		return this.contentBBox;
 	}
 
+	/** Called when this component is added to the given image. */
+	public onAddToImage(_image: EditorImage): void { }
+	public onRemoveFromImage(): void { }
+
 	public abstract render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
 
 	/** @return true if `lineSegment` intersects this component. */
@@ -146,6 +156,12 @@ export default abstract class AbstractComponent {
 		return true;
 	}
 
+	// @returns true iff this component should be added to the background, rather than the
+	// foreground of the image.
+	public isBackground(): boolean {
+		return false;
+	}
+
 	// @returns an approximation of the proportional time it takes to render this component.
 	// This is intended to be a rough estimate, but, for example, a stroke with two points sould have
 	// a renderingWeight approximately twice that of a stroke with one point.

package/src/components/ImageBackground.test.ts

@@ -0,0 +1,35 @@
+import Color4 from '../Color4';
+import { Path, Rect2 } from '../math/lib';
+import createEditor from '../testing/createEditor';
+import ImageBackground, { BackgroundType, imageBackgroundCSSClassName } from './ImageBackground';
+
+describe('ImageBackground', () => {
+	it('should render to fill exported SVG', () => {
+		const editor = createEditor();
+		const background = new ImageBackground(BackgroundType.SolidColor, Color4.green);
+		editor.image.addElement(
+			background
+		).apply(editor);
+
+		const expectedImportExportRect = new Rect2(-10, 10, 15, 20);
+		editor.setImportExportRect(expectedImportExportRect).apply(editor);
+		expect(editor.getImportExportRect()).objEq(expectedImportExportRect);
+
+		expect(background.getBBox()).objEq(expectedImportExportRect);
+
+		const rendered = editor.toSVG();
+		const renderedBackground = rendered.querySelector(`.${imageBackgroundCSSClassName}`);
+
+		if (renderedBackground === null) {
+			throw new Error('ImageBackground did not render in exported SVG');
+		}
+
+		expect(renderedBackground.tagName.toLowerCase()).toBe('path');
+
+		const pathString = renderedBackground.getAttribute('d')!;
+		expect(pathString).not.toBeNull();
+
+		const path = Path.fromString(pathString);
+		expect(path.bbox).objEq(editor.getImportExportRect());
+	});
+});