feat: add transformObject property in render events #933

daybrush · Jun 2, 2023 · 317ddde · 317ddde
1 parent e091d39
commit 317ddde
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 8 deletions.
diff --git a/packages/react-moveable/src/ables/Renderable.ts b/packages/react-moveable/src/ables/Renderable.ts
@@ -1,4 +1,5 @@
-import { getNextStyle, getNextTransformText } from "../gesto/GestoUtils";
+import { parse } from "css-to-mat";
+import { getNextStyle, getNextTransformText, getNextTransforms } from "../gesto/GestoUtils";
 import { fillChildEvents } from "../groupUtils";
 import {
     MoveableManagerInterface, RenderableProps, OnRenderStart, OnRender,
@@ -52,6 +53,7 @@ export default {
             isPinch: !!e.isPinch,
             targets: moveable.props.targets,
             transform: getNextTransformText(e),
+            transformObject: {},
             ...fillCSSObject(getNextStyle(e)),
             events: params,
         },));
@@ -70,6 +72,7 @@ export default {
             isDrag: e.isDrag,
             targets: moveable.props.targets,
             events: params,
+            transformObject: {},
             transform: getNextTransformText(e),
             ...fillCSSObject(getNextStyle(e)),
         }));
@@ -96,16 +99,29 @@ export default {
         return this.dragGroupEnd(moveable, e);
     },
     fillDragParams(moveable: MoveableManagerInterface<RenderableProps>, e: any) {
+        const transformObject: Record<string, any> = {};
+
+        parse(getNextTransforms(e) || []).forEach(matrixInfo => {
+            transformObject[matrixInfo.name] = matrixInfo.functionValue;
+        });
+
         return fillParams<OnRender>(moveable, e, {
             isPinch: !!e.isPinch,
+            transformObject,
             transform: getNextTransformText(e),
             ...fillCSSObject(getNextStyle(e)),
         });
     },
     fillDragEndParams(moveable: MoveableManagerInterface<RenderableProps>, e: any) {
+        const transformObject: Record<string, any> = {};
+
+        parse(getNextTransforms(e) || []).forEach(matrixInfo => {
+            transformObject[matrixInfo.name] = matrixInfo.functionValue;
+        });
         return fillParams<OnRenderEnd>(moveable, e, {
             isPinch: !!e.isPinch,
             isDrag: e.isDrag,
+            transformObject,
             transform: getNextTransformText(e),
             ...fillCSSObject(getNextStyle(e)),
         });

diff --git a/packages/react-moveable/src/gesto/GestoUtils.ts b/packages/react-moveable/src/gesto/GestoUtils.ts
@@ -59,9 +59,18 @@ export function setDragStart(moveable: MoveableManagerInterface<any>, { datas }:
     datas.startDragBeforeDist = calculate(datas.inverseBeforeMatrix, datas.absoluteOrigin, n);
     datas.startDragDist = calculate(datas.inverseMatrix, datas.absoluteOrigin, n);
 }
+
 export function getTransformDirection(e: any) {
     return calculateMoveablePosition(e.datas.beforeTransform, [50, 50], 100, 100).direction;
 }
+
+
+export interface OriginalDataTransformInfos {
+    startTransforms: string[];
+    nextTransforms: string[];
+    nextTransformAppendedIndexes: number[];
+}
+
 export function resolveTransformEvent(event: any, functionName: string) {
     const {
         datas,
@@ -440,7 +449,7 @@ export function getNextTransforms(e: any) {
         },
     } = e;
 
-    return originalDatas.nextTransforms;
+    return originalDatas.nextTransforms as string[];
 }
 export function getNextTransformText(e: any) {
     return (getNextTransforms(e) || []).join(" ");

diff --git a/packages/react-moveable/src/types.ts b/packages/react-moveable/src/types.ts
@@ -1798,6 +1798,11 @@ export interface OnRender extends OnEvent, CSSObject {
      * Whether or not it is being pinched.
      */
     isPinch: boolean;
+    /**
+     * Return transform as a transform object.
+     * `rotate` is a number and everything else is an array of numbers.
+     */
+    transformObject: Record<string, any>;
 }
 
 /**
@@ -1820,6 +1825,11 @@ export interface OnRenderEnd extends OnEvent, CSSObject {
      * Whether or not it is being pinched.
      */
     isDrag: boolean;
+    /**
+     * Return transform as a transform object.
+     * `rotate` is a number and everything else is an array of numbers.
+     */
+    transformObject: Record<string, any>;
 }
 
 export type EventInterface<T extends IObject<any> = {}> = {

diff --git a/packages/react-moveable/src/utils.tsx b/packages/react-moveable/src/utils.tsx
@@ -1286,17 +1286,20 @@ export function getDirectionCondition(ableName: string, checkAbles: string[] = [
 }
 
 export function convertTransformInfo(transforms: string[], index: number) {
+    const matrixInfos = parse(transforms);
+
     const beforeFunctionTexts = transforms.slice(0, index < 0 ? undefined : index);
     const beforeFunctionTexts2 = transforms.slice(0, index < 0 ? undefined : index + 1);
     const targetFunctionText = transforms[index] || "";
     const afterFunctionTexts = index < 0 ? [] : transforms.slice(index);
     const afterFunctionTexts2 = index < 0 ? [] : transforms.slice(index + 1);
 
-    const beforeFunctions = parse(beforeFunctionTexts);
-    const beforeFunctions2 = parse(beforeFunctionTexts2);
-    const targetFunctions = parse([targetFunctionText]);
-    const afterFunctions = parse(afterFunctionTexts);
-    const afterFunctions2 = parse(afterFunctionTexts2);
+    const beforeFunctions = matrixInfos.slice(0, index < 0 ? undefined : index);
+    const beforeFunctions2 = matrixInfos.slice(0, index < 0 ? undefined : index + 1);
+    const targetFunction = matrixInfos[index] ?? parse([""])[0];
+    const afterFunctions = index < 0 ? [] : matrixInfos.slice(index);
+    const afterFunctions2 = index < 0 ? [] : matrixInfos.slice(index + 1);
+    const targetFunctions = targetFunction ? [targetFunction] : [];
 
 
     const beforeFunctionMatrix = toMat(beforeFunctions);

diff --git a/packages/react-moveable/stories/1-Basic/ReactScalableApp.tsx b/packages/react-moveable/stories/1-Basic/ReactScalableApp.tsx
@@ -14,8 +14,30 @@ export default function App(props: Record<string, any>) {
                     keepRatio={props.keepRatio}
                     throttleScale={props.throttleScale}
                     renderDirections={props.renderDirections}
+                    snappable={true}
+                    snapThreshold={5}
+                    snapDigit={0}
+                    snapGap={true}
+                    elementGuidelines={[".target"]}
+                    snapDirections={{
+                        top: true,
+                        right: true,
+                        bottom: true,
+                        left: true,
+                    }}
+                    elementSnapDirections={{
+                        top: true,
+                        right: true,
+                        bottom: true,
+                        left: true,
+                    }}
+                    elementSn
                     onScale={e => {
-                        e.target.style.transform = e.drag.transform;
+                        // e.target.style.transform = e.drag.transform;
+                        e.target.style.cssText += e.cssText;
+                    }}
+                    onRender={e => {
+                        // e.target.style.cssText += e.cssText;
                     }}
                 />
             </div>