js-draw 0.4.1 → 0.6.0

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

@@ -4,7 +4,6 @@ import { makeLineBuilder } from '../../components/builders/LineBuilder';
 import { makeFilledRectangleBuilder, makeOutlinedRectangleBuilder } from '../../components/builders/RectangleBuilder';
 import { EditorEventType } from '../../types';
 import { toolbarCSSPrefix } from '../HTMLToolbar';
-import { makeIconFromFactory, makePenIcon } from '../icons';
 import makeColorInput from '../makeColorInput';
 import BaseToolWidget from './BaseToolWidget';
 export default class PenToolWidget extends BaseToolWidget {
@@ -55,11 +54,11 @@ export default class PenToolWidget extends BaseToolWidget {
             // Use a square-root scale to prevent the pen's tip from overflowing.
             const scale = Math.round(Math.sqrt(this.tool.getThickness()) * 4);
             const color = this.tool.getColor();
-            return makePenIcon(scale, color.toHexString());
+            return this.editor.icons.makePenIcon(scale, color.toHexString());
         }
         else {
             const strokeFactory = this.tool.getStrokeFactory();
-            return makeIconFromFactory(this.tool, strokeFactory);
+            return this.editor.icons.makeIconFromFactory(this.tool, strokeFactory);
         }
     }
     fillDropdown(dropdown) {
@@ -127,5 +126,19 @@ export default class PenToolWidget extends BaseToolWidget {
         dropdown.replaceChildren(container);
         return true;
     }
+    onKeyPress(event) {
+        if (!this.isSelected()) {
+            return false;
+        }
+        // Map alt+0-9 to different pen types.
+        if (/^[0-9]$/.exec(event.key) && event.ctrlKey) {
+            const penTypeIdx = parseInt(event.key) - 1;
+            if (penTypeIdx >= 0 && penTypeIdx < this.penTypes.length) {
+                this.tool.setStrokeFactory(this.penTypes[penTypeIdx].factory);
+                return true;
+            }
+        }
+        return false;
+    }
 }
 PenToolWidget.idCounter = 0;

package/dist/src/toolbar/widgets/SelectionToolWidget.d.ts

@@ -1,10 +1,13 @@
 import Editor from '../../Editor';
 import SelectionTool from '../../tools/SelectionTool/SelectionTool';
+import { KeyPressEvent } from '../../types';
 import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
 export default class SelectionToolWidget extends BaseToolWidget {
     private tool;
     constructor(editor: Editor, tool: SelectionTool, localization: ToolbarLocalization);
+    private resizeImageToSelection;
+    protected onKeyPress(event: KeyPressEvent): boolean;
     protected getTitle(): string;
     protected createIcon(): Element;
 }

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

@@ -1,21 +1,19 @@
 import { EditorEventType } from '../../types';
-import { makeDeleteSelectionIcon, makeDuplicateSelectionIcon, makeResizeViewportIcon, makeSelectionIcon } from '../icons';
 import ActionButtonWidget from './ActionButtonWidget';
 import BaseToolWidget from './BaseToolWidget';
 export default class SelectionToolWidget extends BaseToolWidget {
     constructor(editor, tool, localization) {
         super(editor, tool, localization);
         this.tool = tool;
-        const resizeButton = new ActionButtonWidget(editor, localization, makeResizeViewportIcon, this.localizationTable.resizeImageToSelection, () => {
-            const selection = this.tool.getSelection();
-            this.editor.dispatch(this.editor.setImportExportRect(selection.region));
+        const resizeButton = new ActionButtonWidget(editor, localization, () => editor.icons.makeResizeViewportIcon(), this.localizationTable.resizeImageToSelection, () => {
+            this.resizeImageToSelection();
         });
-        const deleteButton = new ActionButtonWidget(editor, localization, makeDeleteSelectionIcon, this.localizationTable.deleteSelection, () => {
+        const deleteButton = new ActionButtonWidget(editor, localization, () => editor.icons.makeDeleteSelectionIcon(), this.localizationTable.deleteSelection, () => {
             const selection = this.tool.getSelection();
             this.editor.dispatch(selection.deleteSelectedObjects());
             this.tool.clearSelection();
         });
-        const duplicateButton = new ActionButtonWidget(editor, localization, makeDuplicateSelectionIcon, this.localizationTable.duplicateSelection, () => {
+        const duplicateButton = new ActionButtonWidget(editor, localization, () => editor.icons.makeDuplicateSelectionIcon(), this.localizationTable.duplicateSelection, () => {
             const selection = this.tool.getSelection();
             this.editor.dispatch(selection.duplicateSelectedObjects());
         });
@@ -40,10 +38,25 @@ export default class SelectionToolWidget extends BaseToolWidget {
             }
         });
     }
+    resizeImageToSelection() {
+        const selection = this.tool.getSelection();
+        if (selection) {
+            this.editor.dispatch(this.editor.setImportExportRect(selection.region));
+        }
+    }
+    onKeyPress(event) {
+        // Resize image to selection:
+        // Other keys are handled directly by the selection tool.
+        if (event.ctrlKey && event.key === 'r') {
+            this.resizeImageToSelection();
+            return true;
+        }
+        return false;
+    }
     getTitle() {
         return this.localizationTable.select;
     }
     createIcon() {
-        return makeSelectionIcon();
+        return this.editor.icons.makeSelectionIcon();
     }
 }

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

@@ -1,6 +1,5 @@
 import { EditorEventType } from '../../types';
 import { toolbarCSSPrefix } from '../HTMLToolbar';
-import { makeTextIcon } from '../icons';
 import makeColorInput from '../makeColorInput';
 import BaseToolWidget from './BaseToolWidget';
 export default class TextToolWidget extends BaseToolWidget {
@@ -21,7 +20,7 @@ export default class TextToolWidget extends BaseToolWidget {
     }
     createIcon() {
         const textStyle = this.tool.getTextStyle();
-        return makeTextIcon(textStyle);
+        return this.editor.icons.makeTextIcon(textStyle);
     }
     fillDropdown(dropdown) {
         const fontRow = document.createElement('div');

package/dist/src/tools/PanZoom.d.ts

@@ -35,7 +35,7 @@ export default class PanZoom extends BaseTool {
     onGestureCancel(): void;
     private updateTransform;
     onWheel({ delta, screenPos }: WheelEvt): boolean;
-    onKeyPress({ key }: KeyPressEvent): boolean;
+    onKeyPress({ key, ctrlKey, altKey }: KeyPressEvent): boolean;
     setMode(mode: PanZoomMode): void;
     getMode(): PanZoomMode;
 }

package/dist/src/tools/PanZoom.js

@@ -134,10 +134,13 @@ export default class PanZoom extends BaseTool {
         this.updateTransform(transformUpdate, true);
         return true;
     }
-    onKeyPress({ key }) {
+    onKeyPress({ key, ctrlKey, altKey }) {
         if (!(this.mode & PanZoomMode.Keyboard)) {
             return false;
         }
+        if (ctrlKey || altKey) {
+            return false;
+        }
         // No need to keep the same the transform for keyboard events.
         this.transform = Viewport.transformBy(Mat33.identity);
         let translation = Vec2.zero;

package/dist/src/tools/SelectionTool/SelectionTool.d.ts

@@ -10,6 +10,8 @@ export default class SelectionTool extends BaseTool {
     private prevSelectionBox;
     private selectionBox;
     private lastEvtTarget;
+    private expandingSelectionBox;
+    private shiftKeyPressed;
     constructor(editor: Editor, description: string);
     private makeSelectionBox;
     private selectionBoxHandlingEvt;
@@ -26,6 +28,7 @@ export default class SelectionTool extends BaseTool {
     onCopy(event: CopyEvent): boolean;
     setEnabled(enabled: boolean): void;
     getSelection(): Selection | null;
+    getSelectedObjects(): AbstractComponent[];
     setSelection(objects: AbstractComponent[]): void;
     clearSelection(): void;
 }

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

@@ -16,6 +16,8 @@ export default class SelectionTool extends BaseTool {
         super(editor.notifier, description);
         this.editor = editor;
         this.lastEvtTarget = null;
+        this.expandingSelectionBox = false;
+        this.shiftKeyPressed = false;
         this.selectionBoxHandlingEvt = false;
         this.handleOverlay = document.createElement('div');
         editor.createHTMLOverlay(this.handleOverlay);
@@ -34,10 +36,13 @@ export default class SelectionTool extends BaseTool {
         });
     }
     makeSelectionBox(selectionStartPos) {
+        var _a;
         this.prevSelectionBox = this.selectionBox;
         this.selectionBox = new Selection(selectionStartPos, this.editor);
-        // Remove any previous selection rects
-        this.handleOverlay.replaceChildren();
+        if (!this.expandingSelectionBox) {
+            // Remove any previous selection rects
+            (_a = this.prevSelectionBox) === null || _a === void 0 ? void 0 : _a.cancelSelection();
+        }
         this.selectionBox.addTo(this.handleOverlay);
     }
     onPointerDown(event) {
@@ -45,8 +50,11 @@ export default class SelectionTool extends BaseTool {
         if (event.allPointers.length === 1 && event.current.isPrimary) {
             if (this.lastEvtTarget && ((_a = this.selectionBox) === null || _a === void 0 ? void 0 : _a.onDragStart(event.current, this.lastEvtTarget))) {
                 this.selectionBoxHandlingEvt = true;
+                this.expandingSelectionBox = false;
             }
             else {
+                // Shift key: Combine the new and old selection boxes at the end of the gesture.
+                this.expandingSelectionBox = this.shiftKeyPressed;
                 this.makeSelectionBox(event.current.canvasPos);
             }
             return true;
@@ -81,6 +89,7 @@ export default class SelectionTool extends BaseTool {
             this.selectionBox = null;
         }
     }
+    // Called after a gestureCancel and a pointerUp
     onGestureEnd() {
         this.lastEvtTarget = null;
         if (!this.selectionBox)
@@ -105,7 +114,19 @@ export default class SelectionTool extends BaseTool {
         if (!this.selectionBox)
             return;
         this.selectionBox.setToPoint(event.current.canvasPos);
-        this.onGestureEnd();
+        // Were we expanding the previous selection?
+        if (this.expandingSelectionBox && this.prevSelectionBox) {
+            // If so, finish expanding.
+            this.expandingSelectionBox = false;
+            this.selectionBox.resolveToObjects();
+            this.setSelection([
+                ...this.selectionBox.getSelectedObjects(),
+                ...this.prevSelectionBox.getSelectedObjects(),
+            ]);
+        }
+        else {
+            this.onGestureEnd();
+        }
     }
     onGestureCancel() {
         var _a, _b, _c;
@@ -118,8 +139,28 @@ export default class SelectionTool extends BaseTool {
             this.selectionBox = this.prevSelectionBox;
             (_c = this.selectionBox) === null || _c === void 0 ? void 0 : _c.addTo(this.handleOverlay);
         }
+        this.expandingSelectionBox = false;
     }
     onKeyPress(event) {
+        if (this.selectionBox && event.ctrlKey && event.key === 'd') {
+            // Handle duplication on key up — we don't want to accidentally duplicate
+            // many times.
+            return true;
+        }
+        else if (event.key === 'a' && event.ctrlKey) {
+            // Handle ctrl+A on key up.
+            // Return early to prevent 'a' from moving the selection/view.
+            return true;
+        }
+        else if (event.ctrlKey) {
+            // Don't transform the selection with, for example, ctrl+i.
+            // Pass it to another tool, if apliccable.
+            return false;
+        }
+        else if (event.key === 'Shift') {
+            this.shiftKeyPressed = true;
+            return true;
+        }
         let rotationSteps = 0;
         let xTranslateSteps = 0;
         let yTranslateSteps = 0;
@@ -194,6 +235,20 @@ export default class SelectionTool extends BaseTool {
         return handled;
     }
     onKeyUp(evt) {
+        if (evt.key === 'Shift') {
+            this.shiftKeyPressed = false;
+            return true;
+        }
+        else if (evt.ctrlKey) {
+            if (this.selectionBox && evt.key === 'd') {
+                this.editor.dispatch(this.selectionBox.duplicateSelectedObjects());
+                return true;
+            }
+            else if (evt.key === 'a') {
+                this.setSelection(this.editor.image.getAllElements());
+                return true;
+            }
+        }
         if (this.selectionBox && SelectionTool.handleableKeys.some(key => key === evt.key)) {
             this.selectionBox.finalizeTransform();
             return true;
@@ -244,10 +299,18 @@ export default class SelectionTool extends BaseTool {
         }
     }
     // Get the object responsible for displaying this' selection.
+    // @internal
     getSelection() {
         return this.selectionBox;
     }
+    getSelectedObjects() {
+        var _a, _b;
+        return (_b = (_a = this.selectionBox) === null || _a === void 0 ? void 0 : _a.getSelectedObjects()) !== null && _b !== void 0 ? _b : [];
+    }
+    // Select the given `objects`. Any non-selectable objects in `objects` are ignored.
     setSelection(objects) {
+        // Only select selectable objects.
+        objects = objects.filter(obj => obj.isSelectable());
         let bbox = null;
         for (const object of objects) {
             if (bbox) {

package/dist/src/tools/ToolController.js

@@ -10,6 +10,7 @@ import TextTool from './TextTool';
 import PipetteTool from './PipetteTool';
 import ToolSwitcherShortcut from './ToolSwitcherShortcut';
 import PasteHandler from './PasteHandler';
+import ToolbarShortcutHandler from './ToolbarShortcutHandler';
 export default class ToolController {
     /** @internal */
     constructor(editor, localization) {
@@ -28,6 +29,7 @@ export default class ToolController {
             new Eraser(editor, localization.eraserTool),
             new SelectionTool(editor, localization.selectionTool),
             new TextTool(editor, localization.textTool, localization),
+            new PanZoom(editor, PanZoomMode.SinglePointerGestures, localization.anyDevicePanning)
         ];
         this.tools = [
             new PipetteTool(editor, localization.pipetteTool),
@@ -35,6 +37,7 @@ export default class ToolController {
             ...primaryTools,
             keyboardPanZoomTool,
             new UndoRedoShortcut(editor),
+            new ToolbarShortcutHandler(editor),
             new ToolSwitcherShortcut(editor),
             new PasteHandler(editor),
         ];

package/dist/src/tools/ToolbarShortcutHandler.d.ts

@@ -0,0 +1,12 @@
+import Editor from '../Editor';
+import { KeyPressEvent } from '../types';
+import BaseTool from './BaseTool';
+declare type KeyPressListener = (event: KeyPressEvent) => boolean;
+export default class ToolbarShortcutHandler extends BaseTool {
+    private listeners;
+    constructor(editor: Editor);
+    registerListener(listener: KeyPressListener): void;
+    removeListener(listener: KeyPressListener): void;
+    onKeyPress(event: KeyPressEvent): boolean;
+}
+export {};

package/dist/src/tools/ToolbarShortcutHandler.js

@@ -0,0 +1,23 @@
+// Allows the toolbar to register keyboard events.
+// @packageDocumentation
+import BaseTool from './BaseTool';
+export default class ToolbarShortcutHandler extends BaseTool {
+    constructor(editor) {
+        super(editor.notifier, editor.localization.changeTool);
+        this.listeners = new Set([]);
+    }
+    registerListener(listener) {
+        this.listeners.add(listener);
+    }
+    removeListener(listener) {
+        this.listeners.delete(listener);
+    }
+    onKeyPress(event) {
+        for (const listener of this.listeners) {
+            if (listener(event)) {
+                return true;
+            }
+        }
+        return false;
+    }
+}

package/dist/src/tools/lib.d.ts

@@ -12,3 +12,4 @@ export { default as TextTool } from './TextTool';
 export { default as SelectionTool } from './SelectionTool/SelectionTool';
 export { default as EraserTool } from './Eraser';
 export { default as PasteHandler } from './PasteHandler';
+export { default as ToolbarShortcutHandler } from './ToolbarShortcutHandler';

package/dist/src/tools/lib.js

@@ -12,3 +12,4 @@ export { default as TextTool } from './TextTool';
 export { default as SelectionTool } from './SelectionTool/SelectionTool';
 export { default as EraserTool } from './Eraser';
 export { default as PasteHandler } from './PasteHandler';
+export { default as ToolbarShortcutHandler } from './ToolbarShortcutHandler';

package/dist/src/tools/localization.d.ts

@@ -12,6 +12,7 @@ export interface ToolLocalization {
     enterTextToInsert: string;
     changeTool: string;
     pasteHandler: string;
+    anyDevicePanning: string;
     copied: (count: number, description: string) => string;
     pasted: (count: number, description: string) => string;
     toolEnabledAnnouncement: (toolName: string) => string;

package/dist/src/tools/localization.js

@@ -12,6 +12,7 @@ export const defaultToolLocalization = {
     enterTextToInsert: 'Text to insert',
     changeTool: 'Change tool',
     pasteHandler: 'Copy paste handler',
+    anyDevicePanning: 'Any device panning',
     copied: (count, description) => `Copied ${count} ${description}`,
     pasted: (count, description) => `Pasted ${count} ${description}`,
     toolEnabledAnnouncement: (toolName) => `${toolName} enabled`,

package/dist/src/types.d.ts

@@ -34,12 +34,14 @@ export interface WheelEvt {
 export interface KeyPressEvent {
     readonly kind: InputEvtType.KeyPressEvent;
     readonly key: string;
-    readonly ctrlKey: boolean;
+    readonly ctrlKey: boolean | undefined;
+    readonly altKey: boolean | undefined;
 }
 export interface KeyUpEvent {
     readonly kind: InputEvtType.KeyUpEvent;
     readonly key: string;
-    readonly ctrlKey: boolean;
+    readonly ctrlKey: boolean | undefined;
+    readonly altKey: boolean | undefined;
 }
 export interface CopyEvent {
     readonly kind: InputEvtType.CopyEvent;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.4.1",
+	"version": "0.6.0",
 	"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/Editor.ts

@@ -37,6 +37,7 @@ import Mat33 from './math/Mat33';
 import Rect2 from './math/Rect2';
 import { EditorLocalization } from './localization';
 import getLocalizationTable from './localizations/getLocalizationTable';
+import IconProvider from './toolbar/IconProvider';
 
 type HTMLPointerEventType = 'pointerdown'|'pointermove'|'pointerup'|'pointercancel';
 type HTMLPointerEventFilter = (eventName: HTMLPointerEventType, event: PointerEvent)=>boolean;
@@ -58,6 +59,8 @@ export interface EditorSettings {
 	/** Minimum zoom fraction (e.g. 0.5 → 50% zoom). */
 	minZoom: number,
 	maxZoom: number,
+
+	iconProvider: IconProvider,
 }
 
 // { @inheritDoc Editor! }
@@ -101,22 +104,23 @@ export class Editor {
 	 * editor.dispatch(addElementCommand);
 	 * ```
 	 */
-	public image: EditorImage;
+	public readonly image: EditorImage;
 
 	/** Viewport for the exported/imported image. */
 	private importExportViewport: Viewport;
 
 	/** @internal */
-	public localization: EditorLocalization;
+	public readonly localization: EditorLocalization;
 
-	public viewport: Viewport;
-	public toolController: ToolController;
+	public readonly icons: IconProvider;
+	public readonly viewport: Viewport;
+	public readonly toolController: ToolController;
 
 	/**
 	 * Global event dispatcher/subscriber.
 	 * @see {@link types.EditorEventType}
 	 */
-	public notifier: EditorNotifier;
+	public readonly notifier: EditorNotifier;
 
 	private loadingWarning: HTMLElement;
 	private accessibilityAnnounceArea: HTMLElement;
@@ -164,7 +168,9 @@ export class Editor {
 			localization: this.localization,
 			minZoom: settings.minZoom ?? 2e-10,
 			maxZoom: settings.maxZoom ?? 1e12,
+			iconProvider: settings.iconProvider ?? new IconProvider(),
 		};
+		this.icons = this.settings.iconProvider;
 
 		this.container = document.createElement('div');
 		this.renderingRegion = document.createElement('div');
@@ -586,6 +592,7 @@ export class Editor {
 				kind: InputEvtType.KeyPressEvent,
 				key: evt.key,
 				ctrlKey: evt.ctrlKey,
+				altKey: evt.altKey,
 			})) {
 				evt.preventDefault();
 			} else if (evt.key === 'Escape') {
@@ -598,6 +605,7 @@ export class Editor {
 				kind: InputEvtType.KeyUpEvent,
 				key: evt.key,
 				ctrlKey: evt.ctrlKey,
+				altKey: evt.altKey,
 			})) {
 				evt.preventDefault();
 			}
@@ -783,12 +791,14 @@ export class Editor {
 	public sendKeyboardEvent(
 		eventType: InputEvtType.KeyPressEvent|InputEvtType.KeyUpEvent,
 		key: string,
-		ctrlKey: boolean = false
+		ctrlKey: boolean = false,
+		altKey: boolean = false,
 	) {
 		this.toolController.dispatchInputEvent({
 			kind: eventType,
 			key,
-			ctrlKey
+			ctrlKey,
+			altKey,
 		});
 	}
 

package/src/EditorImage.ts

@@ -54,6 +54,15 @@ export default class EditorImage {
 		}
 	}
 
+	/** @returns all elements in the image, sorted by z-index. This can be slow for large images. */
+	public getAllElements() {
+		const leaves = this.root.getLeaves();
+		sortLeavesByZIndex(leaves);
+
+		return leaves.map(leaf => leaf.getContent()!);
+	}
+
+	/** @returns a list of `AbstractComponent`s intersecting `region`, sorted by z-index. */
 	public getElementsIntersectingRegion(region: Rect2): AbstractComponent[] {
 		const leaves = this.root.getLeavesIntersectingRegion(region);
 		sortLeavesByZIndex(leaves);

package/src/SVGLoader.test.ts

@@ -0,0 +1,37 @@
+import { Rect2, TextComponent, Vec2 } from './lib';
+import SVGLoader from './SVGLoader';
+import createEditor from './testing/createEditor';
+
+describe('SVGLoader', () => {
+	it('should correctly load x/y-positioned text nodes', async () => {
+		const editor = createEditor();
+		await editor.loadFrom(SVGLoader.fromString(`
+			<svg>
+				<text>Testing...</text>
+				<text y=100>Test 2...</text>
+				<text x=100>Test 3...</text>
+				<text x=100 y=100>Test 3...</text>
+		
+				<!-- Transform matrix: translate by (100,0) -->
+				<text style='transform: matrix(1,0,0,1,100,0);'>Test 3...</text>
+			</svg>
+		`, true));
+		const elems = editor.image
+			.getElementsIntersectingRegion(new Rect2(-1000, -1000, 10000, 10000))
+			.filter(elem => elem instanceof TextComponent);
+		expect(elems).toHaveLength(5);
+		const topLefts = elems.map(elem => elem.getBBox().topLeft);
+
+		// Top-left of Testing... should be (0, 0) ± 10 pixels (objects are aligned based on baseline)
+		expect(topLefts[0]).objEq(Vec2.of(0, 0), 10);
+
+		expect(topLefts[1].y - topLefts[0].y).toBe(100);
+		expect(topLefts[1].x - topLefts[0].x).toBe(0);
+
+		expect(topLefts[2].y - topLefts[0].y).toBe(0);
+		expect(topLefts[2].x - topLefts[0].x).toBe(100);
+
+		expect(topLefts[4].x - topLefts[0].x).toBe(100);
+		expect(topLefts[4].y - topLefts[0].y).toBe(0);
+	});
+});

package/src/SVGLoader.ts

@@ -124,7 +124,7 @@ export default class SVGLoader implements ImageLoader {
 			);
 		}
 
-		if (supportedStyleAttrs) {
+		if (supportedStyleAttrs && node.style) {
 			for (const attr of node.style) {
 				if (attr === '' || !attr) {
 					continue;
@@ -198,9 +198,9 @@ export default class SVGLoader implements ImageLoader {
 
 		const elemX = elem.getAttribute('x');
 		const elemY = elem.getAttribute('y');
-		if (elemX && elemY) {
-			const x = parseFloat(elemX);
-			const y = parseFloat(elemY);
+		if (elemX || elemY) {
+			const x = parseFloat(elemX ?? '0');
+			const y = parseFloat(elemY ?? '0');
 			if (!isNaN(x) && !isNaN(y)) {
 				supportedAttrs?.push('x', 'y');
 				transform = transform.rightMul(Mat33.translation(Vec2.of(x, y)));
@@ -245,7 +245,7 @@ export default class SVGLoader implements ImageLoader {
 			size: fontSize,
 			fontFamily: computedStyles.fontFamily || elem.style.fontFamily || 'sans-serif',
 			renderingStyle: {
-				fill: Color4.fromString(computedStyles.fill)
+				fill: Color4.fromString(computedStyles.fill || elem.style.fill || '#000')
 			},
 		};
 
@@ -406,7 +406,6 @@ export default class SVGLoader implements ImageLoader {
 		this.onFinish?.();
 	}
 
-	// TODO: Handling unsafe data! Tripple-check that this is secure!
 	// @param sanitize - if `true`, don't store unknown attributes.
 	public static fromString(text: string, sanitize: boolean = false): SVGLoader {
 		const sandbox = document.createElement('iframe');

package/src/components/AbstractComponent.ts

@@ -89,6 +89,11 @@ export default abstract class AbstractComponent {
 		return new AbstractComponent.TransformElementCommand(affineTransfm, this);
 	}
 
+	// @returns true iff this component can be selected (e.g. by the selection tool.)
+	public isSelectable(): boolean {
+		return true;
+	}
+
 	private static transformElementCommandId = 'transform-element';
 
 	private static UnresolvedTransformElementCommand = class extends SerializableCommand {

package/src/components/SVGGlobalAttributesObject.ts

@@ -43,6 +43,10 @@ export default class SVGGlobalAttributesObject extends AbstractComponent {
 	protected applyTransformation(_affineTransfm: Mat33): void {
 	}
 
+	public isSelectable() {
+		return false;
+	}
+
 	protected createClone() {
 		return new SVGGlobalAttributesObject(this.attrs);
 	}

package/src/components/Text.test.ts

@@ -1,21 +1,8 @@
 import Color4 from '../Color4';
 import Mat33 from '../math/Mat33';
-import Rect2 from '../math/Rect2';
 import AbstractComponent from './AbstractComponent';
 import Text, { TextStyle } from './Text';
 
-const estimateTextBounds = (text: string, style: TextStyle): Rect2 => {
-	const widthEst = text.length * style.size;
-	const heightEst = style.size;
-
-	// Text is drawn with (0, 0) as its baseline. As such, the majority of the text's height should
-	// be above (0, 0).
-	return new Rect2(0, -heightEst * 2/3, widthEst, heightEst);
-};
-
-// Don't use the default Canvas-based text bounding code. The canvas-based code may not work
-// with jsdom.
-AbstractComponent.registerComponent('text', (data: string) => Text.deserializeFromString(data, estimateTextBounds));
 
 describe('Text', () => {
 	it('should be serializable', () => {
@@ -24,9 +11,7 @@ describe('Text', () => {
 			fontFamily: 'serif',
 			renderingStyle: { fill: Color4.black },
 		};
-		const text = new Text(
-			[ 'Foo' ], Mat33.identity, style, estimateTextBounds
-		);
+		const text = new Text([ 'Foo' ], Mat33.identity, style);
 		const serialized = text.serialize();
 		const deserialized = AbstractComponent.deserialize(serialized) as Text;
 		expect(deserialized.getBBox()).objEq(text.getBBox());