js-draw 0.23.1 → 0.24.0

package/dist/mjs/src/Editor.mjs

@@ -1,892 +0,0 @@
-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  BackgroundComponent, { BackgroundType }  from './components/BackgroundComponent.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
-        const touchstartListener = (evt) => evt.preventDefault();
-        const contextmenuListener = (evt) => {
-            // Don't show a context menu
-            evt.preventDefault();
-        };
-        const listeners = {
-            'touchstart': touchstartListener,
-            'contextmenu': contextmenuListener,
-        };
-        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.
-                const event = evt;
-                if (filter && !filter(eventName, event)) {
-                    return true;
-                }
-                return this.handleHTMLPointerEvent(eventName, event);
-            };
-        }
-        // Add all listeners.
-        for (const eventName in listeners) {
-            elem.addEventListener(eventName, listeners[eventName]);
-        }
-        return {
-            /** Remove all event listeners registered by this function. */
-            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. */
-    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 BackgroundComponent) {
-                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 BackgroundComponent(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 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
-    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;