js-draw 0.23.0 → 0.24.0

package/dist/mjs/Editor.mjs

@@ -0,0 +1,1055 @@
+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  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  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';
+import  uniteCommands  from './commands/uniteCommands.mjs';
+import  SelectionTool  from './tools/SelectionTool/SelectionTool.mjs';
+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';
+/**
+ * The main entrypoint for the full editor.
+ *
+ * @example
+ * To create an editor with a toolbar,
+ * ```
+ * const editor = new Editor(document.body);
+ *
+ * const toolbar = editor.addToolbar();
+ * toolbar.addActionButton('Save', () => {
+ *   const saveData = editor.toSVG().outerHTML;
+ *   // Do something with saveData...
+ * });
+ * ```
+ *
+ * See also
+ * [`docs/example/example.ts`](https://github.com/personalizedrefrigerator/js-draw/blob/main/docs/demo/example.ts#L15).
+ */
+var Editor = /** @class */ (function () {
+    /**
+     * @example
+     * ```
+     * const container = document.body;
+     *
+     * // Create an editor
+     * const editor = new Editor(container, {
+     *   // 2e-10 and 1e12 are the default values for minimum/maximum zoom.
+     *   minZoom: 2e-10,
+     *   maxZoom: 1e12,
+     * });
+     *
+     * // Add the default toolbar
+     * const toolbar = editor.addToolbar();
+     *
+     * // Add a save button
+     * toolbar.addActionButton({
+     *   label: 'Save'
+     *   icon: createSaveIcon(),
+     * }, () => {
+     *   const saveData = editor.toSVG().outerHTML;
+     *   // Do something with saveData
+     * });
+     * ```
+     */
+    function Editor(parent, settings) {
+        if (settings === void 0) { settings = {}; }
+        var _this = this;
+        var _a, _b, _c, _d, _e, _f;
+        this.eventListenerTargets = [];
+        this.previousAccessibilityAnnouncement = '';
+        this.pointers = {};
+        this.announceUndoCallback = function (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)));
+        };
+        // 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);
+        // 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,
+            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(),
+        };
+        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.loadingWarning = document.createElement('div');
+        this.loadingWarning.classList.add('loadingMessage');
+        this.loadingWarning.ariaLive = 'polite';
+        this.container.appendChild(this.loadingWarning);
+        this.accessibilityControlArea = document.createElement('textarea');
+        this.accessibilityControlArea.setAttribute('placeholder', this.localization.accessibilityInputInstructions);
+        this.accessibilityControlArea.style.opacity = '0';
+        this.accessibilityControlArea.style.width = '0';
+        this.accessibilityControlArea.style.height = '0';
+        this.accessibilityControlArea.style.position = 'absolute';
+        this.accessibilityAnnounceArea = document.createElement('div');
+        this.accessibilityAnnounceArea.setAttribute('aria-live', 'assertive');
+        this.accessibilityAnnounceArea.className = 'accessibilityAnnouncement';
+        this.container.appendChild(this.accessibilityAnnounceArea);
+        this.renderingRegion.style.touchAction = 'none';
+        this.renderingRegion.className = 'imageEditorRenderArea';
+        this.renderingRegion.appendChild(this.accessibilityControlArea);
+        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, {
+                kind: EditorEventType.ViewportChanged,
+                newTransform: newTransform,
+                oldTransform: 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);
+        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) {
+            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) {
+                        resetTransform = evt.oldTransform;
+                    }
+                    _this.viewport.resetTransform(resetTransform);
+                }
+            }
+        });
+    }
+    /**
+     * @returns a reference to the editor's container.
+     *
+     * @example
+     * ```
+     *   // Set the editor's height to 500px
+     *   editor.getRootElement().style.height = '500px';
+     * ```
+     */
+    Editor.prototype.getRootElement = function () {
+        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);
+        this.loadingWarning.innerText = this.localization.loading(loadingPercent);
+        this.loadingWarning.style.display = 'block';
+    };
+    Editor.prototype.hideLoadingWarning = function () {
+        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) {
+        // 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);
+        if (defaultLayout) {
+            toolbar.addDefaults();
+        }
+        return toolbar;
+    };
+    Editor.prototype.registerListeners = function () {
+        var _this = this;
+        this.handlePointerEventsFrom(this.renderingRegion);
+        this.handleKeyEventsFrom(this.renderingRegion);
+        this.container.addEventListener('wheel', function (evt) {
+            var 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) {
+                    return;
+                }
+                else if (_this.settings.wheelEventsEnabled === 'only-if-focused') {
+                    var focusedChild = _this.container.querySelector(':focus');
+                    if (!focusedChild) {
+                        return;
+                    }
+                }
+            }
+            if (evt.deltaMode === WheelEvent.DOM_DELTA_LINE) {
+                delta = delta.times(15);
+            }
+            else if (evt.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
+                delta = delta.times(100);
+            }
+            if (evt.ctrlKey || evt.metaKey) {
+                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({
+                kind: InputEvtType.WheelEvt,
+                delta: delta,
+                screenPos: pos,
+            })) {
+                evt.preventDefault();
+                return true;
+            }
+            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),
+            });
+        };
+        if ('ResizeObserver' in window) {
+            var resizeObserver = new ResizeObserver(handleResize);
+            resizeObserver.observe(this.container);
+        }
+        else {
+            addEventListener('resize', handleResize);
+        }
+        this.accessibilityControlArea.addEventListener('input', function () {
+            _this.accessibilityControlArea.value = '';
+        });
+        document.addEventListener('copy', function (evt) {
+            if (!_this.isEventSink(document.querySelector(':focus'))) {
+                return;
+            }
+            var 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);
+                },
+            })) {
+                evt.preventDefault();
+            }
+        });
+        document.addEventListener('paste', function (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)
+            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;
+        if (eventType === 'pointerdown') {
+            var pointer = Pointer.ofEvent(evt, true, this.viewport, eventsRelativeTo);
+            this.pointers[pointer.id] = pointer;
+            eventTarget.setPointerCapture(pointer.id);
+            var event_1 = {
+                kind: InputEvtType.PointerDownEvt,
+                current: pointer,
+                allPointers: this.getPointerList(),
+            };
+            this.toolController.dispatchInputEvent(event_1);
+            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);
+            if (pointer.down) {
+                var prevData = this.pointers[pointer.id];
+                if (prevData) {
+                    var 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;
+                    }
+                }
+                this.pointers[pointer.id] = pointer;
+                if (this.toolController.dispatchInputEvent({
+                    kind: InputEvtType.PointerMoveEvt,
+                    current: pointer,
+                    allPointers: this.getPointerList(),
+                })) {
+                    evt.preventDefault();
+                }
+            }
+            return true;
+        }
+        else if (eventType === 'pointercancel' || eventType === 'pointerup') {
+            var pointer = Pointer.ofEvent(evt, false, this.viewport, eventsRelativeTo);
+            if (!this.pointers[pointer.id]) {
+                return false;
+            }
+            this.pointers[pointer.id] = pointer;
+            eventTarget.releasePointerCapture(pointer.id);
+            if (this.toolController.dispatchInputEvent({
+                kind: InputEvtType.PointerUpEvt,
+                current: pointer,
+                allPointers: this.getPointerList(),
+            })) {
+                evt.preventDefault();
+            }
+            delete this.pointers[pointer.id];
+            return true;
+        }
+        return eventType;
+    };
+    Editor.prototype.isEventSink = function (evtTarget) {
+        var currentElem = evtTarget;
+        while (currentElem !== null) {
+            for (var _i = 0, _a = this.eventListenerTargets; _i < _a.length; _i++) {
+                var elem = _a[_i];
+                if (elem === currentElem) {
+                    return true;
+                }
+            }
+            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:
+                        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*/];
+                }
+            });
+        });
+    };
+    /**
+     * Forward pointer events from `elem` to this editor. Such that right-click/right-click drag
+     * events are also forwarded, `elem`'s contextmenu is disabled.
+     *
+     * @example
+     * ```ts
+     * const overlay = document.createElement('div');
+     * editor.createHTMLOverlay(overlay);
+     *
+     * // Send all pointer events that don't have the control key pressed
+     * // to the editor.
+     * editor.handlePointerEventsFrom(overlay, (event) => {
+     *   if (event.ctrlKey) {
+     *     return false;
+     *   }
+     *   return true;
+     * });
+     * ```
+     */
+    Editor.prototype.handlePointerEventsFrom = function (elem, filter) {
+        var _this = this;
+        // 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) {
+            // Don't show a context menu
+            evt.preventDefault();
+        };
+        var listeners = {
+            'touchstart': touchstartListener,
+            'contextmenu': contextmenuListener,
+        };
+        var eventNames = ['pointerdown', 'pointermove', 'pointerup', 'pointercancel'];
+        var _loop_1 = function (eventName) {
+            listeners[eventName] = function (evt) {
+                // This listener will only be called in the context of PointerEvents.
+                var event = evt;
+                if (filter && !filter(eventName, event)) {
+                    return true;
+                }
+                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) {
+            elem.addEventListener(eventName, listeners[eventName]);
+        }
+        return {
+            /** Remove all event listeners registered by this function. */
+            remove: function () {
+                for (var 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();
+            }
+            else if (_this.toolController.dispatchInputEvent({
+                kind: InputEvtType.KeyPressEvent,
+                key: evt.key,
+                ctrlKey: evt.ctrlKey || evt.metaKey,
+                altKey: evt.altKey,
+            })) {
+                evt.preventDefault();
+            }
+            else if (evt.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();
+            }
+        });
+        // Allow drop.
+        elem.ondragover = function (evt) {
+            evt.preventDefault();
+        };
+        elem.ondrop = function (evt) {
+            evt.preventDefault();
+            _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);
+        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`
+     * called.
+     *
+     * Prefer `command.apply(editor)` for incomplete commands. `dispatchNoAnnounce` may allow
+     * clients to listen for the application of commands (e.g. `SerializableCommand`s so they can
+     * be sent across the network), while `apply` does not.
+     *
+     * @example
+     * ```
+     * const addToHistory = false;
+     * editor.dispatchNoAnnounce(editor.viewport.zoomTo(someRectangle), addToHistory);
+     * ```
+     */
+    Editor.prototype.dispatchNoAnnounce = function (command, addToHistory) {
+        if (addToHistory === void 0) { addToHistory = false; }
+        var result = command.apply(this);
+        if (addToHistory) {
+            var 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*/];
+                }
+            });
+        });
+    };
+    // @see {@link #asyncApplyOrUnapplyCommands }
+    Editor.prototype.asyncApplyCommands = function (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; }
+        if (unapplyInReverseOrder) {
+            commands = __spreadArray([], commands, true); // 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;
+        if (!this.rerenderQueued) {
+            this.rerenderQueued = true;
+            requestAnimationFrame(function () {
+                // If .rerender was called manually, we might not need to
+                // re-render.
+                if (_this.rerenderQueued) {
+                    _this.rerender();
+                    _this.rerenderQueued = false;
+                }
+            });
+        }
+        return new Promise(function (resolve) {
+            _this.nextRerenderListeners.push(function () { return resolve(); });
+        });
+    };
+    // @internal
+    Editor.prototype.isRerenderQueued = function () {
+        return this.rerenderQueued;
+    };
+    /**
+     * Re-renders the entire image.
+     *
+     * @see {@link Editor.queueRerender}
+     */
+    Editor.prototype.rerender = function (showImageBounds) {
+        if (showImageBounds === void 0) { 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();
+        this.image.renderWithCache(renderer, this.display.getCache(), this.viewport);
+        if (showImageBounds) {
+            var exportRectFill = { fill: Color4.fromHex('#44444455') };
+            var exportRectStrokeWidth = 5 * this.viewport.getSizeOfPixelOnCanvas();
+            renderer.drawRect(this.getImportExportRect(), exportRectStrokeWidth, exportRectFill);
+        }
+        this.rerenderQueued = false;
+        this.nextRerenderListeners.forEach(function (listener) { return 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];
+            this.display.getWetInkRenderer().drawPath(part);
+        }
+    };
+    /**
+     * Clears the wet ink display.
+     *
+     * @see {@link Display.getWetInkRenderer}
+     */
+    Editor.prototype.clearWetInk = function () {
+        this.display.getWetInkRenderer().clear();
+    };
+    /**
+     * Focuses the region used for text input/key commands.
+     */
+    Editor.prototype.focus = function () {
+        this.renderingRegion.focus();
+    };
+    /**
+     * Creates an element that will be positioned on top of the dry/wet ink
+     * renderers.
+     *
+     * This is useful for displaying content on top of the rendered content
+     * (e.g. a selection box).
+     */
+    Editor.prototype.createHTMLOverlay = function (overlay) {
+        overlay.classList.add('overlay');
+        this.container.appendChild(overlay);
+        return {
+            remove: function () { return overlay.remove(); },
+        };
+    };
+    Editor.prototype.addStyleSheet = function (content) {
+        var 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; }
+        this.toolController.dispatchInputEvent({
+            kind: eventType,
+            key: key,
+            ctrlKey: ctrlKey,
+            altKey: altKey,
+        });
+    };
+    /**
+     * Dispatch a pen event to the currently selected tool.
+     * Intended primarially for unit tests.
+     *
+     * @deprecated
+     * @see {@link sendPenEvent} {@link sendTouchEvent}
+     */
+    Editor.prototype.sendPenEvent = function (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*/];
+                }
+            });
+        });
+    };
+    // 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;
+        canvas.width = resolution.x;
+        canvas.height = resolution.y;
+        var 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);
+        ctx.scale(scaleFactor, scaleFactor);
+        var renderer = new CanvasRenderer(ctx, importExportViewport);
+        this.image.renderAll(renderer);
+        var 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;
+        // 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(' '));
+        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*/];
+                }
+            });
+        });
+    };
+    Editor.prototype.getTopmostBackgroundComponent = function () {
+        var 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];
+            if (component instanceof BackgroundComponent) {
+                background = component;
+            }
+        }
+        return background;
+    };
+    /**
+     * Set the background color of the image.
+     */
+    Editor.prototype.setBackgroundColor = function (color) {
+        var background = this.getTopmostBackgroundComponent();
+        if (!background) {
+            var 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 });
+        }
+    };
+    /**
+     * @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];
+            if (component instanceof BackgroundComponent) {
+                backgroundColors.push((_a = component.getStyle().color) !== null && _a !== void 0 ? _a : Color4.transparent);
+            }
+        }
+        return Color4.average(backgroundColors);
+    };
+    // Returns the size of the visible region of the output SVG
+    Editor.prototype.getImportExportRect = function () {
+        return this.image.getImportExportViewport().visibleRect;
+    };
+    // Resize the output SVG to match `imageRect`.
+    Editor.prototype.setImportExportRect = function (imageRect) {
+        return this.image.setImportExportRect(imageRect);
+    };
+    /**
+     * 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*/];
+                }
+            });
+        });
+    };
+    return Editor;
+}());
+export { Editor };
+export default Editor;