js-draw 0.17.4 → 0.18.0

package/dist/cjs/src/util/assertions.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.assertIsNumberArray = exports.assertIsNumber = exports.assertUnreachable = void 0;
+/**
+ * Compile-time assertion that a branch of code is unreachable.
+ * @internal
+ */
+const assertUnreachable = (key) => {
+    // See https://stackoverflow.com/a/39419171/17055750
+    throw new Error(`Should be unreachable. Key: ${key}.`);
+};
+exports.assertUnreachable = assertUnreachable;
+/**
+ * Throws an exception if the typeof given value is not a number or `value` is NaN.
+ *
+ * @example
+ * ```ts
+ * const foo: unknown = 3;
+ * assertIsNumber(foo);
+ *
+ * assertIsNumber('hello, world'); // throws an Error.
+ * ```
+ *
+ *
+ */
+const assertIsNumber = (value, allowNaN = false) => {
+    if (typeof value !== 'number' || (!allowNaN && isNaN(value))) {
+        throw new Error('Given value is not a number');
+        // return false;
+    }
+    return true;
+};
+exports.assertIsNumber = assertIsNumber;
+/**
+ * Throws if any of `values` is not of type number.
+ */
+const assertIsNumberArray = (values, allowNaN = false) => {
+    if (typeof values !== 'object') {
+        throw new Error('Asserting isNumberArray: Given entity is not an array');
+    }
+    if (!(0, exports.assertIsNumber)(values['length'])) {
+        return false;
+    }
+    for (const value of values) {
+        if (!(0, exports.assertIsNumber)(value, allowNaN)) {
+            return false;
+        }
+    }
+    return true;
+};
+exports.assertIsNumberArray = assertIsNumberArray;

package/dist/cjs/src/util/fileToBase64.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fileToBase64 = (file, onprogress) => {
+    const reader = new FileReader();
+    return new Promise((resolve, reject) => {
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = reject;
+        reader.onabort = reject;
+        reader.onprogress = (evt) => {
+            onprogress === null || onprogress === void 0 ? void 0 : onprogress(evt);
+        };
+        reader.readAsDataURL(file);
+    });
+};
+exports.default = fileToBase64;

package/dist/cjs/src/util/untilNextAnimationFrame.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/** @internal */
+const untilNextAnimationFrame = () => {
+    return new Promise((resolve) => {
+        requestAnimationFrame(() => resolve());
+    });
+};
+exports.default = untilNextAnimationFrame;

package/dist/cjs/src/util/waitForTimeout.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// Returns a promise that resolves after `timeout` milliseconds.
+const waitForTimeout = (timeout) => {
+    return new Promise(resolve => {
+        setTimeout(() => resolve(), timeout);
+    });
+};
+exports.default = waitForTimeout;

package/dist/mjs/build_tools/BundledFile.d.ts

@@ -0,0 +1,13 @@
+export default class BundledFile {
+    readonly bundleName: string;
+    private readonly sourceFilePath;
+    private readonly bundleBaseName;
+    private readonly rootFileDirectory;
+    private readonly outputDirectory;
+    private readonly outputFilename;
+    constructor(bundleName: string, sourceFilePath: string, outputFilepath?: string);
+    private getWebpackOptions;
+    private handleErrors;
+    build(): Promise<void>;
+    startWatching(): void;
+}

package/dist/{build_tools/buildTranslationTemplate.js → mjs/build_tools/buildTranslationTemplate.mjs}

@@ -1,6 +1,6 @@
 import * as fs from 'fs';
 import * as path from 'path';
-import { defaultEditorLocalization } from '../src/localization';
+import  { defaultEditorLocalization }  from '../src/localization.mjs';
 // Adds markdown formatting to format text like code.
 const codeFormat = (text) => {
     let maxConsecutiveBackticks = 0;

package/dist/{build_tools/bundle.js → mjs/build_tools/bundle.mjs}

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

package/dist/mjs/build_tools/postDist.d.ts

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

package/dist/mjs/build_tools/postDist.mjs

@@ -0,0 +1,67 @@
+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 { readdir, stat, rename, readFile, writeFile, unlink } from 'fs/promises';
+import path from 'path';
+// Script to be run after building JavaScript files from TypeScript.
+// TODO: This is very hacky.
+// TODO: [Use the TypeScript Compiler API instead.](https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API)
+// Iterates over every JavaScript file in [directory].
+const forEachFile = (directory, processFile) => __awaiter(void 0, void 0, void 0, function* () {
+    const files = yield readdir(directory);
+    yield Promise.all(files.map((file) => __awaiter(void 0, void 0, void 0, function* () {
+        const filePath = path.join(directory, file);
+        const stats = yield stat(filePath);
+        if (stats.isDirectory()) {
+            yield forEachFile(filePath, processFile);
+        }
+        else if (stats.isFile()) {
+            yield processFile(filePath);
+        }
+        else {
+            throw new Error('Unknown file type!');
+        }
+    })));
+});
+const removeFiles = (directory, filePattern) => __awaiter(void 0, void 0, void 0, function* () {
+    yield forEachFile(directory, (filePath) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!filePath.match(filePattern)) {
+            return;
+        }
+        yield unlink(filePath);
+    }));
+});
+const main = () => __awaiter(void 0, void 0, void 0, function* () {
+    const rootDir = path.dirname(__dirname);
+    const cjsPath = `${rootDir}/dist/cjs`;
+    const mjsPath = `${rootDir}/dist/mjs`;
+    const testPattern = /\.test\.js$/;
+    yield removeFiles(cjsPath, testPattern);
+    yield removeFiles(mjsPath, testPattern);
+    // We need to replace imports in ESM files.
+    yield forEachFile(mjsPath, (filePath) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!filePath.endsWith('.js')) {
+            return;
+        }
+        // Rename
+        const newPath = filePath.replace(/\.js$/, '.mjs');
+        yield rename(filePath, newPath);
+        // Change imports from
+        //   import foo from './bar'
+        // to
+        //   import foo from './bar.mjs'
+        // and exports similarly.
+        let contents = yield readFile(newPath, { encoding: 'utf-8' });
+        // TODO: Switch to using the TypeScript compiler API. This has the danger of changing imports
+        // in multi-line strings.
+        contents = contents.replace(/([\n]|^)(import|export)(.*)from\s+(['"])(\.*\/[^\n]+)(['"])/g, '$1$2 $3 from $4$5.mjs$6');
+        yield writeFile(newPath, contents);
+    }));
+});
+main();

package/dist/mjs/src/Color4.d.ts

@@ -0,0 +1,61 @@
+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;
+}
+export { Color4 };

package/dist/{src/Color4.js → mjs/src/Color4.mjs}

@@ -190,3 +190,4 @@ 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);
+export { Color4 };

package/dist/mjs/src/Editor.d.ts

@@ -0,0 +1,308 @@
+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;

package/dist/{src/Editor.js → mjs/src/Editor.mjs}

@@ -7,32 +7,32 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import EditorImage from './EditorImage';
-import ToolController from './tools/ToolController';
-import { InputEvtType, EditorEventType } from './types';
-import UndoRedoHistory from './UndoRedoHistory';
-import Viewport from './Viewport';
-import EventDispatcher from './EventDispatcher';
-import { Vec2 } from './math/Vec2';
-import Vec3 from './math/Vec3';
-import HTMLToolbar from './toolbar/HTMLToolbar';
-import Display, { RenderingMode } from './rendering/Display';
-import SVGRenderer from './rendering/renderers/SVGRenderer';
-import Color4 from './Color4';
-import SVGLoader from './SVGLoader';
-import Pointer from './Pointer';
-import Mat33 from './math/Mat33';
-import getLocalizationTable from './localizations/getLocalizationTable';
-import IconProvider from './toolbar/IconProvider';
-import { toRoundedString } from './math/rounding';
-import CanvasRenderer from './rendering/renderers/CanvasRenderer';
-import untilNextAnimationFrame from './util/untilNextAnimationFrame';
-import fileToBase64 from './util/fileToBase64';
-import uniteCommands from './commands/uniteCommands';
-import SelectionTool from './tools/SelectionTool/SelectionTool';
-import Erase from './commands/Erase';
-import ImageBackground, { BackgroundType } from './components/ImageBackground';
-import sendPenEvent from './testing/sendPenEvent';
+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.
  *