vevet 5.0.10 → 5.1.0

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

@@ -1,5 +1,6 @@
 import { Snap } from '..';
-import { ISwipeCoords, Swipe } from '@/components/Swipe';
+import { ISwipeCoords, ISwipeMatrix, Swipe } from '@/components/Swipe';
+import { clamp } from '@/utils';
 
 export class SnapSwipe {
   /** Swipe events */
@@ -14,22 +15,32 @@ export class SnapSwipe {
   constructor(protected snap: Snap) {
     snap.on('destroy', () => this._destroy(), { protected: true });
 
-    this._startIndex = snap.activeIndex;
+    const { props, activeIndex } = snap;
+
+    this._startIndex = activeIndex;
     this._startTime = 0;
 
     this._swipe = new Swipe({
       container: snap.eventsEmitter,
-      enabled: snap.props.swipe,
-      grabCursor: snap.props.grabCursor,
-      minTime: snap.props.swipeMinTime,
-      threshold: snap.props.swipeThreshold,
+      enabled: props.swipe,
+      grabCursor: props.grabCursor,
+      minTime: props.swipeMinTime,
+      threshold: props.swipeThreshold,
       axis: this.axis,
-      inertia: snap.props.freemode,
+      inertia: false,
+      inertiaDuration: props.swipeInertiaDuration,
+      inertiaRatio: props.swipeInertiaRatio,
+      velocityModifier: this._handleVelocityModifier.bind(this),
+      inertiaDistanceThreshold: 5,
     });
 
     this._swipe.on('start', (data) => this._handleSwipeStart(data));
     this._swipe.on('move', (data) => this._handleSwipeMove(data));
     this._swipe.on('end', (data) => this._handleSwipeEnd(data));
+    this._swipe.on('inertiaStart', () => this._handleSwipeInertiaStart());
+    this._swipe.on('inertiaEnd', () => this._handleSwipeInertiaEnd());
+    this._swipe.on('inertiaFail', () => this._handleSwipeInertiaFail());
+    this._swipe.on('inertiaCancel', () => this._handleSwipeInertiaCancel());
 
     // on props change
     snap.on(
@@ -41,7 +52,8 @@ export class SnapSwipe {
           minTime: snap.props.swipeMinTime,
           threshold: snap.props.swipeThreshold,
           axis: this.axis,
-          inertia: snap.props.freemode,
+          inertiaDuration: snap.props.swipeInertiaDuration,
+          inertiaRatio: snap.props.swipeInertiaRatio,
         });
       },
       { protected: true },
@@ -60,6 +72,11 @@ export class SnapSwipe {
     return this._swipe.isSwiping;
   }
 
+  /** Check if inertia is active */
+  get hasInertia() {
+    return this._swipe.hasInertia;
+  }
+
   /** Detect if swipe is short */
   get isShort() {
     const { props } = this.snap;
@@ -83,6 +100,47 @@ export class SnapSwipe {
     return this.axis === 'x' ? this._swipe.diff.x : this._swipe.diff.y;
   }
 
+  protected _handleVelocityModifier(source: ISwipeMatrix) {
+    const { props, track, activeSlide, domSize } = this.snap;
+    const { coord, size: slideSize } = activeSlide;
+
+    // Simple freemode
+
+    if (props.freemode === true) {
+      return source;
+    }
+
+    // Update target coordinate
+
+    track.target = track.current;
+
+    // Sticky freemode
+
+    if (props.freemode === 'sticky' && !track.isSlideScrolling) {
+      const virtualCoord = track.loopedCurrent - source[this.axis];
+
+      const magnet = this.snap.getNearestMagnet(virtualCoord);
+
+      if (!magnet) {
+        return source;
+      }
+
+      const newVelocity = track.loopedCurrent - virtualCoord - magnet.diff;
+
+      return {
+        ...source,
+        [this.axis]: newVelocity,
+      };
+    }
+
+    // Freemode: false, when slides are scrolled
+
+    const value = clamp(source[this.axis], -coord, domSize - slideSize - coord);
+    const output = { ...source, [this.axis]: value };
+
+    return output;
+  }
+
   /**
    * Handles swipe `start` event.
    */
@@ -109,26 +167,28 @@ export class SnapSwipe {
    */
   protected _handleSwipeMove(coords: ISwipeCoords) {
     const { snap } = this;
-    const { swipeSpeed, followSwipe: shouldFollow } = snap.props;
+    const { props, track, callbacks } = snap;
+    const { followSwipe: shouldFollow } = props;
 
-    if (!shouldFollow) {
+    if (!shouldFollow && !track.isSlideScrolling) {
       return;
     }
 
-    // Normalize wheel data
+    // Normalize swipe delta
     const swipeDelta = this.axis === 'x' ? coords.step.x : coords.step.y;
-    const delta = swipeDelta * -swipeSpeed;
+    const speed = this.hasInertia ? 1 : props.swipeSpeed;
+    const delta = swipeDelta * -speed;
 
     // Update track target
-    snap.track.iterateTarget(delta);
+    track.iterateTarget(delta);
 
-    // Clamp target if inertia active
+    // Clamp target if inertia is animating
     if (this._swipe.hasInertia) {
-      snap.track.clampTarget();
+      track.clampTarget();
     }
 
     // Emit move callbacks
-    snap.callbacks.emit('swipe', coords);
+    callbacks.emit('swipe', coords);
   }
 
   /** Handles swipe `end` event */
@@ -142,18 +202,46 @@ export class SnapSwipe {
     this.snap.callbacks.emit('swipeEnd', coords);
   }
 
+  /** Handles swipe inertia start */
+  protected _handleSwipeInertiaStart() {
+    this.snap.callbacks.emit('swipeInertiaStart', undefined);
+  }
+
+  /** Handles swipe inertia end */
+  protected _handleSwipeInertiaEnd() {
+    this.snap.callbacks.emit('swipeInertiaEnd', undefined);
+  }
+
+  /** Handles swipe inertia fail */
+  protected _handleSwipeInertiaFail() {
+    const { snap } = this;
+
+    if (snap.props.freemode === 'sticky' && !snap.track.isSlideScrolling) {
+      if (this.isShort) {
+        this._endShort();
+      } else {
+        snap.stick();
+      }
+    }
+
+    this.snap.callbacks.emit('swipeInertiaFail', undefined);
+  }
+
+  /** Handles swipe inertia cancel */
+  protected _handleSwipeInertiaCancel() {
+    this.snap.callbacks.emit('swipeInertiaCancel', undefined);
+  }
+
   /** End swipe action */
   protected _end() {
     const { snap, _swipe: swipe } = this;
     const { props, track } = snap;
 
-    if (!props.followSwipe) {
-      this._endNoFollow();
-
-      return;
-    }
-
+    // Handle freemode
     if (props.freemode) {
+      this._swipe.updateProps({ inertia: true });
+
+      // Clamp & stick if out of bounds
       if (
         !track.canLoop &&
         (track.target < track.min || track.target > track.max)
@@ -162,18 +250,43 @@ export class SnapSwipe {
         snap.stick();
       }
 
+      // End short swipe
+      if (this.isShort && props.freemode === 'sticky') {
+        this._swipe.updateProps({ inertia: false });
+        swipe.cancelInertia();
+
+        this._endShort();
+      }
+
       return;
     }
 
-    if (snap.track.isSlideScrolling) {
+    // Enable inertia if active slide is being scrolled
+    if (track.isSlideScrolling) {
+      this._swipe.updateProps({ inertia: true });
+
       return;
     }
 
+    // Disable inertia
+    this._swipe.updateProps({ inertia: false });
+
+    // Return if followSwipe is disabled
+    if (!props.followSwipe) {
+      this._endNoFollow();
+
+      return;
+    }
+
+    // Short swipe
     if (this.isShort) {
       this._endShort();
-    } else {
-      snap.stick();
+
+      return;
     }
+
+    // Or just stick to the nearest slide
+    snap.stick();
   }
 
   /** End short swipe */

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

@@ -71,4 +71,16 @@ export interface ISnapSwipeProps {
    * @default 0
    */
   swipeMinTime?: number;
+
+  /**
+   * Inertia duration.
+   * @default `(distance) => clamp(distance, 500, 2000)`
+   */
+  swipeInertiaDuration?: (distance: number) => number;
+
+  /**
+   * Inertia strength.
+   * @default 0.3
+   */
+  swipeInertiaRatio?: number;
 }

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

@@ -44,7 +44,7 @@ export class SnapTrack {
 
   /** Get looped current value */
   get loopedCurrent() {
-    return this.canLoop ? loop(this.current, this.min, this.max) : this.current;
+    return this.loopCoord(this.current);
   }
 
   /** Get track offset */
@@ -59,6 +59,11 @@ export class SnapTrack {
     return Math.floor(this.current / this.max);
   }
 
+  /** Loop a coordinate if can loop */
+  public loopCoord(coord: number) {
+    return this.canLoop ? loop(coord, this.min, this.max) : coord;
+  }
+
   /** Interpolate the current track value */
   public lerp(factor: number) {
     let { target } = this;
@@ -83,6 +88,15 @@ export class SnapTrack {
 
     // Interpolate current value
 
+    const rest = Math.abs(this.current - target);
+    const fastThreshold = 5;
+
+    if (rest < fastThreshold) {
+      const fastProgress = 1 - rest / fastThreshold;
+      const additionalFactor = (1 - factor) / 3;
+      factor += additionalFactor * fastProgress;
+    }
+
     this.current = lerp(this.current, target, factor, 0.000001);
   }