js-draw 0.15.0 → 0.15.2

package/dist/src/rendering/renderers/AbstractRenderer.js

@@ -64,19 +64,34 @@ export default class AbstractRenderer {
             this.currentPaths.push(path);
         }
     }
-    // Draw a rectangle. Boundary lines have width [lineWidth] and are filled with [lineFill].
+    // Strokes a rectangle. Boundary lines have width [lineWidth] and are filled with [lineFill].
     // This is equivalent to `drawPath(Path.fromRect(...).toRenderable(...))`.
     drawRect(rect, lineWidth, lineFill) {
         const path = Path.fromRect(rect, lineWidth);
         this.drawPath(path.toRenderable(lineFill));
     }
-    // Note the start/end of an object with the given bounding box.
+    // Fills a rectangle.
+    fillRect(rect, fill) {
+        const path = Path.fromRect(rect);
+        this.drawPath(path.toRenderable({ fill }));
+    }
+    // Note the start of an object with the given bounding box.
     // Renderers are not required to support [clip]
     startObject(_boundingBox, _clip) {
         this.currentPaths = [];
         this.objectLevel++;
     }
-    endObject(_loaderData) {
+    /**
+     * Notes the end of an object.
+     * @param _loaderData - a map from strings to JSON-ifyable objects
+     * and contains properties attached to the object by whatever loader loaded the image. This
+     * is used to preserve attributes not supported by js-draw when loading/saving an image.
+     * Renderers may ignore this.
+     *
+     * @param _objectTags - a list of labels (e.g. `className`s) to be attached to the object.
+     * Renderers may ignore this.
+     */
+    endObject(_loaderData, _objectTags) {
         // Render the paths all at once
         this.flushPath();
         this.currentPaths = null;

package/dist/src/rendering/renderers/CanvasRenderer.d.ts

@@ -10,6 +10,7 @@ export default class CanvasRenderer extends AbstractRenderer {
     private ctx;
     private ignoreObjectsAboveLevel;
     private ignoringObject;
+    private currentObjectBBox;
     private minSquareCurveApproxDist;
     private minRenderSizeAnyDimen;
     private minRenderSizeBothDimens;
@@ -30,7 +31,7 @@ export default class CanvasRenderer extends AbstractRenderer {
     drawText(text: string, transform: Mat33, style: TextStyle): void;
     drawImage(image: RenderableImage): void;
     private clipLevels;
-    startObject(boundingBox: Rect2, clip: boolean): void;
+    startObject(boundingBox: Rect2, clip?: boolean): void;
     endObject(): void;
     drawPoints(...points: Point2[]): void;
     isTooSmallToRender(rect: Rect2): boolean;

package/dist/src/rendering/renderers/CanvasRenderer.js

@@ -1,5 +1,6 @@
 import Color4 from '../../Color4';
 import TextComponent from '../../components/TextComponent';
+import Path from '../../math/Path';
 import { Vec2 } from '../../math/Vec2';
 import AbstractRenderer from './AbstractRenderer';
 export default class CanvasRenderer extends AbstractRenderer {
@@ -8,6 +9,7 @@ export default class CanvasRenderer extends AbstractRenderer {
         this.ctx = ctx;
         this.ignoreObjectsAboveLevel = null;
         this.ignoringObject = false;
+        this.currentObjectBBox = null;
         this.clipLevels = [];
         this.setDraftMode(false);
     }
@@ -43,8 +45,8 @@ export default class CanvasRenderer extends AbstractRenderer {
         }
         else {
             this.minSquareCurveApproxDist = 0.5;
-            this.minRenderSizeBothDimens = 0.3;
-            this.minRenderSizeAnyDimen = 1e-5;
+            this.minRenderSizeBothDimens = 0.2;
+            this.minRenderSizeAnyDimen = 1e-6;
         }
     }
     displaySize() {
@@ -106,9 +108,15 @@ export default class CanvasRenderer extends AbstractRenderer {
         }
     }
     drawPath(path) {
+        var _a;
         if (this.ignoringObject) {
             return;
         }
+        // If part of a huge object, it might be worth trimming the path
+        if ((_a = this.currentObjectBBox) === null || _a === void 0 ? void 0 : _a.containsRect(this.getViewport().visibleRect)) {
+            // Try to trim/remove parts of the path outside of the bounding box.
+            path = Path.visualEquivalent(path, this.getViewport().visibleRect);
+        }
         super.drawPath(path);
     }
     drawText(text, transform, style) {
@@ -140,6 +148,7 @@ export default class CanvasRenderer extends AbstractRenderer {
             this.ignoringObject = true;
         }
         super.startObject(boundingBox);
+        this.currentObjectBBox = boundingBox;
         if (!this.ignoringObject && clip) {
             this.clipLevels.push(this.objectLevel);
             this.ctx.save();
@@ -158,6 +167,7 @@ export default class CanvasRenderer extends AbstractRenderer {
                 this.clipLevels.pop();
             }
         }
+        this.currentObjectBBox = null;
         super.endObject();
         // If exiting an object with a too-small-to-draw bounding box,
         if (this.ignoreObjectsAboveLevel !== null && this.getNestingLevel() <= this.ignoreObjectsAboveLevel) {

package/dist/src/rendering/renderers/SVGRenderer.d.ts

@@ -28,7 +28,7 @@ export default class SVGRenderer extends AbstractRenderer {
     drawText(text: string, transform: Mat33, style: TextStyle): void;
     drawImage(image: RenderableImage): void;
     startObject(boundingBox: Rect2): void;
-    endObject(loaderData?: LoadSaveDataTable): void;
+    endObject(loaderData?: LoadSaveDataTable, elemClassNames?: string[]): void;
     private unimplementedMessage;
     protected beginPath(_startPoint: Point2): void;
     protected endPath(_style: RenderingStyle): void;

package/dist/src/rendering/renderers/SVGRenderer.js

@@ -215,8 +215,8 @@ export default class SVGRenderer extends AbstractRenderer {
         this.textParentStyle = null;
         this.objectElems = [];
     }
-    endObject(loaderData) {
-        var _a;
+    endObject(loaderData, elemClassNames) {
+        var _a, _b;
         super.endObject(loaderData);
         // Don't extend paths across objects
         this.addPathToSVG();
@@ -237,6 +237,12 @@ export default class SVGRenderer extends AbstractRenderer {
                 }
             }
         }
+        // Add class names to the object, if given.
+        if (elemClassNames) {
+            for (const elem of (_b = this.objectElems) !== null && _b !== void 0 ? _b : []) {
+                elem.classList.add(...elemClassNames);
+            }
+        }
     }
     // Not implemented -- use drawPath instead.
     unimplementedMessage() { throw new Error('Not implemenented!'); }

package/dist/src/testing/sendTouchEvent.d.ts

@@ -0,0 +1,6 @@
+import Editor from '../Editor';
+import { Vec2 } from '../math/Vec2';
+import Pointer from '../Pointer';
+import { InputEvtType } from '../types';
+declare const sendTouchEvent: (editor: Editor, eventType: InputEvtType.PointerDownEvt | InputEvtType.PointerMoveEvt | InputEvtType.PointerUpEvt, screenPos: Vec2, allOtherPointers?: Pointer[]) => Pointer;
+export default sendTouchEvent;

package/dist/src/testing/sendTouchEvent.js

@@ -0,0 +1,26 @@
+import Pointer, { PointerDevice } from '../Pointer';
+import { InputEvtType } from '../types';
+const sendTouchEvent = (editor, eventType, screenPos, allOtherPointers) => {
+    const canvasPos = editor.viewport.screenToCanvas(screenPos);
+    let ptrId = 0;
+    let maxPtrId = 0;
+    // Get a unique ID for the main pointer
+    // (try to use id=0, but don't use it if it's already in use).
+    for (const pointer of allOtherPointers !== null && allOtherPointers !== void 0 ? allOtherPointers : []) {
+        maxPtrId = Math.max(pointer.id, maxPtrId);
+        if (pointer.id === ptrId) {
+            ptrId = maxPtrId + 1;
+        }
+    }
+    const mainPointer = Pointer.ofCanvasPoint(canvasPos, eventType !== InputEvtType.PointerUpEvt, editor.viewport, ptrId, PointerDevice.Touch);
+    editor.toolController.dispatchInputEvent({
+        kind: eventType,
+        allPointers: [
+            ...(allOtherPointers !== null && allOtherPointers !== void 0 ? allOtherPointers : []),
+            mainPointer,
+        ],
+        current: mainPointer,
+    });
+    return mainPointer;
+};
+export default sendTouchEvent;

package/dist/src/toolbar/IconProvider.js

@@ -1,5 +1,4 @@
 import Color4 from '../Color4';
-import EventDispatcher from '../EventDispatcher';
 import { Vec2 } from '../math/Vec2';
 import SVGRenderer from '../rendering/renderers/SVGRenderer';
 import Viewport from '../Viewport';
@@ -482,7 +481,7 @@ export default class IconProvider {
             color: pen.getColor(),
             time: nowTime,
         };
-        const viewport = new Viewport(new EventDispatcher());
+        const viewport = new Viewport(() => { });
         const builder = factory(startPoint, viewport);
         builder.addPoint(endPoint);
         const icon = document.createElementNS(svgNamespace, 'svg');

package/dist/src/toolbar/widgets/HandToolWidget.js

@@ -71,7 +71,7 @@ class ZoomWidget extends BaseWidget {
         this.setDropdownVisible(!this.isDropdownVisible());
     }
     fillDropdown(dropdown) {
-        dropdown.appendChild(makeZoomControl(this.localizationTable, this.editor));
+        dropdown.replaceChildren(makeZoomControl(this.localizationTable, this.editor));
         return true;
     }
 }

package/dist/src/tools/Eraser.js

@@ -51,10 +51,13 @@ export default class Eraser extends BaseTool {
         const intersectingElems = this.editor.image.getElementsIntersectingRegion(region).filter(component => {
             return component.intersects(line) || component.intersectsRect(eraserRect);
         });
+        // Only erase components that could be selected (and thus interacted with)
+        // by the user.
+        const toErase = intersectingElems.filter(elem => elem.isSelectable());
         // Remove any intersecting elements.
-        this.toRemove.push(...intersectingElems);
+        this.toRemove.push(...toErase);
         // Create new Erase commands for the now-to-be-erased elements and apply them.
-        const newPartialCommands = intersectingElems.map(elem => new Erase([elem]));
+        const newPartialCommands = toErase.map(elem => new Erase([elem]));
         newPartialCommands.forEach(cmd => cmd.apply(this.editor));
         this.partialCommands.push(...newPartialCommands);
         this.drawPreviewAt(currentPoint);

package/dist/src/tools/PanZoom.js

@@ -85,6 +85,12 @@ export default class PanZoom extends BaseTool {
     }
     // Returns information about the pointers in a gesture
     computePinchData(p1, p2) {
+        // Swap the pointers to ensure consistent ordering.
+        if (p1.id < p2.id) {
+            const tmp = p1;
+            p1 = p2;
+            p2 = tmp;
+        }
         const screenBetween = p2.screenPos.minus(p1.screenPos);
         const angle = screenBetween.angle();
         const dist = screenBetween.magnitude();
@@ -169,6 +175,12 @@ export default class PanZoom extends BaseTool {
         // Snap the rotation
         if (Math.abs(fullRotation - roundedFullRotation) < maxSnapAngle) {
             fullRotation = roundedFullRotation;
+            // Work around a rotation/matrix multiply bug.
+            // (See commit after 4abe27ff8e7913155828f98dee77b09c57c51d30).
+            // TODO: Fix the underlying issue and remove this.
+            if (fullRotation !== 0) {
+                fullRotation += 0.0001;
+            }
         }
         return fullRotation - this.editor.viewport.getRotationAngle();
     }

package/dist/src/tools/SelectionTool/Selection.js

@@ -157,7 +157,7 @@ export default class Selection {
             singleItemSelectionMode = true;
         }
         this.selectedElems = this.editor.image.getElementsIntersectingRegion(this.region).filter(elem => {
-            return elem.intersectsRect(this.region);
+            return elem.intersectsRect(this.region) && elem.isSelectable();
         });
         if (singleItemSelectionMode && this.selectedElems.length > 0) {
             this.selectedElems = [this.selectedElems[this.selectedElems.length - 1]];

package/dist/src/tools/SelectionTool/SelectionTool.js

@@ -158,7 +158,7 @@ export default class SelectionTool extends BaseTool {
         }
     }
     onGestureCancel() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         if (this.selectionBoxHandlingEvt) {
             (_a = this.selectionBox) === null || _a === void 0 ? void 0 : _a.onDragCancel();
         }
@@ -167,6 +167,8 @@ export default class SelectionTool extends BaseTool {
             (_b = this.selectionBox) === null || _b === void 0 ? void 0 : _b.cancelSelection();
             this.selectionBox = this.prevSelectionBox;
             (_c = this.selectionBox) === null || _c === void 0 ? void 0 : _c.addTo(this.handleOverlay);
+            (_d = this.selectionBox) === null || _d === void 0 ? void 0 : _d.recomputeRegion();
+            this.prevSelectionBox = null;
         }
         this.expandingSelectionBox = false;
     }
@@ -282,6 +284,10 @@ export default class SelectionTool extends BaseTool {
                 });
                 return true;
             }
+            if (evt.key === 'a') {
+                // Selected all in onKeyDown. Don't finalizeTransform.
+                return true;
+            }
         }
         if (this.selectionBox && SelectionTool.handleableKeys.some(key => key === evt.key)) {
             this.selectionBox.finalizeTransform();
@@ -298,7 +304,7 @@ export default class SelectionTool extends BaseTool {
         if (selectedElems.length === 0) {
             return false;
         }
-        const exportViewport = new Viewport(this.editor.notifier);
+        const exportViewport = new Viewport(() => { });
         exportViewport.updateScreenSize(Vec2.of(bbox.w, bbox.h));
         exportViewport.resetTransform(Mat33.translation(bbox.topLeft));
         const svgNameSpace = 'http://www.w3.org/2000/svg';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.15.0",
+	"version": "0.15.2",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
 	"main": "./dist/src/lib.d.ts",
 	"types": "./dist/src/lib.js",

package/src/Color4.test.ts

@@ -31,4 +31,10 @@ describe('Color4', () => {
 	it('should mix red with nothing and get red', () => {
 		expect(Color4.average([ Color4.red ])).objEq(Color4.red);
 	});
+
+	it('different colors should be different', () => {
+		expect(Color4.red.eq(Color4.red)).toBe(true);
+		expect(Color4.red.eq(Color4.green)).toBe(false);
+		expect(Color4.fromString('#ff000000').eq(Color4.transparent)).toBe(true);
+	});
 });

package/src/Color4.ts

@@ -10,7 +10,7 @@ export default class Color4 {
 		/** Blue component. `b` ∈ [0, 1] */
 		public readonly b: number,
 
-		/** Alpha/transparent component. `a` ∈ [0, 1] */
+		/** Alpha/transparent component. `a` ∈ [0, 1]. 0 = transparent */
 		public readonly a: number
 	) {
 	}
@@ -126,6 +126,11 @@ export default class Color4 {
 			return false;
 		}
 
+		// If both completely transparent,
+		if (this.a === 0 && other.a === 0) {
+			return true;
+		}
+
 		return this.toHexString() === other.toHexString();
 	}
 

package/src/Editor.ts

@@ -109,9 +109,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 +212,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 +226,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)
 		);
@@ -773,7 +772,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 +919,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 +935,12 @@ export class Editor {
 	}
 
 	public toSVG(): SVGElement {
-		const importExportViewport = this.importExportViewport;
+		const importExportViewport = this.image.getImportExportViewport();
 		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);
@@ -992,33 +992,12 @@ export class Editor {
 
 	// 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,21 +6,80 @@ 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 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.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 a `Viewport` for rendering the image when importing/exporting.
+	 */
+	public getImportExportViewport() {
+		return this.importExportViewport;
+	}
+
+	public setImportExportRect(imageRect: Rect2) {
+		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 the parent of the given element, if it exists.
@@ -98,10 +157,17 @@ export default class EditorImage {
 	}
 
 	private addElementDirectly(elem: AbstractComponent): ImageNode {
+		elem.onAddToImage(this);
+
 		this.componentsById[elem.getId()] = elem;
 		return this.root.addLeaf(elem);
 	}
 
+	private removeElementDirectly(element: AbstractComponent) {
+		const container = this.findParent(element);
+		container?.remove();
+	}
+
 	/**
 	 * Returns a command that adds the given element to the `EditorImage`.
 	 * If `applyByFlattening` is true, the content of the wet ink renderer is
@@ -113,6 +179,11 @@ export default class EditorImage {
 		return new EditorImage.AddElementCommand(elem, applyByFlattening);
 	}
 
+	/** @see EditorImage.addElement */
+	public addElement(elem: AbstractComponent, applyByFlattening: boolean = true) {
+		return EditorImage.addElement(elem, applyByFlattening);
+	}
+
 	// A Command that can access private [EditorImage] functionality
 	private static AddElementCommand = class extends SerializableCommand {
 		private serializedElem: any;
@@ -147,8 +218,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();
 		}
 
@@ -395,6 +465,8 @@ export class ImageNode {
 			return;
 		}
 
+		this.content?.onRemoveFromImage();
+
 		const oldChildCount = this.parent.children.length;
 		this.parent.children = this.parent.children.filter(node => {
 			return node !== this;

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);