js-draw 0.10.2 → 0.10.3

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

@@ -25,12 +25,13 @@ export default class PanZoom extends BaseTool {
     private lastDist;
     private lastScreenCenter;
     private lastTimestamp;
+    private lastPointerDownTimestamp;
     private inertialScroller;
     private velocity;
     constructor(editor: Editor, mode: PanZoomMode, description: string);
     computePinchData(p1: Pointer, p2: Pointer): PinchData;
     private allPointersAreOfType;
-    onPointerDown({ allPointers: pointers }: PointerEvt): boolean;
+    onPointerDown({ allPointers: pointers, current: currentPointer }: PointerEvt): boolean;
     private updateVelocity;
     private getCenterDelta;
     private handleTwoFingerMove;

package/dist/src/tools/PanZoom.js

@@ -37,19 +37,19 @@ class InertialScroller {
             if (this.running) {
                 return;
             }
-            let currentVelocity = this.initialVelocity;
+            this.currentVelocity = this.initialVelocity;
             let lastTime = (new Date()).getTime();
             this.running = true;
-            const maxSpeed = 8000; // units/s
+            const maxSpeed = 5000; // units/s
             const minSpeed = 200; // units/s
-            if (currentVelocity.magnitude() > maxSpeed) {
-                currentVelocity = currentVelocity.normalized().times(maxSpeed);
+            if (this.currentVelocity.magnitude() > maxSpeed) {
+                this.currentVelocity = this.currentVelocity.normalized().times(maxSpeed);
             }
-            while (this.running && currentVelocity.magnitude() > minSpeed) {
+            while (this.running && this.currentVelocity.magnitude() > minSpeed) {
                 const nowTime = (new Date()).getTime();
                 const dt = (nowTime - lastTime) / 1000;
-                currentVelocity = currentVelocity.times(Math.pow(1 / 8, dt));
-                this.scrollBy(currentVelocity.times(dt));
+                this.currentVelocity = this.currentVelocity.times(Math.pow(1 / 8, dt));
+                this.scrollBy(this.currentVelocity.times(dt));
                 yield untilNextAnimationFrame();
                 lastTime = nowTime;
             }
@@ -58,6 +58,12 @@ class InertialScroller {
             }
         });
     }
+    getCurrentVelocity() {
+        if (!this.running) {
+            return null;
+        }
+        return this.currentVelocity;
+    }
     stop() {
         if (this.running) {
             this.running = false;
@@ -71,6 +77,7 @@ export default class PanZoom extends BaseTool {
         this.editor = editor;
         this.mode = mode;
         this.transform = null;
+        this.lastPointerDownTimestamp = 0;
         this.inertialScroller = null;
         this.velocity = null;
     }
@@ -86,10 +93,13 @@ export default class PanZoom extends BaseTool {
     allPointersAreOfType(pointers, kind) {
         return pointers.every(pointer => pointer.device === kind);
     }
-    onPointerDown({ allPointers: pointers }) {
-        var _a, _b;
+    onPointerDown({ allPointers: pointers, current: currentPointer }) {
+        var _a, _b, _c, _d;
         let handlingGesture = false;
-        (_a = this.inertialScroller) === null || _a === void 0 ? void 0 : _a.stop();
+        const inertialScrollerVelocity = (_b = (_a = this.inertialScroller) === null || _a === void 0 ? void 0 : _a.getCurrentVelocity()) !== null && _b !== void 0 ? _b : Vec2.zero;
+        (_c = this.inertialScroller) === null || _c === void 0 ? void 0 : _c.stop();
+        this.velocity = inertialScrollerVelocity;
+        this.lastPointerDownTimestamp = currentPointer.timeStamp;
         const allAreTouch = this.allPointersAreOfType(pointers, PointerDevice.Touch);
         const isRightClick = this.allPointersAreOfType(pointers, PointerDevice.RightButtonMouse);
         if (allAreTouch && pointers.length === 2 && this.mode & PanZoomMode.TwoFingerTouchGestures) {
@@ -107,22 +117,24 @@ export default class PanZoom extends BaseTool {
         }
         if (handlingGesture) {
             this.lastTimestamp = (new Date()).getTime();
-            (_b = this.transform) !== null && _b !== void 0 ? _b : (this.transform = Viewport.transformBy(Mat33.identity));
+            (_d = this.transform) !== null && _d !== void 0 ? _d : (this.transform = Viewport.transformBy(Mat33.identity));
             this.editor.display.setDraftMode(true);
         }
         return handlingGesture;
     }
     updateVelocity(currentCenter) {
         const deltaPos = currentCenter.minus(this.lastScreenCenter);
-        const deltaTime = ((new Date()).getTime() - this.lastTimestamp) / 1000;
-        // We divide by deltaTime. Don't divide by zero.
-        if (deltaTime === 0) {
-            return;
-        }
+        let deltaTime = ((new Date()).getTime() - this.lastTimestamp) / 1000;
         // Ignore duplicate events, unless there has been enough time between them.
         if (deltaPos.magnitude() === 0 && deltaTime < 0.1) {
             return;
         }
+        // We divide by deltaTime. Don't divide by zero.
+        if (deltaTime === 0) {
+            return;
+        }
+        // Don't divide by almost zero, either
+        deltaTime = Math.max(deltaTime, 0.01);
         const currentVelocity = deltaPos.times(1 / deltaTime);
         let smoothedVelocity = currentVelocity;
         if (this.velocity) {
@@ -184,7 +196,11 @@ export default class PanZoom extends BaseTool {
             this.transform = null;
             this.velocity = Vec2.zero;
         };
-        const shouldInertialScroll = event.current.device === PointerDevice.Touch && event.allPointers.length === 1;
+        const minInertialScrollDt = 30;
+        const shouldInertialScroll = event.current.device === PointerDevice.Touch
+            && event.allPointers.length === 1
+            && this.velocity !== null
+            && event.current.timeStamp - this.lastPointerDownTimestamp > minInertialScrollDt;
         if (shouldInertialScroll && this.velocity !== null) {
             // If the user drags the screen, then stops, then lifts the pointer,
             // we want the final velocity to reflect the stop at the end (so the velocity

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.10.2",
+	"version": "0.10.3",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
 	"main": "./dist/src/lib.d.ts",
 	"types": "./dist/src/lib.js",
@@ -83,26 +83,26 @@
 	},
 	"devDependencies": {
 		"@types/bezier-js": "^4.1.0",
-		"@types/jest": "^29.2.3",
+		"@types/jest": "^29.2.5",
 		"@types/jsdom": "^20.0.1",
-		"@types/node": "^18.11.9",
+		"@types/node": "^18.11.18",
 		"@typescript-eslint/eslint-plugin": "^5.44.0",
 		"@typescript-eslint/parser": "^5.44.0",
-		"css-loader": "^6.7.2",
-		"eslint": "^8.28.0",
-		"husky": "^8.0.2",
-		"jest": "^29.2.3",
+		"css-loader": "^6.7.3",
+		"eslint": "^8.31.0",
+		"husky": "^8.0.3",
+		"jest": "^29.3.1",
 		"jest-environment-jsdom": "^29.3.1",
 		"jsdom": "^20.0.3",
-		"lint-staged": "^13.0.3",
+		"lint-staged": "^13.1.0",
 		"pinst": "^3.0.0",
 		"style-loader": "^3.3.1",
 		"terser-webpack-plugin": "^5.3.6",
 		"ts-jest": "^29.0.3",
-		"ts-loader": "^9.4.1",
+		"ts-loader": "^9.4.2",
 		"ts-node": "^10.9.1",
-		"typedoc": "^0.23.21",
-		"typescript": "^4.9.3",
+		"typedoc": "^0.23.23",
+		"typescript": "^4.9.4",
 		"webpack": "^5.75.0"
 	},
 	"bugs": {

package/src/tools/PanZoom.ts

@@ -30,6 +30,7 @@ type ScrollByCallback = (delta: Vec2) => void;
 
 class InertialScroller {
 	private running: boolean = false;
+	private currentVelocity: Vec2;
 
 	public constructor(
 		private initialVelocity: Vec2,
@@ -44,22 +45,22 @@ class InertialScroller {
 			return;
 		}
 
-		let currentVelocity = this.initialVelocity;
+		this.currentVelocity = this.initialVelocity;
 		let lastTime = (new Date()).getTime();
 		this.running = true;
 
-		const maxSpeed = 8000; // units/s
+		const maxSpeed = 5000; // units/s
 		const minSpeed = 200; // units/s
-		if (currentVelocity.magnitude() > maxSpeed) {
-			currentVelocity = currentVelocity.normalized().times(maxSpeed);
+		if (this.currentVelocity.magnitude() > maxSpeed) {
+			this.currentVelocity = this.currentVelocity.normalized().times(maxSpeed);
 		}
 
-		while (this.running && currentVelocity.magnitude() > minSpeed) {
+		while (this.running && this.currentVelocity.magnitude() > minSpeed) {
 			const nowTime = (new Date()).getTime();
 			const dt = (nowTime - lastTime) / 1000;
 
-			currentVelocity = currentVelocity.times(Math.pow(1/8, dt));
-			this.scrollBy(currentVelocity.times(dt));
+			this.currentVelocity = this.currentVelocity.times(Math.pow(1/8, dt));
+			this.scrollBy(this.currentVelocity.times(dt));
 
 			await untilNextAnimationFrame();
 			lastTime = nowTime;
@@ -70,6 +71,14 @@ class InertialScroller {
 		}
 	}
 
+	public getCurrentVelocity(): Vec2|null {
+		if (!this.running) {
+			return null;
+		}
+
+		return this.currentVelocity;
+	}
+
 	public stop(): void {
 		if (this.running) {
 			this.running = false;
@@ -85,6 +94,7 @@ export default class PanZoom extends BaseTool {
 	private lastDist: number;
 	private lastScreenCenter: Point2;
 	private lastTimestamp: number;
+	private lastPointerDownTimestamp: number = 0;
 
 	private inertialScroller: InertialScroller|null = null;
 	private velocity: Vec2|null = null;
@@ -108,10 +118,14 @@ export default class PanZoom extends BaseTool {
 		return pointers.every(pointer => pointer.device === kind);
 	}
 
-	public onPointerDown({ allPointers: pointers }: PointerEvt): boolean {
+	public onPointerDown({ allPointers: pointers, current: currentPointer }: PointerEvt): boolean {
 		let handlingGesture = false;
 
+		const inertialScrollerVelocity = this.inertialScroller?.getCurrentVelocity() ?? Vec2.zero;
 		this.inertialScroller?.stop();
+		this.velocity = inertialScrollerVelocity;
+
+		this.lastPointerDownTimestamp = currentPointer.timeStamp;
 
 		const allAreTouch = this.allPointersAreOfType(pointers, PointerDevice.Touch);
 		const isRightClick = this.allPointersAreOfType(pointers, PointerDevice.RightButtonMouse);
@@ -142,17 +156,19 @@ export default class PanZoom extends BaseTool {
 
 	private updateVelocity(currentCenter: Point2) {
 		const deltaPos = currentCenter.minus(this.lastScreenCenter);
-		const deltaTime = ((new Date()).getTime() - this.lastTimestamp) / 1000;
+		let deltaTime = ((new Date()).getTime() - this.lastTimestamp) / 1000;
 
+		// Ignore duplicate events, unless there has been enough time between them.
+		if (deltaPos.magnitude() === 0 && deltaTime < 0.1) {
+			return;
+		}
 		// We divide by deltaTime. Don't divide by zero.
 		if (deltaTime === 0) {
 			return;
 		}
 
-		// Ignore duplicate events, unless there has been enough time between them.
-		if (deltaPos.magnitude() === 0 && deltaTime < 0.1) {
-			return;
-		}
+		// Don't divide by almost zero, either
+		deltaTime = Math.max(deltaTime, 0.01);
 
 		const currentVelocity = deltaPos.times(1 / deltaTime);
 		let smoothedVelocity = currentVelocity;
@@ -233,8 +249,12 @@ export default class PanZoom extends BaseTool {
 			this.velocity = Vec2.zero;
 		};
 
+		const minInertialScrollDt = 30;
 		const shouldInertialScroll =
-				event.current.device === PointerDevice.Touch && event.allPointers.length === 1;
+				event.current.device === PointerDevice.Touch
+				&& event.allPointers.length === 1
+				&& this.velocity !== null
+				&& event.current.timeStamp - this.lastPointerDownTimestamp > minInertialScrollDt;
 
 		if (shouldInertialScroll && this.velocity !== null) {
 			// If the user drags the screen, then stops, then lifts the pointer,