fix: fix [1, 1] direction's bounds #624

daybrush · May 8, 2022 · 5108bc3 · 5108bc3
1 parent 15403ce
commit 5108bc3
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 57 deletions.
diff --git a/packages/react-moveable/src/react-moveable/ables/snappable/snap.ts b/packages/react-moveable/src/react-moveable/ables/snappable/snap.ts
@@ -360,16 +360,26 @@ export function getCheckSnapDirections(
             directions.push(
                 [fixedDirection, [direction[0], -direction[1]]],
                 [fixedDirection, [-direction[0], direction[1]]],
-                [fixedDirection, direction],
             );
         }
         directions.push([fixedDirection, direction]);
     } else {
-        if (direction[0] && direction[1]) {
-            directions.push(
-                [fixedDirection, [direction[0], -direction[1]]],
-                [fixedDirection, [-direction[0], direction[1]]]
-            );
+        if ((direction[0] && direction[1]) || (!direction[0] && !direction[1])) {
+            const endDirection = direction[0] ? direction : [1, 1];
+
+            [1, -1].forEach(signX => {
+                [1, -1].forEach(signY => {
+                    const nextDirection = [signX * endDirection[0], signY * endDirection[1]];
+
+                    if (
+                        fixedDirection[0] === nextDirection[0]
+                        && fixedDirection[1] === nextDirection[1]
+                    ) {
+                        return;
+                    }
+                    directions.push([fixedDirection, nextDirection]);
+                });
+            });
         } else if (direction[0]) {
             const signs = Math.abs(fixedDirection[0]) === 1 ? [1] : [1, -1];
 
@@ -408,48 +418,6 @@ export function getCheckSnapDirections(
                     ]
                 );
             });
-        } else {
-            // [0, 0] to all direction
-            directions.push(
-                [fixedDirection, [1, 0]],
-                [fixedDirection, [-1, 0]],
-                [fixedDirection, [0, -1]],
-                [fixedDirection, [0, 1]],
-
-                [
-                    [1, 0],
-                    [1, -1],
-                ],
-                [
-                    [1, 0],
-                    [1, 1],
-                ],
-                [
-                    [0, 1],
-                    [1, 1],
-                ],
-                [
-                    [0, 1],
-                    [-1, 1],
-                ],
-
-                [
-                    [-1, 0],
-                    [-1, -1],
-                ],
-                [
-                    [-1, 0],
-                    [-1, 1],
-                ],
-                [
-                    [0, -1],
-                    [1, -1],
-                ],
-                [
-                    [0, -1],
-                    [-1, -1],
-                ]
-            );
         }
     }
     return directions;

diff --git a/packages/react-moveable/src/react-moveable/ables/snappable/snapBounds.ts b/packages/react-moveable/src/react-moveable/ables/snappable/snapBounds.ts
@@ -223,7 +223,7 @@ export function checkSnapBoundsDrag(
         right,
         top,
         bottom,
-        center: (left + right ) / 2,
+        center: (left + right) / 2,
         middle: (top + bottom) / 2,
     });
     const {
@@ -496,13 +496,31 @@ export function getSnapBoundInfo(
         }
 
         const isVertical = snapLine === "vertical";
-        const sizeOffset = solveNextOffset(
-            otherStartPos,
-            otherEndPos,
-            -(isVertical ? otherVerticalOffset : otherHorizontalOffset),
-            isVertical,
-            datas,
-        ).offset.map((size, i) => size * (multiple[i] ? 2 / multiple[i] : 0));
+        let sizeOffset = [0, 0];
+
+        if (
+            !keepRatio
+            && Math.abs(endDirection[0]) === 1
+            && Math.abs(endDirection[1]) === 1
+            && startDirection[0] !== endDirection[0]
+            && startDirection[1] !== endDirection[1]
+        ) {
+            sizeOffset = getDragDist({
+                datas,
+                distX: -otherVerticalOffset,
+                distY: -otherHorizontalOffset,
+            });
+        } else {
+            sizeOffset = solveNextOffset(
+                otherStartPos,
+                otherEndPos,
+                -(isVertical ? otherVerticalOffset : otherHorizontalOffset),
+                isVertical,
+                datas,
+            ).offset;
+        }
+        sizeOffset = sizeOffset.map((size, i) => size * (multiple[i] ? 2 / multiple[i] : 0));
+
 
         return {
             sign: multiple,

diff --git a/packages/react-moveable/stories/5A-Advanced/2-Resizable/ReactFixedDirectionApp.tsx b/packages/react-moveable/stories/5A-Advanced/2-Resizable/ReactFixedDirectionApp.tsx
@@ -29,7 +29,7 @@ export default function App() {
                 <Moveable
                     target={".target.resizable"}
                     resizable={true}
-                    keepRatio={true}
+                    // keepRatio={true}
                     draggable={true}
                     rotatable={true}
                     snappable={true}