From 25dced4f1531cc46d77601f71674031aa58fdf0b Mon Sep 17 00:00:00 2001 From: Daybrush Date: Sat, 23 Jul 2022 00:15:11 +0900 Subject: [PATCH] fix: remove wrong react types #703 --- .../src/react-moveable/MoveableGroup.tsx | 5 +- .../src/react-moveable/MoveableManager.tsx | 6 +- .../src/react-moveable/externalTypes.ts | 4 + .../src/react-moveable/index.esm.ts | 2 +- .../src/react-moveable/types.ts | 54 ++-- .../src/react-moveable/utils.tsx | 265 +----------------- .../utils/calculateMatrixStack.ts | 136 +++++++++ .../react-moveable/utils/getElementInfo.ts | 93 ++++++ .../utils/getMoveableTargetInfo.ts | 74 +++++ packages/react-moveable/types/package.json | 4 +- packages/vue-moveable/README.md | 6 +- packages/vue3-moveable/tsconfig.json | 1 - 12 files changed, 347 insertions(+), 303 deletions(-) create mode 100644 packages/react-moveable/src/react-moveable/externalTypes.ts create mode 100644 packages/react-moveable/src/react-moveable/utils/calculateMatrixStack.ts create mode 100644 packages/react-moveable/src/react-moveable/utils/getElementInfo.ts create mode 100644 packages/react-moveable/src/react-moveable/utils/getMoveableTargetInfo.ts diff --git a/packages/react-moveable/src/react-moveable/MoveableGroup.tsx b/packages/react-moveable/src/react-moveable/MoveableGroup.tsx index 8ffe33f68..9fc4915d5 100644 --- a/packages/react-moveable/src/react-moveable/MoveableGroup.tsx +++ b/packages/react-moveable/src/react-moveable/MoveableGroup.tsx @@ -4,10 +4,11 @@ import ChildrenDiffer from "@egjs/children-differ"; import { getAbleGesto, getTargetAbleGesto } from "./gesto/getAbleGesto"; import Groupable from "./ables/Groupable"; import { MIN_NUM, MAX_NUM, TINY_NUM } from "./consts"; -import { getTargetInfo, getAbsolutePosesByState, equals, unset } from "./utils"; +import { getAbsolutePosesByState, equals, unset } from "./utils"; import { minus, plus, rotate } from "@scena/matrix"; import { getMinMaxs } from "overlap-area"; import { throttle } from "@daybrush/utils"; +import { getMoveableTargetInfo } from "./utils/getMoveableTargetInfo"; function getMaxPos(poses: number[][][], index: number) { return Math.max(...poses.map(([pos1, pos2, pos3, pos4]) => { @@ -143,7 +144,7 @@ class MoveableGroup extends MoveableManager { state.height = height; const container = this.getContainer(); - const info = getTargetInfo( + const info = getMoveableTargetInfo( this.controlBox.getElement(), target, this.controlBox.getElement(), diff --git a/packages/react-moveable/src/react-moveable/MoveableManager.tsx b/packages/react-moveable/src/react-moveable/MoveableManager.tsx index a76b7a736..e0d451c13 100644 --- a/packages/react-moveable/src/react-moveable/MoveableManager.tsx +++ b/packages/react-moveable/src/react-moveable/MoveableManager.tsx @@ -3,7 +3,6 @@ import { createElement } from "react"; import { PREFIX } from "./consts"; import { prefix, - getTargetInfo, unset, getAbsolutePosesByState, getRect, @@ -32,6 +31,7 @@ import { fitPoints, getAreaSize, getOverlapSize, isInside } from "overlap-area"; import EventManager from "./EventManager"; import styled from "react-css-styled"; import EventEmitter from "@scena/event-emitter"; +import { getMoveableTargetInfo } from "./utils/getMoveableTargetInfo"; export default class MoveableManager extends React.PureComponent, MoveableManagerState> { @@ -72,7 +72,7 @@ export default class MoveableManager gesto: null, renderPoses: [[0, 0], [0, 0], [0, 0], [0, 0]], disableNativeEvent: false, - ...getTargetInfo(null), + ...getMoveableTargetInfo(null), }; public enabledAbles: Able[] = []; public targetAbles: Able[] = []; @@ -336,7 +336,7 @@ export default class MoveableManager ? parentMoveable.props.rootContainer : props.rootContainer; this.updateState( - getTargetInfo(this.controlBox && this.controlBox.getElement(), + getMoveableTargetInfo(this.controlBox && this.controlBox.getElement(), target, container, container, diff --git a/packages/react-moveable/src/react-moveable/externalTypes.ts b/packages/react-moveable/src/react-moveable/externalTypes.ts new file mode 100644 index 000000000..69fcd1287 --- /dev/null +++ b/packages/react-moveable/src/react-moveable/externalTypes.ts @@ -0,0 +1,4 @@ +export * from "./types"; +export type { MoveableElementMatrixInfo } from "./utils/calculateMatrixStack"; +export type { MoveableElementInfo } from "./utils/getElementInfo"; +export type { MoveableTargetInfo } from "./utils/getMoveableTargetInfo"; diff --git a/packages/react-moveable/src/react-moveable/index.esm.ts b/packages/react-moveable/src/react-moveable/index.esm.ts index 99d98f692..4cebaaae7 100644 --- a/packages/react-moveable/src/react-moveable/index.esm.ts +++ b/packages/react-moveable/src/react-moveable/index.esm.ts @@ -18,7 +18,7 @@ export { InitialMoveable, } from "./InitialMoveable"; -export { getElementInfo } from "./utils"; +export { getElementInfo } from "./utils/getElementInfo"; export { default as Draggable, diff --git a/packages/react-moveable/src/react-moveable/types.ts b/packages/react-moveable/src/react-moveable/types.ts index 949d4043a..c65e7fe5f 100644 --- a/packages/react-moveable/src/react-moveable/types.ts +++ b/packages/react-moveable/src/react-moveable/types.ts @@ -2,6 +2,7 @@ import { IObject } from "@daybrush/utils"; import Gesto, * as GestoTypes from "gesto"; import CustomGesto from "./gesto/CustomGesto"; import { MOVEABLE_EVENTS_MAP, MOVEABLE_PROPS_MAP } from "./ables/consts"; +import { MoveableTargetInfo } from "./utils/getMoveableTargetInfo"; export interface MoveableClientRect { left: number; @@ -28,6 +29,24 @@ export type MoveableManagerProps = { } & MoveableDefaultOptions & (unknown extends T ? IObject : T); export type AnyObject = (unknown extends T ? IObject : T); + +/** + * @typedef + * @memberof Moveable + */ +export interface MoveablePosition { + left: number; + top: number; + right: number; + bottom: number; + origin: number[]; + pos1: number[]; + pos2: number[]; + pos3: number[]; + pos4: number[]; + direction: 1 | -1; +} + /** * @typedef * @memberof Moveable @@ -162,41 +181,10 @@ export interface MatrixInfo { } export type MoveableManagerState = { container: SVGElement | HTMLElement | null | undefined; - target: SVGElement | HTMLElement | null | undefined; - left: number; - top: number; - right: number; - bottom: number; - width: number; - height: number; - beforeMatrix: number[]; - allMatrix: number[]; - targetTransform: string; - rootMatrix: number[]; - targetMatrix: number[]; - offsetMatrix: number[]; - is3d: boolean; - transformOrigin: number[]; - targetOrigin: number[]; - beforeOrigin: number[]; - origin: number[]; - originalBeforeOrigin: number[]; - beforeDirection: number; - direction: number; - renderPoses: number[][]; disableNativeEvent: boolean; - pos1: number[]; - pos2: number[]; - pos3: number[]; - pos4: number[]; gesto: Gesto | CustomGesto | null; - targetClientRect: MoveableClientRect; - containerClientRect: MoveableClientRect; - moveableClientRect: MoveableClientRect; - rootContainerClientRect: MoveableClientRect; - rotation: number; - hasFixed: boolean; -} & ElementSizes & T; + renderPoses: number[][]; +} & MoveableTargetInfo & T; /** * @typedef diff --git a/packages/react-moveable/src/react-moveable/utils.tsx b/packages/react-moveable/src/react-moveable/utils.tsx index d5524716b..eed1f232f 100644 --- a/packages/react-moveable/src/react-moveable/utils.tsx +++ b/packages/react-moveable/src/react-moveable/utils.tsx @@ -11,17 +11,15 @@ import { createOriginMatrix, convertPositionMatrix, calculate, multiplies, minus, - getOrigin, createScaleMatrix, plus, - ignoreDimension, convertCSStoMatrix, convertMatrixtoCSS, } from "@scena/matrix"; import { MoveableManagerState, Able, MoveableClientRect, MoveableProps, ArrayFormat, MoveableRefType, - MatrixInfo, ExcludeEndParams, ExcludeParams, ElementSizes, + MatrixInfo, ExcludeEndParams, ExcludeParams, ElementSizes, MoveablePosition, } from "./types"; import { parse, toMat, calculateMatrixDist, parseMat } from "css-to-mat"; import { getDragDist } from "./gesto/GestoUtils"; @@ -466,207 +464,7 @@ export function getMatrixStackInfo( hasFixed, }; } -export function calculateElementInfo( - target?: SVGElement | HTMLElement | null, - container?: SVGElement | HTMLElement | null, - rootContainer: HTMLElement | SVGElement | null | undefined = container, - isAbsolute3d?: boolean, -): ReturnType - & ReturnType - & ElementSizes - & { width: number; height: number; rotation: number; } { - let width = 0; - let height = 0; - let rotation = 0; - let allResult: {} = {}; - - const sizes = getSize(target); - - if (target) { - width = sizes.offsetWidth; - height = sizes.offsetHeight; - } - - if (target) { - const result = calculateMatrixStack( - target, - container, - rootContainer, - isAbsolute3d, - // prevMatrix, prevRootMatrix, prevN, - ); - - const position = calculateMoveablePosition( - result.allMatrix, - result.transformOrigin, - width, height, - ); - allResult = { - ...result, - ...position, - }; - const rotationPosition = calculateMoveablePosition( - result.allMatrix, [50, 50], 100, 100, - ); - rotation = getRotationRad([rotationPosition.pos1, rotationPosition.pos2], rotationPosition.direction); - } - const n = isAbsolute3d ? 4 : 3; - - return { - width, - height, - rotation, - ...sizes, - rootMatrix: createIdentityMatrix(n), - beforeMatrix: createIdentityMatrix(n), - offsetMatrix: createIdentityMatrix(n), - allMatrix: createIdentityMatrix(n), - targetMatrix: createIdentityMatrix(n), - targetTransform: "", - transformOrigin: [0, 0], - targetOrigin: [0, 0], - is3d: !!isAbsolute3d, - left: 0, - top: 0, - right: 0, - bottom: 0, - origin: [0, 0], - pos1: [0, 0], - pos2: [0, 0], - pos3: [0, 0], - pos4: [0, 0], - direction: 1, - hasFixed: false, - offsetContainer: null, - offsetRootContainer: null, - ...allResult, - }; -} -export function getElementInfo( - target: SVGElement | HTMLElement, - container?: SVGElement | HTMLElement | null, - rootContainer: SVGElement | HTMLElement | null | undefined = container, -) { - return calculateElementInfo(target, container, rootContainer, true); -} -export function calculateMatrixStack( - target: SVGElement | HTMLElement, - container?: SVGElement | HTMLElement | null, - rootContainer: SVGElement | HTMLElement | null | undefined = container, - isAbsolute3d?: boolean, - // prevMatrix?: number[], - // prevRootMatrix?: number[], - // prevN?: number, -) { - const { - matrixes, - is3d, - targetMatrix: prevTargetMatrix, - transformOrigin, - targetOrigin, - offsetContainer, - hasFixed, - } = getMatrixStackInfo(target, container); // prevMatrix - const { - matrixes: rootMatrixes, - is3d: isRoot3d, - offsetContainer: offsetRootContainer, - } = getMatrixStackInfo(offsetContainer, rootContainer, true); // prevRootMatrix - - // if (rootContainer === document.body) { - // console.log(offsetContainer, rootContainer, rootMatrixes); - // } - const isNext3d = isAbsolute3d || isRoot3d || is3d; - const n = isNext3d ? 4 : 3; - const isSVGGraphicElement = target.tagName.toLowerCase() !== "svg" && "ownerSVGElement" in target; - let targetMatrix = prevTargetMatrix; - // let allMatrix = prevMatrix ? convertDimension(prevMatrix, prevN!, n) : createIdentityMatrix(n); - // let rootMatrix = prevRootMatrix ? convertDimension(prevRootMatrix, prevN!, n) : createIdentityMatrix(n); - // let beforeMatrix = prevMatrix ? convertDimension(prevMatrix, prevN!, n) : createIdentityMatrix(n); - let allMatrix = createIdentityMatrix(n); - let rootMatrix = createIdentityMatrix(n); - let beforeMatrix = createIdentityMatrix(n); - let offsetMatrix = createIdentityMatrix(n); - const length = matrixes.length; - - rootMatrixes.reverse(); - matrixes.reverse(); - - if (!is3d && isNext3d) { - targetMatrix = convertDimension(targetMatrix, 3, 4); - - convert3DMatrixes(matrixes); - } - if (!isRoot3d && isNext3d) { - convert3DMatrixes(rootMatrixes); - } - - // rootMatrix = (...) -> container -> offset -> absolute -> offset -> absolute(targetMatrix) - // rootMatrixBeforeOffset = lastOffsetMatrix -> (...) -> container - // beforeMatrix = (... -> container -> offset -> absolute) -> offset -> absolute(targetMatrix) - // offsetMatrix = (... -> container -> offset -> absolute -> offset) -> absolute(targetMatrix) - - rootMatrixes.forEach(info => { - rootMatrix = multiply(rootMatrix, info.matrix!, n); - }); - const originalRootContainer = rootContainer || document.body; - const endContainer = rootMatrixes[0]?.target - || getOffsetInfo(originalRootContainer, originalRootContainer, true).offsetParent; - const rootMatrixBeforeOffset = rootMatrixes.slice(1).reduce((matrix, info) => { - return multiply(matrix, info.matrix!, n); - }, createIdentityMatrix(n)); - matrixes.forEach((info, i) => { - if (length - 2 === i) { - // length - 3 - beforeMatrix = allMatrix.slice(); - } - if (length - 1 === i) { - // length - 2 - offsetMatrix = allMatrix.slice(); - } - // calculate for SVGElement - if (!info.matrix) { - const nextInfo = matrixes[i + 1]; - const offset = getSVGOffset( - info, - nextInfo, - endContainer, - n, - multiply(rootMatrixBeforeOffset, allMatrix, n), - ); - info.matrix = createOriginMatrix(offset, n); - } - allMatrix = multiply(allMatrix, info.matrix!, n); - }); - const isMatrix3d = !isSVGGraphicElement && is3d; - - if (!targetMatrix) { - targetMatrix = createIdentityMatrix(isMatrix3d ? 4 : 3); - } - const targetTransform = makeMatrixCSS( - isSVGGraphicElement && targetMatrix.length === 16 - ? convertDimension(targetMatrix, 4, 3) : targetMatrix, - isMatrix3d, - ); - - rootMatrix = ignoreDimension(rootMatrix, n, n); - - return { - hasFixed, - rootMatrix, - beforeMatrix, - offsetMatrix, - allMatrix, - targetMatrix, - targetTransform, - transformOrigin, - targetOrigin, - is3d: isNext3d, - offsetContainer: offsetContainer as HTMLElement | null, - offsetRootContainer: offsetRootContainer as HTMLElement | null, - }; -} export function makeMatrixCSS(matrix: number[], is3d: boolean = matrix.length > 9) { return `${is3d ? "matrix3d" : "matrix"}(${convertMatrixtoCSS(matrix, !is3d).join(",")})`; } @@ -863,7 +661,12 @@ export function getSVGOffset( } return offset.map(p => Math.round(p)); } -export function calculateMoveablePosition(matrix: number[], origin: number[], width: number, height: number) { +export function calculateMoveablePosition( + matrix: number[], + origin: number[], + width: number, + height: number, +): MoveablePosition { const is3d = matrix.length === 16; const n = is3d ? 4 : 3; const poses = calculatePoses(matrix, width, height, n); @@ -1090,60 +893,6 @@ export function getRotationRad( return getRad(direction > 0 ? poses[0] : poses[1], direction > 0 ? poses[1] : poses[0]); } -export function getTargetInfo( - moveableElement?: HTMLElement | null, - target?: HTMLElement | SVGElement | null, - container?: HTMLElement | SVGElement | null, - parentContainer?: HTMLElement | SVGElement | null, - rootContainer?: HTMLElement | SVGElement | null, - // state?: Partial | false | undefined, -) { - let beforeDirection: 1 | -1 = 1; - let beforeOrigin = [0, 0]; - let targetClientRect = resetClientRect(); - let moveableClientRect = resetClientRect(); - let containerClientRect = resetClientRect(); - let rootContainerClientRect = resetClientRect(); - - const result = calculateElementInfo( - target, container!, rootContainer!, false, - // state, - ); - if (target) { - const n = result.is3d ? 4 : 3; - const beforePosition = calculateMoveablePosition( - result.offsetMatrix, - plus(result.transformOrigin, getOrigin(result.targetMatrix, n)), - result.width, result.height, - ); - beforeDirection = beforePosition.direction; - beforeOrigin = plus( - beforePosition.origin, - [beforePosition.left - result.left, beforePosition.top - result.top], - ); - - targetClientRect = getClientRect(target); - const offsetContainer = getOffsetInfo(parentContainer, parentContainer, true).offsetParent - || result.offsetRootContainer!; - containerClientRect = getClientRect(offsetContainer, true); - rootContainerClientRect = getClientRect(result.offsetRootContainer!); - if (moveableElement) { - moveableClientRect = getClientRect(moveableElement); - } - } - - return { - targetClientRect, - containerClientRect, - moveableClientRect, - rootContainerClientRect, - beforeDirection, - beforeOrigin, - originalBeforeOrigin: beforeOrigin, - target, - ...result, - }; -} export function resetClientRect(): MoveableClientRect { return { left: 0, top: 0, diff --git a/packages/react-moveable/src/react-moveable/utils/calculateMatrixStack.ts b/packages/react-moveable/src/react-moveable/utils/calculateMatrixStack.ts new file mode 100644 index 000000000..08aa33a0d --- /dev/null +++ b/packages/react-moveable/src/react-moveable/utils/calculateMatrixStack.ts @@ -0,0 +1,136 @@ +import { createIdentityMatrix, convertDimension, multiply, createOriginMatrix, ignoreDimension } from "@scena/matrix"; +import { getMatrixStackInfo, convert3DMatrixes, getOffsetInfo, getSVGOffset, makeMatrixCSS } from "../utils"; + +export interface MoveableElementMatrixInfo { + hasFixed: boolean; + rootMatrix: number[]; + beforeMatrix: number[]; + offsetMatrix: number[]; + allMatrix: number[]; + targetMatrix: number[]; + transformOrigin: number[]; + targetOrigin: number[]; + is3d: boolean; + targetTransform: string; + offsetContainer: HTMLElement | null, + offsetRootContainer: HTMLElement | null, +} + +export function calculateMatrixStack( + target: SVGElement | HTMLElement, + container?: SVGElement | HTMLElement | null, + rootContainer: SVGElement | HTMLElement | null | undefined = container, + isAbsolute3d?: boolean, + // prevMatrix?: number[], + // prevRootMatrix?: number[], + // prevN?: number, +): MoveableElementMatrixInfo { + const { + matrixes, + is3d, + targetMatrix: prevTargetMatrix, + transformOrigin, + targetOrigin, + offsetContainer, + hasFixed, + } = getMatrixStackInfo(target, container); // prevMatrix + const { + matrixes: rootMatrixes, + is3d: isRoot3d, + offsetContainer: offsetRootContainer, + } = getMatrixStackInfo(offsetContainer, rootContainer, true); // prevRootMatrix + + // if (rootContainer === document.body) { + // console.log(offsetContainer, rootContainer, rootMatrixes); + // } + const isNext3d = isAbsolute3d || isRoot3d || is3d; + const n = isNext3d ? 4 : 3; + const isSVGGraphicElement = target.tagName.toLowerCase() !== "svg" && "ownerSVGElement" in target; + let targetMatrix = prevTargetMatrix; + // let allMatrix = prevMatrix ? convertDimension(prevMatrix, prevN!, n) : createIdentityMatrix(n); + // let rootMatrix = prevRootMatrix ? convertDimension(prevRootMatrix, prevN!, n) : createIdentityMatrix(n); + // let beforeMatrix = prevMatrix ? convertDimension(prevMatrix, prevN!, n) : createIdentityMatrix(n); + let allMatrix = createIdentityMatrix(n); + let rootMatrix = createIdentityMatrix(n); + let beforeMatrix = createIdentityMatrix(n); + let offsetMatrix = createIdentityMatrix(n); + const length = matrixes.length; + + rootMatrixes.reverse(); + matrixes.reverse(); + + if (!is3d && isNext3d) { + targetMatrix = convertDimension(targetMatrix, 3, 4); + + convert3DMatrixes(matrixes); + } + if (!isRoot3d && isNext3d) { + convert3DMatrixes(rootMatrixes); + } + + // rootMatrix = (...) -> container -> offset -> absolute -> offset -> absolute(targetMatrix) + // rootMatrixBeforeOffset = lastOffsetMatrix -> (...) -> container + // beforeMatrix = (... -> container -> offset -> absolute) -> offset -> absolute(targetMatrix) + // offsetMatrix = (... -> container -> offset -> absolute -> offset) -> absolute(targetMatrix) + + rootMatrixes.forEach(info => { + rootMatrix = multiply(rootMatrix, info.matrix!, n); + }); + const originalRootContainer = rootContainer || document.body; + const endContainer = rootMatrixes[0]?.target + || getOffsetInfo(originalRootContainer, originalRootContainer, true).offsetParent; + const rootMatrixBeforeOffset = rootMatrixes.slice(1).reduce((matrix, info) => { + return multiply(matrix, info.matrix!, n); + }, createIdentityMatrix(n)); + matrixes.forEach((info, i) => { + if (length - 2 === i) { + // length - 3 + beforeMatrix = allMatrix.slice(); + } + if (length - 1 === i) { + // length - 2 + offsetMatrix = allMatrix.slice(); + } + + // calculate for SVGElement + if (!info.matrix) { + const nextInfo = matrixes[i + 1]; + const offset = getSVGOffset( + info, + nextInfo, + endContainer, + n, + multiply(rootMatrixBeforeOffset, allMatrix, n), + ); + info.matrix = createOriginMatrix(offset, n); + } + allMatrix = multiply(allMatrix, info.matrix!, n); + }); + const isMatrix3d = !isSVGGraphicElement && is3d; + + if (!targetMatrix) { + targetMatrix = createIdentityMatrix(isMatrix3d ? 4 : 3); + } + const targetTransform = makeMatrixCSS( + isSVGGraphicElement && targetMatrix.length === 16 + ? convertDimension(targetMatrix, 4, 3) : targetMatrix, + isMatrix3d, + ); + + rootMatrix = ignoreDimension(rootMatrix, n, n); + + return { + hasFixed, + rootMatrix, + beforeMatrix, + offsetMatrix, + allMatrix, + targetMatrix, + targetTransform, + transformOrigin, + targetOrigin, + is3d: isNext3d, + offsetContainer, + offsetRootContainer, + }; +} diff --git a/packages/react-moveable/src/react-moveable/utils/getElementInfo.ts b/packages/react-moveable/src/react-moveable/utils/getElementInfo.ts new file mode 100644 index 000000000..3551024d7 --- /dev/null +++ b/packages/react-moveable/src/react-moveable/utils/getElementInfo.ts @@ -0,0 +1,93 @@ +import { createIdentityMatrix } from "@scena/matrix"; +import { ElementSizes, MoveablePosition } from "../types"; +import { calculateMoveablePosition, getSize, getRotationRad } from "../utils"; +import { calculateMatrixStack, MoveableElementMatrixInfo } from "./calculateMatrixStack"; + +export interface MoveableElementInfo extends MoveableElementMatrixInfo, MoveablePosition, ElementSizes { + width: number; + height: number; + rotation: number; +} + +export function calculateElementInfo( + target?: SVGElement | HTMLElement | null, + container?: SVGElement | HTMLElement | null, + rootContainer: HTMLElement | SVGElement | null | undefined = container, + isAbsolute3d?: boolean, +): MoveableElementInfo { + let width = 0; + let height = 0; + let rotation = 0; + let allResult: {} = {}; + + const sizes = getSize(target); + + if (target) { + width = sizes.offsetWidth; + height = sizes.offsetHeight; + } + + if (target) { + const result = calculateMatrixStack( + target, + container, + rootContainer, + isAbsolute3d, + // prevMatrix, prevRootMatrix, prevN, + ); + + const position = calculateMoveablePosition( + result.allMatrix, + result.transformOrigin, + width, height, + ); + allResult = { + ...result, + ...position, + }; + const rotationPosition = calculateMoveablePosition( + result.allMatrix, [50, 50], 100, 100, + ); + rotation = getRotationRad([rotationPosition.pos1, rotationPosition.pos2], rotationPosition.direction); + } + const n = isAbsolute3d ? 4 : 3; + + return { + width, + height, + rotation, + ...sizes, + rootMatrix: createIdentityMatrix(n), + beforeMatrix: createIdentityMatrix(n), + offsetMatrix: createIdentityMatrix(n), + allMatrix: createIdentityMatrix(n), + targetMatrix: createIdentityMatrix(n), + targetTransform: "", + transformOrigin: [0, 0], + targetOrigin: [0, 0], + is3d: !!isAbsolute3d, + left: 0, + top: 0, + right: 0, + bottom: 0, + origin: [0, 0], + pos1: [0, 0], + pos2: [0, 0], + pos3: [0, 0], + pos4: [0, 0], + direction: 1, + hasFixed: false, + offsetContainer: null, + offsetRootContainer: null, + ...allResult, + }; +} + + +export function getElementInfo( + target: SVGElement | HTMLElement, + container?: SVGElement | HTMLElement | null, + rootContainer: SVGElement | HTMLElement | null | undefined = container, +) { + return calculateElementInfo(target, container, rootContainer, true); +} diff --git a/packages/react-moveable/src/react-moveable/utils/getMoveableTargetInfo.ts b/packages/react-moveable/src/react-moveable/utils/getMoveableTargetInfo.ts new file mode 100644 index 000000000..70a86ad2e --- /dev/null +++ b/packages/react-moveable/src/react-moveable/utils/getMoveableTargetInfo.ts @@ -0,0 +1,74 @@ +import { plus, getOrigin } from "@scena/matrix"; +import { MoveableClientRect } from "../types"; +import { + calculateMoveablePosition, + getClientRect, getOffsetInfo, resetClientRect, +} from "../utils"; +import { calculateElementInfo, MoveableElementInfo } from "./getElementInfo"; + + +export interface MoveableTargetInfo extends MoveableElementInfo { + targetClientRect: MoveableClientRect; + containerClientRect: MoveableClientRect; + moveableClientRect: MoveableClientRect; + rootContainerClientRect: MoveableClientRect; + beforeDirection: 1 | -1; + beforeOrigin: number[]; + originalBeforeOrigin: number[]; + target: HTMLElement | SVGElement | null | undefined; +} + +export function getMoveableTargetInfo( + moveableElement?: HTMLElement | null, + target?: HTMLElement | SVGElement | null, + container?: HTMLElement | SVGElement | null, + parentContainer?: HTMLElement | SVGElement | null, + rootContainer?: HTMLElement | SVGElement | null, + // state?: Partial | false | undefined, +): MoveableTargetInfo { + let beforeDirection: 1 | -1 = 1; + let beforeOrigin = [0, 0]; + let targetClientRect = resetClientRect(); + let moveableClientRect = resetClientRect(); + let containerClientRect = resetClientRect(); + let rootContainerClientRect = resetClientRect(); + + const result = calculateElementInfo( + target, container!, rootContainer!, false, + // state, + ); + if (target) { + const n = result.is3d ? 4 : 3; + const beforePosition = calculateMoveablePosition( + result.offsetMatrix, + plus(result.transformOrigin, getOrigin(result.targetMatrix, n)), + result.width, result.height, + ); + beforeDirection = beforePosition.direction; + beforeOrigin = plus( + beforePosition.origin, + [beforePosition.left - result.left, beforePosition.top - result.top], + ); + + targetClientRect = getClientRect(target); + const offsetContainer = getOffsetInfo(parentContainer, parentContainer, true).offsetParent + || result.offsetRootContainer!; + containerClientRect = getClientRect(offsetContainer, true); + rootContainerClientRect = getClientRect(result.offsetRootContainer!); + if (moveableElement) { + moveableClientRect = getClientRect(moveableElement); + } + } + + return { + targetClientRect, + containerClientRect, + moveableClientRect, + rootContainerClientRect, + beforeDirection, + beforeOrigin, + originalBeforeOrigin: beforeOrigin, + target, + ...result, + }; +} diff --git a/packages/react-moveable/types/package.json b/packages/react-moveable/types/package.json index 3d927fa76..3edac8ecf 100644 --- a/packages/react-moveable/types/package.json +++ b/packages/react-moveable/types/package.json @@ -3,7 +3,7 @@ "private": true, "main": "./index.js", "module": "./index.js", - "typings": "../declaration/types.d.ts", - "types": "../declaration/types.d.ts", + "typings": "../declaration/externalTypes.d.ts", + "types": "../declaration/externalTypes.d.ts", "sideEffects": false } diff --git a/packages/vue-moveable/README.md b/packages/vue-moveable/README.md index 0c4d32b2c..5addcff12 100644 --- a/packages/vue-moveable/README.md +++ b/packages/vue-moveable/README.md @@ -125,13 +125,13 @@ export default { Moveable, }, methods: { - onDrag({ transform }) { + onDrag({ target, transform }) { target.style.transform = transform; }, - onScale({ drag }) { + onScale({ target, drag }) { target.style.transform = drag.transform; }, - onRotate({ drag }) { + onRotate({ target, drag }) { target.style.transform = drag.transform; }, } diff --git a/packages/vue3-moveable/tsconfig.json b/packages/vue3-moveable/tsconfig.json index 14b2639ab..6858b1ce6 100755 --- a/packages/vue3-moveable/tsconfig.json +++ b/packages/vue3-moveable/tsconfig.json @@ -9,7 +9,6 @@ "experimentalDecorators": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, - "skipLibCheck": true, "sourceMap": true, "baseUrl": ".", "types": [