js-draw 1.20.3 → 1.21.2

package/dist/cjs/tools/InputFilter/InputStabilizer.js

@@ -1,181 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const inputEvents_1 = require("../../inputEvents");
-const InputMapper_1 = __importDefault(require("./InputMapper"));
-const math_1 = require("@js-draw/math");
-const untilNextAnimationFrame_1 = __importDefault(require("../../util/untilNextAnimationFrame"));
-var StabilizerType;
-(function (StabilizerType) {
-    StabilizerType[StabilizerType["IntertialStabilizer"] = 0] = "IntertialStabilizer";
-})(StabilizerType || (StabilizerType = {}));
-const defaultOptions = {
-    kind: StabilizerType.IntertialStabilizer,
-    mass: 0.4, // kg
-    springConstant: 100.0, // N/m
-    frictionCoefficient: 0.28,
-    maxPointDist: 10, // screen units
-    inertiaFraction: 0.75,
-    minSimilarityToFinalize: 0.0,
-    velocityDecayFactor: 0.1,
-};
-// Stabilizes input for a single cursor
-class StylusInputStabilizer {
-    constructor(
-    // The initial starting point of the pointer.
-    start, 
-    // Emits a pointer motion event, returns true if the event was handled.
-    updatePointer, options) {
-        this.updatePointer = updatePointer;
-        this.options = options;
-        this.runLoop = true;
-        this.lastUpdateTime = 0;
-        this.velocity = math_1.Vec2.zero;
-        this.strokePoint = start;
-        this.targetPoint = start;
-        this.targetInterval = 10; // ms
-        void this.loop();
-    }
-    async loop() {
-        this.lastUpdateTime = performance.now();
-        while (this.runLoop) {
-            this.update(false);
-            await (0, untilNextAnimationFrame_1.default)();
-        }
-    }
-    setTarget(point) {
-        this.targetPoint = point;
-    }
-    getNextVelocity(deltaTimeMs) {
-        const toTarget = this.targetPoint.minus(this.strokePoint);
-        const springForce = toTarget.times(this.options.springConstant);
-        const gravityAccel = 10;
-        const normalForceMagnitude = this.options.mass * gravityAccel;
-        const frictionForce = this.velocity.normalizedOrZero().times(-this.options.frictionCoefficient * normalForceMagnitude);
-        const acceleration = (springForce.plus(frictionForce)).times(1 / this.options.mass);
-        const decayFactor = this.options.velocityDecayFactor;
-        const springVelocity = this.velocity.times(1 - decayFactor).plus(acceleration.times(deltaTimeMs / 1000));
-        // An alternate velocity that goes directly towards the target.
-        const toTargetVelocity = toTarget.normalizedOrZero().times(springVelocity.length());
-        return toTargetVelocity.lerp(springVelocity, this.options.inertiaFraction);
-    }
-    update(force) {
-        const nowTime = performance.now();
-        const deltaTime = nowTime - this.lastUpdateTime;
-        const reachedTarget = this.strokePoint.eq(this.targetPoint);
-        if (deltaTime > this.targetInterval || force) {
-            if (!reachedTarget) {
-                let velocity;
-                let deltaX;
-                let parts = 1;
-                do {
-                    velocity = this.getNextVelocity(deltaTime / parts);
-                    deltaX = velocity.times(deltaTime / 1000);
-                    parts++;
-                } while (deltaX.magnitude() > this.options.maxPointDist && parts < 10);
-                for (let i = 0; i < parts; i++) {
-                    this.velocity = this.getNextVelocity(deltaTime / parts);
-                    deltaX = this.velocity.times(deltaTime / 1000);
-                    this.strokePoint = this.strokePoint.plus(deltaX);
-                    // Allows the last updatePointer to be returned.
-                    if (i < parts - 1) {
-                        this.updatePointer(this.strokePoint, nowTime);
-                    }
-                }
-            }
-            // Even if we have reached the target, ensure that lastUpdateTime is updated
-            // (prevent large deltaTime).
-            this.lastUpdateTime = nowTime;
-            if (force || !reachedTarget) {
-                return this.updatePointer(this.strokePoint, nowTime);
-            }
-        }
-        return false;
-    }
-    /** Finalizes the current stroke. */
-    finish() {
-        this.runLoop = false;
-        const toTarget = this.targetPoint.minus(this.strokePoint);
-        if (this.velocity.dot(toTarget) > this.options.minSimilarityToFinalize) {
-            // Connect the stroke to its end point
-            this.updatePointer(this.targetPoint, performance.now());
-        }
-    }
-    cancel() {
-        this.runLoop = false;
-    }
-}
-class InputStabilizer extends InputMapper_1.default {
-    constructor(viewport, options = defaultOptions) {
-        super();
-        this.viewport = viewport;
-        this.options = options;
-        this.stabilizer = null;
-        this.lastPointerEvent = null;
-    }
-    mapPointerEvent(event) {
-        // Don't store the last pointer event for use with pressure/button data --
-        // this information can be very different for a pointerup event.
-        if ((0, inputEvents_1.isPointerEvt)(event) && event.kind !== inputEvents_1.InputEvtType.PointerUpEvt) {
-            this.lastPointerEvent = event;
-        }
-        // Only apply smoothing if there is a single pointer.
-        if (event.kind === inputEvents_1.InputEvtType.GestureCancelEvt || event.allPointers.length > 1 || this.stabilizer === null) {
-            return this.emit(event);
-        }
-        this.stabilizer.setTarget(event.current.screenPos);
-        if (event.kind === inputEvents_1.InputEvtType.PointerMoveEvt) {
-            return this.stabilizer.update(true);
-        }
-        else if (event.kind === inputEvents_1.InputEvtType.PointerUpEvt) {
-            this.stabilizer.finish();
-            return this.emit(event);
-        }
-        else {
-            return this.emit(event);
-        }
-    }
-    // Assumes that there is exactly one pointer that is currently down.
-    emitPointerMove(screenPoint, timeStamp) {
-        if (!this.lastPointerEvent) {
-            return false;
-        }
-        const pointer = this.lastPointerEvent.current
-            .withScreenPosition(screenPoint, this.viewport)
-            .withTimestamp(timeStamp);
-        const event = {
-            kind: inputEvents_1.InputEvtType.PointerMoveEvt,
-            current: pointer,
-            allPointers: [pointer],
-        };
-        const handled = this.emit(event);
-        return handled;
-    }
-    onEvent(event) {
-        if ((0, inputEvents_1.isPointerEvt)(event) || event.kind === inputEvents_1.InputEvtType.GestureCancelEvt) {
-            if (event.kind === inputEvents_1.InputEvtType.PointerDownEvt) {
-                if (this.stabilizer === null) {
-                    this.stabilizer = new StylusInputStabilizer(event.current.screenPos, (screenPoint, timeStamp) => this.emitPointerMove(screenPoint, timeStamp), this.options);
-                }
-                else if (event.allPointers.length > 1) {
-                    // Do not attempt to stabilize multiple pointers.
-                    this.stabilizer.cancel();
-                    this.stabilizer = null;
-                }
-            }
-            const handled = this.mapPointerEvent(event);
-            if (event.kind === inputEvents_1.InputEvtType.PointerUpEvt || event.kind === inputEvents_1.InputEvtType.GestureCancelEvt) {
-                this.stabilizer?.cancel();
-                this.stabilizer = null;
-            }
-            return handled;
-        }
-        return this.emit(event);
-    }
-    static fromEditor(editor) {
-        return new InputStabilizer(editor.viewport);
-    }
-}
-exports.default = InputStabilizer;

package/dist/cjs/tools/InputFilter/StrokeKeyboardControl.d.ts

@@ -1,21 +0,0 @@
-import { InputEvt } from '../../inputEvents';
-import InputMapper from './InputMapper';
-import KeyboardShortcutManager from '../../shortcuts/KeyboardShortcutManager';
-import Viewport from '../../Viewport';
-import Editor from '../../Editor';
-/**
- * Provides keyboard shortcuts that provide some amount of control over
- * drawing (e.g. snap to grid, plane lock).
- */
-export default class StrokeKeyboardControl extends InputMapper {
-    private shortcuts;
-    private viewport;
-    private snapToGridEnabled;
-    private angleLockEnabled;
-    private startPointCanvas;
-    constructor(shortcuts: KeyboardShortcutManager, viewport: Viewport);
-    private xyAxesSnap;
-    private mapPointerEvent;
-    onEvent(event: InputEvt): boolean;
-    static fromEditor(editor: Editor): StrokeKeyboardControl;
-}

package/dist/cjs/tools/InputFilter/StrokeKeyboardControl.js

@@ -1,84 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const inputEvents_1 = require("../../inputEvents");
-const InputMapper_1 = __importDefault(require("./InputMapper"));
-const keybindings_1 = require("../keybindings");
-/**
- * Provides keyboard shortcuts that provide some amount of control over
- * drawing (e.g. snap to grid, plane lock).
- */
-class StrokeKeyboardControl extends InputMapper_1.default {
-    constructor(shortcuts, viewport) {
-        super();
-        this.shortcuts = shortcuts;
-        this.viewport = viewport;
-        this.snapToGridEnabled = false;
-        this.angleLockEnabled = false;
-        // The point at which the last pointerDown event happened (or null if
-        // no such event has occurred).
-        this.startPointCanvas = null;
-    }
-    // Snap the given pointer to the nearer of the x/y axes.
-    xyAxesSnap(pointer) {
-        if (!this.startPointCanvas) {
-            return pointer;
-        }
-        // Convert this.startPointCanvas here because the viewport might change
-        // while drawing a stroke.
-        const screenPos = this.viewport.canvasToScreen(this.startPointCanvas);
-        return pointer.lockedToXYAxesScreen(screenPos, this.viewport);
-    }
-    mapPointerEvent(event) {
-        const mapPointer = (pointer) => {
-            // Only map if there's exactly one pointer.
-            if (event.allPointers.length > 1) {
-                return pointer;
-            }
-            if (this.snapToGridEnabled) {
-                return pointer.snappedToGrid(this.viewport);
-            }
-            if (this.angleLockEnabled && this.startPointCanvas) {
-                return this.xyAxesSnap(pointer);
-            }
-            return pointer;
-        };
-        return {
-            kind: event.kind,
-            current: mapPointer(event.current),
-            allPointers: event.allPointers.map(mapPointer),
-        };
-    }
-    onEvent(event) {
-        const shortcuts = this.shortcuts;
-        if (event.kind === inputEvents_1.InputEvtType.PointerDownEvt || event.kind === inputEvents_1.InputEvtType.PointerMoveEvt || event.kind === inputEvents_1.InputEvtType.PointerUpEvt) {
-            if (event.kind === inputEvents_1.InputEvtType.PointerDownEvt) {
-                this.startPointCanvas = event.current.canvasPos;
-            }
-            event = this.mapPointerEvent(event);
-        }
-        let handled = this.emit(event);
-        if ( // Always check keyUpEvents (in case we handled the corresponding keyDown event)
-        event.kind === inputEvents_1.InputEvtType.KeyUpEvent
-            // Only handle key press events if another tool isn't handling it. We don't want
-            // snap to grid/angle lock to conflict with selection/another tool's shortcuts.
-            || (!handled && event.kind === inputEvents_1.InputEvtType.KeyPressEvent)) {
-            const isKeyPress = event.kind === inputEvents_1.InputEvtType.KeyPressEvent;
-            if (shortcuts.matchesShortcut(keybindings_1.snapToGridKeyboardShortcutId, event)) {
-                this.snapToGridEnabled = isKeyPress;
-                handled = true;
-            }
-            if (shortcuts.matchesShortcut(keybindings_1.lineLockKeyboardShortcutId, event)) {
-                this.angleLockEnabled = isKeyPress;
-                handled = true;
-            }
-        }
-        return handled;
-    }
-    static fromEditor(editor) {
-        return new StrokeKeyboardControl(editor.shortcuts, editor.viewport);
-    }
-}
-exports.default = StrokeKeyboardControl;

package/dist/cjs/tools/PanZoom.d.ts

@@ -1,119 +0,0 @@
-import { Editor } from '../Editor';
-import { Point2 } from '@js-draw/math';
-import Pointer from '../Pointer';
-import { KeyPressEvent, PointerEvt, WheelEvt } from '../inputEvents';
-import BaseTool from './BaseTool';
-interface PinchData {
-    canvasCenter: Point2;
-    screenCenter: Point2;
-    angle: number;
-    dist: number;
-}
-export declare enum PanZoomMode {
-    /** Touch gestures with a single pointer. Ignores non-touch gestures. */
-    OneFingerTouchGestures = 1,
-    /** Touch gestures with exactly two pointers. Ignores non-touch gestures. */
-    TwoFingerTouchGestures = 2,
-    RightClickDrags = 4,
-    /** Single-pointer gestures of *any* type (including touch). */
-    SinglePointerGestures = 8,
-    /** Keyboard navigation (e.g. LeftArrow to move left). */
-    Keyboard = 16,
-    /** If provided, prevents **this** tool from rotating the viewport (other tools may still do so). */
-    RotationLocked = 32
-}
-/**
- * This tool moves the viewport in response to touchpad, touchscreen, mouse, and keyboard events.
- *
- * Which events are handled, and which are skipped, are determined by the tool's `mode`. For example,
- * a `PanZoom` tool with `mode = PanZoomMode.TwoFingerTouchGestures|PanZoomMode.RightClickDrags` would
- * respond to right-click drag events and two-finger touch gestures.
- *
- * @see {@link setModeEnabled}
- */
-export default class PanZoom extends BaseTool {
-    private editor;
-    private mode;
-    private transform;
-    private readonly initialRotationSnapAngle;
-    private readonly afterRotationStartSnapAngle;
-    private readonly pinchZoomStartThreshold;
-    private startTouchDist;
-    private lastTouchDist;
-    private lastScreenCenter;
-    private lastTimestamp;
-    private lastPointerDownTimestamp;
-    private initialTouchAngle;
-    private initialViewportRotation;
-    private initialViewportScale;
-    private isScaling;
-    private isRotating;
-    private inertialScroller;
-    private velocity;
-    constructor(editor: Editor, mode: PanZoomMode, description: string);
-    canReceiveInputInReadOnlyEditor(): boolean;
-    computePinchData(p1: Pointer, p2: Pointer): PinchData;
-    private allPointersAreOfType;
-    onPointerDown({ allPointers: pointers, current: currentPointer }: PointerEvt): boolean;
-    private updateVelocity;
-    private getCenterDelta;
-    private toSnappedRotationDelta;
-    /**
-     * Given a scale update, `scaleFactor`, returns a new scale factor snapped
-     * to a power of two (if within some tolerance of that scale).
-     */
-    private toSnappedScaleFactor;
-    private handleTwoFingerMove;
-    private handleOneFingerMove;
-    onPointerMove({ allPointers }: PointerEvt): void;
-    onPointerUp(event: PointerEvt): void;
-    onGestureCancel(): void;
-    private updateTransform;
-    onWheel({ delta, screenPos }: WheelEvt): boolean;
-    onKeyPress(event: KeyPressEvent): boolean;
-    private isRotationLocked;
-    /**
-     * Changes the types of gestures used by this pan/zoom tool.
-     *
-     * @see {@link PanZoomMode} {@link setMode}
-     *
-     * @example
-     * ```ts,runnable
-     * import { Editor, PanZoomTool, PanZoomMode } from 'js-draw';
-     *
-     * const editor = new Editor(document.body);
-     *
-     * // By default, there are multiple PanZoom tools that handle different events.
-     * // This gets all PanZoomTools.
-     * const panZoomToolList = editor.toolController.getMatchingTools(PanZoomTool);
-     *
-     * // The first PanZoomTool is the highest priority -- by default,
-     * // this tool is responsible for handling multi-finger touch gestures.
-     * //
-     * // Lower-priority PanZoomTools handle one-finger touch gestures and
-     * // key-presses.
-     * const panZoomTool = panZoomToolList[0];
-     *
-     * // Lock rotation for multi-finger touch gestures.
-     * panZoomTool.setModeEnabled(PanZoomMode.RotationLocked, true);
-     * ```
-     */
-    setModeEnabled(mode: PanZoomMode, enabled: boolean): void;
-    /**
-     * Sets all modes for this tool using a bitmask.
-     *
-     * @see {@link setModeEnabled}
-     *
-     * @example
-     * ```ts
-     * tool.setMode(PanZoomMode.RotationLocked|PanZoomMode.TwoFingerTouchGestures);
-     * ```
-     */
-    setMode(mode: PanZoomMode): void;
-    /**
-     * Returns a bitmask indicating the currently-enabled modes.
-     * @see {@link setModeEnabled}
-     */
-    getMode(): PanZoomMode;
-}
-export {};