js-draw 0.23.1 → 0.24.0

package/dist/mjs/EventDispatcher.mjs

@@ -0,0 +1,56 @@
+// Code shared with Joplin (js-draw was originally intended to be part of Joplin).
+/**
+ * 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');
+ * ```
+ *
+ */
+var EventDispatcher = /** @class */ (function () {
+    function EventDispatcher() {
+        this.listeners = {};
+    }
+    EventDispatcher.prototype.dispatch = function (eventName, event) {
+        var listenerList = this.listeners[eventName];
+        if (listenerList) {
+            for (var i = 0; i < listenerList.length; i++) {
+                listenerList[i](event);
+            }
+        }
+    };
+    EventDispatcher.prototype.on = function (eventName, callback) {
+        var _this = this;
+        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: function () {
+                var 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`. */
+    EventDispatcher.prototype.off = function (eventName, callback) {
+        var 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(function (otherCallback) { return otherCallback !== callback; });
+    };
+    return EventDispatcher;
+}());
+export default EventDispatcher;

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

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

package/dist/mjs/Pointer.d.ts

@@ -0,0 +1,37 @@
+import { Point2, Vec2 } 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();
+    /**
+     * 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: Viewport): Pointer;
+    lockedToXYAxesScreen(originPointScreen: Vec2, viewport: Viewport): Pointer;
+    /** @see {@link withCanvasPosition} */
+    withScreenPosition(screenPos: Point2, viewport: Viewport): Pointer;
+    /**
+     * Returns a copy of this pointer with a new position. The screen position is determined
+     * by the given `canvasPos`.
+     */
+    withCanvasPosition(canvasPos: Point2, 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/mjs/Pointer.mjs

@@ -0,0 +1,120 @@
+import  { Vec2 }  from './math/Vec2.mjs';
+export 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 || (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.
+var Pointer = /** @class */ (function () {
+    function Pointer(
+    // 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.
+     */
+    Pointer.prototype.snappedToGrid = function (viewport) {
+        var snappedCanvasPos = viewport.snapToGrid(this.canvasPos);
+        return this.withCanvasPosition(snappedCanvasPos, viewport);
+    };
+    // Snap this pointer to the X or Y axis (whichever is closer), where (0,0)
+    // is considered to be at `originPointScreen`.
+    // @internal
+    Pointer.prototype.lockedToXYAxesScreen = function (originPointScreen, viewport) {
+        var current = this.screenPos;
+        var currentFromStart = current.minus(originPointScreen);
+        // Determine whether the last point was closer to being on the
+        // x- or y- axis.
+        var projOntoXAxis = Vec2.unitX.times(currentFromStart.x);
+        var projOntoYAxis = Vec2.unitY.times(currentFromStart.y);
+        var pos;
+        if (currentFromStart.dot(projOntoXAxis) > currentFromStart.dot(projOntoYAxis)) {
+            pos = projOntoXAxis;
+        }
+        else {
+            pos = projOntoYAxis;
+        }
+        pos = pos.plus(originPointScreen);
+        return this.withScreenPosition(pos, viewport);
+    };
+    /** @see {@link withCanvasPosition} */
+    Pointer.prototype.withScreenPosition = function (screenPos, viewport) {
+        var canvasPos = viewport.screenToCanvas(screenPos);
+        return this.withCanvasPosition(canvasPos, viewport);
+    };
+    /**
+     * Returns a copy of this pointer with a new position. The screen position is determined
+     * by the given `canvasPos`.
+     */
+    Pointer.prototype.withCanvasPosition = function (canvasPos, viewport) {
+        var screenPos = viewport.canvasToScreen(canvasPos);
+        return new Pointer(screenPos, canvasPos, 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`.
+    Pointer.ofEvent = function (evt, isDown, viewport, relativeTo) {
+        var _a, _b;
+        var screenPos = Vec2.of(evt.clientX, evt.clientY);
+        if (relativeTo) {
+            var bbox = relativeTo.getBoundingClientRect();
+            screenPos = screenPos.minus(Vec2.of(bbox.left, bbox.top));
+        }
+        var pointerTypeToDevice = {
+            'mouse': PointerDevice.PrimaryButtonMouse,
+            'pen': PointerDevice.Pen,
+            'touch': PointerDevice.Touch,
+        };
+        var device = (_a = pointerTypeToDevice[evt.pointerType]) !== null && _a !== void 0 ? _a : PointerDevice.Other;
+        var eraserButtonMask = 0x20;
+        if (device === PointerDevice.Pen && (evt.buttons & eraserButtonMask) !== 0) {
+            device = PointerDevice.Eraser;
+        }
+        var timeStamp = (new Date()).getTime();
+        var 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.
+    Pointer.ofCanvasPoint = function (canvasPos, isDown, viewport, id, device, isPrimary, pressure) {
+        if (id === void 0) { id = 0; }
+        if (device === void 0) { device = PointerDevice.Pen; }
+        if (isPrimary === void 0) { isPrimary = true; }
+        if (pressure === void 0) { pressure = null; }
+        var screenPos = viewport.canvasToScreen(canvasPos);
+        var timeStamp = (new Date()).getTime();
+        return new Pointer(screenPos, canvasPos, pressure, isPrimary, isDown, device, id, timeStamp);
+    };
+    return Pointer;
+}());
+export default Pointer;

package/dist/mjs/SVGLoader.d.ts

@@ -0,0 +1,48 @@
+import Rect2 from './math/shapes/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;
+}