js-draw 0.5.0 → 0.7.0

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/PasteHandler.js

@@ -14,7 +14,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { TextComponent } from '../components/lib';
 import { uniteCommands } from '../commands/lib';
 import SVGLoader from '../SVGLoader';
-import { Mat33, Vec2 } from '../math/lib';
+import { Mat33 } from '../math/lib';
 import BaseTool from './BaseTool';
 import EditorImage from '../EditorImage';
 import SelectionTool from './SelectionTool/SelectionTool';
@@ -110,27 +110,7 @@ export default class PasteHandler extends BaseTool {
             const defaultTextStyle = { size: 12, fontFamily: 'sans', renderingStyle: { fill: Color4.red } };
             const pastedTextStyle = (_b = (_a = textTools[0]) === null || _a === void 0 ? void 0 : _a.getTextStyle()) !== null && _b !== void 0 ? _b : defaultTextStyle;
             const lines = text.split('\n');
-            let lastComponent = null;
-            const components = [];
-            for (const line of lines) {
-                let position = Vec2.zero;
-                if (lastComponent) {
-                    const lineMargin = Math.floor(pastedTextStyle.size);
-                    position = lastComponent.getBBox().bottomLeft.plus(Vec2.unitY.times(lineMargin));
-                }
-                const component = new TextComponent([line], Mat33.translation(position), pastedTextStyle);
-                components.push(component);
-                lastComponent = component;
-            }
-            if (components.length === 1) {
-                yield this.addComponentsFromPaste([components[0]]);
-            }
-            else {
-                // Wrap the existing `TextComponent`s --- dragging one component should drag all.
-                yield this.addComponentsFromPaste([
-                    new TextComponent(components, Mat33.identity, pastedTextStyle)
-                ]);
-            }
+            yield this.addComponentsFromPaste([TextComponent.fromLines(lines, Mat33.identity, pastedTextStyle)]);
         });
     }
     doImagePaste(dataURL) {

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/TextTool.d.ts

@@ -13,9 +13,12 @@ export default class TextTool extends BaseTool {
     private textTargetPosition;
     private textMeasuringCtx;
     private textRotation;
+    private textScale;
+    private removeExistingCommand;
     constructor(editor: Editor, description: string, localizationTable: ToolLocalization);
     private getTextAscent;
     private flushInput;
+    private getTextScaleMatrix;
     private updateTextInput;
     private startTextInput;
     setEnabled(enabled: boolean): void;
@@ -26,4 +29,5 @@ export default class TextTool extends BaseTool {
     setColor(color: Color4): void;
     setFontSize(size: number): void;
     getTextStyle(): TextStyle;
+    private setTextStyle;
 }

package/dist/src/tools/TextTool.js

@@ -1,10 +1,14 @@
 import Color4 from '../Color4';
-import Text from '../components/Text';
+import TextComponent from '../components/Text';
 import EditorImage from '../EditorImage';
+import Rect2 from '../math/Rect2';
 import Mat33 from '../math/Mat33';
+import { Vec2 } from '../math/Vec2';
 import { PointerDevice } from '../Pointer';
 import { EditorEventType } from '../types';
 import BaseTool from './BaseTool';
+import Erase from '../commands/Erase';
+import uniteCommands from '../commands/uniteCommands';
 const overlayCssClass = 'textEditorOverlay';
 export default class TextTool extends BaseTool {
     constructor(editor, description, localizationTable) {
@@ -14,6 +18,8 @@ export default class TextTool extends BaseTool {
         this.textInputElem = null;
         this.textTargetPosition = null;
         this.textMeasuringCtx = null;
+        this.textScale = Vec2.of(1, 1);
+        this.removeExistingCommand = null;
         this.textStyle = {
             size: 32,
             fontFamily: 'sans-serif',
@@ -29,10 +35,18 @@ export default class TextTool extends BaseTool {
 				overflow: visible;
 			}
 
-			.${overlayCssClass} input {
+			.${overlayCssClass} textarea {
 				background-color: rgba(0, 0, 0, 0);
+
+				white-space: pre;
+
+				padding: 0;
+				margin: 0;
 				border: none;
 				padding: 0;
+
+				min-width: 100px;
+				min-height: 1.1em;
 			}
 		`);
         this.editor.createHTMLOverlay(this.textEditOverlay);
@@ -42,7 +56,7 @@ export default class TextTool extends BaseTool {
         var _a;
         (_a = this.textMeasuringCtx) !== null && _a !== void 0 ? _a : (this.textMeasuringCtx = document.createElement('canvas').getContext('2d'));
         if (this.textMeasuringCtx) {
-            Text.applyTextStyles(this.textMeasuringCtx, style);
+            TextComponent.applyTextStyles(this.textMeasuringCtx, style);
             return this.textMeasuringCtx.measureText(text).actualBoundingBoxAscent;
         }
         // Estimate
@@ -50,18 +64,29 @@ export default class TextTool extends BaseTool {
     }
     flushInput() {
         if (this.textInputElem && this.textTargetPosition) {
-            const content = this.textInputElem.value;
+            const content = this.textInputElem.value.trimEnd();
             this.textInputElem.remove();
             this.textInputElem = null;
             if (content === '') {
                 return;
             }
-            const textTransform = Mat33.translation(this.textTargetPosition).rightMul(Mat33.scaling2D(this.editor.viewport.getSizeOfPixelOnCanvas())).rightMul(Mat33.zRotation(this.textRotation));
-            const textComponent = new Text([content], textTransform, this.textStyle);
+            const textTransform = Mat33.translation(this.textTargetPosition).rightMul(this.getTextScaleMatrix()).rightMul(Mat33.scaling2D(this.editor.viewport.getSizeOfPixelOnCanvas())).rightMul(Mat33.zRotation(this.textRotation));
+            const textComponent = TextComponent.fromLines(content.split('\n'), textTransform, this.textStyle);
             const action = EditorImage.addElement(textComponent);
-            this.editor.dispatch(action);
+            if (this.removeExistingCommand) {
+                // Unapply so that `removeExistingCommand` can be added to the undo stack.
+                this.removeExistingCommand.unapply(this.editor);
+                this.editor.dispatch(uniteCommands([this.removeExistingCommand, action]));
+                this.removeExistingCommand = null;
+            }
+            else {
+                this.editor.dispatch(action);
+            }
         }
     }
+    getTextScaleMatrix() {
+        return Mat33.scaling2D(this.textScale.times(1 / this.editor.viewport.getSizeOfPixelOnCanvas()));
+    }
     updateTextInput() {
         var _a, _b, _c;
         if (!this.textInputElem || !this.textTargetPosition) {
@@ -70,7 +95,6 @@ export default class TextTool extends BaseTool {
         }
         const viewport = this.editor.viewport;
         const textScreenPos = viewport.canvasToScreen(this.textTargetPosition);
-        this.textInputElem.type = 'text';
         this.textInputElem.placeholder = this.localizationTable.enterTextToInsert;
         this.textInputElem.style.fontFamily = this.textStyle.fontFamily;
         this.textInputElem.style.fontVariant = (_b = this.textStyle.fontVariant) !== null && _b !== void 0 ? _b : '';
@@ -81,22 +105,27 @@ export default class TextTool extends BaseTool {
         this.textInputElem.style.left = `${textScreenPos.x}px`;
         this.textInputElem.style.top = `${textScreenPos.y}px`;
         this.textInputElem.style.margin = '0';
+        this.textInputElem.style.width = `${this.textInputElem.scrollWidth}px`;
+        this.textInputElem.style.height = `${this.textInputElem.scrollHeight}px`;
         const rotation = this.textRotation + viewport.getRotationAngle();
         const ascent = this.getTextAscent(this.textInputElem.value || 'W', this.textStyle);
-        this.textInputElem.style.transform = `rotate(${rotation * 180 / Math.PI}deg) translate(0, ${-ascent}px)`;
+        const scale = this.getTextScaleMatrix();
+        this.textInputElem.style.transform = `${scale.toCSSMatrix()} rotate(${rotation * 180 / Math.PI}deg) translate(0, ${-ascent}px)`;
         this.textInputElem.style.transformOrigin = 'top left';
     }
     startTextInput(textCanvasPos, initialText) {
         this.flushInput();
-        this.textInputElem = document.createElement('input');
+        this.textInputElem = document.createElement('textarea');
         this.textInputElem.value = initialText;
+        this.textInputElem.style.display = 'inline-block';
         this.textTargetPosition = textCanvasPos;
         this.textRotation = -this.editor.viewport.getRotationAngle();
+        this.textScale = Vec2.of(1, 1).times(this.editor.viewport.getSizeOfPixelOnCanvas());
         this.updateTextInput();
         this.textInputElem.oninput = () => {
-            var _a;
             if (this.textInputElem) {
-                this.textInputElem.size = ((_a = this.textInputElem) === null || _a === void 0 ? void 0 : _a.value.length) || 10;
+                this.textInputElem.style.width = `${this.textInputElem.scrollWidth}px`;
+                this.textInputElem.style.height = `${this.textInputElem.scrollHeight}px`;
             }
         };
         this.textInputElem.onblur = () => {
@@ -105,8 +134,8 @@ export default class TextTool extends BaseTool {
             setTimeout(() => this.flushInput(), 0);
         };
         this.textInputElem.onkeyup = (evt) => {
-            var _a;
-            if (evt.key === 'Enter') {
+            var _a, _b;
+            if (evt.key === 'Enter' && !evt.shiftKey) {
                 this.flushInput();
                 this.editor.focus();
             }
@@ -115,6 +144,8 @@ export default class TextTool extends BaseTool {
                 (_a = this.textInputElem) === null || _a === void 0 ? void 0 : _a.remove();
                 this.textInputElem = null;
                 this.editor.focus();
+                (_b = this.removeExistingCommand) === null || _b === void 0 ? void 0 : _b.unapply(this.editor);
+                this.removeExistingCommand = null;
             }
         };
         this.textEditOverlay.replaceChildren(this.textInputElem);
@@ -132,7 +163,29 @@ export default class TextTool extends BaseTool {
             return false;
         }
         if (allPointers.length === 1) {
-            this.startTextInput(current.canvasPos, '');
+            // Are we clicking on a text node?
+            const canvasPos = current.canvasPos;
+            const halfTestRegionSize = Vec2.of(2.5, 2.5).times(this.editor.viewport.getSizeOfPixelOnCanvas());
+            const testRegion = Rect2.fromCorners(canvasPos.minus(halfTestRegionSize), canvasPos.plus(halfTestRegionSize));
+            const targetNodes = this.editor.image.getElementsIntersectingRegion(testRegion);
+            const targetTextNodes = targetNodes.filter(node => node instanceof TextComponent);
+            if (targetTextNodes.length > 0) {
+                const targetNode = targetTextNodes[targetTextNodes.length - 1];
+                this.setTextStyle(targetNode.getTextStyle());
+                // Create and temporarily apply removeExistingCommand.
+                this.removeExistingCommand = new Erase([targetNode]);
+                this.removeExistingCommand.apply(this.editor);
+                this.startTextInput(targetNode.getBaselinePos(), targetNode.getText());
+                const transform = targetNode.getTransform();
+                this.textRotation = transform.transformVec3(Vec2.unitX).angle();
+                const scaleFactor = transform.transformVec3(Vec2.unitX).magnitude();
+                this.textScale = Vec2.of(1, 1).times(scaleFactor);
+                this.updateTextInput();
+            }
+            else {
+                this.removeExistingCommand = null;
+                this.startTextInput(current.canvasPos, '');
+            }
             return true;
         }
         return false;
@@ -169,4 +222,9 @@ export default class TextTool extends BaseTool {
     getTextStyle() {
         return this.textStyle;
     }
+    setTextStyle(style) {
+        // Copy the style — we may change parts of it.
+        this.textStyle = Object.assign({}, style);
+        this.dispatchUpdateEvent();
+    }
 }

package/dist/src/tools/ToolController.js

@@ -29,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),

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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.5.0",
+	"version": "0.7.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.toSVG.test.ts

@@ -0,0 +1,27 @@
+import { TextStyle } from './components/Text';
+import { Color4, Mat33, Rect2, TextComponent, EditorImage, Vec2 } from './lib';
+import createEditor from './testing/createEditor';
+
+describe('Editor.toSVG', () => {
+	it('should correctly nest text objects', async () => {
+		const editor = createEditor();
+		const textStyle: TextStyle = {
+			fontFamily: 'sans', size: 12, renderingStyle: { fill: Color4.black }
+		};
+		const text = new TextComponent([
+			'Testing...',
+			new TextComponent([ 'Test 2' ], Mat33.translation(Vec2.of(0, 100)), textStyle),
+		], Mat33.identity, textStyle);
+		editor.dispatch(EditorImage.addElement(text));
+
+		const matches = editor.image.getElementsIntersectingRegion(new Rect2(4, -100, 100, 100));
+		expect(matches).toHaveLength(1);
+		expect(text).not.toBeNull();
+
+		const asSVG = editor.toSVG();
+		const allTSpans = [ ...asSVG.querySelectorAll('tspan') ];
+		expect(allTSpans).toHaveLength(1);
+		expect(allTSpans[0].getAttribute('x')).toBe('0');
+		expect(allTSpans[0].getAttribute('y')).toBe('100');
+	});
+});

package/src/Editor.ts

@@ -37,6 +37,8 @@ import Mat33 from './math/Mat33';
 import Rect2 from './math/Rect2';
 import { EditorLocalization } from './localization';
 import getLocalizationTable from './localizations/getLocalizationTable';
+import IconProvider from './toolbar/IconProvider';
+import { toRoundedString } from './math/rounding';
 
 type HTMLPointerEventType = 'pointerdown'|'pointermove'|'pointerup'|'pointercancel';
 type HTMLPointerEventFilter = (eventName: HTMLPointerEventType, event: PointerEvent)=>boolean;
@@ -58,6 +60,8 @@ export interface EditorSettings {
 	/** Minimum zoom fraction (e.g. 0.5 → 50% zoom). */
 	minZoom: number,
 	maxZoom: number,
+
+	iconProvider: IconProvider,
 }
 
 // { @inheritDoc Editor! }
@@ -101,22 +105,22 @@ 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');
@@ -834,9 +840,9 @@ export class Editor {
 
 		// Just show the main region
 		const rect = importExportViewport.visibleRect;
-		result.setAttribute('viewBox', `${rect.x} ${rect.y} ${rect.w} ${rect.h}`);
-		result.setAttribute('width', `${rect.w}`);
-		result.setAttribute('height', `${rect.h}`);
+		result.setAttribute('viewBox', [rect.x, rect.y, rect.w, rect.h].map(part => toRoundedString(part)).join(' '));
+		result.setAttribute('width', toRoundedString(rect.w));
+		result.setAttribute('height', toRoundedString(rect.h));
 
 		// Ensure the image can be identified as an SVG if downloaded.
 		// See https://jwatt.org/svg/authoring/

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