js-draw 0.17.4 → 0.18.1

package/dist/build_tools/buildTranslationTemplate.js

@@ -1,94 +0,0 @@
-import * as fs from 'fs';
-import * as path from 'path';
-import { defaultEditorLocalization } from '../src/localization';
-// Adds markdown formatting to format text like code.
-const codeFormat = (text) => {
-    let maxConsecutiveBackticks = 0;
-    // Find the longest number of consecutive backticks — we need to have more
-    // than that for the delimiters.
-    const backtickRuns = text.matchAll(/[`]+/g);
-    for (const backticks of backtickRuns) {
-        if (backticks.length > maxConsecutiveBackticks) {
-            maxConsecutiveBackticks = backticks.length;
-        }
-    }
-    let codeStartEnd = '';
-    for (let i = 0; i < maxConsecutiveBackticks + 1; i++) {
-        codeStartEnd += '`';
-    }
-    // If the text already starts with a `, add a space to prevent the
-    // markdown parser from treating it as part of the delimiter.
-    if (text.startsWith('`')) {
-        text = ' ' + text;
-    }
-    if (text.endsWith('`')) {
-        text = text + ' ';
-    }
-    return `${codeStartEnd}${text}${codeStartEnd}`;
-};
-const collapseSpaces = (text) => text.replace(/\s+/g, ' ');
-const generateTranslationTemplate = () => {
-    const bodyContentLines = [];
-    const addInput = (type, id, attrs, required = false) => {
-        const lines = [];
-        lines.push(`  - type: ${type}`);
-        lines.push(`    id: ${id}`);
-        lines.push('    attributes:');
-        for (const key in attrs) {
-            const value = `${attrs[key]}`;
-            const escapedValue = value.replace(/[\\]/g, '\\\\').replace(/"/g, '\\"');
-            lines.push(`      ${key}: "${escapedValue}"`);
-        }
-        lines.push('    validations:');
-        lines.push(`      required: ${required}`);
-        bodyContentLines.push(...lines);
-    };
-    const addLabel = (text) => {
-        bodyContentLines.push('  - type: markdown');
-        bodyContentLines.push('    attributes:');
-        bodyContentLines.push('      value: |');
-        bodyContentLines.push('        ' + text);
-    };
-    addLabel(collapseSpaces(`
-		Thank you for taking the time to translate \`js-draw\`! If you don't have time to translate
-		all of the strings below, feel free to submit an incomplete translation and edit it later.
-		Use this template to update an existing translation or to create a new translation.
-	`));
-    addLabel(collapseSpaces(`
-		(Optional) If you would like to submit a pull request that applies this translation, 
-		note that existing translations are present in
-		[src/localizations/](https://github.com/personalizedrefrigerator/js-draw/tree/main/src/localizations).
-	`));
-    addInput('input', 'language-name', {
-        label: 'Language',
-        description: 'The name of the language to translate to in English (e.g. Spanish)',
-    }, true);
-    for (const key in defaultEditorLocalization) {
-        const englishTranslation = `${defaultEditorLocalization[key]}`;
-        addInput('input', `translation-${key}`, {
-            label: `${key}`,
-            description: `Translate ${codeFormat(englishTranslation)}.`,
-            placeholder: englishTranslation,
-        });
-    }
-    addInput('textarea', 'additional-comments', {
-        label: 'Additional information',
-        placeholder: 'Any additional information/comments on the translation can go here.',
-    });
-    return `name: Translation
-# This template is auto-generated by build_tools/buildTranslationTemplate.ts
-# Do not modify it directly.
-description: Translate the editor to a new language!
-title: "[Translation]: <language>"
-labels: [localization]
-assignees: []
-body:
-${bodyContentLines.join('\n')}`;
-};
-const template = generateTranslationTemplate();
-// According to https://stackoverflow.com/a/13650454, fs should
-// be able to handle forward and back slashes (both) on Windows (so extra
-// path logic shouldn't be needed here.)
-const rootDir = path.dirname(__dirname);
-const translationTempaltePath = path.join(rootDir, '.github/ISSUE_TEMPLATE/translation.yml');
-fs.writeFileSync(translationTempaltePath, template);

package/dist/build_tools/bundle.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/build_tools/bundle.js

@@ -1,5 +0,0 @@
-import { dirname } from 'path';
-import BundledFile from './BundledFile';
-const rootDir = dirname(__dirname);
-const mainBundle = new BundledFile('jsdraw', `${rootDir}/src/bundle/bundled.ts`, `${rootDir}/dist/bundle.js`);
-void mainBundle.build();

package/dist/src/Color4.d.ts

@@ -1,60 +0,0 @@
-export default class Color4 {
-    /** Red component. Should be in the range [0, 1]. */
-    readonly r: number;
-    /** Green component. `g` ∈ [0, 1] */
-    readonly g: number;
-    /** Blue component. `b` ∈ [0, 1] */
-    readonly b: number;
-    /** Alpha/transparent component. `a` ∈ [0, 1]. 0 = transparent */
-    readonly a: number;
-    private constructor();
-    /**
-     * Create a color from red, green, blue components. The color is fully opaque (`a = 1.0`).
-     *
-     * Each component should be in the range [0, 1].
-     */
-    static ofRGB(red: number, green: number, blue: number): Color4;
-    static ofRGBA(red: number, green: number, blue: number, alpha: number): Color4;
-    static fromHex(hexString: string): Color4;
-    /** Like fromHex, but can handle additional colors if an `HTMLCanvasElement` is available. */
-    static fromString(text: string): Color4;
-    /** @returns true if `this` and `other` are approximately equal. */
-    eq(other: Color4 | null | undefined): boolean;
-    /**
-     * If `fractionTo` is not in the range [0, 1], it will be clamped to the nearest number
-     * in that range. For example, `a.mix(b, -1)` is equivalent to `a.mix(b, 0)`.
-     *
-     * @returns a color `fractionTo` of the way from this color to `other`.
-     *
-     * @example
-     * ```ts
-     * Color4.ofRGB(1, 0, 0).mix(Color4.ofRGB(0, 1, 0), 0.1) // -> Color4(0.9, 0.1, 0)
-     * ```
-     */
-    mix(other: Color4, fractionTo: number): Color4;
-    /**
-     * @returns the component-wise average of `colors`, or `Color4.transparent` if `colors` is empty.
-     */
-    static average(colors: Color4[]): Color4;
-    private hexString;
-    /**
-     * @returns a hexadecimal color string representation of `this`, in the form `#rrggbbaa`.
-     *
-     * @example
-     * ```
-     * Color4.red.toHexString(); // -> #ff0000ff
-     * ```
-     */
-    toHexString(): string;
-    toString(): string;
-    static transparent: Color4;
-    static red: Color4;
-    static green: Color4;
-    static blue: Color4;
-    static purple: Color4;
-    static yellow: Color4;
-    static clay: Color4;
-    static black: Color4;
-    static gray: Color4;
-    static white: Color4;
-}

package/dist/src/Color4.js

@@ -1,192 +0,0 @@
-export default class Color4 {
-    constructor(
-    /** Red component. Should be in the range [0, 1]. */
-    r, 
-    /** Green component. `g` ∈ [0, 1] */
-    g, 
-    /** Blue component. `b` ∈ [0, 1] */
-    b, 
-    /** Alpha/transparent component. `a` ∈ [0, 1]. 0 = transparent */
-    a) {
-        this.r = r;
-        this.g = g;
-        this.b = b;
-        this.a = a;
-        this.hexString = null;
-    }
-    /**
-     * Create a color from red, green, blue components. The color is fully opaque (`a = 1.0`).
-     *
-     * Each component should be in the range [0, 1].
-     */
-    static ofRGB(red, green, blue) {
-        return Color4.ofRGBA(red, green, blue, 1.0);
-    }
-    static ofRGBA(red, green, blue, alpha) {
-        red = Math.max(0, Math.min(red, 1));
-        green = Math.max(0, Math.min(green, 1));
-        blue = Math.max(0, Math.min(blue, 1));
-        alpha = Math.max(0, Math.min(alpha, 1));
-        return new Color4(red, green, blue, alpha);
-    }
-    static fromHex(hexString) {
-        var _a;
-        // Remove starting '#' (if present)
-        hexString = ((_a = hexString.match(/^[#]?(.*)$/)) !== null && _a !== void 0 ? _a : [])[1];
-        hexString = hexString.toUpperCase();
-        if (!hexString.match(/^[0-9A-F]+$/)) {
-            throw new Error(`${hexString} is not in a valid format.`);
-        }
-        // RGBA or RGB
-        if (hexString.length === 3 || hexString.length === 4) {
-            // Each character is a component
-            const components = hexString.split('');
-            // Convert to RRGGBBAA or RRGGBB format
-            hexString = components.map(component => `${component}0`).join('');
-        }
-        if (hexString.length === 6) {
-            // Alpha component
-            hexString += 'FF';
-        }
-        const components = [];
-        for (let i = 2; i <= hexString.length; i += 2) {
-            const chunk = hexString.substring(i - 2, i);
-            components.push(parseInt(chunk, 16) / 255);
-        }
-        if (components.length !== 4) {
-            throw new Error(`Unable to parse ${hexString}: Wrong number of components.`);
-        }
-        return Color4.ofRGBA(components[0], components[1], components[2], components[3]);
-    }
-    /** Like fromHex, but can handle additional colors if an `HTMLCanvasElement` is available. */
-    static fromString(text) {
-        if (text.startsWith('#')) {
-            return Color4.fromHex(text);
-        }
-        if (text === 'none' || text === 'transparent') {
-            return Color4.transparent;
-        }
-        // rgba?: Match both rgb and rgba strings.
-        // ([,0-9.]+): Match any string of only numeric, '.' and ',' characters.
-        const rgbRegex = /^rgba?\(([,0-9.]+)\)$/i;
-        const rgbMatch = text.replace(/\s*/g, '').match(rgbRegex);
-        if (rgbMatch) {
-            const componentsListStr = rgbMatch[1];
-            const componentsList = JSON.parse(`[ ${componentsListStr} ]`);
-            if (componentsList.length === 3) {
-                return Color4.ofRGB(componentsList[0] / 255, componentsList[1] / 255, componentsList[2] / 255);
-            }
-            else if (componentsList.length === 4) {
-                return Color4.ofRGBA(componentsList[0] / 255, componentsList[1] / 255, componentsList[2] / 255, componentsList[3]);
-            }
-            else {
-                throw new Error(`RGB string, ${text}, has wrong number of components: ${componentsList.length}`);
-            }
-        }
-        // Otherwise, try to use an HTMLCanvasElement to determine the color.
-        // Note: We may be unable to create an HTMLCanvasElement if running as a unit test.
-        const canvas = document.createElement('canvas');
-        canvas.width = 1;
-        canvas.height = 1;
-        const ctx = canvas.getContext('2d');
-        ctx.fillStyle = text;
-        ctx.fillRect(0, 0, 1, 1);
-        const data = ctx.getImageData(0, 0, 1, 1);
-        const red = data.data[0] / 255;
-        const green = data.data[1] / 255;
-        const blue = data.data[2] / 255;
-        const alpha = data.data[3] / 255;
-        return Color4.ofRGBA(red, green, blue, alpha);
-    }
-    /** @returns true if `this` and `other` are approximately equal. */
-    eq(other) {
-        if (other == null) {
-            return false;
-        }
-        // If both completely transparent,
-        if (this.a === 0 && other.a === 0) {
-            return true;
-        }
-        return this.toHexString() === other.toHexString();
-    }
-    /**
-     * If `fractionTo` is not in the range [0, 1], it will be clamped to the nearest number
-     * in that range. For example, `a.mix(b, -1)` is equivalent to `a.mix(b, 0)`.
-     *
-     * @returns a color `fractionTo` of the way from this color to `other`.
-     *
-     * @example
-     * ```ts
-     * Color4.ofRGB(1, 0, 0).mix(Color4.ofRGB(0, 1, 0), 0.1) // -> Color4(0.9, 0.1, 0)
-     * ```
-     */
-    mix(other, fractionTo) {
-        fractionTo = Math.min(Math.max(fractionTo, 0), 1);
-        const fractionOfThis = 1 - fractionTo;
-        return new Color4(this.r * fractionOfThis + other.r * fractionTo, this.g * fractionOfThis + other.g * fractionTo, this.b * fractionOfThis + other.b * fractionTo, this.a * fractionOfThis + other.a * fractionTo);
-    }
-    /**
-     * @returns the component-wise average of `colors`, or `Color4.transparent` if `colors` is empty.
-     */
-    static average(colors) {
-        let averageA = 0;
-        let averageR = 0;
-        let averageG = 0;
-        let averageB = 0;
-        for (const color of colors) {
-            averageA += color.a;
-            averageR += color.r;
-            averageG += color.g;
-            averageB += color.b;
-        }
-        if (colors.length > 0) {
-            averageA /= colors.length;
-            averageR /= colors.length;
-            averageG /= colors.length;
-            averageB /= colors.length;
-        }
-        return new Color4(averageR, averageG, averageB, averageA);
-    }
-    /**
-     * @returns a hexadecimal color string representation of `this`, in the form `#rrggbbaa`.
-     *
-     * @example
-     * ```
-     * Color4.red.toHexString(); // -> #ff0000ff
-     * ```
-     */
-    toHexString() {
-        if (this.hexString) {
-            return this.hexString;
-        }
-        const componentToHex = (component) => {
-            const res = Math.round(255 * component).toString(16);
-            if (res.length === 1) {
-                return `0${res}`;
-            }
-            return res;
-        };
-        const alpha = componentToHex(this.a);
-        const red = componentToHex(this.r);
-        const green = componentToHex(this.g);
-        const blue = componentToHex(this.b);
-        if (alpha === 'ff') {
-            return `#${red}${green}${blue}`;
-        }
-        this.hexString = `#${red}${green}${blue}${alpha}`;
-        return this.hexString;
-    }
-    toString() {
-        return this.toHexString();
-    }
-}
-Color4.transparent = Color4.ofRGBA(0, 0, 0, 0);
-Color4.red = Color4.ofRGB(1.0, 0.0, 0.0);
-Color4.green = Color4.ofRGB(0.0, 1.0, 0.0);
-Color4.blue = Color4.ofRGB(0.0, 0.0, 1.0);
-Color4.purple = Color4.ofRGB(0.5, 0.2, 0.5);
-Color4.yellow = Color4.ofRGB(1, 1, 0.1);
-Color4.clay = Color4.ofRGB(0.8, 0.4, 0.2);
-Color4.black = Color4.ofRGB(0, 0, 0);
-Color4.gray = Color4.ofRGB(0.5, 0.5, 0.5);
-Color4.white = Color4.ofRGB(1, 1, 1);

package/dist/src/Editor.d.ts

@@ -1,308 +0,0 @@
-import EditorImage from './EditorImage';
-import ToolController from './tools/ToolController';
-import { InputEvtType, EditorNotifier, ImageLoader } from './types';
-import Command from './commands/Command';
-import UndoRedoHistory from './UndoRedoHistory';
-import Viewport from './Viewport';
-import { Point2 } from './math/Vec2';
-import HTMLToolbar from './toolbar/HTMLToolbar';
-import { RenderablePathSpec } from './rendering/renderers/AbstractRenderer';
-import Display, { RenderingMode } from './rendering/Display';
-import Color4 from './Color4';
-import Pointer from './Pointer';
-import Rect2 from './math/Rect2';
-import { EditorLocalization } from './localization';
-import IconProvider from './toolbar/IconProvider';
-import AbstractComponent from './components/AbstractComponent';
-type HTMLPointerEventType = 'pointerdown' | 'pointermove' | 'pointerup' | 'pointercancel';
-type HTMLPointerEventFilter = (eventName: HTMLPointerEventType, event: PointerEvent) => boolean;
-export interface EditorSettings {
-    /** Defaults to `RenderingMode.CanvasRenderer` */
-    renderingMode: RenderingMode;
-    /** Uses a default English localization if a translation is not given. */
-    localization: Partial<EditorLocalization>;
-    /**
-     * `true` if touchpad/mousewheel scrolling should scroll the editor instead of the document.
-     * This does not include pinch-zoom events.
-     * Defaults to true.
-     */
-    wheelEventsEnabled: boolean | 'only-if-focused';
-    /** Minimum zoom fraction (e.g. 0.5 → 50% zoom). */
-    minZoom: number;
-    maxZoom: number;
-    iconProvider: IconProvider;
-}
-/**
- * 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 declare class Editor {
-    private container;
-    private renderingRegion;
-    /** Manages drawing surfaces/{@link lib!AbstractRenderer}s. */
-    display: Display;
-    /**
-     * Handles undo/redo.
-     *
-     * @example
-     * ```
-     * const editor = new Editor(document.body);
-     *
-     * // Do something undoable.
-     * // ...
-     *
-     * // Undo the last action
-     * editor.history.undo();
-     * ```
-     */
-    history: UndoRedoHistory;
-    /**
-     * Data structure for adding/removing/querying objects in the image.
-     *
-     * @example
-     * ```
-     * const editor = new Editor(document.body);
-     *
-     * // Create a path.
-     * const stroke = new Stroke([
-     *   Path.fromString('M0,0 L30,30 z').toRenderable({ fill: Color4.black }),
-     * ]);
-     * const addElementCommand = editor.image.addElement(stroke);
-     *
-     * // Add the stroke to the editor
-     * editor.dispatch(addElementCommand);
-     * ```
-     */
-    readonly image: EditorImage;
-    /**
-     * Allows transforming the view and querying information about
-     * what is currently visible.
-     */
-    readonly viewport: Viewport;
-    /** @internal */
-    readonly localization: EditorLocalization;
-    /** {@link lib!EditorSettings.iconProvider} */
-    readonly icons: IconProvider;
-    /**
-     * Controls the list of tools. See
-     * [the custom tool example](https://github.com/personalizedrefrigerator/js-draw/tree/main/docs/example-custom-tools)
-     * for more.
-     */
-    readonly toolController: ToolController;
-    /**
-     * Global event dispatcher/subscriber.
-     */
-    readonly notifier: EditorNotifier;
-    private loadingWarning;
-    private accessibilityAnnounceArea;
-    private accessibilityControlArea;
-    private eventListenerTargets;
-    private settings;
-    /**
-     * @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: HTMLElement, settings?: Partial<EditorSettings>);
-    /**
-     * @returns a reference to the editor's container.
-     *
-     * @example
-     * ```
-     *   // Set the editor's height to 500px
-     *   editor.getRootElement().style.height = '500px';
-     * ```
-     */
-    getRootElement(): HTMLElement;
-    /** @param fractionLoaded - should be a number from 0 to 1, where 1 represents completely loaded. */
-    showLoadingWarning(fractionLoaded: number): void;
-    hideLoadingWarning(): void;
-    private previousAccessibilityAnnouncement;
-    /**
-     * Announce `message` for screen readers. If `message` is the same as the previous
-     * message, it is re-announced.
-     */
-    announceForAccessibility(message: string): void;
-    /**
-     * Creates a toolbar. If `defaultLayout` is true, default buttons are used.
-     * @returns a reference to the toolbar.
-     */
-    addToolbar(defaultLayout?: boolean): HTMLToolbar;
-    private registerListeners;
-    private pointers;
-    private getPointerList;
-    /**
-     * 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: 'pointerdown' | 'pointermove' | 'pointerup' | 'pointercancel', evt: PointerEvent): boolean;
-    private isEventSink;
-    private handlePaste;
-    /**
-     * 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: HTMLElement, filter?: HTMLPointerEventFilter): void;
-    /** Adds event listners for keypresses to `elem` and forwards those events to the editor. */
-    handleKeyEventsFrom(elem: HTMLElement): void;
-    /** `apply` a command. `command` will be announced for accessibility. */
-    dispatch(command: Command, addToHistory?: boolean): void | Promise<void>;
-    /**
-     * 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: Command, addToHistory?: boolean): void | Promise<void>;
-    /**
-     * 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: Command[], apply: boolean, updateChunkSize: number): Promise<void>;
-    asyncApplyCommands(commands: Command[], chunkSize: number): Promise<void>;
-    asyncUnapplyCommands(commands: Command[], chunkSize: number, unapplyInReverseOrder?: boolean): Promise<void>;
-    private announceUndoCallback;
-    private announceRedoCallback;
-    private nextRerenderListeners;
-    private rerenderQueued;
-    /**
-     * 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(): Promise<void>;
-    isRerenderQueued(): boolean;
-    /**
-     * Re-renders the entire image.
-     *
-     * @see {@link Editor.queueRerender}
-     */
-    rerender(showImageBounds?: boolean): void;
-    /**
-     * 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: RenderablePathSpec[]): void;
-    /**
-     * Clears the wet ink display.
-     *
-     * @see {@link Display.getWetInkRenderer}
-     */
-    clearWetInk(): void;
-    /**
-     * Focuses the region used for text input/key commands.
-     */
-    focus(): void;
-    /**
-     * 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: HTMLElement): {
-        remove: () => void;
-    };
-    addStyleSheet(content: string): HTMLStyleElement;
-    sendKeyboardEvent(eventType: InputEvtType.KeyPressEvent | InputEvtType.KeyUpEvent, key: string, ctrlKey?: boolean, altKey?: boolean): void;
-    /**
-     * Dispatch a pen event to the currently selected tool.
-     * Intended primarially for unit tests.
-     *
-     * @deprecated
-     * @see {@link sendPenEvent} {@link sendTouchEvent}
-     */
-    sendPenEvent(eventType: InputEvtType.PointerDownEvt | InputEvtType.PointerMoveEvt | InputEvtType.PointerUpEvt, point: Point2, allPointers?: Pointer[]): void;
-    addAndCenterComponents(components: AbstractComponent[], selectComponents?: boolean): Promise<void>;
-    toDataURL(format?: 'image/png' | 'image/jpeg' | 'image/webp'): string;
-    toSVG(): SVGElement;
-    /**
-     * Load editor data from an `ImageLoader` (e.g. an {@link SVGLoader}).
-     *
-     * @see loadFromSVG
-     */
-    loadFrom(loader: ImageLoader): Promise<void>;
-    private getTopmostBackgroundComponent;
-    /**
-     * Set the background color of the image.
-     */
-    setBackgroundColor(color: Color4): Command;
-    /**
-     * @returns the average of the colors of all background components. Use this to get the current background
-     * color.
-     */
-    estimateBackgroundColor(): Color4;
-    getImportExportRect(): Rect2;
-    setImportExportRect(imageRect: Rect2): Command;
-    /**
-     * Alias for loadFrom(SVGLoader.fromString).
-     *
-     * This is particularly useful when accessing a bundled version of the editor,
-     * where `SVGLoader.fromString` is unavailable.
-     */
-    loadFromSVG(svgData: string, sanitize?: boolean): Promise<void>;
-}
-export default Editor;