vevet 5.0.10 → 5.1.0

package/src/components/Snap/Wheel/index.ts

@@ -1,5 +1,8 @@
-import { addEventListener, normalizeWheel } from '@/utils';
+import { addEventListener, clamp, normalizeWheel } from '@/utils';
 import { Snap } from '..';
+import { initVevet } from '@/global/initVevet';
+
+const deltasCount = 6;
 
 export class SnapWheel {
   /** Listeners to destruct */
@@ -11,11 +14,11 @@ export class SnapWheel {
   /** Debounce wheel end event */
   protected _debounceEnd?: NodeJS.Timeout;
 
-  /** Accummulated wheel value for `followWheel=false` */
-  protected _accum = 0;
+  /** Deltas history */
+  protected _deltas: number[] = [];
 
   /** Last time wheel event was fired */
-  protected _lastNoFollowTime = 0;
+  protected _lastWheelTime = 0;
 
   constructor(protected _snap: Snap) {
     _snap.on('destroy', () => this._destroy(), { protected: true });
@@ -25,46 +28,53 @@ export class SnapWheel {
     );
   }
 
+  /** Destroy wheel listeners */
+  protected _destroy() {
+    this._destructor();
+
+    if (this._debounceEnd) {
+      clearTimeout(this._debounceEnd);
+    }
+  }
+
   /** Snap component */
   protected get snap() {
     return this._snap;
   }
 
+  /** Get absolute deltas */
+  protected get absDeltas() {
+    return this._deltas.map((d) => Math.abs(d));
+  }
+
+  /** Get last wheel time */
+  protected get lastWheelTime() {
+    return this._lastWheelTime;
+  }
+
   /**
    * Handles wheel events
    */
   protected _handleWheel(event: WheelEvent) {
     const { snap } = this;
+    const { props } = snap;
 
-    if (!snap.props.wheel) {
+    if (!props.wheel) {
       return;
     }
 
     event.preventDefault();
 
-    const { wheelAxis } = snap.props;
-
-    // Start callback
-    if (!this._hasStarted) {
-      this._hasStarted = true;
-      snap.callbacks.emit('wheelStart', undefined);
-    }
-
-    // Move callback
-    snap.callbacks.emit('wheel', event);
-
-    // Normalize wheel data
-    const axis = wheelAxis === 'auto' ? snap.axis : wheelAxis;
+    // Get delta
     const wheelData = normalizeWheel(event);
-    const wheelDelta = axis === 'x' ? wheelData.pixelX : wheelData.pixelY;
-    const delta = wheelDelta * snap.props.wheelSpeed;
+    const wheelAxis = props.wheelAxis === 'auto' ? snap.axis : props.wheelAxis;
+    const delta = wheelAxis === 'x' ? wheelData.pixelX : wheelData.pixelY;
 
-    // Update wheel target
-    if (snap.props.followWheel) {
-      this._handleFollow(delta);
-    } else {
-      this._handleNotFollow(delta);
-    }
+    // Start
+    this._handleStart(delta);
+
+    // Start
+    this._handleMove(delta, event);
 
     // Debounce End
     if (this._debounceEnd) {
@@ -72,8 +82,40 @@ export class SnapWheel {
     }
 
     // End callback
-    if (snap.props.stickOnWheelEnd) {
-      this._debounceEnd = setTimeout(() => this._handleEnd(), 100);
+    this._debounceEnd = setTimeout(() => this._handleEnd(), 200);
+  }
+
+  /** Handle wheel start */
+  protected _handleStart(delta: number) {
+    if (this._hasStarted || Math.abs(delta) < 2) {
+      return;
+    }
+
+    this._hasStarted = true;
+
+    this.snap.callbacks.emit('wheelStart', undefined);
+  }
+
+  /** Handle wheel move */
+  protected _handleMove(delta: number, event: WheelEvent) {
+    if (!this._hasStarted) {
+      return;
+    }
+
+    const { snap } = this;
+    const { props } = snap;
+
+    // Save delta
+    this._addDelta(delta);
+
+    // Move callback
+    snap.callbacks.emit('wheel', event);
+
+    // Handle wheel logic
+    if (props.followWheel) {
+      this._handleFollow(delta);
+    } else {
+      this._handleNoFollow(delta);
     }
   }
 
@@ -85,71 +127,260 @@ export class SnapWheel {
     snap.cancelTransition();
 
     // Update track target
-    snap.track.iterateTarget(delta);
+    snap.track.iterateTarget(delta * snap.props.wheelSpeed);
     snap.track.clampTarget();
   }
 
   /** Handle `followWheel=false` */
-  protected _handleNotFollow(delta: number) {
-    const { snap } = this;
+  protected _handleNoFollow(delta: number) {
+    // vars
+    const { snap, isTouchPad, isGainingDelta } = this;
+    const { track, activeSlide, domSize } = snap;
 
-    if (Math.abs(delta) < 10) {
+    // Detect wheel throttling
+    if (this._detectNoFollowThrottle()) {
       return;
     }
 
-    if (snap.props.wheelThrottle === 'auto' && snap.isTransitioning) {
-      return;
+    // Detect if need to throttle or follow
+
+    let shouldFollow = false;
+    let isThrottled = true;
+
+    if (!shouldFollow) {
+      if (track.isSlideScrolling) {
+        if (activeSlide.coord === 0) {
+          if (delta > 0) {
+            shouldFollow = true;
+          }
+        } else if (activeSlide.coord === domSize - activeSlide.size) {
+          if (delta < 0) {
+            shouldFollow = true;
+          }
+        } else {
+          shouldFollow = true;
+          isThrottled = false;
+        }
+      }
     }
 
-    const timeDiff = +new Date() - this._lastNoFollowTime;
+    // Throttle
+
+    if (isThrottled) {
+      if (
+        !isTouchPad ||
+        (isTouchPad && (isGainingDelta || this.absDeltas.length === 1))
+      ) {
+        const direction = Math.sign(delta);
+
+        if (shouldFollow) {
+          snap.cancelTransition();
+
+          track.iterateTarget(direction);
+          track.clampTarget();
+
+          if (!isTouchPad) {
+            track.current = track.target;
+          }
+        } else if (direction === 1) {
+          if (!snap.props.loop && snap.activeIndex === snap.slides.length - 1) {
+            return;
+          }
+
+          this._lastWheelTime = +new Date();
+
+          snap.next();
+        } else {
+          if (!snap.props.loop && snap.activeIndex === 0) {
+            return;
+          }
+
+          this._lastWheelTime = +new Date();
+
+          snap.prev();
+        }
+      }
 
-    if (
-      typeof snap.props.wheelThrottle === 'number' &&
-      timeDiff < snap.props.wheelThrottle
-    ) {
       return;
     }
 
-    this._accum += Math.abs(delta) / 2;
-    const direction = Math.sign(delta);
+    // Follow wheel
 
-    if (Math.abs(this._accum) < 100) {
-      return;
+    if (shouldFollow) {
+      snap.cancelTransition();
+
+      const deltaWithSpeed = delta * snap.props.wheelSpeed;
+
+      const start = Math.min(...activeSlide.magnets);
+      const end = Math.max(...activeSlide.magnets);
+
+      const loopedTarget = track.loopCoord(track.target);
+
+      const clampedLoopedTarget = clamp(
+        loopedTarget + deltaWithSpeed,
+        start,
+        end,
+      );
+
+      track.target += clampedLoopedTarget - loopedTarget;
+      track.clampTarget();
     }
+  }
 
-    if (direction === 1) {
-      if (!snap.next()) {
-        return;
-      }
-    } else if (!snap.prev()) {
-      return;
+  /** Detect if wheel should be throttled */
+  protected _detectNoFollowThrottle() {
+    const { isTouchPad, snap } = this;
+    const { wheelThrottle } = snap.props;
+    const timeDiff = +new Date() - this._lastWheelTime;
+
+    // NUMBER
+
+    if (typeof wheelThrottle === 'number') {
+      return timeDiff < wheelThrottle;
     }
 
-    this._accum = 0;
-    this._lastNoFollowTime = +new Date();
+    // AUTO
+
+    if (isTouchPad) {
+      return this.snap.isTransitioning;
+    }
+
+    const visibleScrollableSlides = snap.scrollableSlides.filter(
+      (slide) => slide.isVisible,
+    );
+
+    if (visibleScrollableSlides.length && snap.isTransitioning) {
+      return true;
+    }
+
+    if (timeDiff < 500) {
+      return true;
+    }
+
+    return false;
   }
 
   /** Handle wheel end */
   protected _handleEnd() {
+    if (!this._hasStarted) {
+      return;
+    }
+
     const { snap } = this;
-    const { freemode: isFreemode, followWheel: isFollow } = snap.props;
+    const { props, activeSlide, track } = snap;
+
+    const lastThreeDeltas = this._deltas.slice(-3).reduce((a, b) => a + b, 0);
 
+    // Reset states
+
+    this._deltas = [];
     this._hasStarted = false;
-    this._accum = 0;
 
-    if (!isFreemode && isFollow) {
-      snap.stick();
+    // Stick to the nearest magnet
+
+    if (!props.freemode || props.freemode === 'sticky') {
+      if (props.followWheel && props.stickOnWheelEnd) {
+        // Classic stick when scrolling stops
+
+        const slideThreshold =
+          Math.abs(props.stickOnWheelEndThreshold) / activeSlide.size;
+
+        if (
+          activeSlide.progress > slideThreshold &&
+          !track.isSlideScrolling &&
+          lastThreeDeltas > 0
+        ) {
+          snap.next();
+        } else if (
+          activeSlide.progress < -slideThreshold &&
+          !track.isSlideScrolling &&
+          lastThreeDeltas < 0
+        ) {
+          snap.prev();
+        } else {
+          snap.stick();
+        }
+      } else if (!props.followWheel && !snap.isTransitioning) {
+        // Stick if something goes wrong when followWheel is disabled
+        snap.stick();
+      }
     }
 
     snap.callbacks.emit('wheelEnd', undefined);
   }
 
-  /** Destroy wheel listeners */
-  protected _destroy() {
-    this._destructor();
+  /** Save delta */
+  protected _addDelta(delta: number) {
+    if (this._deltas.length >= deltasCount) {
+      this._deltas.shift();
+    }
 
-    if (this._debounceEnd) {
-      clearTimeout(this._debounceEnd);
+    this._deltas.push(delta);
+  }
+
+  /** Detect if touchpad */
+  protected get isTouchPad() {
+    return !this.isStableDelta || this.isSmallDelta;
+  }
+
+  /** Detects if deltas are stable */
+  protected get isStableDelta() {
+    const deltas = this.absDeltas;
+    const precision = 0.8;
+
+    // get difference between deltas
+    const diffs = deltas.map((d, i) => {
+      const prev = deltas[i - 1];
+      if (!deltas[i - 1]) {
+        return 0;
+      }
+
+      return d - prev;
+    });
+
+    const zeroDiffs = diffs.filter((d) => d === 0);
+
+    return zeroDiffs.length > diffs.length * precision;
+  }
+
+  /** Detects if the latest delta is small */
+  protected get isSmallDelta() {
+    const deltas = this.absDeltas;
+
+    if (deltas.length === 0) {
+      return true;
+    }
+
+    const last = deltas[deltas.length - 1];
+
+    return last < 50;
+  }
+
+  /** Detect if delta is gaining its value */
+  protected get isGainingDelta() {
+    const vevet = initVevet();
+    const deltas = this.absDeltas;
+    const precision = vevet.osName.includes('window') ? 1.5 : 1.2;
+
+    if (deltas.length < deltasCount) {
+      return false;
     }
+
+    const lastDeltas = deltas.slice(-deltasCount);
+
+    const half1 = lastDeltas.slice(0, Math.floor(lastDeltas.length / 2));
+    const half2 = lastDeltas.slice(Math.floor(lastDeltas.length / 2));
+
+    const avg1 = this._getAverage(half1);
+    const avg2 = this._getAverage(half2);
+
+    const isGaining = avg2 > avg1 * precision;
+
+    return isGaining;
+  }
+
+  /** Get average value in an array */
+  protected _getAverage(array: number[]) {
+    return array.length ? array.reduce((a, b) => a + b, 0) / array.length : 0;
   }
 }

package/src/components/Snap/Wheel/types.ts

@@ -18,7 +18,8 @@ export interface ISnapWheelProps {
   wheelAxis?: 'x' | 'y' | 'auto';
 
   /**
-   * If disabled, then slider will be animated only when you stop scrolling the wheel.
+   * If `false`, disables smooth, continuous scrolling behavior from the mouse wheel
+   * and instead updates the snap position in discrete steps (like pagination).
    * @default true
    */
   followWheel?: boolean;
@@ -27,7 +28,7 @@ export interface ISnapWheelProps {
    * Throttle wheel events, value in milliseconds.
    * Works only if `followWheel` is disabled.
    *
-   * - `auto` - value based on transition duration
+   * - `auto` - automatic detection when `wheel` is enabled
    * - `number - value in milliseconds
    *
    * @default `auto`
@@ -35,8 +36,14 @@ export interface ISnapWheelProps {
   wheelThrottle?: number | 'auto';
 
   /**
-   * Enable snapping on wheel stop
+   * Enable snapping on wheel stop. Works with `followWheel` enabled.
    * @default true
    */
   stickOnWheelEnd?: boolean;
+
+  /**
+   * Snapping threshold for `stickOnWheelEnd`
+   * @default 30
+   */
+  stickOnWheelEndThreshold?: number;
 }