js-draw 0.17.3 → 0.18.0

package/dist/{src → cjs/src}/EditorImage.d.ts

@@ -26,8 +26,10 @@ export default class EditorImage {
     /** @internal */
     renderWithCache(screenRenderer: AbstractRenderer, cache: RenderingCache, viewport: Viewport): void;
     /**
-     * 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: AbstractRenderer, viewport: Viewport | null): void;
     /** Renders all nodes, even ones not within the viewport. @internal */

package/dist/cjs/src/EditorImage.js

@@ -0,0 +1,486 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var _a, _b, _c;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageNode = exports.EditorImageEventType = exports.sortLeavesByZIndex = void 0;
+const Viewport_1 = __importDefault(require("./Viewport"));
+const AbstractComponent_1 = __importDefault(require("./components/AbstractComponent"));
+const Rect2_1 = __importDefault(require("./math/Rect2"));
+const SerializableCommand_1 = __importDefault(require("./commands/SerializableCommand"));
+const EventDispatcher_1 = __importDefault(require("./EventDispatcher"));
+const Vec2_1 = require("./math/Vec2");
+const Mat33_1 = __importDefault(require("./math/Mat33"));
+const assertions_1 = require("./util/assertions");
+// @internal Sort by z-index, low to high
+const sortLeavesByZIndex = (leaves) => {
+    leaves.sort((a, b) => a.getContent().getZIndex() - b.getContent().getZIndex());
+};
+exports.sortLeavesByZIndex = sortLeavesByZIndex;
+var EditorImageEventType;
+(function (EditorImageEventType) {
+    EditorImageEventType[EditorImageEventType["ExportViewportChanged"] = 0] = "ExportViewportChanged";
+})(EditorImageEventType = exports.EditorImageEventType || (exports.EditorImageEventType = {}));
+// Handles lookup/storage of elements in the image
+class EditorImage {
+    // @internal
+    constructor() {
+        this.root = new ImageNode();
+        this.background = new ImageNode();
+        this.componentsById = {};
+        this.notifier = new EventDispatcher_1.default();
+        this.importExportViewport = new Viewport_1.default(() => {
+            this.notifier.dispatch(EditorImageEventType.ExportViewportChanged, {
+                image: this,
+            });
+        });
+        // Default to a 500x500 image
+        this.importExportViewport.updateScreenSize(Vec2_1.Vec2.of(500, 500));
+    }
+    // Returns all components that make up the background of this image. These
+    // components are rendered below all other components.
+    getBackgroundComponents() {
+        const result = [];
+        const leaves = this.background.getLeaves();
+        (0, exports.sortLeavesByZIndex)(leaves);
+        for (const leaf of leaves) {
+            const content = leaf.getContent();
+            if (content) {
+                result.push(content);
+            }
+        }
+        return result;
+    }
+    // Returns the parent of the given element, if it exists.
+    findParent(elem) {
+        var _b;
+        return (_b = this.background.getChildWithContent(elem)) !== null && _b !== void 0 ? _b : this.root.getChildWithContent(elem);
+    }
+    // Forces a re-render of `elem` when the image is next re-rendered as a whole.
+    // Does nothing if `elem` is not in this.
+    queueRerenderOf(elem) {
+        // TODO: Make more efficient (e.g. increase IDs of all parents,
+        // make cache take into account last modified time instead of IDs, etc.)
+        const parent = this.findParent(elem);
+        if (parent) {
+            parent.remove();
+            this.addElementDirectly(elem);
+        }
+    }
+    /** @internal */
+    renderWithCache(screenRenderer, cache, viewport) {
+        this.background.render(screenRenderer, viewport.visibleRect);
+        cache.render(screenRenderer, this.root, viewport);
+    }
+    /**
+     * 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);
+        this.root.render(renderer, viewport === null || viewport === void 0 ? void 0 : viewport.visibleRect);
+    }
+    /** Renders all nodes, even ones not within the viewport. @internal */
+    renderAll(renderer) {
+        this.render(renderer, null);
+    }
+    /** @returns all elements in the image, sorted by z-index. This can be slow for large images. */
+    getAllElements() {
+        const leaves = this.root.getLeaves();
+        (0, exports.sortLeavesByZIndex)(leaves);
+        return leaves.map(leaf => leaf.getContent());
+    }
+    /** @returns a list of `AbstractComponent`s intersecting `region`, sorted by z-index. */
+    getElementsIntersectingRegion(region) {
+        const leaves = this.root.getLeavesIntersectingRegion(region);
+        (0, exports.sortLeavesByZIndex)(leaves);
+        return leaves.map(leaf => leaf.getContent());
+    }
+    /** @internal */
+    onDestroyElement(elem) {
+        delete this.componentsById[elem.getId()];
+    }
+    /**
+     * @returns the AbstractComponent with `id`, if it exists.
+     *
+     * @see {@link AbstractComponent.getId}
+     */
+    lookupElement(id) {
+        var _b;
+        return (_b = this.componentsById[id]) !== null && _b !== void 0 ? _b : null;
+    }
+    addElementDirectly(elem) {
+        elem.onAddToImage(this);
+        this.componentsById[elem.getId()] = elem;
+        // If a background component, add to the background. Else,
+        // add to the normal component tree.
+        const parentTree = elem.isBackground() ? this.background : this.root;
+        return parentTree.addLeaf(elem);
+    }
+    removeElementDirectly(element) {
+        const container = this.findParent(element);
+        container === null || container === void 0 ? void 0 : container.remove();
+        if (container) {
+            this.onDestroyElement(element);
+            return true;
+        }
+        return false;
+    }
+    /**
+     * 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, applyByFlattening = false) {
+        return new EditorImage.AddElementCommand(elem, applyByFlattening);
+    }
+    /** @see EditorImage.addElement */
+    addElement(elem, applyByFlattening) {
+        return EditorImage.addElement(elem, applyByFlattening);
+    }
+    /**
+     * @returns a `Viewport` for rendering the image when importing/exporting.
+     */
+    getImportExportViewport() {
+        return this.importExportViewport;
+    }
+    setImportExportRect(imageRect) {
+        const importExportViewport = this.getImportExportViewport();
+        const origSize = importExportViewport.visibleRect.size;
+        const origTransform = importExportViewport.canvasToScreenTransform;
+        return new EditorImage.SetImportExportRectCommand(origSize, origTransform, imageRect);
+    }
+}
+exports.default = EditorImage;
+_a = EditorImage;
+// A Command that can access private [EditorImage] functionality
+EditorImage.AddElementCommand = (_b = class extends SerializableCommand_1.default {
+        // If [applyByFlattening], then the rendered content of this element
+        // is present on the display's wet ink canvas. As such, no re-render is necessary
+        // the first time this command is applied (the surfaces are joined instead).
+        constructor(element, applyByFlattening = false) {
+            super('add-element');
+            this.element = element;
+            this.applyByFlattening = applyByFlattening;
+            this.serializedElem = null;
+            // FIXME: The serialized version of this command may be inaccurate if this is
+            //        serialized when this command is not on the top of the undo stack.
+            //
+            // Caching the element's serialized data leads to additional memory usage *and*
+            // sometimes incorrect behavior in collaborative editing.
+            this.serializedElem = null;
+            if (isNaN(element.getBBox().area)) {
+                throw new Error('Elements in the image cannot have NaN bounding boxes');
+            }
+        }
+        apply(editor) {
+            editor.image.addElementDirectly(this.element);
+            if (!this.applyByFlattening) {
+                editor.queueRerender();
+            }
+            else {
+                this.applyByFlattening = false;
+                editor.display.flatten();
+            }
+        }
+        unapply(editor) {
+            editor.image.removeElementDirectly(this.element);
+            editor.queueRerender();
+        }
+        description(_editor, localization) {
+            return localization.addElementAction(this.element.description(localization));
+        }
+        serializeToJSON() {
+            var _b;
+            return {
+                elemData: (_b = this.serializedElem) !== null && _b !== void 0 ? _b : this.element.serialize(),
+            };
+        }
+    },
+    (() => {
+        SerializableCommand_1.default.register('add-element', (json, editor) => {
+            const id = json.elemData.id;
+            const foundElem = editor.image.lookupElement(id);
+            const elem = foundElem !== null && foundElem !== void 0 ? foundElem : AbstractComponent_1.default.deserialize(json.elemData);
+            const result = new EditorImage.AddElementCommand(elem);
+            result.serializedElem = json.elemData;
+            return result;
+        });
+    })(),
+    _b);
+// Handles resizing the background import/export region of the image.
+EditorImage.SetImportExportRectCommand = (_c = class extends SerializableCommand_1.default {
+        constructor(originalSize, originalTransform, finalRect) {
+            super(EditorImage.SetImportExportRectCommand.commandId);
+            this.originalSize = originalSize;
+            this.originalTransform = originalTransform;
+            this.finalRect = finalRect;
+        }
+        apply(editor) {
+            const viewport = editor.image.getImportExportViewport();
+            viewport.updateScreenSize(this.finalRect.size);
+            viewport.resetTransform(Mat33_1.default.translation(this.finalRect.topLeft.times(-1)));
+            editor.queueRerender();
+        }
+        unapply(editor) {
+            const viewport = editor.image.getImportExportViewport();
+            viewport.updateScreenSize(this.originalSize);
+            viewport.resetTransform(this.originalTransform);
+            editor.queueRerender();
+        }
+        description(_editor, localization) {
+            return localization.resizeOutputCommand(this.finalRect);
+        }
+        serializeToJSON() {
+            return {
+                originalSize: this.originalSize.xy,
+                originalTransform: this.originalTransform.toArray(),
+                newRegion: {
+                    x: this.finalRect.x,
+                    y: this.finalRect.y,
+                    w: this.finalRect.w,
+                    h: this.finalRect.h,
+                },
+            };
+        }
+    },
+    _c.commandId = 'set-import-export-rect',
+    (() => {
+        const commandId = _c.commandId;
+        SerializableCommand_1.default.register(commandId, (json, _editor) => {
+            (0, assertions_1.assertIsNumber)(json.originalSize.x);
+            (0, assertions_1.assertIsNumber)(json.originalSize.y);
+            (0, assertions_1.assertIsNumberArray)(json.originalTransform);
+            (0, assertions_1.assertIsNumberArray)([
+                json.newRegion.x,
+                json.newRegion.y,
+                json.newRegion.w,
+                json.newRegion.h,
+            ]);
+            const originalSize = Vec2_1.Vec2.ofXY(json.originalSize);
+            const originalTransform = new Mat33_1.default(...json.originalTransform);
+            const finalRect = new Rect2_1.default(json.newRegion.x, json.newRegion.y, json.newRegion.w, json.newRegion.h);
+            return new EditorImage.SetImportExportRectCommand(originalSize, originalTransform, finalRect);
+        });
+    })(),
+    _c);
+/** Part of the Editor's image. @internal */
+class ImageNode {
+    constructor(parent = null) {
+        this.parent = parent;
+        this.targetChildCount = 30;
+        this.children = [];
+        this.bbox = Rect2_1.default.empty;
+        this.content = null;
+        this.id = ImageNode.idCounter++;
+    }
+    getId() {
+        return this.id;
+    }
+    onContentChange() {
+        this.id = ImageNode.idCounter++;
+    }
+    getContent() {
+        return this.content;
+    }
+    getParent() {
+        return this.parent;
+    }
+    getChildrenIntersectingRegion(region) {
+        return this.children.filter(child => {
+            return child.getBBox().intersects(region);
+        });
+    }
+    getChildrenOrSelfIntersectingRegion(region) {
+        if (this.content) {
+            return [this];
+        }
+        return this.getChildrenIntersectingRegion(region);
+    }
+    // Returns a list of `ImageNode`s with content (and thus no children).
+    getLeavesIntersectingRegion(region, isTooSmall) {
+        const result = [];
+        let current;
+        const workList = [];
+        workList.push(this);
+        const toNext = () => {
+            current = undefined;
+            const next = workList.pop();
+            if (next && !(isTooSmall === null || isTooSmall === void 0 ? void 0 : isTooSmall(next.bbox))) {
+                current = next;
+                if (current.content !== null && current.getBBox().intersection(region)) {
+                    result.push(current);
+                }
+                workList.push(...current.getChildrenIntersectingRegion(region));
+            }
+        };
+        while (workList.length > 0) {
+            toNext();
+        }
+        return result;
+    }
+    // Returns the child of this with the target content or `null` if no
+    // such child exists.
+    getChildWithContent(target) {
+        const candidates = this.getLeavesIntersectingRegion(target.getBBox());
+        for (const candidate of candidates) {
+            if (candidate.getContent() === target) {
+                return candidate;
+            }
+        }
+        return null;
+    }
+    // Returns a list of leaves with this as an ancestor.
+    // Like getLeavesInRegion, but does not check whether ancestors are in a given rectangle
+    getLeaves() {
+        if (this.content) {
+            return [this];
+        }
+        const result = [];
+        for (const child of this.children) {
+            result.push(...child.getLeaves());
+        }
+        return result;
+    }
+    addLeaf(leaf) {
+        this.onContentChange();
+        if (this.content === null && this.children.length === 0) {
+            this.content = leaf;
+            this.recomputeBBox(true);
+            return this;
+        }
+        if (this.content !== null) {
+            console.assert(this.children.length === 0);
+            const contentNode = new ImageNode(this);
+            contentNode.content = this.content;
+            this.content = null;
+            this.children.push(contentNode);
+            contentNode.recomputeBBox(false);
+        }
+        // If this node is contained within the leaf, make this and the leaf
+        // share a parent.
+        const leafBBox = leaf.getBBox();
+        if (leafBBox.containsRect(this.getBBox())) {
+            const nodeForNewLeaf = new ImageNode(this);
+            if (this.children.length < this.targetChildCount) {
+                this.children.push(nodeForNewLeaf);
+            }
+            else {
+                const nodeForChildren = new ImageNode(this);
+                nodeForChildren.children = this.children;
+                this.children = [nodeForNewLeaf, nodeForChildren];
+                nodeForChildren.recomputeBBox(true);
+                nodeForChildren.updateParents();
+            }
+            return nodeForNewLeaf.addLeaf(leaf);
+        }
+        const containingNodes = this.children.filter(child => child.getBBox().containsRect(leafBBox));
+        // Does the leaf already fit within one of the children?
+        if (containingNodes.length > 0 && this.children.length >= this.targetChildCount) {
+            // Sort the containers in ascending order by area
+            containingNodes.sort((a, b) => a.getBBox().area - b.getBBox().area);
+            // Choose the smallest child that contains the new element.
+            const result = containingNodes[0].addLeaf(leaf);
+            result.rebalance();
+            return result;
+        }
+        const newNode = new ImageNode(this);
+        this.children.push(newNode);
+        newNode.content = leaf;
+        newNode.recomputeBBox(true);
+        return newNode;
+    }
+    getBBox() {
+        return this.bbox;
+    }
+    // Recomputes this' bounding box. If [bubbleUp], also recompute
+    // this' ancestors bounding boxes. This also re-computes this' bounding box
+    // in the z-direction (z-indicies).
+    recomputeBBox(bubbleUp) {
+        var _b;
+        const oldBBox = this.bbox;
+        if (this.content !== null) {
+            this.bbox = this.content.getBBox();
+        }
+        else {
+            this.bbox = Rect2_1.default.union(...this.children.map(child => child.getBBox()));
+        }
+        if (bubbleUp && !oldBBox.eq(this.bbox)) {
+            (_b = this.parent) === null || _b === void 0 ? void 0 : _b.recomputeBBox(true);
+        }
+    }
+    updateParents(recursive = false) {
+        for (const child of this.children) {
+            child.parent = this;
+            if (recursive) {
+                child.updateParents(recursive);
+            }
+        }
+    }
+    rebalance() {
+        // If the current node is its parent's only child,
+        if (this.parent && this.parent.children.length === 1) {
+            console.assert(this.parent.content === null);
+            console.assert(this.parent.children[0] === this);
+            // Remove this' parent, if this' parent isn't the root.
+            const oldParent = this.parent;
+            if (oldParent.parent !== null) {
+                oldParent.children = [];
+                this.parent = oldParent.parent;
+                this.parent.children.push(this);
+                oldParent.parent = null;
+                this.parent.recomputeBBox(false);
+            }
+            else if (this.content === null) {
+                // Remove this and transfer this' children to the parent.
+                this.parent.children = this.children;
+                this.parent.updateParents();
+                this.parent = null;
+            }
+        }
+    }
+    // Remove this node and all of its children
+    remove() {
+        var _b;
+        (_b = this.content) === null || _b === void 0 ? void 0 : _b.onRemoveFromImage();
+        if (!this.parent) {
+            this.content = null;
+            this.children = [];
+            return;
+        }
+        const oldChildCount = this.parent.children.length;
+        this.parent.children = this.parent.children.filter(node => {
+            return node !== this;
+        });
+        console.assert(this.parent.children.length === oldChildCount - 1, `${oldChildCount - 1} ≠ ${this.parent.children.length} after removing all nodes equal to ${this}. Nodes should only be removed once.`);
+        this.parent.children.forEach(child => {
+            child.rebalance();
+        });
+        this.parent.recomputeBBox(true);
+        // Invalidate/disconnect this.
+        this.content = null;
+        this.parent = null;
+        this.children = [];
+    }
+    render(renderer, visibleRect) {
+        let leaves;
+        if (visibleRect) {
+            leaves = this.getLeavesIntersectingRegion(visibleRect, rect => renderer.isTooSmallToRender(rect));
+        }
+        else {
+            leaves = this.getLeaves();
+        }
+        (0, exports.sortLeavesByZIndex)(leaves);
+        for (const leaf of leaves) {
+            // Leaves by definition have content
+            leaf.getContent().render(renderer, visibleRect);
+        }
+    }
+}
+exports.ImageNode = ImageNode;
+ImageNode.idCounter = 0;

package/dist/cjs/src/EventDispatcher.js

@@ -0,0 +1,57 @@
+"use strict";
+/**
+ * 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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+// { @inheritDoc EventDispatcher! }
+class EventDispatcher {
+    constructor() {
+        this.listeners = {};
+    }
+    dispatch(eventName, event) {
+        const listenerList = this.listeners[eventName];
+        if (listenerList) {
+            for (let i = 0; i < listenerList.length; i++) {
+                listenerList[i](event);
+            }
+        }
+    }
+    on(eventName, callback) {
+        if (!this.listeners[eventName])
+            this.listeners[eventName] = [];
+        this.listeners[eventName].push(callback);
+        return {
+            // Retuns false if the listener has already been removed, true otherwise.
+            remove: () => {
+                const originalListeners = this.listeners[eventName];
+                this.off(eventName, callback);
+                return originalListeners.length !== this.listeners[eventName].length;
+            },
+        };
+    }
+    /** Removes an event listener. This is equivalent to calling `.remove()` on the object returned by `.on`. */
+    off(eventName, callback) {
+        const listeners = this.listeners[eventName];
+        if (!listeners)
+            return;
+        // Replace the current list of listeners with a new, shortened list.
+        // This allows any iterators over this.listeners to continue iterating
+        // without skipping elements.
+        this.listeners[eventName] = listeners.filter(otherCallback => otherCallback !== callback);
+    }
+}
+exports.default = EventDispatcher;

package/dist/cjs/src/Pointer.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PointerDevice = void 0;
+const Vec2_1 = require("./math/Vec2");
+var PointerDevice;
+(function (PointerDevice) {
+    PointerDevice[PointerDevice["Pen"] = 0] = "Pen";
+    PointerDevice[PointerDevice["Eraser"] = 1] = "Eraser";
+    PointerDevice[PointerDevice["Touch"] = 2] = "Touch";
+    PointerDevice[PointerDevice["PrimaryButtonMouse"] = 3] = "PrimaryButtonMouse";
+    PointerDevice[PointerDevice["RightButtonMouse"] = 4] = "RightButtonMouse";
+    PointerDevice[PointerDevice["Other"] = 5] = "Other";
+})(PointerDevice = exports.PointerDevice || (exports.PointerDevice = {}));
+// Provides a snapshot containing information about a pointer. A Pointer
+// object is immutable — it will not be updated when the pointer's information changes.
+class Pointer {
+    constructor(
+    // The (x, y) position of the pointer relative to the top-left corner
+    // of the visible canvas.
+    screenPos, 
+    // Position of the pointer relative to the top left corner of the drawing
+    // surface.
+    canvasPos, pressure, isPrimary, down, device, 
+    // Unique ID for the pointer
+    id, 
+    // Numeric timestamp (milliseconds, as from `(new Date).getTime()`)
+    timeStamp) {
+        this.screenPos = screenPos;
+        this.canvasPos = canvasPos;
+        this.pressure = pressure;
+        this.isPrimary = isPrimary;
+        this.down = down;
+        this.device = device;
+        this.id = id;
+        this.timeStamp = timeStamp;
+    }
+    // Snaps this pointer to the nearest grid point (rounds the coordinates of this
+    // pointer based on the current zoom). Returns a new Pointer and does not modify
+    // this.
+    snappedToGrid(viewport) {
+        const snappedCanvasPos = viewport.snapToGrid(this.canvasPos);
+        const snappedScreenPos = viewport.canvasToScreen(snappedCanvasPos);
+        return new Pointer(snappedScreenPos, snappedCanvasPos, this.pressure, this.isPrimary, this.down, this.device, this.id, this.timeStamp);
+    }
+    // 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;
+        let screenPos = Vec2_1.Vec2.of(evt.clientX, evt.clientY);
+        if (relativeTo) {
+            const bbox = relativeTo.getBoundingClientRect();
+            screenPos = screenPos.minus(Vec2_1.Vec2.of(bbox.left, bbox.top));
+        }
+        const pointerTypeToDevice = {
+            'mouse': PointerDevice.PrimaryButtonMouse,
+            'pen': PointerDevice.Pen,
+            'touch': PointerDevice.Touch,
+        };
+        let device = (_a = pointerTypeToDevice[evt.pointerType]) !== null && _a !== void 0 ? _a : PointerDevice.Other;
+        const eraserButtonMask = 0x20;
+        if (device === PointerDevice.Pen && (evt.buttons & eraserButtonMask) !== 0) {
+            device = PointerDevice.Eraser;
+        }
+        const timeStamp = (new Date()).getTime();
+        const canvasPos = viewport.roundPoint(viewport.screenToCanvas(screenPos));
+        if (device === PointerDevice.PrimaryButtonMouse) {
+            if (evt.buttons & 0x2) {
+                device = PointerDevice.RightButtonMouse;
+            }
+            else if (!(evt.buttons & 0x1)) {
+                device = PointerDevice.Other;
+            }
+        }
+        return new Pointer(screenPos, canvasPos, (_b = evt.pressure) !== null && _b !== void 0 ? _b : null, evt.isPrimary, isDown, device, evt.pointerId, timeStamp);
+    }
+    // Create a new Pointer from a point on the canvas.
+    // Intended for unit tests.
+    static ofCanvasPoint(canvasPos, isDown, viewport, id = 0, device = PointerDevice.Pen, isPrimary = true, pressure = null) {
+        const screenPos = viewport.canvasToScreen(canvasPos);
+        const timeStamp = (new Date()).getTime();
+        return new Pointer(screenPos, canvasPos, pressure, isPrimary, isDown, device, id, timeStamp);
+    }
+}
+exports.default = Pointer;

package/dist/{src → cjs/src}/SVGLoader.d.ts

@@ -36,6 +36,10 @@ export default class SVGLoader implements ImageLoader {
     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.