fix: fix document element #782

daybrush · Nov 4, 2022 · b9194d7 · b9194d7
1 parent 80653c3
commit b9194d7
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 9 deletions.
diff --git a/packages/react-moveable/src/react-moveable/utils.tsx b/packages/react-moveable/src/react-moveable/utils.tsx
@@ -127,7 +127,7 @@ export function getOffsetInfo(
     lastParent: SVGElement | HTMLElement | null | undefined,
     isParent?: boolean,
 ) {
-    const body = document.body;
+    const documentElement = document.documentElement || document.body;
     let hasSlot = false;
     let target: HTMLElement | SVGElement | null | undefined;
     let parentSlotElement: HTMLElement | null | undefined;
@@ -153,7 +153,7 @@ export function getOffsetInfo(
 
 
 
-    while (target && target !== body) {
+    while (target && target !== documentElement) {
         if (lastParent === target) {
             isEnd = true;
         }
@@ -198,8 +198,8 @@ export function getOffsetInfo(
         parentSlotElement,
         isCustomElement,
         isStatic: position === "static",
-        isEnd: isEnd || !target || target === body,
-        offsetParent: target as HTMLElement || body,
+        isEnd: isEnd || !target || target === documentElement,
+        offsetParent: target as HTMLElement || documentElement,
     };
 
 }

diff --git a/packages/react-moveable/src/react-moveable/utils/getMatrixStackInfo.ts b/packages/react-moveable/src/react-moveable/utils/getMatrixStackInfo.ts
@@ -30,7 +30,8 @@ export function getMatrixStackInfo(
 ) {
     let el: SVGElement | HTMLElement | null = target;
     const matrixes: MatrixInfo[] = [];
-    let requestEnd = !checkContainer && target === container || target === document.body;
+    const documentElement = document.documentElement || document.body;
+    let requestEnd = !checkContainer && target === container || target === documentElement;
     let isEnd = requestEnd;
     let is3d = false;
     let n = 3;
@@ -167,7 +168,7 @@ export function getMatrixStackInfo(
                 parentClientLeft = offsetParent.clientLeft;
                 parentClientTop = offsetParent.clientTop;
             }
-            if (hasOffset && offsetParent === document.body) {
+            if (hasOffset && offsetParent === documentElement) {
                 const margin = getBodyOffset(el, false, style);
 
                 offsetLeft += margin[0];
@@ -218,7 +219,7 @@ export function getMatrixStackInfo(
             el = offsetParent;
             requestEnd = isOffsetEnd;
         }
-        if (!checkContainer || el === document.body) {
+        if (!checkContainer || el === documentElement) {
             isEnd = requestEnd;
         }
     }

diff --git a/packages/react-moveable/stories/4-Options/ReactPersistDataApp.tsx b/packages/react-moveable/stories/4-Options/ReactPersistDataApp.tsx
@@ -12,7 +12,6 @@ export default function App() {
                 draggable={true}
                 resizable={true}
                 rotatable={true}
-                viewContainer={document.body}
                 persistData={{
                     left:  67.6202,
                     top: 110.6202,

diff --git a/packages/react-moveable/stories/5A-Advanced/0-Moveable/ReactNoRelativeApp.tsx b/packages/react-moveable/stories/5A-Advanced/0-Moveable/ReactNoRelativeApp.tsx
@@ -6,12 +6,29 @@ export default function App(props: Record<string, any>) {
     return (
         <div className="no-relative" style={{
             // position: "relative",
+            height: "400px",
         }}>
             <div className="target" style={{
                 marginLeft: "100px",
                 // left: "100px",
                 // transform: "translate(100px, 0px)",
             }}>Target</div>
+            <svg className="target2" data-target="svg" style={{
+                top: "45.7%",
+                left: "63%",
+                width: "17%",
+                height: "40%",
+                transform: "rotate(0deg)",
+                border: "1px solid black",
+            }}>
+                <path data-target="path1" d="M 74 53.64101615137753 L 14.000000000000027 88.28203230275507 L 14 19 L 74 53.64101615137753 Z" fill="#f55" stroke-linejoin="round" stroke-width="8" opacity="1" stroke="#5f5" origin="50% 50%" />
+                <path data-target="path2" d="M 84 68.64101615137753 L 24.00000000000003 103.28203230275507 L 24 34 L 84 68.64101615137753 Z" fill="#55f" stroke-linejoin="round" stroke-width="8" opacity="1" stroke="#333" origin="50% 50%" />
+                <g style={{ transform: "translate(40px, 10px)" }}>
+                    <path data-target="pathline" d="M3,19.333C3,17.258,9.159,1.416,21,5.667
+                            c13,4.667,13.167,38.724,39.667,7.39" fill="transparent" stroke="#ff5" />
+                    <ellipse data-target="ellipse" cx="40" cy="80" rx="40" ry="10" style={{ fill: "yellow", stroke: "purple", strokeWidth: 2 }} />
+                </g>
+            </svg>
             <Moveable
                 target={".target"}
                 draggable={true}
@@ -21,6 +38,15 @@ export default function App(props: Record<string, any>) {
                     e.target.style.cssText += e.cssText;
                 }}
             ></Moveable>
+            <Moveable
+                target={".target2"}
+                draggable={true}
+                rotatable={true}
+                // rootContainer={document.documentElement}
+                onRender={e => {
+                    e.target.style.cssText += e.cssText;
+                }}
+            ></Moveable>
         </div>
     );
 }
diff --git a/packages/react-moveable/stories/templates/default.css b/packages/react-moveable/stories/templates/default.css
@@ -7,7 +7,11 @@ html, body {
 html:has(.no-relative), body:has(.no-relative) {
     margin: 8px;
     padding: 8px;
-    border: 8px solid red;
+    position: static;
+    /* border: 8px solid red; */
+}
+html:has(.no-relative) {
+    position: relative;
 }
 .description {
     padding: 10px;