Change how velocity is calculated on the new web implementation (#2443)

## Description

Changes how pointer velocity is calculated on the web. Previously, it
was using only the last two events which wasn't the best solution as the
speed of the pointer just before it's released may not represent the
speed of the swipe.

This changes it to be calculated using the same algorithm as Flutter.

## Test plan

Use the `Velocity test` example added to the app

---------

Co-authored-by: Tomek Zawadzki <tomekzawadzki98@gmail.com>

Author: j-piasecki

example/src/App.tsx

@@ -42,7 +42,8 @@ import BottomSheetNewApi from './new_api/bottom_sheet';
 import ChatHeadsNewApi from './new_api/chat_heads';
 import DragNDrop from './new_api/drag_n_drop';
 import BetterHorizontalDrawer from './new_api/betterHorizontalDrawer';
-import ManualGestures from './new_api/manualGestures/index';
+import ManualGestures from './new_api/manualGestures';
+import VelocityTest from './new_api/velocityTest';
 
 interface Example {
   name: string;
@@ -116,6 +117,7 @@ const EXAMPLES: ExamplesSection[] = [
         component: ReanimatedSimple,
       },
       { name: 'Camera', component: Camera },
+      { name: 'Velocity test', component: VelocityTest },
       { name: 'Transformations', component: Transformations },
       { name: 'Overlap parents', component: OverlapParents },
       { name: 'Overlap siblings', component: OverlapSiblings },

example/src/new_api/velocityTest/index.tsx

@@ -0,0 +1,71 @@
+import { StyleSheet, View } from 'react-native';
+import Animated, {
+  measure,
+  useAnimatedRef,
+  useAnimatedStyle,
+  useSharedValue,
+  withDecay,
+} from 'react-native-reanimated';
+
+import React from 'react';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+
+const BOX_SIZE = 120;
+
+export default function App() {
+  const aref = useAnimatedRef<View>();
+  const offsetX = useSharedValue(0);
+  const offsetY = useSharedValue(0);
+
+  const pan = Gesture.Pan()
+    .onChange((event) => {
+      offsetX.value += event.changeX;
+      offsetY.value += event.changeY;
+    })
+    .onFinalize((event) => {
+      // If we can't get view size, just ignore it. Half of the view will be
+      // able to go outside the screen
+      const size = measure(aref) ?? { width: 0, height: 0 };
+
+      offsetX.value = withDecay({
+        velocity: event.velocityX,
+        clamp: [-size.width / 2 + BOX_SIZE / 2, size.width / 2 - BOX_SIZE / 2],
+      });
+
+      offsetY.value = withDecay({
+        velocity: event.velocityY,
+        clamp: [
+          -size.height / 2 + BOX_SIZE / 2,
+          size.height / 2 - BOX_SIZE / 2,
+        ],
+      });
+    });
+
+  const animatedStyles = useAnimatedStyle(() => ({
+    transform: [{ translateX: offsetX.value }, { translateY: offsetY.value }],
+  }));
+
+  return (
+    <View style={styles.container} ref={aref}>
+      <GestureDetector gesture={pan}>
+        <Animated.View style={[styles.box, animatedStyles]} />
+      </GestureDetector>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100%',
+  },
+  box: {
+    width: BOX_SIZE,
+    height: BOX_SIZE,
+    backgroundColor: '#001A72',
+    borderRadius: 20,
+    cursor: 'grab',
+  },
+});

src/web/handlers/PanGestureHandler.ts

@@ -1,4 +1,3 @@
-import { PixelRatio } from 'react-native';
 import { State } from '../../State';
 import { DEFAULT_TOUCH_SLOP } from '../constants';
 import { AdaptedEvent, Config } from '../interfaces';
@@ -188,7 +187,6 @@ export default class PanGestureHandler extends GestureHandler {
 
   protected transformNativeEvent() {
     const rect: DOMRect = this.view.getBoundingClientRect();
-    const ratio = PixelRatio.get();
 
     const translationX: number = this.getTranslationX();
     const translationY: number = this.getTranslationY();
@@ -198,8 +196,8 @@ export default class PanGestureHandler extends GestureHandler {
       translationY: isNaN(translationY) ? 0 : translationY,
       absoluteX: this.tracker.getLastAvgX(),
       absoluteY: this.tracker.getLastAvgY(),
-      velocityX: this.velocityX * ratio * 10,
-      velocityY: this.velocityY * ratio * 10,
+      velocityX: this.velocityX,
+      velocityY: this.velocityY,
       x: this.tracker.getLastAvgX() - rect.left,
       y: this.tracker.getLastAvgY() - rect.top,
     };

src/web/tools/CircularBuffer.ts

@@ -0,0 +1,42 @@
+export default class CircularBuffer<T> {
+  private bufferSize: number;
+  private buffer: T[];
+  private index: number;
+  private actualSize: number;
+
+  constructor(size: number) {
+    this.bufferSize = size;
+    this.buffer = new Array<T>(size);
+    this.index = 0;
+    this.actualSize = 0;
+  }
+
+  public get size(): number {
+    return this.actualSize;
+  }
+
+  public push(element: T): void {
+    this.buffer[this.index] = element;
+    this.index = (this.index + 1) % this.bufferSize;
+    this.actualSize = Math.min(this.actualSize + 1, this.bufferSize);
+  }
+
+  public get(at: number): T {
+    if (this.actualSize === this.bufferSize) {
+      let index = (this.index + at) % this.bufferSize;
+      if (index < 0) {
+        index += this.bufferSize;
+      }
+
+      return this.buffer[index];
+    } else {
+      return this.buffer[at];
+    }
+  }
+
+  public clear(): void {
+    this.buffer = new Array<T>(this.bufferSize);
+    this.index = 0;
+    this.actualSize = 0;
+  }
+}

src/web/tools/LeastSquareSolver.ts

@@ -0,0 +1,182 @@
+// Implementation taken from Flutter's LeastSquareSolver
+// https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/gestures/lsq_solver.dart
+
+class Vector {
+  private offset: number;
+  private length: number;
+  private elements: number[];
+
+  constructor(length: number) {
+    this.offset = 0;
+    this.length = length;
+    this.elements = new Array<number>(length);
+  }
+
+  public static fromVOL(
+    values: number[],
+    offset: number,
+    length: number
+  ): Vector {
+    const result = new Vector(0);
+
+    result.offset = offset;
+    result.length = length;
+    result.elements = values;
+
+    return result;
+  }
+
+  public get(index: number): number {
+    return this.elements[this.offset + index];
+  }
+
+  public set(index: number, value: number): void {
+    this.elements[this.offset + index] = value;
+  }
+
+  public dot(other: Vector): number {
+    let result = 0;
+    for (let i = 0; i < this.length; i++) {
+      result += this.get(i) * other.get(i);
+    }
+    return result;
+  }
+
+  public norm() {
+    return Math.sqrt(this.dot(this));
+  }
+}
+
+class Matrix {
+  private columns: number;
+  private elements: number[];
+
+  constructor(rows: number, columns: number) {
+    this.columns = columns;
+    this.elements = new Array<number>(rows * columns);
+  }
+
+  public get(row: number, column: number): number {
+    return this.elements[row * this.columns + column];
+  }
+
+  public set(row: number, column: number, value: number): void {
+    this.elements[row * this.columns + column] = value;
+  }
+
+  public getRow(row: number): Vector {
+    return Vector.fromVOL(this.elements, row * this.columns, this.columns);
+  }
+}
+
+/// An nth degree polynomial fit to a dataset.
+class PolynomialFit {
+  /// The polynomial coefficients of the fit.
+  ///
+  /// For each `i`, the element `coefficients[i]` is the coefficient of
+  /// the `i`-th power of the variable.
+  public coefficients: number[];
+
+  /// Creates a polynomial fit of the given degree.
+  ///
+  /// There are n + 1 coefficients in a fit of degree n.
+  constructor(degree: number) {
+    this.coefficients = new Array<number>(degree + 1);
+  }
+}
+
+const precisionErrorTolerance = 1e-10;
+
+/// Uses the least-squares algorithm to fit a polynomial to a set of data.
+export default class LeastSquareSolver {
+  /// The x-coordinates of each data point.
+  private x: number[];
+  /// The y-coordinates of each data point.
+  private y: number[];
+  /// The weight to use for each data point.
+  private w: number[];
+
+  /// Creates a least-squares solver.
+  ///
+  /// The [x], [y], and [w] arguments must not be null.
+  constructor(x: number[], y: number[], w: number[]) {
+    this.x = x;
+    this.y = y;
+    this.w = w;
+  }
+
+  /// Fits a polynomial of the given degree to the data points.
+  ///
+  /// When there is not enough data to fit a curve null is returned.
+  public solve(degree: number): PolynomialFit | null {
+    if (degree > this.x.length) {
+      // Not enough data to fit a curve.
+      return null;
+    }
+
+    const result = new PolynomialFit(degree);
+
+    // Shorthands for the purpose of notation equivalence to original C++ code.
+    const m = this.x.length;
+    const n = degree + 1;
+
+    // Expand the X vector to a matrix A, pre-multiplied by the weights.
+    const a = new Matrix(n, m);
+    for (let h = 0; h < m; h++) {
+      a.set(0, h, this.w[h]);
+
+      for (let i = 1; i < n; i++) {
+        a.set(i, h, a.get(i - 1, h) * this.x[h]);
+      }
+    }
+
+    // Apply the Gram-Schmidt process to A to obtain its QR decomposition.
+
+    // Orthonormal basis, column-major ordVectorer.
+    const q = new Matrix(n, m);
+    // Upper triangular matrix, row-major order.
+    const r = new Matrix(n, m);
+
+    for (let j = 0; j < n; j += 1) {
+      for (let h = 0; h < m; h += 1) {
+        q.set(j, h, a.get(j, h));
+      }
+      for (let i = 0; i < j; i += 1) {
+        const dot = q.getRow(j).dot(q.getRow(i));
+        for (let h = 0; h < m; h += 1) {
+          q.set(j, h, q.get(j, h) - dot * q.get(i, h));
+        }
+      }
+
+      const norm = q.getRow(j).norm();
+      if (norm < precisionErrorTolerance) {
+        // Vectors are linearly dependent or zero so no solution.
+        return null;
+      }
+
+      const inverseNorm = 1.0 / norm;
+      for (let h = 0; h < m; h += 1) {
+        q.set(j, h, q.get(j, h) * inverseNorm);
+      }
+      for (let i = 0; i < n; i += 1) {
+        r.set(j, i, i < j ? 0.0 : q.getRow(j).dot(a.getRow(i)));
+      }
+    }
+
+    // Solve R B = Qt W Y to find B. This is easy because R is upper triangular.
+    // We just work from bottom-right to top-left calculating B's coefficients.
+    const wy = new Vector(m);
+    for (let h = 0; h < m; h += 1) {
+      wy.set(h, this.y[h] * this.w[h]);
+    }
+    for (let i = n - 1; i >= 0; i -= 1) {
+      result.coefficients[i] = q.getRow(i).dot(wy);
+      for (let j = n - 1; j > i; j -= 1) {
+        result.coefficients[i] -= r.get(i, j) * result.coefficients[j];
+      }
+      result.coefficients[i] /= r.get(i, i);
+    }
+
+    return result;
+  }
+}

src/web/tools/PointerTracker.ts

@@ -1,4 +1,5 @@
 import { AdaptedEvent } from '../interfaces';
+import VelocityTracker from './VelocityTracker';
 
 export interface TrackerElement {
   lastX: number;
@@ -10,11 +11,10 @@ export interface TrackerElement {
   velocityY: number;
 }
 
-// Used to scale velocity so that it is similar to velocity in Android/iOS
-const VELOCITY_FACTOR = 0.2;
 const MAX_POINTERS = 20;
 
 export default class PointerTracker {
+  private velocityTracker = new VelocityTracker();
   private trackedPointers: Map<number, TrackerElement> = new Map<
     number,
     TrackerElement
@@ -74,12 +74,11 @@ export default class PointerTracker {
 
     this.lastMovedPointerId = event.pointerId;
 
-    const dx = event.x - element.lastX;
-    const dy = event.y - element.lastY;
-    const dt = event.time - element.timeStamp;
+    this.velocityTracker.add(event);
+    const [velocityX, velocityY] = this.velocityTracker.getVelocity();
 
-    element.velocityX = (dx / dt) * 1000 * VELOCITY_FACTOR;
-    element.velocityY = (dy / dt) * 1000 * VELOCITY_FACTOR;
+    element.velocityX = velocityX;
+    element.velocityY = velocityY;
 
     element.lastX = event.x;
     element.lastY = event.y;
@@ -223,6 +222,7 @@ export default class PointerTracker {
   }
 
   public resetTracker(): void {
+    this.velocityTracker.reset();
     this.trackedPointers.clear();
     this.lastMovedPointerId = NaN;