js-draw 0.6.0 → 0.7.0

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

@@ -15,6 +15,8 @@ export default class SVGRenderer extends AbstractRenderer {
         this.lastPathString = [];
         this.objectElems = null;
         this.overwrittenAttrs = {};
+        this.textContainer = null;
+        this.textContainerTransform = null;
         this.clear();
     }
     // Sets an attribute on the root SVG element.
@@ -82,35 +84,59 @@ export default class SVGRenderer extends AbstractRenderer {
         this.lastPathString.push(path.toString());
     }
     // Apply [elemTransform] to [elem].
-    transformFrom(elemTransform, elem) {
-        let transform = this.getCanvasToScreenTransform().rightMul(elemTransform);
+    transformFrom(elemTransform, elem, inCanvasSpace = false) {
+        let transform = !inCanvasSpace ? this.getCanvasToScreenTransform().rightMul(elemTransform) : elemTransform;
         const translation = transform.transformVec2(Vec2.zero);
         transform = transform.rightMul(Mat33.translation(translation.times(-1)));
-        elem.style.transform = `matrix(
-			${transform.a1}, ${transform.b1},
-			${transform.a2}, ${transform.b2},
-			${transform.a3}, ${transform.b3}
-		)`;
+        if (!transform.eq(Mat33.identity)) {
+            elem.style.transform = `matrix(
+				${transform.a1}, ${transform.b1},
+				${transform.a2}, ${transform.b2},
+				${transform.a3}, ${transform.b3}
+			)`;
+        }
+        else {
+            elem.style.transform = '';
+        }
         elem.setAttribute('x', `${toRoundedString(translation.x)}`);
         elem.setAttribute('y', `${toRoundedString(translation.y)}`);
     }
     drawText(text, transform, style) {
-        var _a, _b, _c;
-        const textElem = document.createElementNS(svgNameSpace, 'text');
-        textElem.appendChild(document.createTextNode(text));
-        this.transformFrom(transform, textElem);
-        textElem.style.fontFamily = style.fontFamily;
-        textElem.style.fontVariant = (_a = style.fontVariant) !== null && _a !== void 0 ? _a : '';
-        textElem.style.fontWeight = (_b = style.fontWeight) !== null && _b !== void 0 ? _b : '';
-        textElem.style.fontSize = style.size + 'px';
-        textElem.style.fill = style.renderingStyle.fill.toHexString();
-        if (style.renderingStyle.stroke) {
-            const strokeStyle = style.renderingStyle.stroke;
-            textElem.style.stroke = strokeStyle.color.toHexString();
-            textElem.style.strokeWidth = strokeStyle.width + 'px';
+        var _a;
+        const applyTextStyles = (elem, style) => {
+            var _a, _b;
+            elem.style.fontFamily = style.fontFamily;
+            elem.style.fontVariant = (_a = style.fontVariant) !== null && _a !== void 0 ? _a : '';
+            elem.style.fontWeight = (_b = style.fontWeight) !== null && _b !== void 0 ? _b : '';
+            elem.style.fontSize = style.size + 'px';
+            elem.style.fill = style.renderingStyle.fill.toHexString();
+            if (style.renderingStyle.stroke) {
+                const strokeStyle = style.renderingStyle.stroke;
+                elem.style.stroke = strokeStyle.color.toHexString();
+                elem.style.strokeWidth = strokeStyle.width + 'px';
+            }
+        };
+        transform = this.getCanvasToScreenTransform().rightMul(transform);
+        if (!this.textContainer) {
+            const container = document.createElementNS(svgNameSpace, 'text');
+            container.appendChild(document.createTextNode(text));
+            this.transformFrom(transform, container, true);
+            applyTextStyles(container, style);
+            this.elem.appendChild(container);
+            (_a = this.objectElems) === null || _a === void 0 ? void 0 : _a.push(container);
+            if (this.objectLevel > 0) {
+                this.textContainer = container;
+                this.textContainerTransform = transform;
+            }
+        }
+        else {
+            const elem = document.createElementNS(svgNameSpace, 'tspan');
+            elem.appendChild(document.createTextNode(text));
+            this.textContainer.appendChild(elem);
+            transform = this.textContainerTransform.inverse().rightMul(transform);
+            this.transformFrom(transform, elem, true);
+            applyTextStyles(elem, style);
         }
-        this.elem.appendChild(textElem);
-        (_c = this.objectElems) === null || _c === void 0 ? void 0 : _c.push(textElem);
     }
     drawImage(image) {
         var _a, _b, _c, _d, _e;
@@ -128,6 +154,7 @@ export default class SVGRenderer extends AbstractRenderer {
         // Only accumulate a path within an object
         this.lastPathString = [];
         this.lastPathStyle = null;
+        this.textContainer = null;
         this.objectElems = [];
     }
     endObject(loaderData) {

package/dist/src/toolbar/IconProvider.d.ts

@@ -2,23 +2,29 @@ import Color4 from '../Color4';
 import { ComponentBuilderFactory } from '../components/builders/types';
 import { TextStyle } from '../components/Text';
 import Pen from '../tools/Pen';
+declare type IconType = SVGSVGElement | HTMLImageElement;
 export default class IconProvider {
-    makeUndoIcon(): SVGSVGElement;
-    makeRedoIcon(mirror?: boolean): SVGSVGElement;
-    makeDropdownIcon(): SVGSVGElement;
-    makeEraserIcon(): SVGSVGElement;
-    makeSelectionIcon(): SVGSVGElement;
-    protected makeIconFromPath(pathData: string, fill?: string, strokeColor?: string, strokeWidth?: string): SVGSVGElement;
-    makeHandToolIcon(): SVGSVGElement;
-    makeTouchPanningIcon(): SVGSVGElement;
-    makeAllDevicePanningIcon(): SVGSVGElement;
-    makeZoomIcon: () => SVGSVGElement;
-    makeTextIcon(textStyle: TextStyle): SVGSVGElement;
-    makePenIcon(tipThickness: number, color: string | Color4): SVGSVGElement;
-    makeIconFromFactory(pen: Pen, factory: ComponentBuilderFactory): SVGSVGElement;
-    makePipetteIcon(color?: Color4): SVGSVGElement;
-    makeResizeViewportIcon(): SVGSVGElement;
-    makeDuplicateSelectionIcon(): SVGSVGElement;
-    makeDeleteSelectionIcon(): SVGSVGElement;
-    makeSaveIcon(): SVGSVGElement;
+    makeUndoIcon(): IconType;
+    makeRedoIcon(mirror?: boolean): IconType;
+    makeDropdownIcon(): IconType;
+    makeEraserIcon(): IconType;
+    makeSelectionIcon(): IconType;
+    /**
+     * @param pathData - SVG path data (e.g. `m10,10l30,30z`)
+     * @param fill - A valid CSS color (e.g. `var(--icon-color)` or `#f0f`). This can be `none`.
+     */
+    protected makeIconFromPath(pathData: string, fill?: string, strokeColor?: string, strokeWidth?: string): IconType;
+    makeHandToolIcon(): IconType;
+    makeTouchPanningIcon(): IconType;
+    makeAllDevicePanningIcon(): IconType;
+    makeZoomIcon(): IconType;
+    makeTextIcon(textStyle: TextStyle): IconType;
+    makePenIcon(tipThickness: number, color: string | Color4): IconType;
+    makeIconFromFactory(pen: Pen, factory: ComponentBuilderFactory): IconType;
+    makePipetteIcon(color?: Color4): IconType;
+    makeResizeViewportIcon(): IconType;
+    makeDuplicateSelectionIcon(): IconType;
+    makeDeleteSelectionIcon(): IconType;
+    makeSaveIcon(): IconType;
 }
+export {};

package/dist/src/toolbar/IconProvider.js

@@ -27,27 +27,6 @@ const checkerboardPatternRef = 'url(#checkerboard)';
 // Provides icons that can be used in the toolbar, etc.
 // Extend this class and override methods to customize icons.
 export default class IconProvider {
-    constructor() {
-        this.makeZoomIcon = () => {
-            const icon = document.createElementNS(svgNamespace, 'svg');
-            icon.setAttribute('viewBox', '0 0 100 100');
-            const addTextNode = (text, x, y) => {
-                const textNode = document.createElementNS(svgNamespace, 'text');
-                textNode.appendChild(document.createTextNode(text));
-                textNode.setAttribute('x', x.toString());
-                textNode.setAttribute('y', y.toString());
-                textNode.style.textAlign = 'center';
-                textNode.style.textAnchor = 'middle';
-                textNode.style.fontSize = '55px';
-                textNode.style.fill = 'var(--icon-color)';
-                textNode.style.fontFamily = 'monospace';
-                icon.appendChild(textNode);
-            };
-            addTextNode('+', 40, 45);
-            addTextNode('-', 70, 75);
-            return icon;
-        };
-    }
     makeUndoIcon() {
         return this.makeRedoIcon(true);
     }
@@ -115,6 +94,10 @@ export default class IconProvider {
         icon.setAttribute('viewBox', '0 0 100 100');
         return icon;
     }
+    /**
+     * @param pathData - SVG path data (e.g. `m10,10l30,30z`)
+     * @param fill - A valid CSS color (e.g. `var(--icon-color)` or `#f0f`). This can be `none`.
+     */
     makeIconFromPath(pathData, fill = 'var(--icon-color)', strokeColor = 'none', strokeWidth = '0px') {
         const icon = document.createElementNS(svgNamespace, 'svg');
         const path = document.createElementNS(svgNamespace, 'path');
@@ -240,6 +223,25 @@ export default class IconProvider {
 			z
 		`, fill, strokeColor, strokeWidth);
     }
+    makeZoomIcon() {
+        const icon = document.createElementNS(svgNamespace, 'svg');
+        icon.setAttribute('viewBox', '0 0 100 100');
+        const addTextNode = (text, x, y) => {
+            const textNode = document.createElementNS(svgNamespace, 'text');
+            textNode.appendChild(document.createTextNode(text));
+            textNode.setAttribute('x', x.toString());
+            textNode.setAttribute('y', y.toString());
+            textNode.style.textAlign = 'center';
+            textNode.style.textAnchor = 'middle';
+            textNode.style.fontSize = '55px';
+            textNode.style.fill = 'var(--icon-color)';
+            textNode.style.fontFamily = 'monospace';
+            icon.appendChild(textNode);
+        };
+        addTextNode('+', 40, 45);
+        addTextNode('-', 70, 75);
+        return icon;
+    }
     makeTextIcon(textStyle) {
         var _a, _b;
         const icon = document.createElementNS(svgNamespace, 'svg');

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

@@ -77,12 +77,15 @@ export default class PenToolWidget extends BaseToolWidget {
         thicknessLabel.setAttribute('for', thicknessInput.id);
         objectSelectLabel.innerText = this.localizationTable.selectObjectType;
         objectSelectLabel.setAttribute('for', objectTypeSelect.id);
+        // Use a logarithmic scale for thicknessInput (finer control over thinner strokewidths.)
+        const inverseThicknessInputFn = (t) => Math.log10(t);
+        const thicknessInputFn = (t) => Math.pow(10, t);
         thicknessInput.type = 'range';
-        thicknessInput.min = '2';
-        thicknessInput.max = '20';
-        thicknessInput.step = '1';
+        thicknessInput.min = `${inverseThicknessInputFn(2)}`;
+        thicknessInput.max = `${inverseThicknessInputFn(400)}`;
+        thicknessInput.step = '0.1';
         thicknessInput.oninput = () => {
-            this.tool.setThickness(Math.pow(parseFloat(thicknessInput.value), 2));
+            this.tool.setThickness(thicknessInputFn(parseFloat(thicknessInput.value)));
         };
         thicknessRow.appendChild(thicknessLabel);
         thicknessRow.appendChild(thicknessInput);
@@ -108,7 +111,7 @@ export default class PenToolWidget extends BaseToolWidget {
         colorRow.appendChild(colorInputContainer);
         this.updateInputs = () => {
             colorInput.value = this.tool.getColor().toHexString();
-            thicknessInput.value = Math.sqrt(this.tool.getThickness()).toString();
+            thicknessInput.value = inverseThicknessInputFn(this.tool.getThickness()).toString();
             objectTypeSelect.replaceChildren();
             for (let i = 0; i < this.penTypes.length; i++) {
                 const penType = this.penTypes[i];

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

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.6.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

@@ -38,6 +38,7 @@ 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;
@@ -118,7 +119,6 @@ export class Editor {
 
 	/**
 	 * Global event dispatcher/subscriber.
-	 * @see {@link types.EditorEventType}
 	 */
 	public readonly notifier: EditorNotifier;
 
@@ -840,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/SVGLoader.test.ts

@@ -34,4 +34,24 @@ describe('SVGLoader', () => {
 		expect(topLefts[4].x - topLefts[0].x).toBe(100);
 		expect(topLefts[4].y - topLefts[0].y).toBe(0);
 	});
+
+	it('should correctly load tspans within texts nodes', async () => {
+		const editor = createEditor();
+		await editor.loadFrom(SVGLoader.fromString(`
+			<svg>
+				<text>
+					Testing...
+					<tspan x=0 y=100>Test 2...</tspan>
+					<tspan x=0 y=200>Test 2...</tspan>
+				</text>
+			</svg>
+		`, true));
+		const elem = editor.image
+			.getElementsIntersectingRegion(new Rect2(-1000, -1000, 10000, 10000))
+			.filter(elem => elem instanceof TextComponent)[0];
+		expect(elem).not.toBeNull();
+		expect(elem.getBBox().topLeft.y).toBeLessThan(0);
+		expect(elem.getBBox().topLeft.x).toBe(0);
+		expect(elem.getBBox().h).toBeGreaterThan(200);
+	});
 });

package/src/SVGLoader.ts

@@ -3,7 +3,7 @@ import AbstractComponent from './components/AbstractComponent';
 import ImageComponent from './components/ImageComponent';
 import Stroke from './components/Stroke';
 import SVGGlobalAttributesObject from './components/SVGGlobalAttributesObject';
-import Text, { TextStyle } from './components/Text';
+import TextComponent, { TextStyle } from './components/Text';
 import UnknownSVGObject from './components/UnknownSVGObject';
 import Mat33 from './math/Mat33';
 import Path from './math/Path';
@@ -210,8 +210,8 @@ export default class SVGLoader implements ImageLoader {
 		return transform;
 	}
 
-	private makeText(elem: SVGTextElement|SVGTSpanElement): Text {
-		const contentList: Array<Text|string> = [];
+	private makeText(elem: SVGTextElement|SVGTSpanElement): TextComponent {
+		const contentList: Array<TextComponent|string> = [];
 		for (const child of elem.childNodes) {
 			if (child.nodeType === Node.TEXT_NODE) {
 				contentList.push(child.nodeValue ?? '');
@@ -251,7 +251,7 @@ export default class SVGLoader implements ImageLoader {
 
 		const supportedAttrs: string[] = [];
 		const transform = this.getTransform(elem, supportedAttrs, computedStyles);
-		const result = new Text(contentList, transform, style);
+		const result = new TextComponent(contentList, transform, style);
 		this.attachUnrecognisedAttrs(
 			result,
 			elem,

package/src/components/Stroke.ts

@@ -15,6 +15,7 @@ export default class Stroke extends AbstractComponent {
 	private parts: StrokePart[];
 	protected contentBBox: Rect2;
 
+	// Creates a `Stroke` from the given `parts`.
 	public constructor(parts: RenderablePathSpec[]) {
 		super('stroke');
 

package/src/components/Text.test.ts

@@ -1,7 +1,7 @@
 import Color4 from '../Color4';
 import Mat33 from '../math/Mat33';
 import AbstractComponent from './AbstractComponent';
-import Text, { TextStyle } from './Text';
+import TextComponent, { TextStyle } from './Text';
 
 
 describe('Text', () => {
@@ -11,9 +11,9 @@ describe('Text', () => {
 			fontFamily: 'serif',
 			renderingStyle: { fill: Color4.black },
 		};
-		const text = new Text([ 'Foo' ], Mat33.identity, style);
+		const text = new TextComponent([ 'Foo' ], Mat33.identity, style);
 		const serialized = text.serialize();
-		const deserialized = AbstractComponent.deserialize(serialized) as Text;
+		const deserialized = AbstractComponent.deserialize(serialized) as TextComponent;
 		expect(deserialized.getBBox()).objEq(text.getBBox());
 		expect(deserialized['getText']()).toContain('Foo');
 	});