diff --git a/packages/react-moveable/src/MoveableManager.tsx b/packages/react-moveable/src/MoveableManager.tsx index 12e09bca8..bdf492fbc 100644 --- a/packages/react-moveable/src/MoveableManager.tsx +++ b/packages/react-moveable/src/MoveableManager.tsx @@ -275,6 +275,9 @@ export default class MoveableManager || (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 index 04d0da0e5..1aad157b2 100644 --- a/packages/react-moveable/src/consts.ts +++ b/packages/react-moveable/src/consts.ts @@ -294,4 +294,5 @@ export const MOVEABLE_METHODS: Array = [ "updateSelectors", "getTargets", "stopDrag", + "getControlBoxElement", ]; diff --git a/packages/react-moveable/src/types.ts b/packages/react-moveable/src/types.ts index 77339bea2..044d9614a 100644 --- 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; + /** + * 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 index 4329b1f75..f4e096aed 100644 --- 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( 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 index 19be49cd7..b909a5f86 100644 --- 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 index a6eee867f..6fbf2d99b 100644 --- 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;