feat: add maxSnapElementGapDistance prop #707

daybrush · Aug 6, 2022 · 5f71c30 · 5f71c30
1 parent 176c1b3
commit 5f71c30
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 0 deletions.
diff --git a/packages/react-moveable/src/react-moveable/ables/snappable/getTotalGuidelines.ts b/packages/react-moveable/src/react-moveable/ables/snappable/getTotalGuidelines.ts
@@ -84,6 +84,7 @@ export function getGapGuidelines(
 ) {
     const {
         maxSnapElementGuidelineDistance = Infinity,
+        maxSnapElementGapDistance = Infinity,
     } = moveable.props;
     const elementRects = moveable.state.elementRects;
     const gapGuidelines: SnapGuideline[] = [];
@@ -196,6 +197,9 @@ export function getGapGuidelines(
             if (!checkBetweenRects(targetRect, rect2, type, maxSnapElementGuidelineDistance)) {
                 return;
             }
+            if (gap > maxSnapElementGapDistance) {
+                return;
+            }
             gapGuidelines.push({
                 type,
                 pos: type === "vertical" ? [pos, 0] : [0, pos],

diff --git a/packages/react-moveable/src/react-moveable/types.ts b/packages/react-moveable/src/react-moveable/types.ts
@@ -2154,6 +2154,11 @@ export interface SnappableOptions {
      * @default Infinity
      */
     maxSnapElementGuidelineDistance?: number;
+    /**
+     * Maximum distance to which element gap guidelines can be snapped.
+     * @default Infinity
+     */
+    maxSnapElementGapDistance?: number;
     /**
      * You can set up boundaries.
      * @default null

diff --git a/packages/react-moveable/stories/5-Snap&Bound/apps/ReactMaxSnapElementApp.tsx b/packages/react-moveable/stories/5-Snap&Bound/apps/ReactMaxSnapElementApp.tsx
@@ -67,6 +67,8 @@ export default function App(props: Record<string, any>) {
                         "center": true,
                         "middle": true,
                     }}
+                    maxSnapElementGuidelineDistance={props.maxSnapElementGuidelineDistance}
+                    maxSnapElementGapDistance={props.maxSnapElementGapDistance}
                     onDrag={e => {
                         e.target.style.transform = e.transform;
                     }}