fix: fix tangent's tiny x value #806

Author: daybrush

packages/react-moveable/src/ables/Snappable.tsx

@@ -202,7 +202,7 @@ export function recheckSizeByTwoDirection(
         horizontal: [snapPos[1]],
     });
 
-    if (verticalOffset || horizontalOffset) {
+    if (throttle(verticalOffset, FLOAT_POINT_NUM) || throttle(horizontalOffset, FLOAT_POINT_NUM)) {
         const [nextWidthOffset, nextHeightOffset] = getDragDist({
             datas,
             distX: -verticalOffset,
@@ -256,6 +256,7 @@ export function checkSizeDist(
         let nextWidthOffset = widthOffsetInfo.offset;
         let nextHeightOffset = heightOffsetInfo.offset;
 
+
         if (i === 1) {
             if (!isWidthBound) {
                 nextWidthOffset = 0;
@@ -309,6 +310,7 @@ export function checkSizeDist(
             isRequest,
             datas
         );
+
         widthOffset += nextWidthOffset;
         heightOffset += nextHeightOffset;
     }

packages/react-moveable/stories/99-Tests/Deafult.stories.tsx

@@ -96,3 +96,11 @@ group.add("Test css zoomed target", {
     app: require("./ReactZoomedTargetApp").default,
     path: require.resolve("./ReactZoomedTargetApp"),
 });
+
+
+
+
+group.add("Test snap for scaled target", {
+    app: require("./ReactZoomedSnapApp").default,
+    path: require.resolve("./ReactZoomedSnapApp"),
+});

packages/react-moveable/stories/99-Tests/ReactZoomedSnapApp.tsx

@@ -0,0 +1,76 @@
+import * as React from "react";
+import Moveable from "@/react-moveable";
+import { useEffect, useState } from "react";
+
+export default function App() {
+    const [elementGuidelines, setElementGuideliens] = useState<HTMLElement[]>([]);
+
+    useEffect(() => {
+        setElementGuideliens([].slice.call(document.querySelectorAll(".moveable")));
+    }, []);
+    return (
+        <div className="root">
+            <div className="container" style={{
+                width: "1000px",
+                height: "1600px",
+                transform: "scale(0.47845)",
+                transformOrigin: "top left",
+                background: "#faa",
+            }}>
+                <div className="target box-1" style={{
+                    top: 0,
+                    left: 0,
+                }}>Target</div>
+                <div className="target moveable box-2" style={{
+                    "width": "600px",
+                    "height": "50px",
+                    "top": "1400px",
+                    "left": "150px",
+                }}>
+                    <p>Moveable 2</p>
+                </div>
+                <div className="target moveable box-3" style={{
+                    "width": "250px",
+                    "height": "50px",
+                    "top": "1300px",
+                    "left": "350px",
+                }}>
+                    <p>Moveable 3</p>
+                </div>
+                <div className="target moveable box-4" style={{
+                    "width": "250px",
+                    "height": "50px",
+                    "top": "1200px",
+                    "left": "200px",
+                }}>
+                    <p>Moveable 4</p>
+                </div>
+                <div className="target moveable box-5" style={{
+                    "width": "250px",
+                    "height": "50px",
+                    "top": "1200px",
+                    "left": "500px",
+                }}>
+                    <p>Moveable 5</p>
+                </div>
+            </div>
+            <Moveable
+                target={".box-1"}
+                draggable={true}
+                resizable={true}
+                snappable={true}
+                zoom={1}
+                elementGuidelines={elementGuidelines}
+                bounds={{
+                    top: 0,
+                    left: 0,
+                    right: 500,
+                    bottom: 800,
+                }}
+                onRender={e => {
+                    e.target.style.cssText += e.cssText;
+                }}
+            />
+        </div>
+    );
+}