js-draw 0.18.1 → 0.19.0

package/dist/mjs/src/Editor.mjs

@@ -0,0 +1,874 @@
+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());
+    });
+};
+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  ImageBackground, { BackgroundType }  from './components/ImageBackground.mjs';
+import  sendPenEvent  from './testing/sendPenEvent.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/example/example.ts#L15).
+ */
+export class Editor {
+    /**
+     * @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
+     * });
+     * ```
+     */
+    constructor(parent, settings = {}) {
+        var _a, _b, _c, _d, _e;
+        this.eventListenerTargets = [];
+        this.previousAccessibilityAnnouncement = '';
+        this.pointers = {};
+        this.announceUndoCallback = (command) => {
+            this.announceForAccessibility(this.localization.undoAnnouncement(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 = Object.assign(Object.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,
+            iconProvider: (_e = settings.iconProvider) !== null && _e !== void 0 ? _e : new IconProvider(),
+        };
+        this.icons = this.settings.iconProvider;
+        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((oldTransform, newTransform) => {
+            this.notifier.dispatch(EditorEventType.ViewportChanged, {
+                kind: EditorEventType.ViewportChanged,
+                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);
+        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, evt => {
+            if (evt.kind === EditorEventType.ViewportChanged) {
+                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);
+                }
+            }
+        });
+    }
+    /**
+     * @returns a reference to the editor's container.
+     *
+     * @example
+     * ```
+     *   // Set the editor's height to 500px
+     *   editor.getRootElement().style.height = '500px';
+     * ```
+     */
+    getRootElement() {
+        return this.container;
+    }
+    /** @param fractionLoaded - should be a number from 0 to 1, where 1 represents completely loaded. */
+    showLoadingWarning(fractionLoaded) {
+        const loadingPercent = Math.round(fractionLoaded * 100);
+        this.loadingWarning.innerText = this.localization.loading(loadingPercent);
+        this.loadingWarning.style.display = 'block';
+    }
+    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.
+     */
+    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.
+     */
+    addToolbar(defaultLayout = true) {
+        const toolbar = new HTMLToolbar(this, this.container, this.localization);
+        if (defaultLayout) {
+            toolbar.addDefaults();
+        }
+        return toolbar;
+    }
+    registerListeners() {
+        this.handlePointerEventsFrom(this.renderingRegion);
+        this.handleKeyEventsFrom(this.renderingRegion);
+        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) {
+                    return;
+                }
+                else if (this.settings.wheelEventsEnabled === 'only-if-focused') {
+                    const 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`
+            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,
+                screenPos: pos,
+            })) {
+                evt.preventDefault();
+                return true;
+            }
+            return false;
+        });
+        this.notifier.on(EditorEventType.DisplayResized, _event => {
+            this.viewport.updateScreenSize(Vec2.of(this.display.width, this.display.height));
+            this.queueRerender();
+        });
+        const handleResize = () => {
+            this.notifier.dispatch(EditorEventType.DisplayResized, {
+                kind: EditorEventType.DisplayResized,
+                newSize: Vec2.of(this.display.width, this.display.height),
+            });
+        };
+        if ('ResizeObserver' in window) {
+            const resizeObserver = new ResizeObserver(handleResize);
+            resizeObserver.observe(this.container);
+        }
+        else {
+            addEventListener('resize', handleResize);
+        }
+        this.accessibilityControlArea.addEventListener('input', () => {
+            this.accessibilityControlArea.value = '';
+        });
+        document.addEventListener('copy', evt => {
+            if (!this.isEventSink(document.querySelector(':focus'))) {
+                return;
+            }
+            const clipboardData = evt.clipboardData;
+            if (this.toolController.dispatchInputEvent({
+                kind: InputEvtType.CopyEvent,
+                setData: (mime, data) => {
+                    clipboardData === null || clipboardData === void 0 ? void 0 : clipboardData.setData(mime, data);
+                },
+            })) {
+                evt.preventDefault();
+            }
+        });
+        document.addEventListener('paste', evt => {
+            this.handlePaste(evt);
+        });
+    }
+    getPointerList() {
+        const nowTime = (new Date()).getTime();
+        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.
+     */
+    handleHTMLPointerEvent(eventType, evt) {
+        var _a, _b, _c;
+        const eventsRelativeTo = this.renderingRegion;
+        const eventTarget = (_a = evt.target) !== null && _a !== void 0 ? _a : this.renderingRegion;
+        if (eventType === 'pointerdown') {
+            const pointer = Pointer.ofEvent(evt, true, this.viewport, eventsRelativeTo);
+            this.pointers[pointer.id] = pointer;
+            eventTarget.setPointerCapture(pointer.id);
+            const event = {
+                kind: InputEvtType.PointerDownEvt,
+                current: pointer,
+                allPointers: this.getPointerList(),
+            };
+            this.toolController.dispatchInputEvent(event);
+            return true;
+        }
+        else if (eventType === 'pointermove') {
+            const 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) {
+                const prevData = this.pointers[pointer.id];
+                if (prevData) {
+                    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;
+                    }
+                }
+                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') {
+            const 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;
+    }
+    isEventSink(evtTarget) {
+        let currentElem = evtTarget;
+        while (currentElem !== null) {
+            for (const elem of this.eventListenerTargets) {
+                if (elem === currentElem) {
+                    return true;
+                }
+            }
+            currentElem = currentElem.parentElement;
+        }
+        return false;
+    }
+    handlePaste(evt) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            const target = (_a = document.querySelector(':focus')) !== null && _a !== void 0 ? _a : evt.target;
+            if (!this.isEventSink(target)) {
+                return;
+            }
+            const clipboardData = (_b = evt.dataTransfer) !== null && _b !== void 0 ? _b : 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 = yield 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 = yield fileToBase64(file, onprogress);
+                        if (data && this.toolController.dispatchInputEvent({
+                            kind: InputEvtType.PasteEvent,
+                            mime: fileType,
+                            data: data,
+                        })) {
+                            evt.preventDefault();
+                            this.hideLoadingWarning();
+                            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.
+     *
+     * @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;
+     * });
+     * ```
+     */
+    handlePointerEventsFrom(elem, filter) {
+        // May be required to prevent text selection on iOS/Safari:
+        // See https://stackoverflow.com/a/70992717/17055750
+        elem.addEventListener('touchstart', evt => evt.preventDefault());
+        elem.addEventListener('contextmenu', evt => {
+            // Don't show a context menu
+            evt.preventDefault();
+        });
+        const eventNames = ['pointerdown', 'pointermove', 'pointerup', 'pointercancel'];
+        for (const eventName of eventNames) {
+            elem.addEventListener(eventName, evt => {
+                if (filter && !filter(eventName, evt)) {
+                    return true;
+                }
+                return this.handleHTMLPointerEvent(eventName, evt);
+            });
+        }
+    }
+    /** Adds event listners for keypresses to `elem` and forwards those events to the editor. */
+    handleKeyEventsFrom(elem) {
+        elem.addEventListener('keydown', 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', 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 = evt => {
+            evt.preventDefault();
+        };
+        elem.ondrop = evt => {
+            evt.preventDefault();
+            this.handlePaste(evt);
+        };
+        this.eventListenerTargets.push(elem);
+    }
+    /** `apply` a command. `command` will be announced for accessibility. */
+    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`
+     * 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);
+     * ```
+     */
+    dispatchNoAnnounce(command, addToHistory = false) {
+        const result = command.apply(this);
+        if (addToHistory) {
+            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.
+     */
+    asyncApplyOrUnapplyCommands(commands, apply, updateChunkSize) {
+        return __awaiter(this, void 0, void 0, function* () {
+            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) {
+                    yield new Promise(resolve => {
+                        this.rerender();
+                        requestAnimationFrame(resolve);
+                    });
+                }
+            }
+            this.display.setDraftMode(false);
+            this.hideLoadingWarning();
+        });
+    }
+    // @see {@link #asyncApplyOrUnapplyCommands }
+    asyncApplyCommands(commands, chunkSize) {
+        return this.asyncApplyOrUnapplyCommands(commands, true, chunkSize);
+    }
+    // If `unapplyInReverseOrder`, commands are reversed before unapplying.
+    // @see {@link #asyncApplyOrUnapplyCommands }
+    asyncUnapplyCommands(commands, chunkSize, unapplyInReverseOrder = false) {
+        if (unapplyInReverseOrder) {
+            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.
+     */
+    queueRerender() {
+        if (!this.rerenderQueued) {
+            this.rerenderQueued = true;
+            requestAnimationFrame(() => {
+                // If .rerender was called manually, we might not need to
+                // re-render.
+                if (this.rerenderQueued) {
+                    this.rerender();
+                    this.rerenderQueued = false;
+                }
+            });
+        }
+        return new Promise(resolve => {
+            this.nextRerenderListeners.push(() => resolve());
+        });
+    }
+    // @internal
+    isRerenderQueued() {
+        return this.rerenderQueued;
+    }
+    /**
+     * Re-renders the entire image.
+     *
+     * @see {@link Editor.queueRerender}
+     */
+    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
+        const renderer = this.display.getDryInkRenderer();
+        this.image.renderWithCache(renderer, this.display.getCache(), this.viewport);
+        if (showImageBounds) {
+            const exportRectFill = { fill: Color4.fromHex('#44444455') };
+            const exportRectStrokeWidth = 5 * this.viewport.getSizeOfPixelOnCanvas();
+            renderer.drawRect(this.getImportExportRect(), exportRectStrokeWidth, exportRectFill);
+        }
+        this.rerenderQueued = false;
+        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}
+     */
+    drawWetInk(...path) {
+        for (const part of path) {
+            this.display.getWetInkRenderer().drawPath(part);
+        }
+    }
+    /**
+     * Clears the wet ink display.
+     *
+     * @see {@link Display.getWetInkRenderer}
+     */
+    clearWetInk() {
+        this.display.getWetInkRenderer().clear();
+    }
+    /**
+     * Focuses the region used for text input/key commands.
+     */
+    focus() {
+        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).
+     */
+    createHTMLOverlay(overlay) {
+        overlay.classList.add('overlay');
+        this.container.appendChild(overlay);
+        return {
+            remove: () => overlay.remove(),
+        };
+    }
+    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
+    sendKeyboardEvent(eventType, key, ctrlKey = false, altKey = false) {
+        this.toolController.dispatchInputEvent({
+            kind: eventType,
+            key,
+            ctrlKey,
+            altKey,
+        });
+    }
+    /**
+     * Dispatch a pen event to the currently selected tool.
+     * Intended primarially for unit tests.
+     *
+     * @deprecated
+     * @see {@link sendPenEvent} {@link sendTouchEvent}
+     */
+    sendPenEvent(eventType, point, 
+    // @deprecated
+    allPointers) {
+        sendPenEvent(this, eventType, point, allPointers);
+    }
+    addAndCenterComponents(components, selectComponents = true) {
+        return __awaiter(this, void 0, void 0, function* () {
+            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;
+            yield 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.
+    toDataURL(format = 'image/png') {
+        const canvas = document.createElement('canvas');
+        const importExportViewport = this.image.getImportExportViewport();
+        const resolution = importExportViewport.getScreenRectSize();
+        canvas.width = resolution.x;
+        canvas.height = resolution.y;
+        const ctx = canvas.getContext('2d');
+        const renderer = new CanvasRenderer(ctx, importExportViewport);
+        this.image.renderAll(renderer);
+        const dataURL = canvas.toDataURL(format);
+        return dataURL;
+    }
+    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
+        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
+     */
+    loadFrom(loader) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.showLoadingWarning(0);
+            this.display.setDraftMode(true);
+            const originalBackgrounds = this.image.getBackgroundComponents();
+            const eraseBackgroundCommand = new Erase(originalBackgrounds);
+            yield loader.start((component) => __awaiter(this, void 0, void 0, function* () {
+                yield 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);
+            });
+            // 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) {
+                yield 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 (const component of this.image.getBackgroundComponents()) {
+            if (component instanceof ImageBackground) {
+                background = component;
+            }
+        }
+        return background;
+    }
+    /**
+     * Set the background color of the image.
+     */
+    setBackgroundColor(color) {
+        let background = this.getTopmostBackgroundComponent();
+        if (!background) {
+            const backgroundType = color.eq(Color4.transparent) ? BackgroundType.None : BackgroundType.SolidColor;
+            background = new ImageBackground(backgroundType, color);
+            return this.image.addElement(background);
+        }
+        else {
+            return background.updateStyle({ color });
+        }
+    }
+    /**
+     * @returns the average of the colors of all background components. Use this to get the current background
+     * color.
+     */
+    estimateBackgroundColor() {
+        var _a;
+        const backgroundColors = [];
+        for (const component of this.image.getBackgroundComponents()) {
+            if (component instanceof ImageBackground) {
+                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
+    getImportExportRect() {
+        return this.image.getImportExportViewport().visibleRect;
+    }
+    // Resize the output SVG to match `imageRect`.
+    setImportExportRect(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.
+     */
+    loadFromSVG(svgData, sanitize = false) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const loader = SVGLoader.fromString(svgData, sanitize);
+            yield this.loadFrom(loader);
+        });
+    }
+}
+export default Editor;