js-draw 0.3.2 → 0.4.0

package/dist/src/Editor.d.ts

@@ -28,6 +28,8 @@ import Display, { RenderingMode } from './rendering/Display';
 import Pointer from './Pointer';
 import Rect2 from './math/Rect2';
 import { EditorLocalization } from './localization';
+declare type HTMLPointerEventType = 'pointerdown' | 'pointermove' | 'pointerup' | 'pointercancel';
+declare type HTMLPointerEventFilter = (eventName: HTMLPointerEventType, event: PointerEvent) => boolean;
 export interface EditorSettings {
     /** Defaults to `RenderingMode.CanvasRenderer` */
     renderingMode: RenderingMode;
@@ -140,8 +142,16 @@ export declare class Editor {
      */
     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;
+    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. */
@@ -183,6 +193,7 @@ export declare class Editor {
         remove: () => void;
     };
     addStyleSheet(content: string): HTMLStyleElement;
+    sendKeyboardEvent(eventType: InputEvtType.KeyPressEvent | InputEvtType.KeyUpEvent, key: string, ctrlKey?: boolean): void;
     sendPenEvent(eventType: InputEvtType.PointerDownEvt | InputEvtType.PointerMoveEvt | InputEvtType.PointerUpEvt, point: Point2, allPointers?: Pointer[]): void;
     toSVG(): SVGElement;
     loadFrom(loader: ImageLoader): Promise<void>;

package/dist/src/Editor.js

@@ -70,6 +70,7 @@ export class Editor {
         var _a, _b, _c, _d;
         this.eventListenerTargets = [];
         this.previousAccessibilityAnnouncement = '';
+        this.pointers = {};
         this.announceUndoCallback = (command) => {
             this.announceForAccessibility(this.localization.undoAnnouncement(command.description(this, this.localization)));
         };
@@ -182,81 +183,7 @@ export class Editor {
         return toolbar;
     }
     registerListeners() {
-        const pointers = {};
-        const getPointerList = () => {
-            const nowTime = (new Date()).getTime();
-            const res = [];
-            for (const id in pointers) {
-                const maxUnupdatedTime = 2000; // Maximum time without a pointer update (ms)
-                if (pointers[id] && (nowTime - pointers[id].timeStamp) < maxUnupdatedTime) {
-                    res.push(pointers[id]);
-                }
-            }
-            return res;
-        };
-        // May be required to prevent text selection on iOS/Safari:
-        // See https://stackoverflow.com/a/70992717/17055750
-        this.renderingRegion.addEventListener('touchstart', evt => evt.preventDefault());
-        this.renderingRegion.addEventListener('contextmenu', evt => {
-            // Don't show a context menu
-            evt.preventDefault();
-        });
-        this.renderingRegion.addEventListener('pointerdown', evt => {
-            const pointer = Pointer.ofEvent(evt, true, this.viewport);
-            pointers[pointer.id] = pointer;
-            this.renderingRegion.setPointerCapture(pointer.id);
-            const event = {
-                kind: InputEvtType.PointerDownEvt,
-                current: pointer,
-                allPointers: getPointerList(),
-            };
-            this.toolController.dispatchInputEvent(event);
-            return true;
-        });
-        this.renderingRegion.addEventListener('pointermove', evt => {
-            var _a, _b;
-            const pointer = Pointer.ofEvent(evt, (_b = (_a = pointers[evt.pointerId]) === null || _a === void 0 ? void 0 : _a.down) !== null && _b !== void 0 ? _b : false, this.viewport);
-            if (pointer.down) {
-                const prevData = 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;
-                    }
-                }
-                pointers[pointer.id] = pointer;
-                if (this.toolController.dispatchInputEvent({
-                    kind: InputEvtType.PointerMoveEvt,
-                    current: pointer,
-                    allPointers: getPointerList(),
-                })) {
-                    evt.preventDefault();
-                }
-            }
-        });
-        const pointerEnd = (evt) => {
-            const pointer = Pointer.ofEvent(evt, false, this.viewport);
-            if (!pointers[pointer.id]) {
-                return;
-            }
-            pointers[pointer.id] = pointer;
-            this.renderingRegion.releasePointerCapture(pointer.id);
-            if (this.toolController.dispatchInputEvent({
-                kind: InputEvtType.PointerUpEvt,
-                current: pointer,
-                allPointers: getPointerList(),
-            })) {
-                evt.preventDefault();
-            }
-            delete pointers[pointer.id];
-        };
-        this.renderingRegion.addEventListener('pointerup', evt => {
-            pointerEnd(evt);
-        });
-        this.renderingRegion.addEventListener('pointercancel', evt => {
-            pointerEnd(evt);
-        });
+        this.handlePointerEventsFrom(this.renderingRegion);
         this.handleKeyEventsFrom(this.renderingRegion);
         this.container.addEventListener('wheel', evt => {
             let delta = Vec3.of(evt.deltaX, evt.deltaY, evt.deltaZ);
@@ -282,7 +209,9 @@ export class Editor {
             if (evt.ctrlKey) {
                 delta = Vec3.of(0, 0, evt.deltaY);
             }
-            const pos = Vec2.of(evt.offsetX, evt.offsetY);
+            // Ensure that `pos` is relative to `this.container`
+            const bbox = this.container.getBoundingClientRect();
+            const pos = Vec2.of(evt.clientX, evt.clientY).minus(Vec2.of(bbox.left, bbox.top));
             if (this.toolController.dispatchInputEvent({
                 kind: InputEvtType.WheelEvt,
                 delta,
@@ -324,6 +253,78 @@ export class Editor {
             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) {
@@ -411,6 +412,24 @@ export class Editor {
             }
         });
     }
+    handlePointerEventsFrom(elem, filter) {
+        // May be required to prevent text selection on iOS/Safari:
+        // See https://stackoverflow.com/a/70992717/17055750
+        elem.addEventListener('touchstart', evt => evt.preventDefault());
+        elem.addEventListener('contextmenu', evt => {
+            // Don't show a context menu
+            evt.preventDefault();
+        });
+        const eventNames = ['pointerdown', 'pointermove', 'pointerup', 'pointercancel'];
+        for (const eventName of eventNames) {
+            elem.addEventListener(eventName, evt => {
+                if (filter && !filter(eventName, evt)) {
+                    return true;
+                }
+                return this.handleHTMLPointerEvent(eventName, evt);
+            });
+        }
+    }
     /** Adds event listners for keypresses to `elem` and forwards those events to the editor. */
     handleKeyEventsFrom(elem) {
         elem.addEventListener('keydown', evt => {
@@ -577,6 +596,15 @@ export class Editor {
         this.container.appendChild(styleSheet);
         return styleSheet;
     }
+    // Dispatch a keyboard event to the currently selected tool.
+    // Intended for unit testing
+    sendKeyboardEvent(eventType, key, ctrlKey = false) {
+        this.toolController.dispatchInputEvent({
+            kind: eventType,
+            key,
+            ctrlKey
+        });
+    }
     // Dispatch a pen event to the currently selected tool.
     // Intended primarially for unit tests.
     sendPenEvent(eventType, point, allPointers) {

package/dist/src/Pointer.d.ts

@@ -18,6 +18,6 @@ export default class Pointer {
     readonly id: number;
     readonly timeStamp: number;
     private constructor();
-    static ofEvent(evt: PointerEvent, isDown: boolean, 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

@@ -31,10 +31,15 @@ export default class Pointer {
         this.id = id;
         this.timeStamp = timeStamp;
     }
-    // Creates a Pointer from a DOM event.
-    static ofEvent(evt, isDown, viewport) {
+    // Creates a Pointer from a DOM event. If `relativeTo` is given, (0, 0) in screen coordinates is
+    // considered the top left of `relativeTo`.
+    static ofEvent(evt, isDown, viewport, relativeTo) {
         var _a, _b;
-        const screenPos = Vec2.of(evt.offsetX, evt.offsetY);
+        let screenPos = Vec2.of(evt.clientX, evt.clientY);
+        if (relativeTo) {
+            const bbox = relativeTo.getBoundingClientRect();
+            screenPos = screenPos.minus(Vec2.of(bbox.left, bbox.top));
+        }
         const pointerTypeToDevice = {
             'mouse': PointerDevice.PrimaryButtonMouse,
             'pen': PointerDevice.Pen,

package/dist/src/Viewport.d.ts

@@ -29,6 +29,7 @@ export declare class Viewport {
     getRotationAngle(): number;
     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;
 }

package/dist/src/Viewport.js

@@ -73,7 +73,8 @@ export class Viewport {
     getSizeOfPixelOnCanvas() {
         return 1 / this.getScaleFactor();
     }
-    // Returns the angle of the canvas in radians
+    // Returns the angle of the canvas in radians.
+    // This is the angle by which the canvas is rotated relative to the screen.
     getRotationAngle() {
         return this.transform.transformVec3(Vec3.unitX).angle();
     }
@@ -94,6 +95,18 @@ export class Viewport {
     roundPoint(point) {
         return Viewport.roundPoint(point, 1 / this.getScaleFactor());
     }
+    // `roundAmount`: An integer >= 0, larger numbers cause less rounding. Smaller numbers cause more
+    // (as such `roundAmount = 0` does the most rounding).
+    static roundScaleRatio(scaleRatio, roundAmount = 1) {
+        if (Math.abs(scaleRatio) <= 1e-12) {
+            return 0;
+        }
+        // Represent as k 10ⁿ for some n, k ∈ ℤ.
+        const decimalComponent = Math.pow(10, Math.floor(Math.log10(Math.abs(scaleRatio))));
+        const roundAnountFactor = Math.pow(2, roundAmount);
+        scaleRatio = Math.round(scaleRatio / decimalComponent * roundAnountFactor) / roundAnountFactor * decimalComponent;
+        return scaleRatio;
+    }
     // Computes and returns an affine transformation that makes `toMakeVisible` visible and roughly centered on the screen.
     computeZoomToTransform(toMakeVisible, allowZoomIn = true, allowZoomOut = true) {
         let transform = Mat33.identity;

package/dist/src/components/ImageComponent.d.ts

@@ -1,5 +1,5 @@
 import LineSegment2 from '../math/LineSegment2';
-import Mat33 from '../math/Mat33';
+import Mat33, { Mat33Array } from '../math/Mat33';
 import Rect2 from '../math/Rect2';
 import AbstractRenderer, { RenderableImage } from '../rendering/renderers/AbstractRenderer';
 import AbstractComponent from './AbstractComponent';
@@ -18,7 +18,7 @@ export default class ImageComponent extends AbstractComponent {
         label: string | undefined;
         width: number;
         height: number;
-        transform: number[];
+        transform: Mat33Array;
     };
     protected applyTransformation(affineTransfm: Mat33): void;
     description(localizationTable: ImageComponentLocalization): string;

package/dist/src/language/assertions.d.ts

@@ -0,0 +1 @@
+export declare const assertUnreachable: (key: never) => never;

package/dist/src/language/assertions.js

@@ -0,0 +1,5 @@
+// Compile-time assertion that a branch of code is unreachable.
+// See https://stackoverflow.com/a/39419171/17055750
+export const assertUnreachable = (key) => {
+    throw new Error(`Should be unreachable. Key: ${key}.`);
+};

package/dist/src/math/Mat33.d.ts

@@ -1,5 +1,16 @@
 import { Point2, Vec2 } from './Vec2';
 import Vec3 from './Vec3';
+export declare type Mat33Array = [
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number
+];
 /**
  * Represents a three dimensional linear transformation or
  * a two-dimensional affine transformation. (An affine transformation scales/rotates/shears
@@ -68,11 +79,36 @@ export default class Mat33 {
      * ...
      * ```
      */
-    toArray(): number[];
+    toArray(): Mat33Array;
+    /**
+     * @example
+     * ```
+     * new Mat33(
+     *  1, 2, 3,
+     *  4, 5, 6,
+     *  7, 8, 9,
+     * ).mapEntries(component => component - 1);
+     * // → ⎡ 0, 1, 2 ⎤
+     * //   ⎢ 3, 4, 5 ⎥
+     * //   ⎣ 6, 7, 8 ⎦
+     * ```
+     */
+    mapEntries(mapping: (component: number) => number): Mat33;
     /** Constructs a 3x3 translation matrix (for translating `Vec2`s) */
     static translation(amount: Vec2): Mat33;
     static zRotation(radians: number, center?: Point2): Mat33;
     static scaling2D(amount: number | Vec2, center?: Point2): Mat33;
-    /** Converts a CSS-form `matrix(a, b, c, d, e, f)` to a Mat33. */
+    /** @see {@link !fromCSSMatrix} */
+    toCSSMatrix(): string;
+    /**
+     * Converts a CSS-form `matrix(a, b, c, d, e, f)` to a Mat33.
+     *
+     * Note that such a matrix has the form,
+     * ```
+     * ⎡ a c e ⎤
+     * ⎢ b d f ⎥
+     * ⎣ 0 0 1 ⎦
+     * ```
+     */
     static fromCSSMatrix(cssString: string): Mat33;
 }

package/dist/src/math/Mat33.js

@@ -183,6 +183,22 @@ export default class Mat33 {
             this.c1, this.c2, this.c3,
         ];
     }
+    /**
+     * @example
+     * ```
+     * new Mat33(
+     *  1, 2, 3,
+     *  4, 5, 6,
+     *  7, 8, 9,
+     * ).mapEntries(component => component - 1);
+     * // → ⎡ 0, 1, 2 ⎤
+     * //   ⎢ 3, 4, 5 ⎥
+     * //   ⎣ 6, 7, 8 ⎦
+     * ```
+     */
+    mapEntries(mapping) {
+        return new Mat33(mapping(this.a1), mapping(this.a2), mapping(this.a3), mapping(this.b1), mapping(this.b2), mapping(this.b3), mapping(this.c1), mapping(this.c2), mapping(this.c3));
+    }
     /** Constructs a 3x3 translation matrix (for translating `Vec2`s) */
     static translation(amount) {
         // When transforming Vec2s by a 3x3 matrix, we give the input
@@ -214,7 +230,20 @@ export default class Mat33 {
         // Translate such that [center] goes to (0, 0)
         return result.rightMul(Mat33.translation(center.times(-1)));
     }
-    /** Converts a CSS-form `matrix(a, b, c, d, e, f)` to a Mat33. */
+    /** @see {@link !fromCSSMatrix} */
+    toCSSMatrix() {
+        return `matrix(${this.a1},${this.b1},${this.a2},${this.b2},${this.a3},${this.b3})`;
+    }
+    /**
+     * Converts a CSS-form `matrix(a, b, c, d, e, f)` to a Mat33.
+     *
+     * Note that such a matrix has the form,
+     * ```
+     * ⎡ a c e ⎤
+     * ⎢ b d f ⎥
+     * ⎣ 0 0 1 ⎦
+     * ```
+     */
     static fromCSSMatrix(cssString) {
         if (cssString === '' || cssString === 'none') {
             return Mat33.identity;

package/dist/src/math/Path.d.ts

@@ -55,7 +55,7 @@ export default class Path {
     static fromRenderable(renderable: RenderablePathSpec): Path;
     toRenderable(fill: RenderingStyle): RenderablePathSpec;
     private cachedStringVersion;
-    toString(): string;
+    toString(useNonAbsCommands?: boolean): string;
     serialize(): string;
     static toString(startPoint: Point2, parts: PathCommand[], onlyAbsCommands?: boolean): string;
     static fromString(pathString: string): Path;

package/dist/src/math/Path.js

@@ -282,13 +282,15 @@ export default class Path {
             path: this,
         };
     }
-    toString() {
+    toString(useNonAbsCommands) {
         if (this.cachedStringVersion) {
             return this.cachedStringVersion;
         }
-        // Hueristic: Try to determine whether converting absolute to relative commands is worth it.
-        const makeRelativeCommands = Math.abs(this.bbox.topLeft.x) > 10 && Math.abs(this.bbox.topLeft.y) > 10;
-        const result = Path.toString(this.startPoint, this.parts, !makeRelativeCommands);
+        if (useNonAbsCommands === undefined) {
+            // Hueristic: Try to determine whether converting absolute to relative commands is worth it.
+            useNonAbsCommands = Math.abs(this.bbox.topLeft.x) > 10 && Math.abs(this.bbox.topLeft.y) > 10;
+        }
+        const result = Path.toString(this.startPoint, this.parts, !useNonAbsCommands);
         this.cachedStringVersion = result;
         return result;
     }
@@ -307,10 +309,12 @@ export default class Path {
             const roundedPrevX = prevPoint ? toRoundedString(prevPoint.x) : '';
             const roundedPrevY = prevPoint ? toRoundedString(prevPoint.y) : '';
             for (const point of points) {
+                const xComponent = toRoundedString(point.x);
+                const yComponent = toRoundedString(point.y);
                 // Relative commands are often shorter as strings than absolute commands.
                 if (!makeAbsCommand) {
-                    const xComponentRelative = toStringOfSamePrecision(point.x - prevPoint.x, roundedPrevX, roundedPrevY);
-                    const yComponentRelative = toStringOfSamePrecision(point.y - prevPoint.y, roundedPrevX, roundedPrevY);
+                    const xComponentRelative = toStringOfSamePrecision(point.x - prevPoint.x, xComponent, roundedPrevX, roundedPrevY);
+                    const yComponentRelative = toStringOfSamePrecision(point.y - prevPoint.y, yComponent, roundedPrevX, roundedPrevY);
                     // No need for an additional separator if it starts with a '-'
                     if (yComponentRelative.charAt(0) === '-') {
                         relativeCommandParts.push(`${xComponentRelative}${yComponentRelative}`);
@@ -320,8 +324,6 @@ export default class Path {
                     }
                 }
                 else {
-                    const xComponent = toRoundedString(point.x);
-                    const yComponent = toRoundedString(point.y);
                     absoluteCommandParts.push(`${xComponent},${yComponent}`);
                 }
             }

package/dist/src/math/Vec3.d.ts

@@ -38,6 +38,16 @@ export default class Vec3 {
     minus(v: Vec3): Vec3;
     dot(other: Vec3): number;
     cross(other: Vec3): Vec3;
+    /**
+     * If `other` is a `Vec3`, multiplies `this` component-wise by `other`. Otherwise,
+     * if `other is a `number`, returns the result of scalar multiplication.
+     *
+     * @example
+     * ```
+     * Vec3.of(1, 2, 3).scale(Vec3.of(2, 4, 6)); // → Vec3(2, 8, 18)
+     * ```
+     */
+    scale(other: Vec3 | number): Vec3;
     /**
      * Returns a vector orthogonal to this. If this is a Vec2, returns `this` rotated
      * 90 degrees counter-clockwise.
@@ -73,7 +83,7 @@ export default class Vec3 {
      * ```
      */
     map(fn: (component: number, index: number) => number): Vec3;
-    asArray(): number[];
+    asArray(): [number, number, number];
     /**
      * [fuzz] The maximum difference between two components for this and [other]
      * to be considered equal.

package/dist/src/math/Vec3.js

@@ -76,6 +76,21 @@ export default class Vec3 {
         // | x2 y2 z2|
         return Vec3.of(this.y * other.z - other.y * this.z, other.x * this.z - this.x * other.z, this.x * other.y - other.x * this.y);
     }
+    /**
+     * If `other` is a `Vec3`, multiplies `this` component-wise by `other`. Otherwise,
+     * if `other is a `number`, returns the result of scalar multiplication.
+     *
+     * @example
+     * ```
+     * Vec3.of(1, 2, 3).scale(Vec3.of(2, 4, 6)); // → Vec3(2, 8, 18)
+     * ```
+     */
+    scale(other) {
+        if (typeof other === 'number') {
+            return this.times(other);
+        }
+        return Vec3.of(this.x * other.x, this.y * other.y, this.z * other.z);
+    }
     /**
      * Returns a vector orthogonal to this. If this is a Vec2, returns `this` rotated
      * 90 degrees counter-clockwise.

package/dist/src/math/rounding.d.ts

@@ -1,3 +1,4 @@
+export declare const cleanUpNumber: (text: string) => string;
 export declare const toRoundedString: (num: number) => string;
 export declare const getLenAfterDecimal: (numberAsString: string) => number;
 export declare const toStringOfSamePrecision: (num: number, ...references: string[]) => string;

package/dist/src/math/rounding.js

@@ -1,8 +1,14 @@
 // @packageDocumentation @internal
 // Clean up stringified numbers
-const cleanUpNumber = (text) => {
+export const cleanUpNumber = (text) => {
     // Regular expression substitions can be somewhat expensive. Only do them
     // if necessary.
+    if (text.indexOf('e') > 0) {
+        // Round to zero.
+        if (text.match(/[eE][-]\d{2,}$/)) {
+            return '0';
+        }
+    }
     const lastChar = text.charAt(text.length - 1);
     if (lastChar === '0' || lastChar === '.') {
         // Remove trailing zeroes
@@ -10,23 +16,24 @@ const cleanUpNumber = (text) => {
         text = text.replace(/[.]0+$/, '.');
         // Remove trailing period
         text = text.replace(/[.]$/, '');
-        if (text === '-0') {
-            return '0';
-        }
     }
     const firstChar = text.charAt(0);
     if (firstChar === '0' || firstChar === '-') {
         // Remove unnecessary leading zeroes.
         text = text.replace(/^(0+)[.]/, '.');
         text = text.replace(/^-(0+)[.]/, '-.');
+        text = text.replace(/^(-?)0+$/, '$10');
+    }
+    if (text === '-0') {
+        return '0';
     }
     return text;
 };
 export const toRoundedString = (num) => {
     // Try to remove rounding errors. If the number ends in at least three/four zeroes
     // (or nines) just one or two digits, it's probably a rounding error.
-    const fixRoundingUpExp = /^([-]?\d*\.\d{3,})0{4,}\d{1,2}$/;
-    const hasRoundingDownExp = /^([-]?)(\d*)\.(\d{3,}9{4,})\d{1,2}$/;
+    const fixRoundingUpExp = /^([-]?\d*\.\d{3,})0{4,}\d{1,4}$/;
+    const hasRoundingDownExp = /^([-]?)(\d*)\.(\d{3,}9{4,})\d{1,4}$/;
     let text = num.toString(10);
     if (text.indexOf('.') === -1) {
         return text;

package/dist/src/rendering/renderers/AbstractRenderer.js

@@ -64,7 +64,8 @@ export default class AbstractRenderer {
             this.currentPaths.push(path);
         }
     }
-    // Draw a rectangle. Boundary lines have width [lineWidth] and are filled with [lineFill]
+    // Draw a rectangle. Boundary lines have width [lineWidth] and are filled with [lineFill].
+    // This is equivalent to `drawPath(Path.fromRect(...).toRenderable(...))`.
     drawRect(rect, lineWidth, lineFill) {
         const path = Path.fromRect(rect, lineWidth);
         this.drawPath(path.toRenderable(lineFill));

package/dist/src/toolbar/HTMLToolbar.js

@@ -1,17 +1,18 @@
 import { EditorEventType } from '../types';
 import { coloris, init as colorisInit } from '@melloware/coloris';
 import Color4 from '../Color4';
-import SelectionTool from '../tools/SelectionTool';
 import { defaultToolbarLocalization } from './localization';
 import { makeRedoIcon, makeUndoIcon } from './icons';
-import PanZoom from '../tools/PanZoom';
+import SelectionTool from '../tools/SelectionTool/SelectionTool';
+import PanZoomTool from '../tools/PanZoom';
 import TextTool from '../tools/TextTool';
+import EraserTool from '../tools/Eraser';
+import PenTool from '../tools/Pen';
 import PenToolWidget from './widgets/PenToolWidget';
 import EraserWidget from './widgets/EraserToolWidget';
 import SelectionToolWidget from './widgets/SelectionToolWidget';
 import TextToolWidget from './widgets/TextToolWidget';
 import HandToolWidget from './widgets/HandToolWidget';
-import { EraserTool, PenTool } from '../tools/lib';
 export const toolbarCSSPrefix = 'toolbar-';
 export default class HTMLToolbar {
     /** @internal */
@@ -158,7 +159,7 @@ export default class HTMLToolbar {
         for (const tool of toolController.getMatchingTools(TextTool)) {
             this.addWidget(new TextToolWidget(this.editor, tool, this.localizationTable));
         }
-        const panZoomTool = toolController.getMatchingTools(PanZoom)[0];
+        const panZoomTool = toolController.getMatchingTools(PanZoomTool)[0];
         if (panZoomTool) {
             this.addWidget(new HandToolWidget(this.editor, panZoomTool, this.localizationTable));
         }

package/dist/src/toolbar/widgets/SelectionToolWidget.d.ts

@@ -1,5 +1,5 @@
 import Editor from '../../Editor';
-import SelectionTool from '../../tools/SelectionTool';
+import SelectionTool from '../../tools/SelectionTool/SelectionTool';
 import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
 export default class SelectionToolWidget extends BaseToolWidget {