feat: export matrixes in getElementInfo

daybrush · Jun 19, 2023 · c1aad6a · c1aad6a
1 parent aab1758
commit c1aad6a
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 72 deletions.
diff --git a/packages/react-moveable/src/gesto/GestoUtils.ts b/packages/react-moveable/src/gesto/GestoUtils.ts
@@ -6,7 +6,7 @@ import {
 } from "@scena/matrix";
 import {
     calculatePoses, getAbsoluteMatrix, getAbsolutePosesByState,
-    calculatePosition, calculateInversePosition, calculateMoveablePosition, convertTransformInfo, fillCSSObject,
+    calculatePosition, calculateInversePosition, convertTransformInfo, fillCSSObject,
 } from "../utils";
 import { splitUnit, isArray, splitSpace, findIndex, dot, find, isString } from "@daybrush/utils";
 import {
@@ -16,6 +16,7 @@ import {
 import { setCustomDrag } from "./CustomGesto";
 import { parse, parseMat } from "css-to-mat";
 import { Draggable } from "../index.esm";
+import { calculateElementPosition } from "../utils/calculateElementPosition";
 
 export function calculatePointerDist(moveable: MoveableManagerInterface, e: any) {
     const { clientX, clientY, datas } = e;
@@ -61,7 +62,7 @@ export function setDragStart(moveable: MoveableManagerInterface<any>, { datas }:
 }
 
 export function getTransformDirection(e: any) {
-    return calculateMoveablePosition(e.datas.beforeTransform, [50, 50], 100, 100).direction;
+    return calculateElementPosition(e.datas.beforeTransform, [50, 50], 100, 100).direction;
 }
 
 

diff --git a/packages/react-moveable/src/index.esm.ts b/packages/react-moveable/src/index.esm.ts
@@ -16,7 +16,12 @@ export {
     InitialMoveable,
 } from "./InitialMoveable";
 
-export { getElementInfo } from "./utils/getElementInfo";
+export {
+    calculateElementPosition,
+} from "./utils/calculateElementPosition";
+export {
+    getElementInfo,
+} from "./utils/getElementInfo";
 
 export {
     default as Draggable,

diff --git a/packages/react-moveable/src/utils.tsx b/packages/react-moveable/src/utils.tsx
@@ -26,7 +26,7 @@ import {
     MoveableManagerState, Able, MoveableClientRect,
     MoveableProps, ArrayFormat, MoveableRefType,
     MatrixInfo, ExcludeEndParams, ExcludeParams,
-    ElementSizes, MoveablePosition, TransformObject,
+    ElementSizes, TransformObject,
     MoveableRefTargetsResultType, MoveableRefTargetType, MoveableManagerInterface, CSSObject, PaddingBox,
 } from "./types";
 import { parse, toMat, calculateMatrixDist, parseMat } from "css-to-mat";
@@ -224,8 +224,8 @@ export function getOffsetInfo(
         isEnd: isEnd || !target || target === documentElement,
         offsetParent: target as HTMLElement || documentElement,
     };
-
 }
+
 export function getOffsetPosInfo(
     el: HTMLElement | SVGElement,
     target: HTMLElement | SVGElement,
@@ -542,59 +542,6 @@ export function calculateMoveableClientPositions(
 
 }
 
-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);
-    let [
-        [x1, y1],
-        [x2, y2],
-        [x3, y3],
-        [x4, y4],
-    ] = poses;
-    let [originX, originY] = calculatePosition(matrix, origin, n);
-
-    const left = Math.min(x1, x2, x3, x4);
-    const top = Math.min(y1, y2, y3, y4);
-    const right = Math.max(x1, x2, x3, x4);
-    const bottom = Math.max(y1, y2, y3, y4);
-
-    x1 = (x1 - left) || 0;
-    x2 = (x2 - left) || 0;
-    x3 = (x3 - left) || 0;
-    x4 = (x4 - left) || 0;
-
-    y1 = (y1 - top) || 0;
-    y2 = (y2 - top) || 0;
-    y3 = (y3 - top) || 0;
-    y4 = (y4 - top) || 0;
-
-    originX = (originX - left) || 0;
-    originY = (originY - top) || 0;
-
-
-    const sx = matrix[0];
-    const sy = matrix[n + 1];
-    const direction = sign(sx * sy);
-
-    return {
-        left,
-        top,
-        right,
-        bottom,
-        origin: [originX, originY],
-        pos1: [x1, y1],
-        pos2: [x2, y2],
-        pos3: [x3, y3],
-        pos4: [x4, y4],
-        direction,
-    };
-}
 export function getDistSize(vec: number[]) {
     return Math.sqrt(vec[0] * vec[0] + vec[1] * vec[1]);
 }

diff --git a/packages/react-moveable/src/utils/calculateElementPosition.ts b/packages/react-moveable/src/utils/calculateElementPosition.ts
@@ -0,0 +1,56 @@
+import { MoveablePosition } from "../types";
+import { calculatePoses, calculatePosition, sign } from "../utils";
+
+export function calculateElementPosition(
+    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);
+    let [
+        [x1, y1],
+        [x2, y2],
+        [x3, y3],
+        [x4, y4],
+    ] = poses;
+    let [originX, originY] = calculatePosition(matrix, origin, n);
+
+    const left = Math.min(x1, x2, x3, x4);
+    const top = Math.min(y1, y2, y3, y4);
+    const right = Math.max(x1, x2, x3, x4);
+    const bottom = Math.max(y1, y2, y3, y4);
+
+    x1 = (x1 - left) || 0;
+    x2 = (x2 - left) || 0;
+    x3 = (x3 - left) || 0;
+    x4 = (x4 - left) || 0;
+
+    y1 = (y1 - top) || 0;
+    y2 = (y2 - top) || 0;
+    y3 = (y3 - top) || 0;
+    y4 = (y4 - top) || 0;
+
+    originX = (originX - left) || 0;
+    originY = (originY - top) || 0;
+
+
+    const sx = matrix[0];
+    const sy = matrix[n + 1];
+    const direction = sign(sx * sy);
+
+    return {
+        left,
+        top,
+        right,
+        bottom,
+        origin: [originX, originY],
+        pos1: [x1, y1],
+        pos2: [x2, y2],
+        pos3: [x3, y3],
+        pos4: [x4, y4],
+        direction,
+    };
+}
diff --git a/packages/react-moveable/src/utils/calculateMatrixStack.ts b/packages/react-moveable/src/utils/calculateMatrixStack.ts
@@ -3,6 +3,7 @@ import { getCachedMatrixContainerInfo } from "../store/Store";
 import { convert3DMatrixes, getOffsetInfo, getSVGOffset, makeMatrixCSS } from "../utils";
 import { getMatrixStackInfo } from "./getMatrixStackInfo";
 import { getDocumentBody } from "@daybrush/utils";
+import { MatrixInfo } from "../types";
 
 export interface MoveableElementMatrixInfo {
     hasZoom: boolean;
@@ -18,8 +19,9 @@ export interface MoveableElementMatrixInfo {
     is3d: boolean;
     targetTransform: string;
     inlineTransform: string;
-    offsetContainer: HTMLElement | null,
-    offsetRootContainer: HTMLElement | null,
+    offsetContainer: HTMLElement | null;
+    offsetRootContainer: HTMLElement | null;
+    matrixes: MatrixInfo[];
 }
 
 export function calculateMatrixStack(
@@ -137,6 +139,7 @@ export function calculateMatrixStack(
     return {
         hasZoom: containerZoom !== 1 || rootZoom !== 1,
         hasFixed,
+        matrixes,
         rootMatrix,
         originalRootMatrix,
         beforeMatrix,

diff --git a/packages/react-moveable/src/utils/getElementInfo.ts b/packages/react-moveable/src/utils/getElementInfo.ts
@@ -1,7 +1,8 @@
 import { createIdentityMatrix } from "@scena/matrix";
 import { ElementSizes, MoveablePosition } from "../types";
-import { calculateMoveablePosition, getSize, getRotationRad } from "../utils";
+import { getSize, getRotationRad } from "../utils";
 import { calculateMatrixStack, MoveableElementMatrixInfo } from "./calculateMatrixStack";
+import { calculateElementPosition } from "./calculateElementPosition";
 
 export interface MoveableElementInfo extends MoveableElementMatrixInfo, MoveablePosition, ElementSizes {
     width: number;
@@ -36,7 +37,7 @@ export function calculateElementInfo(
             // prevMatrix, prevRootMatrix, prevN,
         );
 
-        const position = calculateMoveablePosition(
+        const position = calculateElementPosition(
             result.allMatrix,
             result.transformOrigin,
             width, height,
@@ -45,7 +46,7 @@ export function calculateElementInfo(
             ...result,
             ...position,
         };
-        const rotationPosition = calculateMoveablePosition(
+        const rotationPosition = calculateElementPosition(
             result.allMatrix, [50, 50], 100, 100,
         );
         rotation = getRotationRad([rotationPosition.pos1, rotationPosition.pos2], rotationPosition.direction);
@@ -82,6 +83,7 @@ export function calculateElementInfo(
         hasFixed: false,
         offsetContainer: null,
         offsetRootContainer: null,
+        matrixes: [],
         ...allResult,
     };
 }

diff --git a/packages/react-moveable/src/utils/getMoveableTargetInfo.ts b/packages/react-moveable/src/utils/getMoveableTargetInfo.ts
@@ -3,11 +3,11 @@ import { getCachedClientRect, getCachedStyle } from "../store/Store";
 import { MoveableClientRect, Writable } from "../types";
 import {
     calculateInversePosition,
-    calculateMoveablePosition,
     getClientRect, getClientRectByPosition, getOffsetInfo, resetClientRect,
     getTransformOriginArray,
 } from "../utils";
 import { calculateElementInfo, MoveableElementInfo } from "./getElementInfo";
+import { calculateElementPosition } from "./calculateElementPosition";
 
 
 export interface MoveableTargetInfo extends MoveableElementInfo {
@@ -51,7 +51,7 @@ export function getMoveableTargetInfo(
             style[name] = getStyle(name as any);
         });
         const n = result.is3d ? 4 : 3;
-        const beforePosition = calculateMoveablePosition(
+        const beforePosition = calculateElementPosition(
             result.offsetMatrix,
             plus(result.transformOrigin, getOrigin(result.targetMatrix, n)),
             result.width, result.height,
@@ -69,12 +69,12 @@ export function getMoveableTargetInfo(
             || result.offsetRootContainer!;
 
         if (result.hasZoom) {
-            const absoluteTargetPosition = calculateMoveablePosition(
+            const absoluteTargetPosition = calculateElementPosition(
                 multiply(result.originalRootMatrix, result.allMatrix),
                 result.transformOrigin,
                 result.width, result.height,
             );
-            const absoluteContainerPosition = calculateMoveablePosition(
+            const absoluteContainerPosition = calculateElementPosition(
                 result.originalRootMatrix,
                 getTransformOriginArray(getCachedStyle(offsetContainer)("transformOrigin")).map(pos => parseFloat(pos)),
                 offsetContainer.offsetWidth, offsetContainer.offsetHeight,

diff --git a/yarn.lock b/yarn.lock
@@ -10921,12 +10921,12 @@ css-styled@~1.0.8:
   dependencies:
     "@daybrush/utils" "^1.13.0"
 
-css-to-mat@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.npmjs.org/css-to-mat/-/css-to-mat-1.0.3.tgz"
-  integrity sha512-HADRhVqPc8wFqEp6ClK+uuPYg+FMBinNo2ReLyI/KQCncmHPJ60o5zldyJG7NjsTqXWbdfGJO51jnoxfMvWJiA==
+css-to-mat@^1.0.3, css-to-mat@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/css-to-mat/-/css-to-mat-1.1.1.tgz#0dd10dcf9ec17df15708c8ff07a74fbd0b9a3fe5"
+  integrity sha512-kvpxFYZb27jRd2vium35G7q5XZ2WJ9rWjDUMNT36M3Hc41qCrLXFM5iEKMGXcrPsKfXEN+8l/riB4QzwwwiEyQ==
   dependencies:
-    "@daybrush/utils" "^1.3.1"
+    "@daybrush/utils" "^1.13.0"
     "@scena/matrix" "^1.0.0"
 
 css-tree@1.0.0-alpha.37: