vevet 5.0.10 → 5.0.11

package/src/components/Snap/index.ts

@@ -20,6 +20,7 @@ import {
   lerp,
   toPixels,
   closest,
+  clamp,
 } from '@/utils';
 import { SnapSlide } from './Slide';
 import { SnapWheel } from './Wheel';
@@ -85,11 +86,14 @@ export class Snap<
       swipeLerp: initVevet().mobile ? 1 : 0.6,
       swipeThreshold: 5,
       swipeMinTime: 0,
+      swipeInertiaDuration: (distance) => clamp(distance, 500, 2000),
+      swipeInertiaRatio: 0.3,
       wheel: false,
       wheelSpeed: 1,
       wheelAxis: 'auto',
       followWheel: true,
       wheelThrottle: 'auto',
+      wheelNoFollowThreshold: 100,
       stickOnWheelEnd: true,
       slideSize: 'auto',
     } as TRequiredProps<MutableProps>;
@@ -331,7 +335,9 @@ export class Snap<
 
     // Get lerp factor
     const lerpFactor =
-      swipe.isSwiping && props.swipeLerp ? props.swipeLerp : props.lerp;
+      (swipe.isSwiping || swipe.hasInertia) && props.swipeLerp
+        ? props.swipeLerp
+        : props.lerp;
 
     // Interpolate track value
     track.lerp(this._raf.lerpFactor(lerpFactor));
@@ -500,7 +506,7 @@ export class Snap<
   }
 
   /** Go to a definite coordinate */
-  public toCoord(coordinate: number, duration = this.props.duration) {
+  public toCoord(coordinate: number, durationProp = this.props.duration) {
     if (this.isEmpty) {
       return false;
     }
@@ -513,8 +519,14 @@ export class Snap<
     const end = coordinate;
     const diff = Math.abs(end - start);
 
+    let duration =
+      typeof durationProp === 'number' ? durationProp : durationProp(diff);
+    if (diff === 0) {
+      duration = 0;
+    }
+
     const tm = new Timeline({
-      duration: typeof duration === 'number' ? duration : duration(diff),
+      duration,
       easing: props.easing,
     });
 
@@ -573,16 +585,30 @@ export class Snap<
 
     this._targetIndex = index;
     const slideMagnets = slides[index].magnets;
+    let targetStaticMagnet = slideMagnets[0];
+
+    if (props.centered) {
+      if (direction === 'prev') {
+        targetStaticMagnet = slideMagnets[2] ?? slideMagnets[0];
+      } else if (direction === 'next') {
+        targetStaticMagnet = slideMagnets[1] ?? slideMagnets[0];
+      }
+    } else {
+      targetStaticMagnet =
+        direction === 'prev'
+          ? slideMagnets[slideMagnets.length - 1]
+          : targetStaticMagnet;
+    }
 
     // Use static magnet when not looping
 
     if (!props.loop) {
-      return this.toCoord(slideMagnets[0], duration);
+      return this.toCoord(targetStaticMagnet, duration);
     }
 
     // Or calculate closest magnet
 
-    const targetMagnet = slideMagnets[0] + loopCount * max;
+    const targetMagnet = targetStaticMagnet + loopCount * max;
     const targetMagnetMin = targetMagnet - max;
     const targetMagnetMax = targetMagnet + max;
     const allMagnets = [targetMagnetMin, targetMagnet, targetMagnetMax];

package/src/components/Swipe/index.ts

@@ -17,6 +17,9 @@ import { cursorStyles } from './styles';
 
 export * from './types';
 
+const VELOCITIES_COUNT = 4;
+const MIN_VELOCITY_THRESHOLD = 50;
+
 /**
  * Manages swipe interactions:
  * - Tracks movement and detects direction
@@ -67,9 +70,10 @@ export class Swipe<
       preventTouchMove: true,
       requireCtrlKey: false,
       inertia: false,
-      inertiaDuration: (distance) => clamp(distance, 350, 1000),
+      inertiaDuration: (distance) => clamp(distance, 500, 2000),
       inertiaEasing: EaseOutCubic,
-      inertiaRatio: 0.5,
+      velocityModifier: false,
+      inertiaRatio: 1,
     } as TRequiredProps<MutableProps>;
   }
 
@@ -439,7 +443,12 @@ export class Swipe<
     };
 
     // update velocity
-    this._velocities.push({ ...coords.current, timestamp: coords.timestamp });
+    if (!this.hasInertia) {
+      this._velocities.push({ ...coords.current, timestamp: coords.timestamp });
+      if (this._velocities.length > VELOCITIES_COUNT) {
+        this._velocities.shift();
+      }
+    }
 
     // trigger callbacks
     this.callbacks.emit('move', this._coords);
@@ -459,11 +468,6 @@ export class Swipe<
     // reset
     this._reset();
 
-    // end with inertia
-    if (this.props.inertia) {
-      this._endWithInertia();
-    }
-
     // reset cursor
     this._cursorStyles.remove();
 
@@ -493,6 +497,17 @@ export class Swipe<
 
     // end callback
     this.callbacks.emit('end', this._coords);
+
+    // modifiy last velocity time
+    if (this._velocities.length > 0) {
+      this._velocities[this._velocities.length - 1].timestamp =
+        performance.now();
+    }
+
+    // end with inertia
+    if (this.props.inertia) {
+      this._endWithInertia();
+    }
   }
 
   /** Reset swipe states */
@@ -501,21 +516,90 @@ export class Swipe<
     this._isSwiping = false;
   }
 
+  /** Returns current velocity */
+  protected get velocity(): ISwipeMatrix {
+    const samples = this._velocities;
+
+    if (samples.length < 2) {
+      return { x: 0, y: 0, angle: 0 };
+    }
+
+    let totalWeight = 0;
+    let wvx = 0;
+    let wvy = 0;
+    let wva = 0;
+
+    for (let i = 1; i < samples.length; i += 1) {
+      const current = samples[i];
+      const previous = samples[i - 1];
+
+      const deltaX = current.x - previous.x;
+      const deltaY = current.y - previous.y;
+
+      let angleDiff = current.angle - previous.angle;
+      if (angleDiff > 180) angleDiff -= 360;
+      if (angleDiff < -180) angleDiff += 360;
+
+      const deltatTime = current.timestamp - previous.timestamp;
+
+      const sx = (deltaX / deltatTime) * 1000;
+      const sy = (deltaY / deltatTime) * 1000;
+      const sa = (angleDiff / deltatTime) * 1000;
+
+      const weight = 1 / Math.exp(-deltatTime * 0.1);
+      wvx += sx * weight;
+      wvy += sy * weight;
+      wva += sa * weight;
+      totalWeight += weight;
+    }
+
+    if (totalWeight > 0) {
+      return {
+        x: wvx / totalWeight,
+        y: wvy / totalWeight,
+        angle: wva / totalWeight,
+      };
+    }
+
+    return { x: 0, y: 0, angle: 0 };
+  }
+
   /** Apply inertia-based movement */
   protected _endWithInertia() {
-    const { velocity } = this;
-    if (!velocity) {
+    const { inertiaDuration, inertiaEasing, velocityModifier, inertiaRatio } =
+      this.props;
+
+    const sourceVelocity = {
+      x: this.velocity.x * inertiaRatio,
+      y: this.velocity.y * inertiaRatio,
+      angle: this.velocity.angle * inertiaRatio,
+    };
+
+    const velocity = velocityModifier
+      ? velocityModifier(sourceVelocity)
+      : sourceVelocity;
+
+    const { x: velocityX, y: velocityY, angle: velocityA } = velocity;
+    const distance = Math.sqrt(velocityX ** 2 + velocityY ** 2);
+
+    // Check if we have sufficient velocity
+    if (distance < MIN_VELOCITY_THRESHOLD) {
       return;
     }
 
-    const { inertiaDuration, inertiaEasing } = this.props;
-    const { x: xDistance, y: yDistance, angle: angleDistance } = velocity;
-
-    const distance = Math.max(Math.abs(xDistance), Math.abs(yDistance));
+    // Calculate animation duration
     const duration = inertiaDuration(distance);
 
+    // Check if the animation duration is positive
+    if (duration <= 0) {
+      return;
+    }
+
+    // Calculate the start and add matrices
     const startMatrix = { ...this.coords.current };
+    const addMatrix = { x: 0, y: 0, angle: 0 };
 
+    // Start the inertia animation
     this._inertia = new Timeline({ duration, easing: inertiaEasing });
 
     this._inertia.on('start', () => {
@@ -523,10 +607,15 @@ export class Swipe<
     });
 
     this._inertia.on('update', ({ eased }) => {
+      addMatrix.x = velocityX * eased;
+      addMatrix.y = velocityY * eased;
+      addMatrix.angle = velocityA * eased;
+
+      // Apply the calculated position
       this._move({
-        x: startMatrix.x + xDistance * eased,
-        y: startMatrix.y + yDistance * eased,
-        angle: startMatrix.angle + angleDistance * eased,
+        x: startMatrix.x + addMatrix.x,
+        y: startMatrix.y + addMatrix.y,
+        angle: startMatrix.angle + addMatrix.angle,
       });
 
       this.callbacks.emit('inertia', undefined);
@@ -549,45 +638,6 @@ export class Swipe<
     this._inertia = undefined;
   }
 
-  /** Returns current velocity */
-  protected get velocity() {
-    if (this._velocities.length < 2) {
-      return undefined;
-    }
-
-    const ratio = 1000 * this.props.inertiaRatio;
-    const minimumVelocity = 0.02;
-
-    const current = this._velocities.pop()!;
-    const last = this._velocities.pop()!;
-
-    const now = performance.now();
-    const timeDiff = current.timestamp - last.timestamp;
-
-    const velocityX = (current.x - last.x) / timeDiff / 2;
-    const velocityY = (current.y - last.y) / timeDiff / 2;
-    const velocityAngle = (current.angle - last.angle) / timeDiff / 2;
-
-    const hasXVelocity = Math.abs(velocityX) > minimumVelocity;
-    const hasYVelocity = Math.abs(velocityY) > minimumVelocity;
-    const hasAngleVelocity = Math.abs(velocityAngle) > minimumVelocity;
-
-    const hasVelocityByTime = timeDiff < 150 && now - current.timestamp < 300;
-
-    const hasVelocity =
-      (hasXVelocity || hasYVelocity || hasAngleVelocity) && hasVelocityByTime;
-
-    if (!hasVelocity) {
-      return undefined;
-    }
-
-    return {
-      x: hasXVelocity ? velocityX * ratio : 0,
-      y: hasYVelocity ? velocityY * ratio : 0,
-      angle: hasAngleVelocity ? velocityAngle * ratio : 0,
-    };
-  }
-
   /** Start coordinate */
   get start() {
     return this._coords.start;

package/src/components/Swipe/types.ts

@@ -117,7 +117,7 @@ export interface ISwipeMutableProps extends IModuleMutableProps {
 
   /**
    * Inertia duration.
-   * @default `(distance) => clamp(distance, 350, 1000)`
+   * @default `(distance) => clamp(distance, 500, 2000)`
    */
   inertiaDuration?: (distance: number) => number;
 
@@ -127,9 +127,15 @@ export interface ISwipeMutableProps extends IModuleMutableProps {
    */
   inertiaEasing?: TEasingType;
 
+  /**
+   * Final velocity modifier.
+   * @default false
+   */
+  velocityModifier?: false | ((velocity: ISwipeMatrix) => ISwipeMatrix);
+
   /**
    * Inertia strength.
-   * @default 0.5
+   * @default 1
    */
   inertiaRatio?: number;
 }

package/src/manifest.json

@@ -1,3 +1,3 @@
 {
-  "version": "5.0.10"
+  "version": "5.0.11"
 }

package/src/utils/math/clamp.ts

@@ -16,5 +16,8 @@
  * clamp(0.5, 0, 1); // 0.5
  */
 export function clamp(value: number, min = 0, max = 1) {
-  return Math.max(min, Math.min(value, max));
+  const realMin = Math.min(min, max);
+  const realMax = Math.max(min, max);
+
+  return Math.max(realMin, Math.min(value, realMax));
 }