js-draw 0.17.3 → 0.18.0

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

@@ -7,31 +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  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.
  *
@@ -46,6 +47,9 @@ import ImageBackground, { BackgroundType } from './components/ImageBackground';
  *   // 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 {
     /**
@@ -62,6 +66,8 @@ export class Editor {
      *
      * // Add the default toolbar
      * const toolbar = editor.addToolbar();
+     *
+     * // Add a save button
      * toolbar.addActionButton({
      *   label: 'Save'
      *   icon: createSaveIcon(),
@@ -156,6 +162,7 @@ export class Editor {
      *
      * @example
      * ```
+     *   // Set the editor's height to 500px
      *   editor.getRootElement().style.height = '500px';
      * ```
      */
@@ -172,8 +179,10 @@ export class Editor {
         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.
+    /**
+     * 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) {
@@ -424,6 +433,25 @@ export class Editor {
             }
         });
     }
+    /**
+     * 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
@@ -560,7 +588,7 @@ export class Editor {
      * 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
+     * @returns a promise that resolves when re-rendering has completed.
      */
     queueRerender() {
         if (!this.rerenderQueued) {
@@ -582,6 +610,11 @@ export class Editor {
     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.
@@ -601,6 +634,9 @@ export class Editor {
         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) {
@@ -609,17 +645,26 @@ export class Editor {
         }
     }
     /**
+     * Clears the wet ink display.
+     *
      * @see {@link Display.getWetInkRenderer}
      */
     clearWetInk() {
         this.display.getWetInkRenderer().clear();
     }
-    // Focuses the region used for text input/key commands.
+    /**
+     * 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.
+    /**
+     * 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);
@@ -643,19 +688,17 @@ export class Editor {
             altKey,
         });
     }
-    // Dispatch a pen event to the currently selected tool.
-    // Intended primarially for unit tests.
+    /**
+     * 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) {
-        const mainPointer = Pointer.ofCanvasPoint(point, eventType !== InputEvtType.PointerUpEvt, this.viewport);
-        this.toolController.dispatchInputEvent({
-            kind: eventType,
-            allPointers: allPointers !== null && allPointers !== void 0 ? allPointers : [
-                mainPointer,
-            ],
-            current: mainPointer,
-        });
+        sendPenEvent(this, eventType, point, allPointers);
     }
     addAndCenterComponents(components, selectComponents = true) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -717,9 +760,8 @@ export class Editor {
     }
     toSVG() {
         const importExportViewport = this.image.getImportExportViewport().getTemporaryClone();
-        const svgNameSpace = 'http://www.w3.org/2000/svg';
-        const result = document.createElementNS(svgNameSpace, 'svg');
-        const renderer = new SVGRenderer(result, importExportViewport);
+        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.
@@ -731,11 +773,6 @@ export class Editor {
         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));
-        // Ensure the image can be identified as an SVG if downloaded.
-        // See https://jwatt.org/svg/authoring/
-        result.setAttribute('version', '1.1');
-        result.setAttribute('baseProfile', 'full');
-        result.setAttribute('xmlns', svgNameSpace);
         return result;
     }
     /**

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

@@ -0,0 +1,97 @@
+import AbstractRenderer from './rendering/renderers/AbstractRenderer';
+import Viewport from './Viewport';
+import AbstractComponent from './components/AbstractComponent';
+import Rect2 from './math/Rect2';
+import RenderingCache from './rendering/caching/RenderingCache';
+import SerializableCommand from './commands/SerializableCommand';
+import EventDispatcher from './EventDispatcher';
+export declare const sortLeavesByZIndex: (leaves: Array<ImageNode>) => void;
+export declare enum EditorImageEventType {
+    ExportViewportChanged = 0
+}
+export type EditorImageNotifier = EventDispatcher<EditorImageEventType, {
+    image: EditorImage;
+}>;
+export default class EditorImage {
+    private root;
+    private background;
+    private componentsById;
+    /** Viewport for the exported/imported image. */
+    private importExportViewport;
+    readonly notifier: EditorImageNotifier;
+    constructor();
+    getBackgroundComponents(): AbstractComponent[];
+    findParent(elem: AbstractComponent): ImageNode | null;
+    queueRerenderOf(elem: AbstractComponent): void;
+    /** @internal */
+    renderWithCache(screenRenderer: AbstractRenderer, cache: RenderingCache, viewport: Viewport): void;
+    /**
+     * Renders all nodes visible from `viewport` (or all nodes if `viewport = null`).
+     *
+     * `viewport` is used to improve rendering performance. If given, it must match
+     * the viewport used by the `renderer` (if any).
+     */
+    render(renderer: AbstractRenderer, viewport: Viewport | null): void;
+    /** Renders all nodes, even ones not within the viewport. @internal */
+    renderAll(renderer: AbstractRenderer): void;
+    /** @returns all elements in the image, sorted by z-index. This can be slow for large images. */
+    getAllElements(): AbstractComponent[];
+    /** @returns a list of `AbstractComponent`s intersecting `region`, sorted by z-index. */
+    getElementsIntersectingRegion(region: Rect2): AbstractComponent[];
+    /** @internal */
+    onDestroyElement(elem: AbstractComponent): void;
+    /**
+     * @returns the AbstractComponent with `id`, if it exists.
+     *
+     * @see {@link AbstractComponent.getId}
+     */
+    lookupElement(id: string): AbstractComponent | null;
+    private addElementDirectly;
+    private removeElementDirectly;
+    /**
+     * Returns a command that adds the given element to the `EditorImage`.
+     * If `applyByFlattening` is true, the content of the wet ink renderer is
+     * rendered onto the main rendering canvas instead of doing a full re-render.
+     *
+     * @see {@link Display.flatten}
+     */
+    static addElement(elem: AbstractComponent, applyByFlattening?: boolean): SerializableCommand;
+    /** @see EditorImage.addElement */
+    addElement(elem: AbstractComponent, applyByFlattening?: boolean): SerializableCommand;
+    private static AddElementCommand;
+    /**
+     * @returns a `Viewport` for rendering the image when importing/exporting.
+     */
+    getImportExportViewport(): Viewport;
+    setImportExportRect(imageRect: Rect2): SerializableCommand;
+    private static SetImportExportRectCommand;
+}
+type TooSmallToRenderCheck = (rect: Rect2) => boolean;
+/** Part of the Editor's image. @internal */
+export declare class ImageNode {
+    private parent;
+    private content;
+    private bbox;
+    private children;
+    private targetChildCount;
+    private id;
+    private static idCounter;
+    constructor(parent?: ImageNode | null);
+    getId(): number;
+    onContentChange(): void;
+    getContent(): AbstractComponent | null;
+    getParent(): ImageNode | null;
+    private getChildrenIntersectingRegion;
+    getChildrenOrSelfIntersectingRegion(region: Rect2): ImageNode[];
+    getLeavesIntersectingRegion(region: Rect2, isTooSmall?: TooSmallToRenderCheck): ImageNode[];
+    getChildWithContent(target: AbstractComponent): ImageNode | null;
+    getLeaves(): ImageNode[];
+    addLeaf(leaf: AbstractComponent): ImageNode;
+    getBBox(): Rect2;
+    recomputeBBox(bubbleUp: boolean): void;
+    private updateParents;
+    private rebalance;
+    remove(): void;
+    render(renderer: AbstractRenderer, visibleRect?: Rect2): void;
+}
+export {};

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

@@ -1,12 +1,12 @@
 var _a, _b, _c;
-import Viewport from './Viewport';
-import AbstractComponent from './components/AbstractComponent';
-import Rect2 from './math/Rect2';
-import SerializableCommand from './commands/SerializableCommand';
-import EventDispatcher from './EventDispatcher';
-import { Vec2 } from './math/Vec2';
-import Mat33 from './math/Mat33';
-import { assertIsNumber, assertIsNumberArray } from './util/assertions';
+import  Viewport  from './Viewport.mjs';
+import  AbstractComponent  from './components/AbstractComponent.mjs';
+import  Rect2  from './math/Rect2.mjs';
+import  SerializableCommand  from './commands/SerializableCommand.mjs';
+import  EventDispatcher  from './EventDispatcher.mjs';
+import  { Vec2 }  from './math/Vec2.mjs';
+import  Mat33  from './math/Mat33.mjs';
+import  { assertIsNumber, assertIsNumberArray }  from './util/assertions.mjs';
 // @internal Sort by z-index, low to high
 export const sortLeavesByZIndex = (leaves) => {
     leaves.sort((a, b) => a.getContent().getZIndex() - b.getContent().getZIndex());
@@ -67,8 +67,10 @@ export default class EditorImage {
         cache.render(screenRenderer, this.root, viewport);
     }
     /**
-     * Renders all nodes visible from `viewport` (or all nodes if `viewport = null`)
-     * @internal
+     * Renders all nodes visible from `viewport` (or all nodes if `viewport = null`).
+     *
+     * `viewport` is used to improve rendering performance. If given, it must match
+     * the viewport used by the `renderer` (if any).
      */
     render(renderer, viewport) {
         this.background.render(renderer, viewport === null || viewport === void 0 ? void 0 : viewport.visibleRect);

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

@@ -0,0 +1,30 @@
+/**
+ * Handles notifying listeners of events.
+ *
+ * `EventKeyType` is used to distinguish events (e.g. a `ClickEvent` vs a `TouchEvent`)
+ * while `EventMessageType` is the type of the data sent with an event (can be `void`).
+ *
+ * @example
+ * ```
+ * const dispatcher = new EventDispatcher<'event1'|'event2'|'event3', void>();
+ * dispatcher.on('event1', () => {
+ *   console.log('Event 1 triggered.');
+ * });
+ * dispatcher.dispatch('event1');
+ * ```
+ *
+ * @packageDocumentation
+ */
+type CallbackHandler<EventType> = (data: EventType) => void;
+export interface DispatcherEventListener {
+    remove: () => void;
+}
+export default class EventDispatcher<EventKeyType extends string | symbol | number, EventMessageType> {
+    private listeners;
+    constructor();
+    dispatch(eventName: EventKeyType, event: EventMessageType): void;
+    on(eventName: EventKeyType, callback: CallbackHandler<EventMessageType>): DispatcherEventListener;
+    /** Removes an event listener. This is equivalent to calling `.remove()` on the object returned by `.on`. */
+    off(eventName: EventKeyType, callback: CallbackHandler<EventMessageType>): void;
+}
+export {};

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

@@ -0,0 +1,24 @@
+import { Point2 } from './math/Vec2';
+import Viewport from './Viewport';
+export declare enum PointerDevice {
+    Pen = 0,
+    Eraser = 1,
+    Touch = 2,
+    PrimaryButtonMouse = 3,
+    RightButtonMouse = 4,
+    Other = 5
+}
+export default class Pointer {
+    readonly screenPos: Point2;
+    readonly canvasPos: Point2;
+    readonly pressure: number | null;
+    readonly isPrimary: boolean;
+    readonly down: boolean;
+    readonly device: PointerDevice;
+    readonly id: number;
+    readonly timeStamp: number;
+    private constructor();
+    snappedToGrid(viewport: Viewport): Pointer;
+    static ofEvent(evt: PointerEvent, isDown: boolean, viewport: Viewport, relativeTo?: HTMLElement): Pointer;
+    static ofCanvasPoint(canvasPos: Point2, isDown: boolean, viewport: Viewport, id?: number, device?: PointerDevice, isPrimary?: boolean, pressure?: number | null): Pointer;
+}

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

@@ -1,4 +1,4 @@
-import { Vec2 } from './math/Vec2';
+import  { Vec2 }  from './math/Vec2.mjs';
 export var PointerDevice;
 (function (PointerDevice) {
     PointerDevice[PointerDevice["Pen"] = 0] = "Pen";

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

@@ -0,0 +1,48 @@
+import Rect2 from './math/Rect2';
+import { ComponentAddedListener, ImageLoader, OnDetermineExportRectListener, OnProgressListener } from './types';
+export declare const defaultSVGViewRect: Rect2;
+export declare const svgAttributesDataKey = "svgAttrs";
+export declare const svgStyleAttributesDataKey = "svgStyleAttrs";
+export type SVGLoaderUnknownAttribute = [string, string];
+export type SVGLoaderUnknownStyleAttribute = {
+    key: string;
+    value: string;
+    priority?: string;
+};
+export default class SVGLoader implements ImageLoader {
+    private source;
+    private onFinish?;
+    private readonly storeUnknown;
+    private onAddComponent;
+    private onProgress;
+    private onDetermineExportRect;
+    private processedCount;
+    private totalToProcess;
+    private rootViewBox;
+    private constructor();
+    private getStyle;
+    private strokeDataFromElem;
+    private attachUnrecognisedAttrs;
+    private addPath;
+    private addBackground;
+    private getTransform;
+    private makeText;
+    private addText;
+    private addImage;
+    private addUnknownNode;
+    private updateViewBox;
+    private updateSVGAttrs;
+    private visit;
+    private getSourceAttrs;
+    start(onAddComponent: ComponentAddedListener, onProgress: OnProgressListener, onDetermineExportRect?: OnDetermineExportRectListener | null): Promise<void>;
+    /**
+     * Create an `SVGLoader` from the content of an SVG image. SVGs are loaded within a sandboxed
+     * iframe with `sandbox="allow-same-origin"`
+     * [thereby disabling JavaScript](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#sandbox).
+     *
+     * @see {@link Editor.loadFrom}
+     * @param text - Textual representation of the SVG (e.g. `<svg viewbox='...'>...</svg>`).
+     * @param sanitize - if `true`, don't store unknown attributes.
+     */
+    static fromString(text: string, sanitize?: boolean): SVGLoader;
+}

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

@@ -7,17 +7,17 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import Color4 from './Color4';
-import ImageBackground, { BackgroundType, imageBackgroundCSSClassName } from './components/ImageBackground';
-import ImageComponent from './components/ImageComponent';
-import Stroke from './components/Stroke';
-import SVGGlobalAttributesObject from './components/SVGGlobalAttributesObject';
-import TextComponent from './components/TextComponent';
-import UnknownSVGObject from './components/UnknownSVGObject';
-import Mat33 from './math/Mat33';
-import Path from './math/Path';
-import Rect2 from './math/Rect2';
-import { Vec2 } from './math/Vec2';
+import  Color4  from './Color4.mjs';
+import  ImageBackground, { BackgroundType, imageBackgroundCSSClassName }  from './components/ImageBackground.mjs';
+import  ImageComponent  from './components/ImageComponent.mjs';
+import  Stroke  from './components/Stroke.mjs';
+import  SVGGlobalAttributesObject  from './components/SVGGlobalAttributesObject.mjs';
+import  TextComponent  from './components/TextComponent.mjs';
+import  UnknownSVGObject  from './components/UnknownSVGObject.mjs';
+import  Mat33  from './math/Mat33.mjs';
+import  Path  from './math/Path.mjs';
+import  Rect2  from './math/Rect2.mjs';
+import  { Vec2 }  from './math/Vec2.mjs';
 // Size of a loaded image if no size is specified.
 export const defaultSVGViewRect = new Rect2(0, 0, 500, 500);
 // Key to retrieve unrecognised attributes from an AbstractComponent
@@ -387,6 +387,10 @@ export default class SVGLoader {
         });
     }
     /**
+     * Create an `SVGLoader` from the content of an SVG image. SVGs are loaded within a sandboxed
+     * iframe with `sandbox="allow-same-origin"`
+     * [thereby disabling JavaScript](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#sandbox).
+     *
      * @see {@link Editor.loadFrom}
      * @param text - Textual representation of the SVG (e.g. `<svg viewbox='...'>...</svg>`).
      * @param sanitize - if `true`, don't store unknown attributes.

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

@@ -0,0 +1,19 @@
+import Editor from './Editor';
+import Command from './commands/Command';
+type AnnounceRedoCallback = (command: Command) => void;
+type AnnounceUndoCallback = (command: Command) => void;
+declare class UndoRedoHistory {
+    #private;
+    private readonly editor;
+    private announceRedoCallback;
+    private announceUndoCallback;
+    private readonly maxUndoRedoStackSize;
+    constructor(editor: Editor, announceRedoCallback: AnnounceRedoCallback, announceUndoCallback: AnnounceUndoCallback);
+    private fireUpdateEvent;
+    push(command: Command, apply?: boolean): void;
+    undo(): void;
+    redo(): void;
+    get undoStackSize(): number;
+    get redoStackSize(): number;
+}
+export default UndoRedoHistory;

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

@@ -10,7 +10,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _UndoRedoHistory_undoStack, _UndoRedoHistory_redoStack;
-import { EditorEventType, UndoEventType } from './types';
+import  { EditorEventType, UndoEventType }  from './types.mjs';
 class UndoRedoHistory {
     // @internal
     constructor(editor, announceRedoCallback, announceUndoCallback) {

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

@@ -0,0 +1,71 @@
+import Command from './commands/Command';
+import Mat33 from './math/Mat33';
+import Rect2 from './math/Rect2';
+import { Point2, Vec2 } from './math/Vec2';
+import Vec3 from './math/Vec3';
+import { StrokeDataPoint } from './types';
+type PointDataType<T extends Point2 | StrokeDataPoint | number> = T extends Point2 ? Point2 : number;
+export declare abstract class ViewportTransform extends Command {
+    abstract readonly transform: Mat33;
+}
+type TransformChangeCallback = (oldTransform: Mat33, newTransform: Mat33) => void;
+export declare class Viewport {
+    private onTransformChangeCallback;
+    private static ViewportTransform;
+    private transform;
+    private inverseTransform;
+    private screenRect;
+    constructor(onTransformChangeCallback: TransformChangeCallback);
+    /**
+     * @returns a temporary copy of `this` that does not notify when modified. This is
+     * useful when rendering with a temporarily different viewport.
+     */
+    getTemporaryClone(): Viewport;
+    updateScreenSize(screenSize: Vec2): void;
+    /** Get the screen's visible region transformed into canvas space. */
+    get visibleRect(): Rect2;
+    /** @returns the given point, but in canvas coordinates */
+    screenToCanvas(screenPoint: Point2): Point2;
+    /** @returns the given point transformed into screen coordinates. */
+    canvasToScreen(canvasPoint: Point2): Point2;
+    /** @returns a command that transforms the canvas by `transform`. */
+    static transformBy(transform: Mat33): ViewportTransform;
+    /**
+     * Updates the transformation directly. Using `transformBy` is preferred.
+     * @param newTransform - should map from canvas coordinates to screen coordinates.
+     */
+    resetTransform(newTransform?: Mat33): void;
+    get screenToCanvasTransform(): Mat33;
+    get canvasToScreenTransform(): Mat33;
+    /** @returns the size of the visible region in pixels. */
+    getScreenRectSize(): Vec2;
+    /** Alias for `getScreenRectSize`. @deprecated */
+    getResolution(): Vec3;
+    /** @returns the amount a vector on the canvas is scaled to become a vector on the screen. */
+    getScaleFactor(): number;
+    /**
+     * @returns `getScaleFactor()` rounded to the nearest power of 10.
+     * For example, if `getScaleFactor()` returns 101, `getScaleFactorToNearestPowerOfTen()`
+     * should return `100` because `100` is the nearest power of 10 to 101.
+     */
+    getScaleFactorToNearestPowerOfTen(): number;
+    private getScaleFactorToNearestPowerOf;
+    snapToGrid(canvasPos: Point2): Vec3;
+    /** Returns the size of one screen pixel in canvas units. */
+    getSizeOfPixelOnCanvas(): number;
+    /**
+     * @returns the angle of the canvas in radians.
+     * This is the angle by which the canvas is rotated relative to the screen.
+     */
+    getRotationAngle(): number;
+    /**
+     * Rounds the given `point` to a multiple of 10 such that it is within `tolerance` of
+     * its original location. This is useful for preparing data for base-10 conversion.
+     */
+    static roundPoint<T extends Point2 | number>(point: T, tolerance: number): PointDataType<T>;
+    roundPoint(point: Point2): Point2;
+    static roundScaleRatio(scaleRatio: number, roundAmount?: number): number;
+    computeZoomToTransform(toMakeVisible: Rect2, allowZoomIn?: boolean, allowZoomOut?: boolean): Mat33;
+    zoomTo(toMakeVisible: Rect2, allowZoomIn?: boolean, allowZoomOut?: boolean): Command;
+}
+export default Viewport;

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

@@ -10,11 +10,11 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _inverseTransform, _a;
-import Command from './commands/Command';
-import Mat33 from './math/Mat33';
-import Rect2 from './math/Rect2';
-import { Vec2 } from './math/Vec2';
-import Vec3 from './math/Vec3';
+import  Command  from './commands/Command.mjs';
+import  Mat33  from './math/Mat33.mjs';
+import  Rect2  from './math/Rect2.mjs';
+import  { Vec2 }  from './math/Vec2.mjs';
+import  Vec3  from './math/Vec3.mjs';
 export class ViewportTransform extends Command {
 }
 export class Viewport {

package/dist/mjs/src/bundle/bundled.d.ts

@@ -0,0 +1,4 @@
+import '../styles';
+import Editor from '../Editor';
+export * from '../lib';
+export default Editor;

package/dist/{src/bundle/bundled.js → mjs/src/bundle/bundled.mjs}

@@ -1,5 +1,5 @@
 // Main entrypoint for Webpack when building a bundle for release.
 import '../styles';
-import Editor from '../Editor';
-export * from '../lib';
+import  Editor  from '../Editor.mjs';
+export  *  from '../lib.mjs';
 export default Editor;