fix: support iframe #932

daybrush · May 29, 2023 · 7b4cbad · 7b4cbad
1 parent 76a852a
commit 7b4cbad
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 19 deletions.
diff --git a/packages/react-moveable/src/MoveableManager.tsx b/packages/react-moveable/src/MoveableManager.tsx
@@ -275,6 +275,9 @@ export default class MoveableManager<T = {}>
             || (parentMoveable && parentMoveable.getContainer())
             || this.controlBox.parentElement!;
     }
+    public getControlBoxElement(): HTMLElement {
+        return this.controlBox;
+    }
     /**
      * Check if the target is an element included in the moveable.
      * @method Moveable#isMoveableElement

diff --git a/packages/react-moveable/src/consts.ts b/packages/react-moveable/src/consts.ts
@@ -294,4 +294,5 @@ export const MOVEABLE_METHODS: Array<keyof MoveableInterface> = [
     "updateSelectors",
     "getTargets",
     "stopDrag",
+    "getControlBoxElement",
 ];
diff --git a/packages/react-moveable/src/types.ts b/packages/react-moveable/src/types.ts
@@ -3292,6 +3292,10 @@ export interface MoveableInterface {
         RequestParam extends AbleRequesters[Name],
         Name extends string = string,
     >(ableName: Name, params?: RequestParam, isInstant?: boolean): Requester<RequestParam>;
+    /**
+     * Returns the element of the control box.
+     */
+    getControlBoxElement(): HTMLElement;
     destroy(): void;
     dragStart(e: MouseEvent | TouchEvent): void;
     isInside(clientX: number, clientY: number): boolean;

diff --git a/packages/react-moveable/src/utils.tsx b/packages/react-moveable/src/utils.tsx
@@ -132,8 +132,8 @@ export function getOffsetInfo(
     checkZoom?: boolean,
     getTargetStyle?: GetStyle,
 ) {
-    const doc = el && el.ownerDocument ? el.ownerDocument : document;
-    const documentElement = doc.documentElement || doc.body;
+
+    const documentElement = getDocumentElement(el) || getDocumentBody(el);
     let hasSlot = false;
     let target: HTMLElement | SVGElement | null | undefined;
     let parentSlotElement: HTMLElement | null | undefined;
@@ -266,7 +266,7 @@ export function getBodyOffset(
     isSVG: boolean,
 ) {
     const getStyle = getCachedStyle(el);
-    const getBodyStyle = getCachedStyle(document.body);
+    const getBodyStyle = getCachedStyle(getDocumentBody(el));
     const bodyPosition = getBodyStyle("position");
     if (!isSVG && (!bodyPosition || bodyPosition === "static")) {
         return [0, 0];
@@ -296,16 +296,10 @@ export function convert3DMatrixes(matrixes: MatrixInfo[]) {
     });
 }
 
-export function getBodyScrollPos() {
-    return [
-        document.documentElement.scrollLeft || document.body.scrollLeft,
-        document.documentElement.scrollTop || document.body.scrollTop,
-    ];
-}
-
 export function getPositionFixedInfo(el: HTMLElement | SVGElement) {
     let fixedContainer = el.parentElement;
     let hasTransform = false;
+    const body = getDocumentBody(el);
 
     while (fixedContainer) {
         const transform = getComputedStyle(fixedContainer).transform;
@@ -315,14 +309,14 @@ export function getPositionFixedInfo(el: HTMLElement | SVGElement) {
             hasTransform = true;
             break;
         }
-        if (fixedContainer === document.body) {
+        if (fixedContainer === body) {
             break;
         }
         fixedContainer = fixedContainer.parentElement;
     }
 
     return {
-        fixedContainer: fixedContainer || document.body,
+        fixedContainer: fixedContainer || body,
         hasTransform,
     };
 }
@@ -463,7 +457,7 @@ export function getSVGOffset(
     const containerClientRect = container.getBoundingClientRect();
     let margin = [0, 0];
 
-    if (container === document.body) {
+    if (container === getDocumentBody(container)) {
         margin = getBodyOffset(target, true);
     }
 
@@ -699,7 +693,7 @@ export function getSize(
                 let parentElement: HTMLElement | null = null;
 
                 if (position === "absolute") {
-                    const offsetInfo = getOffsetInfo(target, document.body);
+                    const offsetInfo = getOffsetInfo(target, getDocumentBody(target));
                     parentElement = offsetInfo.offsetParent;
 
                 } else {
@@ -812,7 +806,7 @@ export function getExtendsRect(
     el: HTMLElement | SVGElement,
     rect: MoveableClientRect,
 ): MoveableClientRect {
-    const isRoot = el === document.body || el === document.documentElement;
+    const isRoot = el === getDocumentBody(el) || el === getDocumentElement(el);
 
 
     const extendsRect = {
@@ -1704,3 +1698,14 @@ export function watchValue<T>(
     store[property] = nextValue;
     return nextValue;
 }
+
+
+export function getDocument(el: Node | null | undefined) {
+    return el?.ownerDocument || document;
+}
+export function getDocumentBody(el: Node | null | undefined) {
+    return getDocument(el).body;
+}
+export function getDocumentElement(el: Node | null | undefined) {
+    return getDocument(el).documentElement;
+}
diff --git a/packages/react-moveable/src/utils/calculateMatrixStack.ts b/packages/react-moveable/src/utils/calculateMatrixStack.ts
@@ -1,6 +1,6 @@
 import { createIdentityMatrix, convertDimension, multiply, createOriginMatrix, ignoreDimension } from "@scena/matrix";
 import { getCachedMatrixContainerInfo } from "../store/Store";
-import { convert3DMatrixes, getOffsetInfo, getSVGOffset, makeMatrixCSS } from "../utils";
+import { convert3DMatrixes, getDocumentBody, getOffsetInfo, getSVGOffset, makeMatrixCSS } from "../utils";
 import { getMatrixStackInfo } from "./getMatrixStackInfo";
 
 export interface MoveableElementMatrixInfo {
@@ -89,7 +89,7 @@ export function calculateMatrixStack(
     nextRootMatrixes.forEach(info => {
         rootMatrix = multiply(rootMatrix, info.matrix!, n);
     });
-    const originalRootContainer = rootContainer || document.body;
+    const originalRootContainer = rootContainer || getDocumentBody(target);
     const endContainer = nextRootMatrixes[0]?.target
         || getOffsetInfo(originalRootContainer, originalRootContainer, true).offsetParent;
     const rootMatrixBeforeOffset = nextRootMatrixes.slice(1).reduce((matrix, info) => {

diff --git a/packages/react-moveable/src/utils/getMatrixStackInfo.ts b/packages/react-moveable/src/utils/getMatrixStackInfo.ts
@@ -9,7 +9,7 @@ import {
     getOffsetInfo, getElementTransform,
     getTransformMatrix, getPositionFixedInfo,
     convert3DMatrixes, getOffsetPosInfo,
-    getSVGMatrix, getBodyOffset, getAbsoluteMatrix,
+    getSVGMatrix, getBodyOffset, getAbsoluteMatrix, getDocumentElement, getDocumentBody,
 } from "../utils";
 
 
@@ -41,7 +41,7 @@ export function getMatrixStackInfo(
 ): MatrixStackInfo {
     let el: SVGElement | HTMLElement | null = target;
     const matrixes: MatrixInfo[] = [];
-    const documentElement = document.documentElement || document.body;
+    const documentElement = getDocumentElement(target) || getDocumentBody(target);
     let requestEnd = !checkContainer && target === container || target === documentElement;
     let isEnd = requestEnd;
     let is3d = false;