npm - hiraki - Versions diffs - 0.0.5 → 0.0.7 - Mend

hiraki 0.0.5 → 0.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/index.cjs CHANGED Viewed

@@ -301,22 +301,49 @@ function createGestureEngine(options) {
       return false;
     }
     isDragging = false;
-    const velocityPxMs = getVelocity() * 1e3;
-    const snapVelocityPxMs = -velocityPxMs;
+    const smoothedVelocityPxMs = getVelocity();
+    const trackerState = tracker.getState();
+    const totalDelta = isHorizontal(opts.direction) ? Math.abs(trackerState.deltaX) : Math.abs(trackerState.deltaY);
+    const totalTime = trackerState.timestamp - trackerState.startTimestamp;
+    const avgVelocityPxMs = totalTime > 0 ? totalDelta / totalTime : 0;
+    const velocityPxMs = Math.abs(smoothedVelocityPxMs) > avgVelocityPxMs ? smoothedVelocityPxMs : avgVelocityPxMs * (smoothedVelocityPxMs >= 0 ? 1 : -1);
+    const velocityPxSec = velocityPxMs * 1e3;
+    const dragDelta = translateValue - dragStartTranslate;
+    const isDraggingTowardClose = dragDelta > 0;
     const closeThresholdPx = opts.closeThreshold * opts.maxTranslate;
-    const shouldClose = translateValue > closeThresholdPx;
+    const snapPoints = opts.snapPoints;
+    let shouldClose = false;
     let targetSnapIndex;
-    if (shouldClose) {
+    if (velocityPxMs > 2 && isDraggingTowardClose) {
+      shouldClose = true;
       targetSnapIndex = -1;
+    } else if (velocityPxMs < -2) {
+      shouldClose = false;
+      targetSnapIndex = snapPoints[snapPoints.length - 1]?.index ?? 0;
+    } else if (Math.abs(velocityPxMs) > 0.4 && Math.abs(dragDelta) < opts.maxTranslate * 0.4) {
+      const stepDir = isDraggingTowardClose ? -1 : 1;
+      const nextIndex = opts.activeSnapIndex + stepDir;
+      if (nextIndex < 0) {
+        shouldClose = true;
+        targetSnapIndex = -1;
+      } else {
+        shouldClose = false;
+        targetSnapIndex = Math.min(nextIndex, snapPoints.length - 1);
+      }
     } else {
-      targetSnapIndex = findNearestSnapPoint(
-        opts.maxTranslate - translateValue,
-        snapVelocityPxMs,
-        opts.snapPoints,
-        opts.inertia
-      );
+      shouldClose = translateValue > closeThresholdPx;
+      if (shouldClose) {
+        targetSnapIndex = -1;
+      } else {
+        targetSnapIndex = findNearestSnapPoint(
+          opts.maxTranslate - translateValue,
+          -velocityPxMs,
+          snapPoints,
+          opts.inertia
+        );
+      }
     }
-    opts.onDragEnd?.({ translateValue, velocityPxMs, targetSnapIndex, shouldClose });
+    opts.onDragEnd?.({ translateValue, velocityPxMs: velocityPxSec, targetSnapIndex, shouldClose });
     return true;
   }
   function setTranslate(value) {
@@ -328,7 +355,15 @@ function createGestureEngine(options) {
   function getTranslate() {
     return translateValue;
   }
-  return { update, onPointerDown, onPointerMove, onPointerUp, setTranslate, getIsDragging, getTranslate };
+  return {
+    update,
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+    setTranslate,
+    getIsDragging,
+    getTranslate
+  };
 }
 // src/utils/focus-trap.ts
@@ -647,7 +682,7 @@ function Root({
   snapPoints: snapPointsProp = [],
   activeSnapPoint: controlledSnap,
   onSnapPointChange,
-  closeThreshold = 0.5,
+  closeThreshold = 0.25,
   rubberBand: rubberBand2 = true,
   inertia = true,
   shouldScaleBackground = false,

package/dist/index.js CHANGED Viewed

@@ -299,22 +299,49 @@ function createGestureEngine(options) {
       return false;
     }
     isDragging = false;
-    const velocityPxMs = getVelocity() * 1e3;
-    const snapVelocityPxMs = -velocityPxMs;
+    const smoothedVelocityPxMs = getVelocity();
+    const trackerState = tracker.getState();
+    const totalDelta = isHorizontal(opts.direction) ? Math.abs(trackerState.deltaX) : Math.abs(trackerState.deltaY);
+    const totalTime = trackerState.timestamp - trackerState.startTimestamp;
+    const avgVelocityPxMs = totalTime > 0 ? totalDelta / totalTime : 0;
+    const velocityPxMs = Math.abs(smoothedVelocityPxMs) > avgVelocityPxMs ? smoothedVelocityPxMs : avgVelocityPxMs * (smoothedVelocityPxMs >= 0 ? 1 : -1);
+    const velocityPxSec = velocityPxMs * 1e3;
+    const dragDelta = translateValue - dragStartTranslate;
+    const isDraggingTowardClose = dragDelta > 0;
     const closeThresholdPx = opts.closeThreshold * opts.maxTranslate;
-    const shouldClose = translateValue > closeThresholdPx;
+    const snapPoints = opts.snapPoints;
+    let shouldClose = false;
     let targetSnapIndex;
-    if (shouldClose) {
+    if (velocityPxMs > 2 && isDraggingTowardClose) {
+      shouldClose = true;
       targetSnapIndex = -1;
+    } else if (velocityPxMs < -2) {
+      shouldClose = false;
+      targetSnapIndex = snapPoints[snapPoints.length - 1]?.index ?? 0;
+    } else if (Math.abs(velocityPxMs) > 0.4 && Math.abs(dragDelta) < opts.maxTranslate * 0.4) {
+      const stepDir = isDraggingTowardClose ? -1 : 1;
+      const nextIndex = opts.activeSnapIndex + stepDir;
+      if (nextIndex < 0) {
+        shouldClose = true;
+        targetSnapIndex = -1;
+      } else {
+        shouldClose = false;
+        targetSnapIndex = Math.min(nextIndex, snapPoints.length - 1);
+      }
     } else {
-      targetSnapIndex = findNearestSnapPoint(
-        opts.maxTranslate - translateValue,
-        snapVelocityPxMs,
-        opts.snapPoints,
-        opts.inertia
-      );
+      shouldClose = translateValue > closeThresholdPx;
+      if (shouldClose) {
+        targetSnapIndex = -1;
+      } else {
+        targetSnapIndex = findNearestSnapPoint(
+          opts.maxTranslate - translateValue,
+          -velocityPxMs,
+          snapPoints,
+          opts.inertia
+        );
+      }
     }
-    opts.onDragEnd?.({ translateValue, velocityPxMs, targetSnapIndex, shouldClose });
+    opts.onDragEnd?.({ translateValue, velocityPxMs: velocityPxSec, targetSnapIndex, shouldClose });
     return true;
   }
   function setTranslate(value) {
@@ -326,7 +353,15 @@ function createGestureEngine(options) {
   function getTranslate() {
     return translateValue;
   }
-  return { update, onPointerDown, onPointerMove, onPointerUp, setTranslate, getIsDragging, getTranslate };
+  return {
+    update,
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+    setTranslate,
+    getIsDragging,
+    getTranslate
+  };
 }
 // src/utils/focus-trap.ts
@@ -645,7 +680,7 @@ function Root({
   snapPoints: snapPointsProp = [],
   activeSnapPoint: controlledSnap,
   onSnapPointChange,
-  closeThreshold = 0.5,
+  closeThreshold = 0.25,
   rubberBand: rubberBand2 = true,
   inertia = true,
   shouldScaleBackground = false,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "hiraki",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Zero-dependency React drawer component library — all 4 directions, velocity-aware gestures, snap points",
   "keywords": [
     "react",