feat: add snapHorizontalThreshold, snapVerticalThreshold #1044

daybrush · Nov 26, 2023 · 6cd5114 · 6cd5114
1 parent 9f4c9f4
commit 6cd5114
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 22 deletions.
diff --git a/packages/react-moveable/src/ables/Clippable.tsx b/packages/react-moveable/src/ables/Clippable.tsx
@@ -661,6 +661,7 @@ background: var(--bounds-color);
             guideXPoses,
             guideYPoses,
             5,
+            5,
         );
         let snapOffsetY = horizontalSnapInfo.offset;
         let snapOffsetX = verticalSnapInfo.offset;
@@ -767,6 +768,7 @@ background: var(--bounds-color);
             guideXPoses,
             guideYPoses,
             1,
+            1,
         );
 
         if (originalDraggable) {

diff --git a/packages/react-moveable/src/ables/Snappable.tsx b/packages/react-moveable/src/ables/Snappable.tsx
@@ -758,6 +758,7 @@ color: #f55;
                         poses,
                         snapRenderInfo.direction,
                         snapRenderThreshold,
+                        snapRenderThreshold,
                     )
                 );
             }
@@ -767,7 +768,7 @@ color: #f55;
                     (rect as any).middle = (rect.top + rect.bottom) / 2;
                     (rect as any).center = (rect.left + rect.right) / 2;
                 }
-                snapInfos.push(checkSnaps(moveable, rect, snapRenderThreshold));
+                snapInfos.push(checkSnaps(moveable, rect, snapRenderThreshold, snapRenderThreshold));
             }
             if (hasExternalPoses) {
                 if (snapRenderInfo.center) {
@@ -776,7 +777,7 @@ color: #f55;
                     (externalRect as any).center =
                         (externalRect.left + externalRect.right) / 2;
                 }
-                snapInfos.push(checkSnaps(moveable, externalRect, snapRenderThreshold));
+                snapInfos.push(checkSnaps(moveable, externalRect, snapRenderThreshold, snapRenderThreshold));
             }
             snapInfos.forEach((snapInfo) => {
                 const {

diff --git a/packages/react-moveable/src/ables/snappable/getTotalGuidelines.ts b/packages/react-moveable/src/ables/snappable/getTotalGuidelines.ts
@@ -252,6 +252,7 @@ export function getGapGuidelines(
     });
     return gapGuidelines;
 }
+
 export function startGridGroupGuidelines(
     moveable: MoveableManagerInterface<SnappableProps, SnappableState>,
     clientLeft: number,

diff --git a/packages/react-moveable/src/ables/snappable/snap.ts b/packages/react-moveable/src/ables/snappable/snap.ts
@@ -19,13 +19,19 @@ export function checkMoveableSnapPoses(
     posesY: number[],
     dirXs: string[] = [],
     dirYs: string[] = [],
-    customSnapThreshold?: number,
+    customSnapVerticalThreshold: number | undefined,
+    customSnapHorizontalThreshold: number | undefined,
 ) {
     const props = moveable.props;
     const snapThresholdMultiples = moveable.state.snapThresholdInfo?.multiples || [1, 1];
-    const snapThreshold = selectValue<number>(
-        customSnapThreshold,
-        props.snapThreshold,
+    const snapHorizontalThreshold = selectValue<number>(
+        customSnapHorizontalThreshold,
+        props.snapHorizontalThreshold,
+        5,
+    );
+    const snapVerticalThreshold = selectValue<number>(
+        customSnapVerticalThreshold,
+        props.snapVerticalThreshold,
         5,
     );
 
@@ -35,7 +41,8 @@ export function checkMoveableSnapPoses(
         posesY,
         dirXs,
         dirYs,
-        snapThreshold,
+        snapHorizontalThreshold,
+        snapVerticalThreshold,
         snapThresholdMultiples,
     );
 }
@@ -46,12 +53,13 @@ export function checkSnapPoses(
     posesY: number[],
     dirXs: string[],
     dirYs: string[],
-    snapThreshold: number,
+    snapHorizontalThreshold: number,
+    snapVerticalThreshold: number,
     multiples: number[],
 ) {
     return {
-        vertical: checkSnap(guidelines, "vertical", posesX, snapThreshold * multiples[0], dirXs),
-        horizontal: checkSnap(guidelines, "horizontal", posesY, snapThreshold * multiples[1], dirYs),
+        vertical: checkSnap(guidelines, "vertical", posesX, snapVerticalThreshold * multiples[0], dirXs),
+        horizontal: checkSnap(guidelines, "horizontal", posesY, snapHorizontalThreshold * multiples[1], dirYs),
     };
 }
 export function checkSnapKeepRatio(
@@ -88,7 +96,15 @@ export function checkSnapKeepRatio(
     const {
         vertical: verticalSnapInfo,
         horizontal: horizontalSnapInfo,
-    } = checkMoveableSnapPoses(moveable, dx ? [endX] : [], dy ? [endY] : []);
+    } = checkMoveableSnapPoses(
+        moveable,
+        dx ? [endX] : [],
+        dy ? [endY] : [],
+        [],
+        [],
+        undefined,
+        undefined,
+    );
 
     verticalSnapInfo.posInfos.filter(({ pos }) => {
         return isRight ? pos >= startX : pos <= startX;
@@ -173,7 +189,8 @@ function getStringDirection(dir: number | string) {
 export function checkSnaps(
     moveable: MoveableManagerInterface<SnappableProps, SnappableState>,
     rect: SnapDirectionPoses,
-    customSnapThreshold?: number,
+    customSnapVerticalThreshold: number | undefined,
+    customSnapHorizontalThreshold: number | undefined,
 ): { vertical: SnapDirectionInfo; horizontal: SnapDirectionInfo } {
     const poses = splitSnapDirectionPoses(moveable.props.snapDirections, rect);
 
@@ -183,7 +200,8 @@ export function checkSnaps(
         poses.horizontal,
         poses.verticalNames.map(name => getStringDirection(name)),
         poses.horizontalNames.map(name => getStringDirection(name)),
-        customSnapThreshold,
+        customSnapVerticalThreshold,
+        customSnapHorizontalThreshold,
     );
     const horizontalDirection = getStringDirection(poses.horizontalNames[result.horizontal.index]);
     const verticalDirection = getStringDirection(poses.verticalNames[result.vertical.index]);
@@ -300,7 +318,8 @@ export function getSnapInfosByDirection(
     // pos1 pos2 pos3 pos4
     poses: number[][],
     snapDirection: number[],
-    snapThreshold = 1,
+    customSnapVerticalThreshold: number | undefined,
+    customSnapHorizontalThreshold: number | undefined,
 ): { vertical: SnapDirectionInfo; horizontal: SnapDirectionInfo } {
     let dirs: number[][] = [];
 
@@ -357,7 +376,8 @@ export function getSnapInfosByDirection(
         xs, ys,
         dirs.map(dir => getStringDirection(dir[0])),
         dirs.map(dir => getStringDirection(dir[1])),
-        snapThreshold
+        customSnapVerticalThreshold,
+        customSnapHorizontalThreshold,
     );
     const verticalDirection = getStringDirection(dirs.map(dir => dir[0])[result.vertical.index]);
     const horizontalDirection = getStringDirection(dirs.map(dir => dir[1])[result.horizontal.index]);

diff --git a/packages/react-moveable/src/ables/snappable/snapBounds.ts b/packages/react-moveable/src/ables/snappable/snapBounds.ts
@@ -295,6 +295,10 @@ export function checkMoveableSnapBounds(
         moveable,
         poses.vertical,
         poses.horizontal,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
     );
     const horizontalOffset = getSnapBound(
         horizontalBoundInfos[0],
@@ -334,7 +338,8 @@ export function checkSnapBounds(
     bounds: BoundType | undefined | false,
     posesX: number[],
     posesY: number[],
-    snapThreshold: number,
+    snapHorizontalThreshold: number,
+    snapVerticalThreshold: number,
     multiples = [1, 1],
 ): DirectionSnapType<Required<SnapBoundInfo>> {
     const {
@@ -351,7 +356,8 @@ export function checkSnapBounds(
         vertical: verticalSnapInfo,
     } = checkSnapPoses(
         guideines, posesX, posesY, [], [],
-        snapThreshold,
+        snapHorizontalThreshold,
+        snapVerticalThreshold,
         multiples,
     );
 

diff --git a/packages/react-moveable/src/types.ts b/packages/react-moveable/src/types.ts
@@ -2608,9 +2608,21 @@ export interface SnappableOptions {
     /**
     /**
      * Distance value that can snap to guidelines.
-     * @default 5
+     * Use `snapHorizontalThreshold` and `snapVerticalThreshold`
+     * @default 0
+     * @depreacted
      */
     snapThreshold?: number;
+    /**
+     * Distance horizontal between horizontal value that can snap to guidelines.
+     * @default 5
+     */
+    snapHorizontalThreshold?: number;
+    /**
+     * Distance Horizontal value that can snap to guidelines.
+     * @default 5
+     */
+    snapVerticalThreshold?: number;
     /**
      * Distance value that render snapped guidelines.
      * @default 1

diff --git a/packages/react-moveable/stories/controls/default.ts b/packages/react-moveable/stories/controls/default.ts
@@ -199,9 +199,14 @@ export const DEFAULT_SNAPPABLE_CONTROLS = {
         description: makeLink("Snappable", "snapDirections"),
         defaultValue: { top: true, left: true, bottom: true, right: true },
     }),
-    snapThreshold: makeArgType({
+    snapHorizontalThreshold: makeArgType({
         type: "number",
-        description: makeLink("Snappable", "snapThreshold"),
+        description: makeLink("Snappable", "snapHorizontalThreshold"),
+        defaultValue: 5,
+    }),
+    snapVerticalThreshold: makeArgType({
+        type: "number",
+        description: makeLink("Snappable", "snapVerticalThreshold"),
         defaultValue: 5,
     }),
 };

diff --git a/storybook/stories/controls/default.ts b/storybook/stories/controls/default.ts
@@ -199,9 +199,14 @@ export const DEFAULT_SNAPPABLE_CONTROLS = {
         description: makeLink("Snappable", "snapDirections"),
         defaultValue: { top: true, left: true, bottom: true, right: true },
     }),
-    snapThreshold: makeArgType({
+    snapHorizontalThreshold: makeArgType({
         type: "number",
-        description: makeLink("Snappable", "snapThreshold"),
+        description: makeLink("Snappable", "snapHorizontalThreshold"),
+        defaultValue: 5,
+    }),
+    snapVerticalThreshold: makeArgType({
+        type: "number",
+        description: makeLink("Snappable", "snapVerticalThreshold"),
         defaultValue: 5,
     }),
 };