js-draw 0.25.1 → 1.0.1

package/dist/mjs/tools/InputFilter/InputStabilizer.mjs

@@ -0,0 +1,175 @@
+import  { InputEvtType, isPointerEvt }  from '../../inputEvents.mjs';
+import  InputMapper  from './InputMapper.mjs';
+import { Vec2 } from '@js-draw/math';
+import  untilNextAnimationFrame  from '../../util/untilNextAnimationFrame.mjs';
+var StabilizerType;
+(function (StabilizerType) {
+    StabilizerType[StabilizerType["IntertialStabilizer"] = 0] = "IntertialStabilizer";
+})(StabilizerType || (StabilizerType = {}));
+const defaultOptions = {
+    kind: StabilizerType.IntertialStabilizer,
+    mass: 0.4,
+    springConstant: 100.0,
+    frictionCoefficient: 0.28,
+    maxPointDist: 10,
+    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 = 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 untilNextAnimationFrame();
+        }
+    }
+    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;
+    }
+}
+export default class InputStabilizer extends InputMapper {
+    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 (isPointerEvt(event) && event.kind !== InputEvtType.PointerUpEvt) {
+            this.lastPointerEvent = event;
+        }
+        // Only apply smoothing if there is a single pointer.
+        if (event.kind === InputEvtType.GestureCancelEvt || event.allPointers.length > 1 || this.stabilizer === null) {
+            return this.emit(event);
+        }
+        this.stabilizer.setTarget(event.current.screenPos);
+        if (event.kind === InputEvtType.PointerMoveEvt) {
+            return this.stabilizer.update(true);
+        }
+        else if (event.kind === 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: InputEvtType.PointerMoveEvt,
+            current: pointer,
+            allPointers: [pointer],
+        };
+        const handled = this.emit(event);
+        return handled;
+    }
+    onEvent(event) {
+        if (isPointerEvt(event) || event.kind === InputEvtType.GestureCancelEvt) {
+            if (event.kind === 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 === InputEvtType.PointerUpEvt || event.kind === InputEvtType.GestureCancelEvt) {
+                this.stabilizer?.cancel();
+                this.stabilizer = null;
+            }
+            return handled;
+        }
+        return this.emit(event);
+    }
+    static fromEditor(editor) {
+        return new InputStabilizer(editor.viewport);
+    }
+}

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

@@ -0,0 +1,21 @@
+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/mjs/tools/InputFilter/StrokeKeyboardControl.mjs

@@ -0,0 +1,78 @@
+import  { InputEvtType }  from '../../inputEvents.mjs';
+import  InputMapper  from './InputMapper.mjs';
+import  { lineLockKeyboardShortcutId, snapToGridKeyboardShortcutId }  from '../keybindings.mjs';
+/**
+ * Provides keyboard shortcuts that provide some amount of control over
+ * drawing (e.g. snap to grid, plane lock).
+ */
+export default class StrokeKeyboardControl extends InputMapper {
+    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 === InputEvtType.PointerDownEvt || event.kind === InputEvtType.PointerMoveEvt || event.kind === InputEvtType.PointerUpEvt) {
+            if (event.kind === 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 === 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 === InputEvtType.KeyPressEvent)) {
+            const isKeyPress = event.kind === InputEvtType.KeyPressEvent;
+            if (shortcuts.matchesShortcut(snapToGridKeyboardShortcutId, event)) {
+                this.snapToGridEnabled = isKeyPress;
+                handled = true;
+            }
+            if (shortcuts.matchesShortcut(lineLockKeyboardShortcutId, event)) {
+                this.angleLockEnabled = isKeyPress;
+                handled = true;
+            }
+        }
+        return handled;
+    }
+    static fromEditor(editor) {
+        return new StrokeKeyboardControl(editor.shortcuts, editor.viewport);
+    }
+}

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

@@ -1,7 +1,7 @@
 import { Editor } from '../Editor';
-import { Point2 } from '../math/Vec2';
+import { Point2 } from '@js-draw/math';
 import Pointer from '../Pointer';
-import { KeyPressEvent, PointerEvt, WheelEvt } from '../types';
+import { KeyPressEvent, PointerEvt, WheelEvt } from '../inputEvents';
 import BaseTool from './BaseTool';
 interface PinchData {
     canvasCenter: Point2;
@@ -21,12 +21,14 @@ export default class PanZoom extends BaseTool {
     private editor;
     private mode;
     private transform;
+    private startDist;
     private lastDist;
     private lastScreenCenter;
     private lastTimestamp;
     private lastPointerDownTimestamp;
     private initialTouchAngle;
     private initialViewportRotation;
+    private isScaling;
     private inertialScroller;
     private velocity;
     constructor(editor: Editor, mode: PanZoomMode, description: string);