js-draw 0.9.1 → 0.9.3

package/dist/src/tools/FindTool.js

@@ -0,0 +1,113 @@
+// Displays a find dialog that allows the user to search for and focus text. 
+//
+// @packageDocumentation
+import TextComponent from '../components/TextComponent';
+import BaseTool from './BaseTool';
+export const cssPrefix = 'find-tool';
+export default class FindTool extends BaseTool {
+    constructor(editor) {
+        super(editor.notifier, editor.localization.findLabel);
+        this.editor = editor;
+        this.currentMatchIdx = 0;
+        this.overlay = document.createElement('div');
+        this.fillOverlay();
+        editor.createHTMLOverlay(this.overlay);
+        this.overlay.style.display = 'none';
+        this.overlay.classList.add(`${cssPrefix}-overlay`);
+    }
+    getMatches(searchFor) {
+        searchFor = searchFor.toLocaleLowerCase();
+        const allTextComponents = this.editor.image.getAllElements()
+            .filter(elem => elem instanceof TextComponent);
+        const matches = allTextComponents.filter(text => text.getText().toLocaleLowerCase().indexOf(searchFor) !== -1);
+        return matches.map(match => match.getBBox());
+    }
+    focusCurrentMatch() {
+        const matches = this.getMatches(this.searchInput.value);
+        let matchIdx = this.currentMatchIdx % matches.length;
+        if (matchIdx < 0) {
+            matchIdx = matches.length + matchIdx;
+        }
+        if (matchIdx < matches.length) {
+            this.editor.dispatch(this.editor.viewport.zoomTo(matches[matchIdx], true, true));
+            this.editor.announceForAccessibility(this.editor.localization.focusedFoundText(matchIdx + 1, matches.length));
+        }
+    }
+    toNextMatch() {
+        this.currentMatchIdx++;
+        this.focusCurrentMatch();
+    }
+    toPrevMatch() {
+        this.currentMatchIdx--;
+        this.focusCurrentMatch();
+    }
+    fillOverlay() {
+        const label = document.createElement('label');
+        this.searchInput = document.createElement('input');
+        const nextBtn = document.createElement('button');
+        const closeBtn = document.createElement('button');
+        // Math.random() ensures that the ID is unique (to allow us to refer to it
+        // with an htmlFor).
+        this.searchInput.setAttribute('id', `${cssPrefix}-searchInput-${Math.random()}`);
+        label.htmlFor = this.searchInput.getAttribute('id');
+        label.innerText = this.editor.localization.findLabel;
+        nextBtn.innerText = this.editor.localization.toNextMatch;
+        closeBtn.innerText = this.editor.localization.closeFindDialog;
+        this.searchInput.onkeydown = (ev) => {
+            if (ev.key === 'Enter') {
+                if (ev.shiftKey) {
+                    this.toPrevMatch();
+                }
+                else {
+                    this.toNextMatch();
+                }
+            }
+            else if (ev.key === 'Escape') {
+                this.setVisible(false);
+            }
+            else if (ev.key === 'f' && ev.ctrlKey) {
+                ev.preventDefault();
+                this.toggleVisible();
+            }
+        };
+        nextBtn.onclick = () => {
+            this.toNextMatch();
+        };
+        closeBtn.onclick = () => {
+            this.setVisible(false);
+        };
+        this.overlay.replaceChildren(label, this.searchInput, nextBtn, closeBtn);
+    }
+    isVisible() {
+        return this.overlay.style.display !== 'none';
+    }
+    setVisible(visible) {
+        if (visible !== this.isVisible()) {
+            this.overlay.style.display = visible ? 'block' : 'none';
+            if (visible) {
+                this.searchInput.focus();
+                this.editor.announceForAccessibility(this.editor.localization.findDialogShown);
+            }
+            else {
+                this.editor.focus();
+                this.editor.announceForAccessibility(this.editor.localization.findDialogHidden);
+            }
+        }
+    }
+    toggleVisible() {
+        this.setVisible(!this.isVisible());
+    }
+    onKeyPress(event) {
+        if (event.ctrlKey && event.key === 'f') {
+            this.toggleVisible();
+            return true;
+        }
+        return false;
+    }
+    setEnabled(enabled) {
+        super.setEnabled(enabled);
+        if (enabled) {
+            this.setVisible(false);
+        }
+    }
+}

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

@@ -2,7 +2,7 @@ import Color4 from '../Color4';
 import Editor from '../Editor';
 import { PointerEvt } from '../types';
 import BaseTool from './BaseTool';
-declare type ColorListener = (color: Color4 | null) => void;
+type ColorListener = (color: Color4 | null) => void;
 export default class PipetteTool extends BaseTool {
     private editor;
     private colorPreviewListener;

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

@@ -108,13 +108,13 @@ export default class Selection {
             cmd.unapply(this.editor);
         });
         const fullTransform = this.transform;
-        const currentTransfmCommands = this.computeTransformCommands();
+        const selectedElems = this.selectedElems;
         // Reset for the next drag
         this.transformCommands = [];
         this.originalRegion = this.originalRegion.transformedBoundingBox(this.transform);
         this.transform = Mat33.identity;
         // Make the commands undo-able
-        this.editor.dispatch(new Selection.ApplyTransformationCommand(this, currentTransfmCommands, fullTransform));
+        this.editor.dispatch(new Selection.ApplyTransformationCommand(this, selectedElems, fullTransform));
     }
     // Preview the effects of the current transformation on the selection
     previewTransformCmds() {
@@ -296,26 +296,56 @@ export default class Selection {
 }
 _a = Selection;
 (() => {
-    SerializableCommand.register('selection-tool-transform', (json, editor) => {
+    SerializableCommand.register('selection-tool-transform', (json, _editor) => {
+        var _b;
         // The selection box is lost when serializing/deserializing. No need to store box rotation
         const fullTransform = new Mat33(...json.transform);
-        const commands = json.commands.map(data => SerializableCommand.deserialize(data, editor));
-        return new _a.ApplyTransformationCommand(null, commands, fullTransform);
+        const elemIds = ((_b = json.elems) !== null && _b !== void 0 ? _b : []);
+        return new _a.ApplyTransformationCommand(null, elemIds, fullTransform);
     });
 })();
 Selection.ApplyTransformationCommand = class extends SerializableCommand {
-    constructor(selection, currentTransfmCommands, fullTransform) {
+    constructor(selection, 
+    // If a `string[]`, selectedElems is a list of element IDs.
+    selectedElems, 
+    // Full transformation used to transform elements.
+    fullTransform) {
         super('selection-tool-transform');
         this.selection = selection;
-        this.currentTransfmCommands = currentTransfmCommands;
         this.fullTransform = fullTransform;
+        const isIDList = (arr) => {
+            return typeof arr[0] === 'string';
+        };
+        // If a list of element IDs,
+        if (isIDList(selectedElems)) {
+            this.selectedElemIds = selectedElems;
+        }
+        else {
+            this.selectedElemIds = selectedElems.map(elem => elem.getId());
+            this.transformCommands = selectedElems.map(elem => {
+                return elem.transformBy(this.fullTransform);
+            });
+        }
+    }
+    resolveToElems(editor) {
+        if (this.transformCommands) {
+            return;
+        }
+        this.transformCommands = this.selectedElemIds.map(id => {
+            const elem = editor.image.lookupElement(id);
+            if (!elem) {
+                throw new Error(`Unable to find element with ID, ${id}.`);
+            }
+            return elem.transformBy(this.fullTransform);
+        });
     }
     apply(editor) {
         var _b, _c, _d, _e, _f;
         return __awaiter(this, void 0, void 0, function* () {
+            this.resolveToElems(editor);
             (_b = this.selection) === null || _b === void 0 ? void 0 : _b.setTransform(this.fullTransform, false);
             (_c = this.selection) === null || _c === void 0 ? void 0 : _c.updateUI();
-            yield editor.asyncApplyCommands(this.currentTransfmCommands, updateChunkSize);
+            yield editor.asyncApplyCommands(this.transformCommands, updateChunkSize);
             (_d = this.selection) === null || _d === void 0 ? void 0 : _d.setTransform(Mat33.identity, false);
             (_e = this.selection) === null || _e === void 0 ? void 0 : _e.recomputeRegion();
             (_f = this.selection) === null || _f === void 0 ? void 0 : _f.updateUI();
@@ -324,9 +354,10 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand {
     unapply(editor) {
         var _b, _c, _d, _e, _f;
         return __awaiter(this, void 0, void 0, function* () {
+            this.resolveToElems(editor);
             (_b = this.selection) === null || _b === void 0 ? void 0 : _b.setTransform(this.fullTransform.inverse(), false);
             (_c = this.selection) === null || _c === void 0 ? void 0 : _c.updateUI();
-            yield editor.asyncUnapplyCommands(this.currentTransfmCommands, updateChunkSize);
+            yield editor.asyncUnapplyCommands(this.transformCommands, updateChunkSize);
             (_d = this.selection) === null || _d === void 0 ? void 0 : _d.setTransform(Mat33.identity);
             (_e = this.selection) === null || _e === void 0 ? void 0 : _e.recomputeRegion();
             (_f = this.selection) === null || _f === void 0 ? void 0 : _f.updateUI();
@@ -334,11 +365,11 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand {
     }
     serializeToJSON() {
         return {
-            commands: this.currentTransfmCommands.map(command => command.serialize()),
+            elems: this.selectedElemIds,
             transform: this.fullTransform.toArray(),
         };
     }
     description(_editor, localizationTable) {
-        return localizationTable.transformedElements(this.currentTransfmCommands.length);
+        return localizationTable.transformedElements(this.selectedElemIds.length);
     }
 };

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

@@ -6,9 +6,9 @@ export declare enum HandleShape {
     Square = 1
 }
 export declare const handleSize = 30;
-export declare type DragStartCallback = (startPoint: Point2) => void;
-export declare type DragUpdateCallback = (canvasPoint: Point2) => void;
-export declare type DragEndCallback = () => void;
+export type DragStartCallback = (startPoint: Point2) => void;
+export type DragUpdateCallback = (canvasPoint: Point2) => void;
+export type DragEndCallback = () => void;
 export default class SelectionHandle {
     readonly shape: HandleShape;
     private readonly parentSide;

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

@@ -8,7 +8,7 @@ import Viewport from '../../Viewport';
 import BaseTool from '../BaseTool';
 import SVGRenderer from '../../rendering/renderers/SVGRenderer';
 import Selection from './Selection';
-import TextComponent from '../../components/Text';
+import TextComponent from '../../components/TextComponent';
 export const cssPrefix = 'selection-tool-';
 // {@inheritDoc SelectionTool!}
 export default class SelectionTool extends BaseTool {

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

@@ -1,5 +1,5 @@
 import Color4 from '../Color4';
-import { TextStyle } from '../components/Text';
+import { TextStyle } from '../components/TextComponent';
 import Editor from '../Editor';
 import { PointerEvt } from '../types';
 import BaseTool from './BaseTool';

package/dist/src/tools/TextTool.js

@@ -1,5 +1,5 @@
 import Color4 from '../Color4';
-import TextComponent from '../components/Text';
+import TextComponent from '../components/TextComponent';
 import EditorImage from '../EditorImage';
 import Rect2 from '../math/Rect2';
 import Mat33 from '../math/Mat33';
@@ -108,8 +108,10 @@ export default class TextTool extends BaseTool {
         this.textInputElem.style.margin = '0';
         this.textInputElem.style.width = `${this.textInputElem.scrollWidth}px`;
         this.textInputElem.style.height = `${this.textInputElem.scrollHeight}px`;
+        // Get the ascent based on the font, using a character that is tall in most fonts.
+        const tallCharacter = '⎢';
+        const ascent = this.getTextAscent(tallCharacter, this.textStyle);
         const rotation = this.textRotation + viewport.getRotationAngle();
-        const ascent = this.getTextAscent(this.textInputElem.value || 'W', this.textStyle);
         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';
@@ -171,7 +173,11 @@ export default class TextTool extends BaseTool {
             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);
+            let targetTextNodes = targetNodes.filter(node => node instanceof TextComponent);
+            // Don't try to edit text nodes that contain the viewport (this allows us
+            // to zoom in on text nodes and add text on top of them.)
+            const visibleRect = this.editor.viewport.visibleRect;
+            targetTextNodes = targetTextNodes.filter(node => !node.getBBox().containsRect(visibleRect));
             // End any TextNodes we're currently editing.
             this.flushInput();
             if (targetTextNodes.length > 0) {

package/dist/src/tools/ToolController.js

@@ -12,6 +12,7 @@ import ToolSwitcherShortcut from './ToolSwitcherShortcut';
 import PasteHandler from './PasteHandler';
 import ToolbarShortcutHandler from './ToolbarShortcutHandler';
 import { makePressureSensitiveFreehandLineBuilder } from '../components/builders/PressureSensitiveFreehandLineBuilder';
+import FindTool from './FindTool';
 export default class ToolController {
     /** @internal */
     constructor(editor, localization) {
@@ -40,6 +41,7 @@ export default class ToolController {
             new UndoRedoShortcut(editor),
             new ToolbarShortcutHandler(editor),
             new ToolSwitcherShortcut(editor),
+            new FindTool(editor),
             new PasteHandler(editor),
         ];
         primaryTools.forEach(tool => tool.setToolGroup(primaryToolGroup));

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

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

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

@@ -12,6 +12,12 @@ export interface ToolLocalization {
     enterTextToInsert: string;
     changeTool: string;
     pasteHandler: string;
+    findLabel: string;
+    toNextMatch: string;
+    closeFindDialog: string;
+    findDialogShown: string;
+    findDialogHidden: string;
+    focusedFoundText: (currentMatchNumber: number, totalMatches: number) => string;
     anyDevicePanning: string;
     copied: (count: number, description: string) => string;
     pasted: (count: number, description: string) => string;

package/dist/src/tools/localization.js

@@ -12,6 +12,12 @@ export const defaultToolLocalization = {
     enterTextToInsert: 'Text to insert',
     changeTool: 'Change tool',
     pasteHandler: 'Copy paste handler',
+    findLabel: 'Find',
+    toNextMatch: 'Next',
+    closeFindDialog: 'Close',
+    findDialogShown: 'Find dialog shown',
+    findDialogHidden: 'Find dialog hidden',
+    focusedFoundText: (matchIdx, totalMatches) => `Viewing match ${matchIdx} of ${totalMatches}`,
     anyDevicePanning: 'Any device panning',
     copied: (count, description) => `Copied ${count} ${description}`,
     pasted: (count, description) => `Pasted ${count} ${description}`,

package/dist/src/types.d.ts

@@ -68,9 +68,9 @@ export interface PointerMoveEvt extends PointerEvtBase {
 export interface PointerUpEvt extends PointerEvtBase {
     readonly kind: InputEvtType.PointerUpEvt;
 }
-export declare type PointerEvt = PointerDownEvt | PointerMoveEvt | PointerUpEvt;
-export declare type InputEvt = KeyPressEvent | KeyUpEvent | WheelEvt | GestureCancelEvt | PointerEvt | CopyEvent | PasteEvent;
-export declare type EditorNotifier = EventDispatcher<EditorEventType, EditorEventDataType>;
+export type PointerEvt = PointerDownEvt | PointerMoveEvt | PointerUpEvt;
+export type InputEvt = KeyPressEvent | KeyUpEvent | WheelEvt | GestureCancelEvt | PointerEvt | CopyEvent | PasteEvent;
+export type EditorNotifier = EventDispatcher<EditorEventType, EditorEventDataType>;
 export declare enum EditorEventType {
     ToolEnabled = 0,
     ToolDisabled = 1,
@@ -85,7 +85,7 @@ export declare enum EditorEventType {
     ColorPickerColorSelected = 10,
     ToolbarDropdownShown = 11
 }
-declare type EditorToolEventType = EditorEventType.ToolEnabled | EditorEventType.ToolDisabled | EditorEventType.ToolUpdated;
+type EditorToolEventType = EditorEventType.ToolEnabled | EditorEventType.ToolDisabled | EditorEventType.ToolUpdated;
 export interface EditorToolEvent {
     readonly kind: EditorToolEventType;
     readonly tool: BaseTool;
@@ -128,10 +128,10 @@ export interface ToolbarDropdownShownEvent {
     readonly kind: EditorEventType.ToolbarDropdownShown;
     readonly parentWidget: BaseWidget;
 }
-export declare type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | CommandDoneEvent | CommandUndoneEvent | ColorPickerToggled | ColorPickerColorSelected | ToolbarDropdownShownEvent;
-export declare type OnProgressListener = (amountProcessed: number, totalToProcess: number) => Promise<void> | null;
-export declare type ComponentAddedListener = (component: AbstractComponent) => void;
-export declare type OnDetermineExportRectListener = (exportRect: Rect2) => void;
+export type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | CommandDoneEvent | CommandUndoneEvent | ColorPickerToggled | ColorPickerColorSelected | ToolbarDropdownShownEvent;
+export type OnProgressListener = (amountProcessed: number, totalToProcess: number) => Promise<void> | null;
+export type ComponentAddedListener = (component: AbstractComponent) => void;
+export type OnDetermineExportRectListener = (exportRect: Rect2) => void;
 export interface ImageLoader {
     start(onAddComponent: ComponentAddedListener, onProgressListener: OnProgressListener, onDetermineExportRect?: OnDetermineExportRectListener): Promise<void>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.9.1",
+	"version": "0.9.3",
 	"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",
@@ -72,6 +72,7 @@
 		"linter-precommit": "eslint --fix --ext .js --ext .ts",
 		"lint-staged": "lint-staged",
 		"lint-ci": "eslint . --max-warnings=0 --ext .js --ext .ts",
+		"build-translation-template": "ts-node ./build_tools/buildTranslationTemplate.ts",
 		"prepare": "husky install && yarn build",
 		"prepack": "yarn build && yarn test && pinst --disable",
 		"postpack": "pinst --enable"
@@ -82,27 +83,27 @@
 	},
 	"devDependencies": {
 		"@types/bezier-js": "^4.1.0",
-		"@types/jest": "^29.0.3",
-		"@types/jsdom": "^20.0.0",
-		"@types/node": "^18.7.23",
-		"@typescript-eslint/eslint-plugin": "^5.38.1",
-		"@typescript-eslint/parser": "^5.38.1",
-		"css-loader": "^6.7.1",
-		"eslint": "^8.24.0",
-		"husky": "^8.0.1",
-		"jest": "^29.0.3",
-		"jest-environment-jsdom": "^29.0.3",
-		"jsdom": "^20.0.0",
+		"@types/jest": "^29.2.3",
+		"@types/jsdom": "^20.0.1",
+		"@types/node": "^18.11.9",
+		"@typescript-eslint/eslint-plugin": "^5.44.0",
+		"@typescript-eslint/parser": "^5.44.0",
+		"css-loader": "^6.7.2",
+		"eslint": "^8.28.0",
+		"husky": "^8.0.2",
+		"jest": "^29.2.3",
+		"jest-environment-jsdom": "^29.3.1",
+		"jsdom": "^20.0.3",
 		"lint-staged": "^13.0.3",
 		"pinst": "^3.0.0",
 		"style-loader": "^3.3.1",
 		"terser-webpack-plugin": "^5.3.6",
-		"ts-jest": "^29.0.2",
+		"ts-jest": "^29.0.3",
 		"ts-loader": "^9.4.1",
 		"ts-node": "^10.9.1",
-		"typedoc": "^0.23.15",
-		"typescript": "^4.8.3",
-		"webpack": "^5.74.0"
+		"typedoc": "^0.23.21",
+		"typescript": "^4.9.3",
+		"webpack": "^5.75.0"
 	},
 	"bugs": {
 		"url": "https://github.com/personalizedrefrigerator/js-draw/issues"

package/src/Editor.css

@@ -1,6 +1,7 @@
 
 @import url('./toolbar/toolbar.css');
 @import url('./tools/SelectionTool/SelectionTool.css');
+@import url('./tools/FindTool.css');
 
 .imageEditorContainer {
 	/* Deafult colors for the editor */

package/src/Editor.toSVG.test.ts

@@ -1,4 +1,4 @@
-import { TextStyle } from './components/Text';
+import { TextStyle } from './components/TextComponent';
 import { Color4, Mat33, Rect2, TextComponent, EditorImage, Vec2 } from './lib';
 import createEditor from './testing/createEditor';
 

package/src/Editor.ts

@@ -27,7 +27,7 @@ import EventDispatcher from './EventDispatcher';
 import { Point2, Vec2 } from './math/Vec2';
 import Vec3 from './math/Vec3';
 import HTMLToolbar from './toolbar/HTMLToolbar';
-import AbstractRenderer, { RenderablePathSpec } from './rendering/renderers/AbstractRenderer';
+import { RenderablePathSpec } from './rendering/renderers/AbstractRenderer';
 import Display, { RenderingMode } from './rendering/Display';
 import SVGRenderer from './rendering/renderers/SVGRenderer';
 import Color4 from './Color4';
@@ -831,7 +831,7 @@ export class Editor {
 	// The export resolution is the same as the size of the drawing canvas.
 	public toDataURL(format: 'image/png'|'image/jpeg'|'image/webp' = 'image/png'): string {
 		const canvas = document.createElement('canvas');
-		
+
 		const resolution = this.importExportViewport.getResolution();
 
 		canvas.width = resolution.x;
@@ -840,8 +840,7 @@ export class Editor {
 		const ctx = canvas.getContext('2d')!;
 		const renderer = new CanvasRenderer(ctx, this.importExportViewport);
 
-		// Render everything with no transform (0,0) should be (0,0) in the output image
-		this.renderAllWithTransform(renderer, this.importExportViewport, Mat33.identity);
+		this.image.renderAll(renderer);
 
 		const dataURL = canvas.toDataURL(format);
 		return dataURL;
@@ -853,7 +852,15 @@ export class Editor {
 		const result = document.createElementNS(svgNameSpace, 'svg');
 		const renderer = new SVGRenderer(result, importExportViewport);
 
-		this.renderAllWithTransform(renderer, importExportViewport);
+		const origTransform = this.importExportViewport.canvasToScreenTransform;
+		// Render with (0,0) at (0,0) — we'll handle translation with
+		// the viewBox property.
+		importExportViewport.resetTransform(Mat33.identity);
+
+		this.image.renderAll(renderer);
+
+		importExportViewport.resetTransform(origTransform);
+
 
 		// Just show the main region
 		const rect = importExportViewport.visibleRect;
@@ -871,23 +878,6 @@ export class Editor {
 		return result;
 	}
 
-	// Renders everything in this' image to `renderer`, but first transforming the given `viewport`
-	// such that its transform is `transform`. The given `viewport`'s transform is restored before this method
-	// returns.
-	//
-	// For example, rendering with `transform = Mat33.identity` *sets* `viewport`'s transform to `Mat33.identity`,
-	// renders everything in this' image to `renderer`, then restores `viewport`'s transform to whatever it was before.
-	private renderAllWithTransform(
-		renderer: AbstractRenderer, viewport: Viewport, transform: Mat33 = Mat33.identity
-	): void {
-		const origTransform = this.importExportViewport.canvasToScreenTransform;
-		viewport.resetTransform(transform);
-
-		this.image.renderAll(renderer);
-
-		viewport.resetTransform(origTransform);
-	}
-
 	public async loadFrom(loader: ImageLoader) {
 		this.showLoadingWarning(0);
 		this.display.setDraftMode(true);

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 TextComponent, { TextStyle } from './components/Text';
+import TextComponent, { TextStyle } from './components/TextComponent';
 import UnknownSVGObject from './components/UnknownSVGObject';
 import Mat33 from './math/Mat33';
 import Path from './math/Path';

package/src/Viewport.ts

@@ -223,9 +223,7 @@ export class Viewport {
 		const muchSmallerThanTarget = toMakeVisible.maxDimension / targetRect.maxDimension < 1/3;
 
 		if ((largerThanTarget && allowZoomOut) || (muchSmallerThanTarget && allowZoomIn)) {
-			// If larger than the target, ensure that the longest axis is visible.
-			// If smaller, shrink the visible rectangle as much as possible
-			const multiplier = (largerThanTarget ? Math.max : Math.min)(
+			const multiplier = Math.max(
 				toMakeVisible.w / targetRect.w, toMakeVisible.h / targetRect.h
 			);
 			const visibleRectTransform = Mat33.scaling2D(multiplier, targetRect.topLeft);

package/src/commands/Command.ts

@@ -2,8 +2,8 @@ import Editor from '../Editor';
 import { EditorLocalization } from '../localization';
 
 export abstract class Command {
-	public abstract apply(editor: Editor): void;
-	public abstract unapply(editor: Editor): void;
+	public abstract apply(editor: Editor): Promise<void>|void;
+	public abstract unapply(editor: Editor): Promise<void>|void;
 
 	// Called when the command is being deleted
 	public onDrop(_editor: Editor) { }

package/src/commands/uniteCommands.ts

@@ -9,23 +9,34 @@ class NonSerializableUnion extends Command {
 		super();
 	}
 
+	private static waitForAll(commands: (Promise<void>|void)[]): Promise<void>|void {
+		// If any are Promises...
+		if (commands.some(command => command && command['then'])) {
+			console.log('waiting...');
+			// Wait for all commands to finish.
+			return Promise.all(commands)
+				// Ensure we return a Promise<void> and not a Promise<void[]>
+				.then(() => {});
+		}
+
+		return;
+	}
+
 	public apply(editor: Editor) {
 		if (this.applyChunkSize === undefined) {
-			for (const command of this.commands) {
-				command.apply(editor);
-			}
+			const results = this.commands.map(cmd => cmd.apply(editor));
+			return NonSerializableUnion.waitForAll(results);
 		} else {
-			editor.asyncApplyCommands(this.commands, this.applyChunkSize);
+			return editor.asyncApplyCommands(this.commands, this.applyChunkSize);
 		}
 	}
 
 	public unapply(editor: Editor) {
 		if (this.applyChunkSize === undefined) {
-			for (const command of this.commands) {
-				command.unapply(editor);
-			}
+			const results = this.commands.map(cmd => cmd.unapply(editor));
+			return NonSerializableUnion.waitForAll(results);
 		} else {
-			editor.asyncUnapplyCommands(this.commands, this.applyChunkSize);
+			return editor.asyncUnapplyCommands(this.commands, this.applyChunkSize);
 		}
 	}
 
@@ -71,11 +82,11 @@ class SerializableUnion extends SerializableCommand {
 	}
 
 	public apply(editor: Editor) {
-		this.nonserializableCommand.apply(editor);
+		return this.nonserializableCommand.apply(editor);
 	}
 
 	public unapply(editor: Editor) {
-		this.nonserializableCommand.unapply(editor);
+		return this.nonserializableCommand.unapply(editor);
 	}
 
 	public description(editor: Editor, localizationTable: EditorLocalization): string {

package/src/components/{Text.test.ts → TextComponent.test.ts}

@@ -1,7 +1,7 @@
 import Color4 from '../Color4';
 import Mat33 from '../math/Mat33';
 import AbstractComponent from './AbstractComponent';
-import TextComponent, { TextStyle } from './Text';
+import TextComponent, { TextStyle } from './TextComponent';
 
 
 describe('Text', () => {