feat: add snapThreshold prop #774

daybrush · Oct 30, 2022 · 1bf05b3 · 1bf05b3
1 parent 90c5c34
commit 1bf05b3
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/packages/react-moveable/src/react-moveable/ables/Snappable.tsx b/packages/react-moveable/src/react-moveable/ables/Snappable.tsx
@@ -540,6 +540,7 @@ export default {
         isDisplayInnerSnapDigit: Boolean,
         snapDigit: Number,
         snapThreshold: Number,
+        snapRenderThreshold: Number,
 
         horizontalGuidelines: Array,
         verticalGuidelines: Array,
@@ -613,6 +614,9 @@ export default {
             pos4,
             snapRenderInfo,
         } = state;
+        const {
+            snapRenderThreshold = 1,
+        } = moveable.props;
 
         if (!snapRenderInfo || !hasGuidelines(moveable, "")) {
             return [];
@@ -645,7 +649,8 @@ export default {
                     getSnapInfosByDirection(
                         moveable,
                         poses,
-                        snapRenderInfo.direction
+                        snapRenderInfo.direction,
+                        snapRenderThreshold,
                     )
                 );
             }
@@ -655,7 +660,7 @@ export default {
                     (rect as any).middle = (rect.top + rect.bottom) / 2;
                     (rect as any).center = (rect.left + rect.right) / 2;
                 }
-                snapInfos.push(checkSnaps(moveable, rect, 1));
+                snapInfos.push(checkSnaps(moveable, rect, snapRenderThreshold));
             }
             if (hasExternalPoses) {
                 if (snapRenderInfo.center) {
@@ -664,7 +669,7 @@ export default {
                     (externalRect as any).center =
                         (externalRect.left + externalRect.right) / 2;
                 }
-                snapInfos.push(checkSnaps(moveable, externalRect, 1));
+                snapInfos.push(checkSnaps(moveable, externalRect, snapRenderThreshold));
             }
             snapInfos.forEach((snapInfo) => {
                 const {

diff --git a/packages/react-moveable/src/react-moveable/ables/snappable/snap.ts b/packages/react-moveable/src/react-moveable/ables/snappable/snap.ts
@@ -249,6 +249,7 @@ export function getSnapInfosByDirection(
     moveable: MoveableManagerInterface<SnappableProps & (ResizableProps | ScalableProps), SnappableState>,
     poses: number[][],
     snapDirection: number[],
+    snapThreshold = 1,
 ) {
     let nextPoses: number[][] = [];
     if (snapDirection[0] && snapDirection[1]) {
@@ -287,7 +288,7 @@ export function getSnapInfosByDirection(
             }
         }
     }
-    return checkMoveableSnapPoses(moveable, nextPoses.map(pos => pos[0]), nextPoses.map(pos => pos[1]), 1);
+    return checkMoveableSnapPoses(moveable, nextPoses.map(pos => pos[0]), nextPoses.map(pos => pos[1]), snapThreshold);
 }
 
 export function checkSnapBoundPriority(

diff --git a/packages/react-moveable/src/react-moveable/types.ts b/packages/react-moveable/src/react-moveable/types.ts
@@ -2199,6 +2199,11 @@ export interface SnappableOptions {
      * @default 5
      */
     snapThreshold?: number;
+    /**
+     * Distance value that render snapped guidelines.
+     * @default 1
+     */
+    snapRenderThreshold?: number;
     /**
      * snap distance digits.
      * @default 0