Merge pull request #2707 from framer/fix/drag-constraints

Fixing `dragConstraints={ref}` with active layout animations
framer · Jun 25, 2024 · 98833d2 · 98833d2
2 parents 62d0d0a + a67bfdf
commit 98833d2
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 40 deletions.
diff --git a/dev/react/src/examples/Drag-constraints-ref.tsx b/dev/react/src/examples/Drag-constraints-ref.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import { motion } from "framer-motion"
 
 const container = {
@@ -18,20 +18,50 @@ const child = {
     borderRadius: 20,
 }
 
+/**
+ * This sibling layout animation is designed to fuzz/stress the drag constraints
+ * measurements. Remeasuring the constraints during drag would previously mess
+ * up the position of the draggable element.
+ */
+const SiblingLayoutAnimation = () => {
+    const [state, setState] = useState(false)
+
+    useEffect(() => {
+        const timer = setTimeout(() => setState(!state), 500)
+
+        return () => clearTimeout(timer)
+    }, [state])
+
+    return (
+        <motion.div
+            layout
+            style={{
+                ...child,
+                background: "blue",
+                position: "relative",
+                left: state ? "100px" : "0",
+            }}
+        />
+    )
+}
+
 export const App = () => {
     const ref = useRef()
     const [count, setCount] = useState(0)
     return (
-        <div ref={ref} style={container}>
-            <motion.div
-                drag
-                //dragElastic
-                dragConstraints={ref}
-                whileTap={{ scale: 0.95 }}
-                whileHover={{ scale: 1.1 }}
-                style={child}
-                onClick={() => setCount(count + 1)}
-            />
-        </div>
+        <>
+            <div ref={ref} style={container}>
+                <motion.div
+                    drag
+                    dragConstraints={ref}
+                    whileTap={{ scale: 0.95 }}
+                    whileHover={{ scale: 1.1 }}
+                    style={child}
+                    onClick={() => setCount(count + 1)}
+                    id="draggable"
+                />
+            </div>
+            <SiblingLayoutAnimation />
+        </>
     )
 }
diff --git a/dev/react/src/tests/drag-ref-constraints.tsx b/dev/react/src/tests/drag-ref-constraints.tsx
@@ -1,5 +1,5 @@
 import { motion, useMotionValue } from "framer-motion"
-import { useRef, useState, useLayoutEffect } from "react";
+import { useRef, useState, useLayoutEffect, useEffect } from "react"
 
 // It's important for this test to only trigger a single rerender while dragging (in response to onDragStart) of draggable component.
 
@@ -16,30 +16,62 @@ export const App = () => {
     const x = useMotionValue("100%")
 
     return (
-        <div style={{ height: 2000, paddingTop: 100 }}>
-            <motion.div
-                data-testid="constraint"
-                style={{ width: 200, height: 200, background: "blue" }}
-                ref={containerRef}
-            >
+        <>
+            <div style={{ height: 2000, paddingTop: 100 }}>
                 <motion.div
-                    id="box"
-                    data-testid="draggable"
-                    drag
-                    dragElastic={0}
-                    dragMomentum={false}
-                    style={{
-                        width: 50,
-                        height: 50,
-                        background: dragging ? "yellow" : "red",
-                        x,
-                    }}
-                    dragConstraints={containerRef}
-                    layout={layout}
-                    onDragStart={() => setDragging(true)}
-                    onDragEnd={() => setDragging(false)}
-                />
-            </motion.div>
-        </div>
+                    data-testid="constraint"
+                    style={{ width: 200, height: 200, background: "blue" }}
+                    ref={containerRef}
+                >
+                    <motion.div
+                        id="box"
+                        data-testid="draggable"
+                        drag
+                        dragElastic={0}
+                        dragMomentum={false}
+                        style={{
+                            width: 50,
+                            height: 50,
+                            background: dragging ? "yellow" : "red",
+                            x,
+                        }}
+                        dragConstraints={containerRef}
+                        layout={layout}
+                        onDragStart={() => setDragging(true)}
+                        onDragEnd={() => setDragging(false)}
+                    />
+                </motion.div>
+            </div>
+            <SiblingLayoutAnimation />
+        </>
+    )
+}
+
+/**
+ * This sibling layout animation is designed to fuzz/stress the drag constraints
+ * measurements. Remeasuring the constraints during drag would previously mess
+ * up the position of the draggable element.
+ */
+const SiblingLayoutAnimation = () => {
+    const [state, setState] = useState(false)
+
+    useEffect(() => {
+        const timer = setTimeout(() => setState(!state), 200)
+
+        return () => clearTimeout(timer)
+    }, [state])
+
+    return (
+        <motion.div
+            layout
+            style={{
+                width: 200,
+                height: 200,
+                borderRadius: 20,
+                background: "blue",
+                position: "relative",
+                left: state ? "100px" : "0",
+            }}
+        />
     )
 }
diff --git a/packages/framer-motion/cypress/integration/drag.ts b/packages/framer-motion/cypress/integration/drag.ts
@@ -234,9 +234,9 @@ describe("Drag", () => {
             .get("[data-testid='draggable']")
             .trigger("pointerdown", 10, 10)
             .trigger("pointermove", 15, 15)
-            .wait(50)
+            .wait(200)
             .trigger("pointermove", 300, 300, { force: true })
-            .wait(50)
+            .wait(200)
             .trigger("pointerup", { force: true })
             .should(($draggable: any) => {
                 const draggable = $draggable[0] as HTMLDivElement

diff --git a/packages/framer-motion/src/projection/node/create-projection-node.ts b/packages/framer-motion/src/projection/node/create-projection-node.ts
@@ -872,8 +872,11 @@ export function createProjectionNode<I>({
 
         resetTransform() {
             if (!resetTransform) return
+
             const isResetRequested =
-                this.isLayoutDirty || this.shouldResetTransform
+                this.isLayoutDirty ||
+                this.shouldResetTransform ||
+                this.options.alwaysMeasureLayout
 
             const hasProjection =
                 this.projectionDelta && !isDeltaZero(this.projectionDelta)