fix: fix overflow auto target #730

daybrush · Sep 9, 2022 · 1e0ae91 · 1e0ae91
1 parent 7581afc
commit 1e0ae91
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 3 deletions.
diff --git a/packages/react-moveable/src/react-moveable/utils/getMatrixStackInfo.ts b/packages/react-moveable/src/react-moveable/utils/getMatrixStackInfo.ts
@@ -89,6 +89,7 @@ export function getMatrixStackInfo(
             offsetLeft,
             offsetTop,
         ] = offsetPos;
+
         if (tagName === "svg" && targetMatrix) {
             // scale matrix for svg's SVGElements.
             matrixes.push({
@@ -118,7 +119,7 @@ export function getMatrixStackInfo(
             isStatic = offsetInfo.isStatic;
 
             if (IS_FIREFOX) {
-                const parentSlotElement = offsetInfo.parentSlotElement;                
+                const parentSlotElement = offsetInfo.parentSlotElement;
 
                 if (parentSlotElement) {
                     let customOffsetParent: HTMLElement | null = offsetParent;
@@ -138,6 +139,7 @@ export function getMatrixStackInfo(
                 }
             }
         }
+
         if (
             IS_WEBKIT && !IS_SAFARI_ABOVE15
             && hasOffset && !isSVG && isStatic
@@ -178,13 +180,18 @@ export function getMatrixStackInfo(
             target: el,
             matrix: getAbsoluteMatrix(matrix, n, origin),
         });
+
         if (hasOffset) {
+            const isElementTarget = el === target;
+            const scrollLeft = isElementTarget ? 0 : el.scrollLeft;
+            const scrollTop = isElementTarget ? 0 : el.scrollTop;
+
             matrixes.push({
                 type: "offset",
                 target: el,
                 matrix: createOriginMatrix([
-                    offsetLeft - el.scrollLeft + parentClientLeft - fixedClientLeft,
-                    offsetTop - el.scrollTop + parentClientTop - fixedClientTop,
+                    offsetLeft - scrollLeft + parentClientLeft - fixedClientLeft,
+                    offsetTop - scrollTop + parentClientTop - fixedClientTop,
                 ], n),
             });
         } else {

diff --git a/packages/react-moveable/stories/99-Tests/Deafult.stories.tsx b/packages/react-moveable/stories/99-Tests/Deafult.stories.tsx
@@ -66,3 +66,8 @@ group.add("Test performance for large number instances", {
     app: require("./ReactHandleLargeNumberApp").default,
     text: require("!!raw-loader!./ReactHandleLargeNumberApp").default,
 });
+
+group.add("Test overflow: auto target", {
+    app: require("./ReactOverflowApp").default,
+    text: require("!!raw-loader!./ReactOverflowApp").default,
+});
diff --git a/packages/react-moveable/stories/99-Tests/ReactOverflowApp.tsx b/packages/react-moveable/stories/99-Tests/ReactOverflowApp.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+import Moveable from "../../src/react-moveable";
+
+export default function App(props: Record<string, any>) {
+    const moveableRef = React.useRef<Moveable>(null);
+
+    return (
+        <div className="root">
+            <div className="container" style={{
+                height: "100px",
+            }}>
+                <div className="target" style={{
+                    overflow: "auto",
+                }} onScroll={() => {
+                    moveableRef.current?.updateRect();
+                }}>
+                    <div className="scroll" style={{
+                        width: "100%",
+                        height: "1000px",
+                    }}></div>
+                </div>
+                <Moveable
+                    ref={moveableRef}
+                    target={".target"}
+                    resizable={true}
+                    preventClickDefault={true}
+                    draggable={true}
+                    onDrag={e => {
+                        e.target.style.transform = e.transform;
+                    }}
+                />
+            </div>
+        </div>
+    );
+}