js-draw 0.25.1 → 1.0.0

package/dist/mjs/Editor.mjs

@@ -1,77 +1,17 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import  EditorImage  from './EditorImage.mjs';
 import  ToolController  from './tools/ToolController.mjs';
-import  { InputEvtType, EditorEventType }  from './types.mjs';
+import  { EditorEventType }  from './types.mjs';
+import  { InputEvtType, keyUpEventFromHTMLEvent, keyPressEventFromHTMLEvent }  from './inputEvents.mjs';
 import  UndoRedoHistory  from './UndoRedoHistory.mjs';
 import  Viewport  from './Viewport.mjs';
 import  EventDispatcher  from './EventDispatcher.mjs';
-import  { Vec2 }  from './math/Vec2.mjs';
-import  Vec3  from './math/Vec3.mjs';
-import  HTMLToolbar  from './toolbar/HTMLToolbar.mjs';
+import { Vec2, Vec3, Color4, Mat33, toRoundedString } from '@js-draw/math';
 import  Display, { RenderingMode }  from './rendering/Display.mjs';
 import  SVGRenderer  from './rendering/renderers/SVGRenderer.mjs';
-import  Color4  from './Color4.mjs';
 import  SVGLoader  from './SVGLoader.mjs';
 import  Pointer  from './Pointer.mjs';
-import  Mat33  from './math/Mat33.mjs';
 import  getLocalizationTable  from './localizations/getLocalizationTable.mjs';
 import  IconProvider  from './toolbar/IconProvider.mjs';
-import  { toRoundedString }  from './math/rounding.mjs';
 import  CanvasRenderer  from './rendering/renderers/CanvasRenderer.mjs';
 import  untilNextAnimationFrame  from './util/untilNextAnimationFrame.mjs';
 import  fileToBase64  from './util/fileToBase64.mjs';
@@ -81,6 +21,11 @@ import  Erase  from './commands/Erase.mjs';
 import  BackgroundComponent, { BackgroundType }  from './components/BackgroundComponent.mjs';
 import  sendPenEvent  from './testing/sendPenEvent.mjs';
 import  KeyboardShortcutManager  from './shortcuts/KeyboardShortcutManager.mjs';
+import  EdgeToolbar  from './toolbar/EdgeToolbar.mjs';
+import  StrokeKeyboardControl  from './tools/InputFilter/StrokeKeyboardControl.mjs';
+import  guessKeyCodeFromKey  from './util/guessKeyCodeFromKey.mjs';
+import  makeAboutDialog  from './dialogs/makeAboutDialog.mjs';
+import  version  from './version.mjs';
 /**
  * The main entrypoint for the full editor.
  *
@@ -99,7 +44,7 @@ import  KeyboardShortcutManager  from './shortcuts/KeyboardShortcutManager.mjs';
  * See also
  * [`docs/example/example.ts`](https://github.com/personalizedrefrigerator/js-draw/blob/main/docs/demo/example.ts#L15).
  */
-var Editor = /** @class */ (function () {
+export class Editor {
     /**
      * @example
      * ```
@@ -125,39 +70,41 @@ var Editor = /** @class */ (function () {
      * });
      * ```
      */
-    function Editor(parent, settings) {
-        if (settings === void 0) { settings = {}; }
-        var _this = this;
-        var _a, _b, _c, _d, _e, _f;
+    constructor(parent, settings = {}) {
         this.eventListenerTargets = [];
         this.previousAccessibilityAnnouncement = '';
         this.pointers = {};
-        this.announceUndoCallback = function (command) {
-            _this.announceForAccessibility(_this.localization.undoAnnouncement(command.description(_this, _this.localization)));
+        this.announceUndoCallback = (command) => {
+            this.announceForAccessibility(this.localization.undoAnnouncement(command.description(this, this.localization)));
         };
-        this.announceRedoCallback = function (command) {
-            _this.announceForAccessibility(_this.localization.redoAnnouncement(command.description(_this, _this.localization)));
+        this.announceRedoCallback = (command) => {
+            this.announceForAccessibility(this.localization.redoAnnouncement(command.description(this, this.localization)));
         };
         // Listeners to be called once at the end of the next re-render.
         this.nextRerenderListeners = [];
         this.rerenderQueued = false;
-        this.localization = __assign(__assign({}, getLocalizationTable()), settings.localization);
+        this.closeAboutDialog = null;
+        this.localization = {
+            ...getLocalizationTable(),
+            ...settings.localization,
+        };
         // Fill default settings.
         this.settings = {
-            wheelEventsEnabled: (_a = settings.wheelEventsEnabled) !== null && _a !== void 0 ? _a : true,
-            renderingMode: (_b = settings.renderingMode) !== null && _b !== void 0 ? _b : RenderingMode.CanvasRenderer,
+            wheelEventsEnabled: settings.wheelEventsEnabled ?? true,
+            renderingMode: settings.renderingMode ?? RenderingMode.CanvasRenderer,
             localization: this.localization,
-            minZoom: (_c = settings.minZoom) !== null && _c !== void 0 ? _c : 2e-10,
-            maxZoom: (_d = settings.maxZoom) !== null && _d !== void 0 ? _d : 1e12,
-            keyboardShortcutOverrides: (_e = settings.keyboardShortcutOverrides) !== null && _e !== void 0 ? _e : {},
-            iconProvider: (_f = settings.iconProvider) !== null && _f !== void 0 ? _f : new IconProvider(),
+            minZoom: settings.minZoom ?? 2e-10,
+            maxZoom: settings.maxZoom ?? 1e12,
+            keyboardShortcutOverrides: settings.keyboardShortcutOverrides ?? {},
+            iconProvider: settings.iconProvider ?? new IconProvider(),
+            notices: [],
         };
         this.icons = this.settings.iconProvider;
         this.shortcuts = new KeyboardShortcutManager(this.settings.keyboardShortcutOverrides);
         this.container = document.createElement('div');
         this.renderingRegion = document.createElement('div');
         this.container.appendChild(this.renderingRegion);
-        this.container.className = 'imageEditorContainer';
+        this.container.classList.add('imageEditorContainer', 'js-draw');
         this.loadingWarning = document.createElement('div');
         this.loadingWarning.classList.add('loadingMessage');
         this.loadingWarning.ariaLive = 'polite';
@@ -178,33 +125,35 @@ var Editor = /** @class */ (function () {
         this.renderingRegion.setAttribute('tabIndex', '0');
         this.renderingRegion.setAttribute('alt', '');
         this.notifier = new EventDispatcher();
-        this.viewport = new Viewport(function (oldTransform, newTransform) {
-            _this.notifier.dispatch(EditorEventType.ViewportChanged, {
+        this.viewport = new Viewport((oldTransform, newTransform) => {
+            this.notifier.dispatch(EditorEventType.ViewportChanged, {
                 kind: EditorEventType.ViewportChanged,
-                newTransform: newTransform,
-                oldTransform: oldTransform,
+                newTransform,
+                oldTransform,
             });
         });
         this.display = new Display(this, this.settings.renderingMode, this.renderingRegion);
         this.image = new EditorImage();
         this.history = new UndoRedoHistory(this, this.announceRedoCallback, this.announceUndoCallback);
         this.toolController = new ToolController(this, this.localization);
+        // TODO: Make this pipeline configurable (e.g. allow users to add global input stabilization)
+        this.toolController.addInputMapper(StrokeKeyboardControl.fromEditor(this));
         parent.appendChild(this.container);
         this.viewport.updateScreenSize(Vec2.of(this.display.width, this.display.height));
         this.registerListeners();
         this.queueRerender();
         this.hideLoadingWarning();
         // Enforce zoom limits.
-        this.notifier.on(EditorEventType.ViewportChanged, function (evt) {
+        this.notifier.on(EditorEventType.ViewportChanged, evt => {
             if (evt.kind === EditorEventType.ViewportChanged) {
-                var zoom = evt.newTransform.transformVec3(Vec2.unitX).length();
-                if (zoom > _this.settings.maxZoom || zoom < _this.settings.minZoom) {
-                    var oldZoom = evt.oldTransform.transformVec3(Vec2.unitX).length();
-                    var resetTransform = Mat33.identity;
-                    if (oldZoom <= _this.settings.maxZoom && oldZoom >= _this.settings.minZoom) {
+                const zoom = evt.newTransform.transformVec3(Vec2.unitX).length();
+                if (zoom > this.settings.maxZoom || zoom < this.settings.minZoom) {
+                    const oldZoom = evt.oldTransform.transformVec3(Vec2.unitX).length();
+                    let resetTransform = Mat33.identity;
+                    if (oldZoom <= this.settings.maxZoom && oldZoom >= this.settings.minZoom) {
                         resetTransform = evt.oldTransform;
                     }
-                    _this.viewport.resetTransform(resetTransform);
+                    this.viewport.resetTransform(resetTransform);
                 }
             }
         });
@@ -218,57 +167,55 @@ var Editor = /** @class */ (function () {
      *   editor.getRootElement().style.height = '500px';
      * ```
      */
-    Editor.prototype.getRootElement = function () {
+    getRootElement() {
         return this.container;
-    };
+    }
     /** @param fractionLoaded - should be a number from 0 to 1, where 1 represents completely loaded. */
-    Editor.prototype.showLoadingWarning = function (fractionLoaded) {
-        var loadingPercent = Math.round(fractionLoaded * 100);
+    showLoadingWarning(fractionLoaded) {
+        const loadingPercent = Math.round(fractionLoaded * 100);
         this.loadingWarning.innerText = this.localization.loading(loadingPercent);
         this.loadingWarning.style.display = 'block';
-    };
-    Editor.prototype.hideLoadingWarning = function () {
+    }
+    hideLoadingWarning() {
         this.loadingWarning.style.display = 'none';
         this.announceForAccessibility(this.localization.doneLoading);
-    };
+    }
     /**
      * Announce `message` for screen readers. If `message` is the same as the previous
      * message, it is re-announced.
      */
-    Editor.prototype.announceForAccessibility = function (message) {
+    announceForAccessibility(message) {
         // Force re-announcing an announcement if announced again.
         if (message === this.previousAccessibilityAnnouncement) {
             message = message + '. ';
         }
         this.accessibilityAnnounceArea.innerText = message;
         this.previousAccessibilityAnnouncement = message;
-    };
+    }
     /**
      * Creates a toolbar. If `defaultLayout` is true, default buttons are used.
      * @returns a reference to the toolbar.
      */
-    Editor.prototype.addToolbar = function (defaultLayout) {
-        if (defaultLayout === void 0) { defaultLayout = true; }
-        var toolbar = new HTMLToolbar(this, this.container, this.localization);
+    addToolbar(defaultLayout = true) {
+        const toolbar = new EdgeToolbar(this, this.container, this.localization);
         if (defaultLayout) {
             toolbar.addDefaults();
         }
         return toolbar;
-    };
-    Editor.prototype.registerListeners = function () {
-        var _this = this;
+    }
+    registerListeners() {
         this.handlePointerEventsFrom(this.renderingRegion);
         this.handleKeyEventsFrom(this.renderingRegion);
-        this.container.addEventListener('wheel', function (evt) {
-            var delta = Vec3.of(evt.deltaX, evt.deltaY, evt.deltaZ);
+        this.container.addEventListener('wheel', evt => {
+            let delta = Vec3.of(evt.deltaX, evt.deltaY, evt.deltaZ);
             // Process wheel events if the ctrl key is down, even if disabled -- we do want to handle
             // pinch-zooming.
             if (!evt.ctrlKey && !evt.metaKey) {
-                if (!_this.settings.wheelEventsEnabled) {
+                if (!this.settings.wheelEventsEnabled) {
                     return;
                 }
-                else if (_this.settings.wheelEventsEnabled === 'only-if-focused') {
-                    var focusedChild = _this.container.querySelector(':focus');
+                else if (this.settings.wheelEventsEnabled === 'only-if-focused') {
+                    const focusedChild = this.container.querySelector(':focus');
                     if (!focusedChild) {
                         return;
                     }
@@ -284,11 +231,11 @@ var Editor = /** @class */ (function () {
                 delta = Vec3.of(0, 0, evt.deltaY);
             }
             // Ensure that `pos` is relative to `this.renderingRegion`
-            var bbox = _this.renderingRegion.getBoundingClientRect();
-            var pos = Vec2.of(evt.clientX, evt.clientY).minus(Vec2.of(bbox.left, bbox.top));
-            if (_this.toolController.dispatchInputEvent({
+            const bbox = this.renderingRegion.getBoundingClientRect();
+            const pos = Vec2.of(evt.clientX, evt.clientY).minus(Vec2.of(bbox.left, bbox.top));
+            if (this.toolController.dispatchInputEvent({
                 kind: InputEvtType.WheelEvt,
-                delta: delta,
+                delta,
                 screenPos: pos,
             })) {
                 evt.preventDefault();
@@ -296,81 +243,82 @@ var Editor = /** @class */ (function () {
             }
             return false;
         });
-        this.notifier.on(EditorEventType.DisplayResized, function (_event) {
-            _this.viewport.updateScreenSize(Vec2.of(_this.display.width, _this.display.height));
-            _this.queueRerender();
-        });
-        var handleResize = function () {
-            _this.notifier.dispatch(EditorEventType.DisplayResized, {
-                kind: EditorEventType.DisplayResized,
-                newSize: Vec2.of(_this.display.width, _this.display.height),
-            });
+        const handleResize = () => {
+            this.viewport.updateScreenSize(Vec2.of(this.display.width, this.display.height));
+            this.rerender();
+            this.updateEditorSizeVariables();
         };
         if ('ResizeObserver' in window) {
-            var resizeObserver = new ResizeObserver(handleResize);
+            const resizeObserver = new ResizeObserver(handleResize);
+            resizeObserver.observe(this.renderingRegion);
             resizeObserver.observe(this.container);
         }
         else {
             addEventListener('resize', handleResize);
         }
-        this.accessibilityControlArea.addEventListener('input', function () {
-            _this.accessibilityControlArea.value = '';
+        this.accessibilityControlArea.addEventListener('input', () => {
+            this.accessibilityControlArea.value = '';
         });
-        document.addEventListener('copy', function (evt) {
-            if (!_this.isEventSink(document.querySelector(':focus'))) {
+        document.addEventListener('copy', evt => {
+            if (!this.isEventSink(document.querySelector(':focus'))) {
                 return;
             }
-            var clipboardData = evt.clipboardData;
-            if (_this.toolController.dispatchInputEvent({
+            const clipboardData = evt.clipboardData;
+            if (this.toolController.dispatchInputEvent({
                 kind: InputEvtType.CopyEvent,
-                setData: function (mime, data) {
-                    clipboardData === null || clipboardData === void 0 ? void 0 : clipboardData.setData(mime, data);
+                setData: (mime, data) => {
+                    clipboardData?.setData(mime, data);
                 },
             })) {
                 evt.preventDefault();
             }
         });
-        document.addEventListener('paste', function (evt) {
-            _this.handlePaste(evt);
+        document.addEventListener('paste', evt => {
+            this.handlePaste(evt);
         });
-    };
-    Editor.prototype.getPointerList = function () {
-        var nowTime = (new Date()).getTime();
-        var res = [];
-        for (var id in this.pointers) {
-            var maxUnupdatedTime = 2000; // Maximum time without a pointer update (ms)
+    }
+    updateEditorSizeVariables() {
+        // Add CSS variables so that absolutely-positioned children of the editor can
+        // still fill the screen.
+        this.container.style.setProperty('--editor-current-width-px', `${this.container.clientWidth}px`);
+        this.container.style.setProperty('--editor-current-height-px', `${this.container.clientHeight}px`);
+    }
+    getPointerList() {
+        const nowTime = performance.now();
+        const res = [];
+        for (const id in this.pointers) {
+            const maxUnupdatedTime = 2000; // Maximum time without a pointer update (ms)
             if (this.pointers[id] && (nowTime - this.pointers[id].timeStamp) < maxUnupdatedTime) {
                 res.push(this.pointers[id]);
             }
         }
         return res;
-    };
+    }
     /**
      * Dispatches a `PointerEvent` to the editor. The target element for `evt` must have the same top left
      * as the content of the editor.
      */
-    Editor.prototype.handleHTMLPointerEvent = function (eventType, evt) {
-        var _a, _b, _c;
-        var eventsRelativeTo = this.renderingRegion;
-        var eventTarget = (_a = evt.target) !== null && _a !== void 0 ? _a : this.renderingRegion;
+    handleHTMLPointerEvent(eventType, evt) {
+        const eventsRelativeTo = this.renderingRegion;
+        const eventTarget = evt.target ?? this.renderingRegion;
         if (eventType === 'pointerdown') {
-            var pointer = Pointer.ofEvent(evt, true, this.viewport, eventsRelativeTo);
+            const pointer = Pointer.ofEvent(evt, true, this.viewport, eventsRelativeTo);
             this.pointers[pointer.id] = pointer;
             eventTarget.setPointerCapture(pointer.id);
-            var event_1 = {
+            const event = {
                 kind: InputEvtType.PointerDownEvt,
                 current: pointer,
                 allPointers: this.getPointerList(),
             };
-            this.toolController.dispatchInputEvent(event_1);
+            this.toolController.dispatchInputEvent(event);
             return true;
         }
         else if (eventType === 'pointermove') {
-            var pointer = Pointer.ofEvent(evt, (_c = (_b = this.pointers[evt.pointerId]) === null || _b === void 0 ? void 0 : _b.down) !== null && _c !== void 0 ? _c : false, this.viewport, eventsRelativeTo);
+            const pointer = Pointer.ofEvent(evt, this.pointers[evt.pointerId]?.down ?? false, this.viewport, eventsRelativeTo);
             if (pointer.down) {
-                var prevData = this.pointers[pointer.id];
+                const prevData = this.pointers[pointer.id];
                 if (prevData) {
-                    var distanceMoved = pointer.screenPos.minus(prevData.screenPos).magnitude();
+                    const distanceMoved = pointer.screenPos.minus(prevData.screenPos).magnitude();
                     // If the pointer moved less than two pixels, don't send a new event.
                     if (distanceMoved < 2) {
                         return false;
@@ -388,7 +336,7 @@ var Editor = /** @class */ (function () {
             return true;
         }
         else if (eventType === 'pointercancel' || eventType === 'pointerup') {
-            var pointer = Pointer.ofEvent(evt, false, this.viewport, eventsRelativeTo);
+            const pointer = Pointer.ofEvent(evt, false, this.viewport, eventsRelativeTo);
             if (!this.pointers[pointer.id]) {
                 return false;
             }
@@ -405,12 +353,11 @@ var Editor = /** @class */ (function () {
             return true;
         }
         return eventType;
-    };
-    Editor.prototype.isEventSink = function (evtTarget) {
-        var currentElem = evtTarget;
+    }
+    isEventSink(evtTarget) {
+        let currentElem = evtTarget;
         while (currentElem !== null) {
-            for (var _i = 0, _a = this.eventListenerTargets; _i < _a.length; _i++) {
-                var elem = _a[_i];
+            for (const elem of this.eventListenerTargets) {
                 if (elem === currentElem) {
                     return true;
                 }
@@ -418,108 +365,84 @@ var Editor = /** @class */ (function () {
             currentElem = currentElem.parentElement;
         }
         return false;
-    };
-    Editor.prototype.handlePaste = function (evt) {
-        var _a, _b;
-        return __awaiter(this, void 0, void 0, function () {
-            var target, clipboardData, _i, _c, file, text, _d, _e, file, fileType, onprogress_1, data, e_1, supportedMIMEs, _f, supportedMIMEs_1, mime, data;
-            var _this = this;
-            return __generator(this, function (_g) {
-                switch (_g.label) {
-                    case 0:
-                        target = (_a = document.querySelector(':focus')) !== null && _a !== void 0 ? _a : evt.target;
-                        if (!this.isEventSink(target)) {
-                            return [2 /*return*/];
-                        }
-                        clipboardData = (_b = evt.dataTransfer) !== null && _b !== void 0 ? _b : evt.clipboardData;
-                        if (!clipboardData) {
-                            return [2 /*return*/];
-                        }
-                        _i = 0, _c = clipboardData.files;
-                        _g.label = 1;
-                    case 1:
-                        if (!(_i < _c.length)) return [3 /*break*/, 4];
-                        file = _c[_i];
-                        if (!(file.type.toLowerCase() === 'image/svg+xml')) return [3 /*break*/, 3];
-                        return [4 /*yield*/, file.text()];
-                    case 2:
-                        text = _g.sent();
-                        if (this.toolController.dispatchInputEvent({
-                            kind: InputEvtType.PasteEvent,
-                            mime: file.type,
-                            data: text,
-                        })) {
-                            evt.preventDefault();
-                            return [2 /*return*/];
-                        }
-                        _g.label = 3;
-                    case 3:
-                        _i++;
-                        return [3 /*break*/, 1];
-                    case 4:
-                        _d = 0, _e = clipboardData.files;
-                        _g.label = 5;
-                    case 5:
-                        if (!(_d < _e.length)) return [3 /*break*/, 11];
-                        file = _e[_d];
-                        fileType = file.type.toLowerCase();
-                        if (!(fileType === 'image/png' || fileType === 'image/jpg')) return [3 /*break*/, 10];
-                        this.showLoadingWarning(0);
-                        onprogress_1 = function (evt) {
-                            _this.showLoadingWarning(evt.loaded / evt.total);
-                        };
-                        _g.label = 6;
-                    case 6:
-                        _g.trys.push([6, 8, , 9]);
-                        return [4 /*yield*/, fileToBase64(file, onprogress_1)];
-                    case 7:
-                        data = _g.sent();
-                        if (data && this.toolController.dispatchInputEvent({
-                            kind: InputEvtType.PasteEvent,
-                            mime: fileType,
-                            data: data,
-                        })) {
-                            evt.preventDefault();
-                            this.hideLoadingWarning();
-                            return [2 /*return*/];
-                        }
-                        return [3 /*break*/, 9];
-                    case 8:
-                        e_1 = _g.sent();
-                        console.error('Error reading image:', e_1);
-                        return [3 /*break*/, 9];
-                    case 9:
+    }
+    async handlePaste(evt) {
+        const target = document.querySelector(':focus') ?? evt.target;
+        if (!this.isEventSink(target)) {
+            return;
+        }
+        const clipboardData = evt.dataTransfer ?? evt.clipboardData;
+        if (!clipboardData) {
+            return;
+        }
+        // Handle SVG files (prefer to PNG/JPEG)
+        for (const file of clipboardData.files) {
+            if (file.type.toLowerCase() === 'image/svg+xml') {
+                const text = await file.text();
+                if (this.toolController.dispatchInputEvent({
+                    kind: InputEvtType.PasteEvent,
+                    mime: file.type,
+                    data: text,
+                })) {
+                    evt.preventDefault();
+                    return;
+                }
+            }
+        }
+        // Handle image files.
+        for (const file of clipboardData.files) {
+            const fileType = file.type.toLowerCase();
+            if (fileType === 'image/png' || fileType === 'image/jpg') {
+                this.showLoadingWarning(0);
+                const onprogress = (evt) => {
+                    this.showLoadingWarning(evt.loaded / evt.total);
+                };
+                try {
+                    const data = await fileToBase64(file, onprogress);
+                    if (data && this.toolController.dispatchInputEvent({
+                        kind: InputEvtType.PasteEvent,
+                        mime: fileType,
+                        data: data,
+                    })) {
+                        evt.preventDefault();
                         this.hideLoadingWarning();
-                        _g.label = 10;
-                    case 10:
-                        _d++;
-                        return [3 /*break*/, 5];
-                    case 11:
-                        supportedMIMEs = [
-                            'image/svg+xml',
-                            'text/plain',
-                        ];
-                        for (_f = 0, supportedMIMEs_1 = supportedMIMEs; _f < supportedMIMEs_1.length; _f++) {
-                            mime = supportedMIMEs_1[_f];
-                            data = clipboardData.getData(mime);
-                            if (data && this.toolController.dispatchInputEvent({
-                                kind: InputEvtType.PasteEvent,
-                                mime: mime,
-                                data: data,
-                            })) {
-                                evt.preventDefault();
-                                return [2 /*return*/];
-                            }
-                        }
-                        return [2 /*return*/];
+                        return;
+                    }
                 }
-            });
-        });
-    };
+                catch (e) {
+                    console.error('Error reading image:', e);
+                }
+                this.hideLoadingWarning();
+            }
+        }
+        // Supported MIMEs for text data, in order of preference
+        const supportedMIMEs = [
+            'image/svg+xml',
+            'text/plain',
+        ];
+        for (const mime of supportedMIMEs) {
+            const data = clipboardData.getData(mime);
+            if (data && this.toolController.dispatchInputEvent({
+                kind: InputEvtType.PasteEvent,
+                mime,
+                data,
+            })) {
+                evt.preventDefault();
+                return;
+            }
+        }
+    }
     /**
      * Forward pointer events from `elem` to this editor. Such that right-click/right-click drag
      * events are also forwarded, `elem`'s contextmenu is disabled.
      *
+     * `filter` is called once per pointer event, before doing any other processing. If `filter` returns `true` the event is
+     * forwarded to the editor.
+     *
+     * **Note**: `otherEventsFilter` is like `filter`, but is called for other pointer-related
+     * events that could also be forwarded to the editor. To forward just pointer events,
+     * for example, `otherEventsFilter` could be given as `()=>false`.
+     *
      * @example
      * ```ts
      * const overlay = document.createElement('div');
@@ -535,94 +458,196 @@ var Editor = /** @class */ (function () {
      * });
      * ```
      */
-    Editor.prototype.handlePointerEventsFrom = function (elem, filter) {
-        var _this = this;
+    handlePointerEventsFrom(elem, filter, otherEventsFilter) {
         // May be required to prevent text selection on iOS/Safari:
         // See https://stackoverflow.com/a/70992717/17055750
-        var touchstartListener = function (evt) { return evt.preventDefault(); };
-        var contextmenuListener = function (evt) {
+        const touchstartListener = (evt) => {
+            if (otherEventsFilter && !otherEventsFilter('touchstart', evt)) {
+                return;
+            }
+            evt.preventDefault();
+        };
+        const contextmenuListener = (evt) => {
+            if (otherEventsFilter && !otherEventsFilter('contextmenu', evt)) {
+                return;
+            }
             // Don't show a context menu
             evt.preventDefault();
         };
-        var listeners = {
+        const listeners = {
             'touchstart': touchstartListener,
             'contextmenu': contextmenuListener,
         };
-        var eventNames = ['pointerdown', 'pointermove', 'pointerup', 'pointercancel'];
-        var _loop_1 = function (eventName) {
-            listeners[eventName] = function (evt) {
+        const eventNames = ['pointerdown', 'pointermove', 'pointerup', 'pointercancel'];
+        for (const eventName of eventNames) {
+            listeners[eventName] = (evt) => {
                 // This listener will only be called in the context of PointerEvents.
-                var event = evt;
+                const event = evt;
                 if (filter && !filter(eventName, event)) {
-                    return true;
+                    return undefined;
                 }
-                return _this.handleHTMLPointerEvent(eventName, event);
+                return this.handleHTMLPointerEvent(eventName, event);
             };
-        };
-        for (var _i = 0, eventNames_1 = eventNames; _i < eventNames_1.length; _i++) {
-            var eventName = eventNames_1[_i];
-            _loop_1(eventName);
         }
         // Add all listeners.
-        for (var eventName in listeners) {
+        for (const eventName in listeners) {
             elem.addEventListener(eventName, listeners[eventName]);
         }
         return {
             /** Remove all event listeners registered by this function. */
-            remove: function () {
-                for (var eventName in listeners) {
+            remove: () => {
+                for (const eventName in listeners) {
                     elem.removeEventListener(eventName, listeners[eventName]);
                 }
             },
         };
-    };
-    /** Adds event listners for keypresses to `elem` and forwards those events to the editor. */
-    Editor.prototype.handleKeyEventsFrom = function (elem) {
-        var _this = this;
-        elem.addEventListener('keydown', function (evt) {
-            if (evt.key === 't' || evt.key === 'T') {
-                evt.preventDefault();
-                _this.display.rerenderAsText();
+    }
+    /**
+     * Like {@link handlePointerEventsFrom} except ignores short input gestures like clicks.
+     *
+     * `filter` is called once per event, before doing any other processing. If `filter` returns `true` the event is
+     * forwarded to the editor.
+     *
+     * `otherEventsFilter` is passed unmodified to `handlePointerEventsFrom`.
+     */
+    handlePointerEventsExceptClicksFrom(elem, filter, otherEventsFilter) {
+        // Maps pointer IDs to gesture start points
+        const gestureData = Object.create(null);
+        return this.handlePointerEventsFrom(elem, (eventName, event) => {
+            if (filter && !filter(eventName, event)) {
+                return false;
             }
-            else if (_this.toolController.dispatchInputEvent({
-                kind: InputEvtType.KeyPressEvent,
-                key: evt.key,
-                ctrlKey: evt.ctrlKey || evt.metaKey,
-                altKey: evt.altKey,
-            })) {
-                evt.preventDefault();
+            // Position of the current event.
+            const currentPos = Vec2.of(event.pageX, event.pageY);
+            const pointerId = event.pointerId ?? 0;
+            // Whether to send the current event to the editor
+            let sendToEditor = true;
+            if (eventName === 'pointerdown') {
+                // Buffer the event, but don't send it to the editor yet.
+                // We don't want to send single-click events, but we do want to send full strokes.
+                gestureData[pointerId] = {
+                    eventBuffer: [[eventName, event]],
+                    startPoint: currentPos,
+                };
+                // Capture the pointer so we receive future events even if the overlay is hidden.
+                elem.setPointerCapture(event.pointerId);
+                // Don't send to the editor.
+                sendToEditor = false;
+            }
+            else if (eventName === 'pointermove' && gestureData[pointerId]) {
+                const gestureStartPos = gestureData[pointerId].startPoint;
+                const eventBuffer = gestureData[pointerId].eventBuffer;
+                // Skip if the pointer hasn't moved enough to not be a "click".
+                const strokeStartThreshold = 10;
+                const isWithinClickThreshold = gestureStartPos && currentPos.minus(gestureStartPos).magnitude() < strokeStartThreshold;
+                if (isWithinClickThreshold) {
+                    eventBuffer.push([eventName, event]);
+                    sendToEditor = false;
+                }
+                else {
+                    // Send all buffered events to the editor -- start the stroke.
+                    for (const [eventName, event] of eventBuffer) {
+                        this.handleHTMLPointerEvent(eventName, event);
+                    }
+                    gestureData[pointerId].eventBuffer = [];
+                    sendToEditor = true;
+                }
+            }
+            // Pointers that aren't down -- send to the editor.
+            else if (eventName === 'pointermove') {
+                sendToEditor = true;
+            }
+            // Otherwise, if we received a pointerup/pointercancel without flushing all pointerevents from the
+            // buffer, the gesture wasn't recognised as a stroke. Thus, the editor isn't expecting a pointerup/
+            // pointercancel event.
+            else if ((eventName === 'pointerup' || eventName === 'pointercancel')
+                && gestureData[pointerId] && gestureData[pointerId].eventBuffer.length > 0) {
+                elem.releasePointerCapture(event.pointerId);
+                // Don't send to the editor.
+                sendToEditor = false;
+                delete gestureData[pointerId];
+            }
+            // Forward all other events to the editor.
+            return sendToEditor;
+        }, otherEventsFilter);
+    }
+    /**
+     * Adds event listners for keypresses (and drop events) on `elem` and forwards those
+     * events to the editor.
+     *
+     * If the given `filter` returns `false` for an event, the event is ignored and not
+     * passed to the editor.
+     */
+    handleKeyEventsFrom(elem, filter = () => true) {
+        // Track which keys are down so we can release them when the element
+        // loses focus. This is particularly important for keys like Control
+        // that can trigger shortcuts that cause the editor to lose focus before
+        // the keyup event is triggered.
+        let keysDown = [];
+        // Return whether two objects that are similar to keyboard events represent the
+        // same key.
+        const keyEventsMatch = (a, b) => {
+            return a.key === b.key && a.code === b.code;
+        };
+        elem.addEventListener('keydown', htmlEvent => {
+            if (!filter(htmlEvent)) {
+                return;
+            }
+            const event = keyPressEventFromHTMLEvent(htmlEvent);
+            // Add event to the list of keys that are down (so long as it
+            // isn't a duplicate).
+            if (!keysDown.some(other => keyEventsMatch(other, event))) {
+                keysDown.push(event);
             }
-            else if (evt.key === 'Escape') {
-                _this.renderingRegion.blur();
+            if (event.key === 't' || event.key === 'T') {
+                htmlEvent.preventDefault();
+                this.display.rerenderAsText();
+            }
+            else if (this.toolController.dispatchInputEvent(event)) {
+                htmlEvent.preventDefault();
+            }
+            else if (event.key === 'Escape') {
+                this.renderingRegion.blur();
             }
         });
-        elem.addEventListener('keyup', function (evt) {
-            if (_this.toolController.dispatchInputEvent({
-                kind: InputEvtType.KeyUpEvent,
-                key: evt.key,
-                ctrlKey: evt.ctrlKey || evt.metaKey,
-                altKey: evt.altKey,
-            })) {
-                evt.preventDefault();
+        elem.addEventListener('keyup', htmlEvent => {
+            // Remove the key from keysDown -- it's no longer down.
+            keysDown = keysDown.filter(event => {
+                const matches = keyEventsMatch(event, htmlEvent);
+                return !matches;
+            });
+            if (!filter(htmlEvent)) {
+                return;
+            }
+            const event = keyUpEventFromHTMLEvent(htmlEvent);
+            if (this.toolController.dispatchInputEvent(event)) {
+                htmlEvent.preventDefault();
+            }
+        });
+        elem.addEventListener('blur', () => {
+            for (const event of keysDown) {
+                this.toolController.dispatchInputEvent({
+                    ...event,
+                    kind: InputEvtType.KeyUpEvent,
+                });
             }
         });
         // Allow drop.
-        elem.ondragover = function (evt) {
+        elem.ondragover = evt => {
             evt.preventDefault();
         };
-        elem.ondrop = function (evt) {
+        elem.ondrop = evt => {
             evt.preventDefault();
-            _this.handlePaste(evt);
+            this.handlePaste(evt);
         };
         this.eventListenerTargets.push(elem);
-    };
+    }
     /** `apply` a command. `command` will be announced for accessibility. */
-    Editor.prototype.dispatch = function (command, addToHistory) {
-        if (addToHistory === void 0) { addToHistory = true; }
-        var dispatchResult = this.dispatchNoAnnounce(command, addToHistory);
+    dispatch(command, addToHistory = true) {
+        const dispatchResult = this.dispatchNoAnnounce(command, addToHistory);
         this.announceForAccessibility(command.description(this, this.localization));
         return dispatchResult;
-    };
+    }
     /**
      * Dispatches a command without announcing it. By default, does not add to history.
      * Use this to show finalized commands that don't need to have `announceForAccessibility`
@@ -638,158 +663,132 @@ var Editor = /** @class */ (function () {
      * editor.dispatchNoAnnounce(editor.viewport.zoomTo(someRectangle), addToHistory);
      * ```
      */
-    Editor.prototype.dispatchNoAnnounce = function (command, addToHistory) {
-        if (addToHistory === void 0) { addToHistory = false; }
-        var result = command.apply(this);
+    dispatchNoAnnounce(command, addToHistory = false) {
+        const result = command.apply(this);
         if (addToHistory) {
-            var apply = false; // Don't double-apply
+            const apply = false; // Don't double-apply
             this.history.push(command, apply);
         }
         return result;
-    };
+    }
     /**
      * Apply a large transformation in chunks.
      * If `apply` is `false`, the commands are unapplied.
      * Triggers a re-render after each `updateChunkSize`-sized group of commands
      * has been applied.
      */
-    Editor.prototype.asyncApplyOrUnapplyCommands = function (commands, apply, updateChunkSize) {
-        return __awaiter(this, void 0, void 0, function () {
-            var i, j, cmd;
-            var _this = this;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        console.assert(updateChunkSize > 0);
-                        this.display.setDraftMode(true);
-                        i = 0;
-                        _a.label = 1;
-                    case 1:
-                        if (!(i < commands.length)) return [3 /*break*/, 4];
-                        this.showLoadingWarning(i / commands.length);
-                        for (j = i; j < commands.length && j < i + updateChunkSize; j++) {
-                            cmd = commands[j];
-                            if (apply) {
-                                cmd.apply(this);
-                            }
-                            else {
-                                cmd.unapply(this);
-                            }
-                        }
-                        if (!(i + updateChunkSize < commands.length)) return [3 /*break*/, 3];
-                        return [4 /*yield*/, new Promise(function (resolve) {
-                                _this.rerender();
-                                requestAnimationFrame(resolve);
-                            })];
-                    case 2:
-                        _a.sent();
-                        _a.label = 3;
-                    case 3:
-                        i += updateChunkSize;
-                        return [3 /*break*/, 1];
-                    case 4:
-                        this.display.setDraftMode(false);
-                        this.hideLoadingWarning();
-                        return [2 /*return*/];
+    async asyncApplyOrUnapplyCommands(commands, apply, updateChunkSize) {
+        console.assert(updateChunkSize > 0);
+        this.display.setDraftMode(true);
+        for (let i = 0; i < commands.length; i += updateChunkSize) {
+            this.showLoadingWarning(i / commands.length);
+            for (let j = i; j < commands.length && j < i + updateChunkSize; j++) {
+                const cmd = commands[j];
+                if (apply) {
+                    cmd.apply(this);
                 }
-            });
-        });
-    };
+                else {
+                    cmd.unapply(this);
+                }
+            }
+            // Re-render to show progress, but only if we're not done.
+            if (i + updateChunkSize < commands.length) {
+                await new Promise(resolve => {
+                    this.rerender();
+                    requestAnimationFrame(resolve);
+                });
+            }
+        }
+        this.display.setDraftMode(false);
+        this.hideLoadingWarning();
+    }
     // @see {@link #asyncApplyOrUnapplyCommands }
-    Editor.prototype.asyncApplyCommands = function (commands, chunkSize) {
+    asyncApplyCommands(commands, chunkSize) {
         return this.asyncApplyOrUnapplyCommands(commands, true, chunkSize);
-    };
+    }
     // If `unapplyInReverseOrder`, commands are reversed before unapplying.
     // @see {@link #asyncApplyOrUnapplyCommands }
-    Editor.prototype.asyncUnapplyCommands = function (commands, chunkSize, unapplyInReverseOrder) {
-        if (unapplyInReverseOrder === void 0) { unapplyInReverseOrder = false; }
+    asyncUnapplyCommands(commands, chunkSize, unapplyInReverseOrder = false) {
         if (unapplyInReverseOrder) {
-            commands = __spreadArray([], commands, true); // copy
+            commands = [...commands]; // copy
             commands.reverse();
         }
         return this.asyncApplyOrUnapplyCommands(commands, false, chunkSize);
-    };
+    }
     /**
      * Schedule a re-render for some time in the near future. Does not schedule an additional
      * re-render if a re-render is already queued.
      *
      * @returns a promise that resolves when re-rendering has completed.
      */
-    Editor.prototype.queueRerender = function () {
-        var _this = this;
+    queueRerender() {
         if (!this.rerenderQueued) {
             this.rerenderQueued = true;
-            requestAnimationFrame(function () {
+            requestAnimationFrame(() => {
                 // If .rerender was called manually, we might not need to
                 // re-render.
-                if (_this.rerenderQueued) {
-                    _this.rerender();
-                    _this.rerenderQueued = false;
+                if (this.rerenderQueued) {
+                    this.rerender();
+                    this.rerenderQueued = false;
                 }
             });
         }
-        return new Promise(function (resolve) {
-            _this.nextRerenderListeners.push(function () { return resolve(); });
+        return new Promise(resolve => {
+            this.nextRerenderListeners.push(() => resolve());
         });
-    };
+    }
     // @internal
-    Editor.prototype.isRerenderQueued = function () {
+    isRerenderQueued() {
         return this.rerenderQueued;
-    };
+    }
     /**
      * Re-renders the entire image.
      *
      * @see {@link Editor.queueRerender}
      */
-    Editor.prototype.rerender = function (showImageBounds) {
-        if (showImageBounds === void 0) { showImageBounds = true; }
+    rerender(showImageBounds = true) {
         this.display.startRerender();
         // Don't render if the display has zero size.
         if (this.display.width === 0 || this.display.height === 0) {
             return;
         }
-        // Draw a rectangle around the region that will be visible on save
-        var renderer = this.display.getDryInkRenderer();
+        const renderer = this.display.getDryInkRenderer();
         this.image.renderWithCache(renderer, this.display.getCache(), this.viewport);
         if (showImageBounds) {
-            var exportRectFill = { fill: Color4.fromHex('#44444455') };
-            var exportRectStrokeWidth = 5 * this.viewport.getSizeOfPixelOnCanvas();
+            // Draw a rectangle around the region that will be visible on save
+            const exportRectFill = { fill: Color4.fromHex('#44444455') };
+            const exportRectStrokeWidth = 5 * this.viewport.getSizeOfPixelOnCanvas();
             renderer.drawRect(this.getImportExportRect(), exportRectStrokeWidth, exportRectFill);
         }
         this.rerenderQueued = false;
-        this.nextRerenderListeners.forEach(function (listener) { return listener(); });
+        this.nextRerenderListeners.forEach(listener => listener());
         this.nextRerenderListeners = [];
-    };
+    }
     /**
      * Draws the given path onto the wet ink renderer. The given path will
      * be displayed on top of the main image.
      *
      * @see {@link Display.getWetInkRenderer} {@link Display.flatten}
      */
-    Editor.prototype.drawWetInk = function () {
-        var path = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            path[_i] = arguments[_i];
-        }
-        for (var _a = 0, path_1 = path; _a < path_1.length; _a++) {
-            var part = path_1[_a];
+    drawWetInk(...path) {
+        for (const part of path) {
             this.display.getWetInkRenderer().drawPath(part);
         }
-    };
+    }
     /**
      * Clears the wet ink display.
      *
      * @see {@link Display.getWetInkRenderer}
      */
-    Editor.prototype.clearWetInk = function () {
+    clearWetInk() {
         this.display.getWetInkRenderer().clear();
-    };
+    }
     /**
      * Focuses the region used for text input/key commands.
      */
-    Editor.prototype.focus = function () {
+    focus() {
         this.renderingRegion.focus();
-    };
+    }
     /**
      * Creates an element that will be positioned on top of the dry/wet ink
      * renderers.
@@ -797,31 +796,42 @@ var Editor = /** @class */ (function () {
      * This is useful for displaying content on top of the rendered content
      * (e.g. a selection box).
      */
-    Editor.prototype.createHTMLOverlay = function (overlay) {
+    createHTMLOverlay(overlay) {
         overlay.classList.add('overlay');
         this.container.appendChild(overlay);
         return {
-            remove: function () { return overlay.remove(); },
+            remove: () => overlay.remove(),
         };
-    };
-    Editor.prototype.addStyleSheet = function (content) {
-        var styleSheet = document.createElement('style');
+    }
+    addStyleSheet(content) {
+        const styleSheet = document.createElement('style');
         styleSheet.innerText = content;
         this.container.appendChild(styleSheet);
         return styleSheet;
-    };
-    // Dispatch a keyboard event to the currently selected tool.
-    // Intended for unit testing
-    Editor.prototype.sendKeyboardEvent = function (eventType, key, ctrlKey, altKey) {
-        if (ctrlKey === void 0) { ctrlKey = false; }
-        if (altKey === void 0) { altKey = false; }
+    }
+    /**
+     * Dispatch a keyboard event to the currently selected tool.
+     * Intended for unit testing.
+     *
+     * If `shiftKey` is undefined, it is guessed from `key`.
+     *
+     * At present, the **key code** dispatched is guessed from the given key and,
+     * while this works for ASCII alphanumeric characters, this does not work for
+     * most non-alphanumeric keys.
+     *
+     * Because guessing the key code from `key` is problematic, **only use this for testing**.
+     */
+    sendKeyboardEvent(eventType, key, ctrlKey = false, altKey = false, shiftKey = undefined) {
+        shiftKey ??= key.toUpperCase() === key && key.toLowerCase() !== key;
         this.toolController.dispatchInputEvent({
             kind: eventType,
-            key: key,
-            ctrlKey: ctrlKey,
-            altKey: altKey,
+            key,
+            code: guessKeyCodeFromKey(key),
+            ctrlKey,
+            altKey,
+            shiftKey,
         });
-    };
+    }
     /**
      * Dispatch a pen event to the currently selected tool.
      * Intended primarially for unit tests.
@@ -829,227 +839,219 @@ var Editor = /** @class */ (function () {
      * @deprecated
      * @see {@link sendPenEvent} {@link sendTouchEvent}
      */
-    Editor.prototype.sendPenEvent = function (eventType, point, 
+    sendPenEvent(eventType, point, 
     // @deprecated
     allPointers) {
         sendPenEvent(this, eventType, point, allPointers);
-    };
-    Editor.prototype.addAndCenterComponents = function (components, selectComponents) {
-        if (selectComponents === void 0) { selectComponents = true; }
-        return __awaiter(this, void 0, void 0, function () {
-            var bbox, _i, components_1, component, visibleRect, scaleRatioX, scaleRatioY, scaleRatio, transfm, commands, _a, components_2, component, applyChunkSize, _b, _c, selectionTool;
-            return __generator(this, function (_d) {
-                switch (_d.label) {
-                    case 0:
-                        bbox = null;
-                        for (_i = 0, components_1 = components; _i < components_1.length; _i++) {
-                            component = components_1[_i];
-                            if (bbox) {
-                                bbox = bbox.union(component.getBBox());
-                            }
-                            else {
-                                bbox = component.getBBox();
-                            }
-                        }
-                        if (!bbox) {
-                            return [2 /*return*/];
-                        }
-                        visibleRect = this.viewport.visibleRect;
-                        scaleRatioX = visibleRect.width / bbox.width;
-                        scaleRatioY = visibleRect.height / bbox.height;
-                        scaleRatio = scaleRatioX;
-                        if (bbox.width * scaleRatio > visibleRect.width || bbox.height * scaleRatio > visibleRect.height) {
-                            scaleRatio = scaleRatioY;
-                        }
-                        scaleRatio *= 2 / 3;
-                        scaleRatio = Viewport.roundScaleRatio(scaleRatio);
-                        transfm = Mat33.translation(visibleRect.center.minus(bbox.center)).rightMul(Mat33.scaling2D(scaleRatio, bbox.center));
-                        commands = [];
-                        for (_a = 0, components_2 = components; _a < components_2.length; _a++) {
-                            component = components_2[_a];
-                            // To allow deserialization, we need to add first, then transform.
-                            commands.push(EditorImage.addElement(component));
-                            commands.push(component.transformBy(transfm));
-                        }
-                        applyChunkSize = 100;
-                        return [4 /*yield*/, this.dispatch(uniteCommands(commands, applyChunkSize), true)];
-                    case 1:
-                        _d.sent();
-                        if (selectComponents) {
-                            for (_b = 0, _c = this.toolController.getMatchingTools(SelectionTool); _b < _c.length; _b++) {
-                                selectionTool = _c[_b];
-                                selectionTool.setEnabled(true);
-                                selectionTool.setSelection(components);
-                            }
-                        }
-                        return [2 /*return*/];
-                }
-            });
-        });
-    };
+    }
+    async addAndCenterComponents(components, selectComponents = true) {
+        let bbox = null;
+        for (const component of components) {
+            if (bbox) {
+                bbox = bbox.union(component.getBBox());
+            }
+            else {
+                bbox = component.getBBox();
+            }
+        }
+        if (!bbox) {
+            return;
+        }
+        // Find a transform that scales/moves bbox onto the screen.
+        const visibleRect = this.viewport.visibleRect;
+        const scaleRatioX = visibleRect.width / bbox.width;
+        const scaleRatioY = visibleRect.height / bbox.height;
+        let scaleRatio = scaleRatioX;
+        if (bbox.width * scaleRatio > visibleRect.width || bbox.height * scaleRatio > visibleRect.height) {
+            scaleRatio = scaleRatioY;
+        }
+        scaleRatio *= 2 / 3;
+        scaleRatio = Viewport.roundScaleRatio(scaleRatio);
+        const transfm = Mat33.translation(visibleRect.center.minus(bbox.center)).rightMul(Mat33.scaling2D(scaleRatio, bbox.center));
+        const commands = [];
+        for (const component of components) {
+            // To allow deserialization, we need to add first, then transform.
+            commands.push(EditorImage.addElement(component));
+            commands.push(component.transformBy(transfm));
+        }
+        const applyChunkSize = 100;
+        await this.dispatch(uniteCommands(commands, applyChunkSize), true);
+        if (selectComponents) {
+            for (const selectionTool of this.toolController.getMatchingTools(SelectionTool)) {
+                selectionTool.setEnabled(true);
+                selectionTool.setSelection(components);
+            }
+        }
+    }
     // Get a data URL (e.g. as produced by `HTMLCanvasElement::toDataURL`).
     // If `format` is not `image/png`, a PNG image URL may still be returned (as in the
     // case of `HTMLCanvasElement::toDataURL`).
     //
     // The export resolution is the same as the size of the drawing canvas.
-    Editor.prototype.toDataURL = function (format, outputSize) {
-        if (format === void 0) { format = 'image/png'; }
-        var canvas = document.createElement('canvas');
-        var importExportViewport = this.image.getImportExportViewport();
-        var exportRectSize = importExportViewport.getScreenRectSize();
-        var resolution = outputSize !== null && outputSize !== void 0 ? outputSize : exportRectSize;
+    toDataURL(format = 'image/png', outputSize) {
+        const canvas = document.createElement('canvas');
+        const importExportViewport = this.image.getImportExportViewport();
+        const exportRectSize = importExportViewport.getScreenRectSize();
+        const resolution = outputSize ?? exportRectSize;
         canvas.width = resolution.x;
         canvas.height = resolution.y;
-        var ctx = canvas.getContext('2d');
+        const ctx = canvas.getContext('2d');
         // Scale to ensure that the entire output is visible.
-        var scaleFactor = Math.min(resolution.x / exportRectSize.x, resolution.y / exportRectSize.y);
+        const scaleFactor = Math.min(resolution.x / exportRectSize.x, resolution.y / exportRectSize.y);
         ctx.scale(scaleFactor, scaleFactor);
-        var renderer = new CanvasRenderer(ctx, importExportViewport);
+        const renderer = new CanvasRenderer(ctx, importExportViewport);
         this.image.renderAll(renderer);
-        var dataURL = canvas.toDataURL(format);
+        const dataURL = canvas.toDataURL(format);
         return dataURL;
-    };
-    Editor.prototype.toSVG = function () {
-        var importExportViewport = this.image.getImportExportViewport().getTemporaryClone();
-        var sanitize = false;
-        var _a = SVGRenderer.fromViewport(importExportViewport, sanitize), result = _a.element, renderer = _a.renderer;
-        var origTransform = importExportViewport.canvasToScreenTransform;
+    }
+    toSVG() {
+        const importExportViewport = this.image.getImportExportViewport().getTemporaryClone();
+        const sanitize = false;
+        const { element: result, renderer } = SVGRenderer.fromViewport(importExportViewport, sanitize);
+        const origTransform = 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
-        var rect = importExportViewport.visibleRect;
-        result.setAttribute('viewBox', [rect.x, rect.y, rect.w, rect.h].map(function (part) { return toRoundedString(part); }).join(' '));
+        const rect = importExportViewport.visibleRect;
+        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));
         return result;
-    };
+    }
     /**
      * Load editor data from an `ImageLoader` (e.g. an {@link SVGLoader}).
      *
      * @see loadFromSVG
      */
-    Editor.prototype.loadFrom = function (loader) {
-        return __awaiter(this, void 0, void 0, function () {
-            var originalBackgrounds, eraseBackgroundCommand;
-            var _this = this;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        this.showLoadingWarning(0);
-                        this.display.setDraftMode(true);
-                        originalBackgrounds = this.image.getBackgroundComponents();
-                        eraseBackgroundCommand = new Erase(originalBackgrounds);
-                        return [4 /*yield*/, loader.start(function (component) { return __awaiter(_this, void 0, void 0, function () {
-                                return __generator(this, function (_a) {
-                                    switch (_a.label) {
-                                        case 0: return [4 /*yield*/, this.dispatchNoAnnounce(EditorImage.addElement(component))];
-                                        case 1:
-                                            _a.sent();
-                                            return [2 /*return*/];
-                                    }
-                                });
-                            }); }, function (countProcessed, totalToProcess) {
-                                if (countProcessed % 500 === 0) {
-                                    _this.showLoadingWarning(countProcessed / totalToProcess);
-                                    _this.rerender();
-                                    return untilNextAnimationFrame();
-                                }
-                                return null;
-                            }, function (importExportRect) {
-                                _this.dispatchNoAnnounce(_this.setImportExportRect(importExportRect), false);
-                                _this.dispatchNoAnnounce(_this.viewport.zoomTo(importExportRect), false);
-                            })];
-                    case 1:
-                        _a.sent();
-                        if (!(this.image.getBackgroundComponents().length !== originalBackgrounds.length)) return [3 /*break*/, 3];
-                        return [4 /*yield*/, this.dispatchNoAnnounce(eraseBackgroundCommand)];
-                    case 2:
-                        _a.sent();
-                        _a.label = 3;
-                    case 3:
-                        this.hideLoadingWarning();
-                        this.display.setDraftMode(false);
-                        this.queueRerender();
-                        return [2 /*return*/];
-                }
-            });
+    async loadFrom(loader) {
+        this.showLoadingWarning(0);
+        this.display.setDraftMode(true);
+        const originalBackgrounds = this.image.getBackgroundComponents();
+        const eraseBackgroundCommand = new Erase(originalBackgrounds);
+        await loader.start(async (component) => {
+            await this.dispatchNoAnnounce(EditorImage.addElement(component));
+        }, (countProcessed, totalToProcess) => {
+            if (countProcessed % 500 === 0) {
+                this.showLoadingWarning(countProcessed / totalToProcess);
+                this.rerender();
+                return untilNextAnimationFrame();
+            }
+            return null;
+        }, (importExportRect) => {
+            this.dispatchNoAnnounce(this.setImportExportRect(importExportRect), false);
+            this.dispatchNoAnnounce(this.viewport.zoomTo(importExportRect), false);
         });
-    };
-    Editor.prototype.getTopmostBackgroundComponent = function () {
-        var background = null;
+        // Ensure that we don't have multiple overlapping BackgroundComponents. Remove
+        // old BackgroundComponents.
+        // Overlapping BackgroundComponents may cause changing the background color to
+        // not work properly.
+        if (this.image.getBackgroundComponents().length !== originalBackgrounds.length) {
+            await this.dispatchNoAnnounce(eraseBackgroundCommand);
+        }
+        this.hideLoadingWarning();
+        this.display.setDraftMode(false);
+        this.queueRerender();
+    }
+    getTopmostBackgroundComponent() {
+        let background = null;
         // Find a background component, if one exists.
         // Use the last (topmost) background component if there are multiple.
-        for (var _i = 0, _a = this.image.getBackgroundComponents(); _i < _a.length; _i++) {
-            var component = _a[_i];
+        for (const component of this.image.getBackgroundComponents()) {
             if (component instanceof BackgroundComponent) {
                 background = component;
             }
         }
         return background;
-    };
+    }
     /**
      * Set the background color of the image.
      */
-    Editor.prototype.setBackgroundColor = function (color) {
-        var background = this.getTopmostBackgroundComponent();
+    setBackgroundColor(color) {
+        let background = this.getTopmostBackgroundComponent();
         if (!background) {
-            var backgroundType = color.eq(Color4.transparent) ? BackgroundType.None : BackgroundType.SolidColor;
+            const backgroundType = color.eq(Color4.transparent) ? BackgroundType.None : BackgroundType.SolidColor;
             background = new BackgroundComponent(backgroundType, color);
             return this.image.addElement(background);
         }
         else {
-            return background.updateStyle({ color: color });
+            return background.updateStyle({ color });
         }
-    };
+    }
     /**
      * @returns the average of the colors of all background components. Use this to get the current background
      * color.
      */
-    Editor.prototype.estimateBackgroundColor = function () {
-        var _a;
-        var backgroundColors = [];
-        for (var _i = 0, _b = this.image.getBackgroundComponents(); _i < _b.length; _i++) {
-            var component = _b[_i];
+    estimateBackgroundColor() {
+        const backgroundColors = [];
+        for (const component of this.image.getBackgroundComponents()) {
             if (component instanceof BackgroundComponent) {
-                backgroundColors.push((_a = component.getStyle().color) !== null && _a !== void 0 ? _a : Color4.transparent);
+                backgroundColors.push(component.getStyle().color ?? Color4.transparent);
             }
         }
         return Color4.average(backgroundColors);
-    };
+    }
     // Returns the size of the visible region of the output SVG
-    Editor.prototype.getImportExportRect = function () {
+    getImportExportRect() {
         return this.image.getImportExportViewport().visibleRect;
-    };
+    }
     // Resize the output SVG to match `imageRect`.
-    Editor.prototype.setImportExportRect = function (imageRect) {
+    setImportExportRect(imageRect) {
         return this.image.setImportExportRect(imageRect);
-    };
+    }
     /**
-     * Alias for loadFrom(SVGLoader.fromString).
+     * Alias for `loadFrom(SVGLoader.fromString)`.
      *
      * This is particularly useful when accessing a bundled version of the editor,
      * where `SVGLoader.fromString` is unavailable.
      */
-    Editor.prototype.loadFromSVG = function (svgData, sanitize) {
-        if (sanitize === void 0) { sanitize = false; }
-        return __awaiter(this, void 0, void 0, function () {
-            var loader;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        loader = SVGLoader.fromString(svgData, sanitize);
-                        return [4 /*yield*/, this.loadFrom(loader)];
-                    case 1:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
-            });
+    async loadFromSVG(svgData, sanitize = false) {
+        const loader = SVGLoader.fromString(svgData, sanitize);
+        await this.loadFrom(loader);
+    }
+    /**
+     * Shows an information dialog with legal notices.
+     */
+    showAboutDialog() {
+        const iconLicenseText = this.icons.licenseInfo();
+        const notices = [];
+        notices.push({
+            heading: { kind: 'link', text: 'js-draw', href: 'https://github.com/personalizedrefrigerator/js-draw' },
+            text: [
+                `v${version.number}`,
+                '',
+                'Image debug information (from when this dialog was opened):',
+                `    ${this.viewport.getScaleFactor()}x zoom, ${180 / Math.PI * this.viewport.getRotationAngle()} rotation`,
+                `    ${this.image.estimateNumElements()} components`,
+                `    ${this.getImportExportRect().w}x${this.getImportExportRect().h} size`,
+            ].join('\n'),
+        });
+        notices.push({
+            heading: 'Libraries',
+            text: [
+                'js-draw uses several libraries at runtime. Particularly noteworthy are:',
+                ' - The Coloris color picker: https://github.com/mdbassit/Coloris',
+                ' - The bezier.js Bézier curve library: https://github.com/Pomax/bezierjs'
+            ].join('\n'),
+            minimized: true,
         });
-    };
-    return Editor;
-}());
-export { Editor };
+        if (iconLicenseText) {
+            notices.push({
+                heading: 'Icon Pack',
+                text: iconLicenseText,
+                minimized: true,
+            });
+        }
+        notices.push(...this.settings.notices);
+        this.closeAboutDialog?.();
+        this.closeAboutDialog = makeAboutDialog(this, notices).close;
+    }
+    /** Removes and destroys the editor */
+    remove() {
+        this.container.remove();
+        // TODO: Is additional cleanup necessary here?
+    }
+}
 export default Editor;