test: test snap accuracy #592

daybrush · Jul 21, 2022 · 6e102cf · 6e102cf
1 parent 60e2d6e
commit 6e102cf
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 0 deletions.
diff --git a/packages/react-moveable/stories/5-Snap&Bound/apps/ReactSnapElementsApp.tsx b/packages/react-moveable/stories/5-Snap&Bound/apps/ReactSnapElementsApp.tsx
@@ -8,6 +8,8 @@ export default function App(props: Record<string, any>) {
     return (
         <div className="root">
             <div className="container" style={{
+                left: "200px",
+                top: "100px",
                 width: "500px",
                 height: "500px",
                 border: "1px solid #ccc",

diff --git a/packages/react-moveable/stories/99-Tests/Deafult.stories.tsx b/packages/react-moveable/stories/99-Tests/Deafult.stories.tsx
@@ -29,3 +29,7 @@ group.add("Check drag accuracy when using bounds", {
     app: require("./ReactAccuracyApp").default,
     text: require("!!raw-loader!./ReactAccuracyApp").default,
 });
+group.add("Check element guidelines accuracy when zoom is large", {
+    app: require("./ReactLargeZoomElementGuidelinesApp").default,
+    text: require("!!raw-loader!./ReactLargeZoomElementGuidelinesApp").default,
+});
diff --git a/packages/react-moveable/stories/99-Tests/ReactLargeZoomElementGuidelinesApp.tsx b/packages/react-moveable/stories/99-Tests/ReactLargeZoomElementGuidelinesApp.tsx
@@ -0,0 +1,53 @@
+import * as React from "react";
+import Moveable from "@/react-moveable";
+
+export default function App() {
+    return <div className="container" style={{
+    }}>
+        <div className="preview" style={{
+            position: "relative",
+            width: "800px",
+            height: "800px",
+            transform: "scale(3.67123)",
+            transformOrigin: "20% 20%",
+            background: "#eee",
+        }}>
+            <div className="target target1" style={{
+                top: "0px",
+                left: "0px",
+                width: "142.1232px",
+                transform: "translate(150px, 100px)",
+            }}>Target1</div>
+            <div className="target target2" style={{
+                top: "0px",
+                left: "100px",
+                width: "142.1232px",
+                transform: "translate(150px, 100px)",
+            }}>Target2</div>
+        </div>
+        <Moveable
+            target={".target"}
+            draggable={true}
+            snappable={true}
+            snapDirections={{
+                "top": true,
+                "left": true,
+                "bottom": true,
+                "right": true,
+                "center": true,
+                "middle": true,
+            }}
+            elementSnapDirections={{
+                "top": true, "left": true,
+                "bottom": true, "right": true,
+                "center": true, "middle": true,
+            }}
+            individualGroupable={true}
+            snapGap={true}
+            elementGuidelines={[".target1"]}
+            onDrag={e => {
+                e.target.style.transform = e.transform;
+            }}
+        />
+    </div>;
+}