feat: add CSSObject on render

daybrush · Jul 26, 2022 · e2f462a · e2f462a
1 parent aed807e
commit e2f462a
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 22 deletions.
diff --git a/packages/react-moveable/src/react-moveable/ables/BeforeRenderable.ts b/packages/react-moveable/src/react-moveable/ables/BeforeRenderable.ts
@@ -45,9 +45,12 @@ export default {
 
         e.datas.startTransforms = isIdentityMatrix(startTransform, is3d) ? [] : splitSpace(startTransform);
     },
-    resetTransform(e: any) {
-        e.datas.nextTransforms = e.datas.startTransforms;
-        e.datas.nextTransformAppendedIndexes = [];
+    resetStyle(e: any) {
+        const datas = e.datas;
+
+        datas.nextStyle = {};
+        datas.nextTransforms = e.datas.startTransforms;
+        datas.nextTransformAppendedIndexes = [];
     },
     fillDragStartParams(moveable: MoveableManagerInterface<BeforeRenderableProps>, e: any) {
         return fillParams<OnBeforeRenderStart>(moveable, e, {
@@ -68,8 +71,10 @@ export default {
         triggerEvent(moveable, `onBeforeRenderStart`, this.fillDragStartParams(moveable, e));
     },
     drag(moveable: MoveableManagerInterface<BeforeRenderableProps>, e: any) {
-        this.resetTransform(e);
+        this.resetStyle(e);
+        const datas = e.datas;
 
+        datas.nextStyle = {};
         triggerEvent(moveable, `onBeforeRender`, fillParams<OnBeforeRender>(moveable, e, {
             isPinch: !!e.isPinch,
         }));
@@ -106,10 +111,12 @@ export default {
         const params = events.map((childEvent, i) => {
             const childMoveable = moveables[i];
 
-            this.resetTransform(childEvent);
+            this.resetStyle(childEvent);
+            const datas = e.datas;
+
+            datas.nextStyle = {};
             return this.fillDragParams(childMoveable, childEvent);
         });
-
         triggerEvent(moveable, `onBeforeRenderGroup`, fillParams<OnBeforeRenderGroup>(moveable, e, {
             isPinch: !!e.isPinch,
             targets: moveable.props.targets,

diff --git a/packages/react-moveable/src/react-moveable/ables/Draggable.tsx b/packages/react-moveable/src/react-moveable/ables/Draggable.tsx
@@ -249,7 +249,7 @@ export default {
             isPinch,
             ...fillCSSObject({
                 transform: nextTransform,
-            }),
+            }, e),
         });
 
         !parentEvent && triggerEvent(moveable, "onDrag", params);

diff --git a/packages/react-moveable/src/react-moveable/ables/Renderable.ts b/packages/react-moveable/src/react-moveable/ables/Renderable.ts
@@ -1,11 +1,11 @@
-import { getNextTransformText } from "../gesto/GestoUtils";
+import { getNextStyle, getNextTransformText } from "../gesto/GestoUtils";
 import { fillChildEvents } from "../groupUtils";
 import {
     MoveableManagerInterface, RenderableProps, OnRenderStart, OnRender,
     OnRenderEnd, MoveableGroupInterface,
     OnRenderGroupStart, OnRenderGroup, OnRenderGroupEnd,
 } from "../types";
-import { triggerEvent, fillParams } from "../utils";
+import { triggerEvent, fillParams, fillCSSObject } from "../utils";
 
 export default {
     name: "renderable",
@@ -55,8 +55,9 @@ export default {
             isPinch: !!e.isPinch,
             targets: moveable.props.targets,
             transform: getNextTransformText(e),
+            ...fillCSSObject(getNextStyle(e)),
             events: params,
-        }));
+        },));
     },
     dragGroupEnd(moveable: MoveableGroupInterface<RenderableProps>, e: any) {
         const events = fillChildEvents(moveable, "beforeRenderable", e);
@@ -99,6 +100,7 @@ export default {
         return fillParams<OnRender>(moveable, e, {
             isPinch: !!e.isPinch,
             transform: getNextTransformText(e),
+            ...fillCSSObject(getNextStyle(e)),
         });
     },
     fillDragEndParams(moveable: MoveableManagerInterface<RenderableProps>, e: any) {

diff --git a/packages/react-moveable/src/react-moveable/ables/Resizable.ts b/packages/react-moveable/src/react-moveable/ables/Resizable.ts
@@ -465,7 +465,7 @@ export default {
                     height: `${nextHeight}px`,
                 },
                 transform,
-            }, drag),
+            }, drag, e),
         });
         !parentEvent && triggerEvent(moveable, "onResize", params);
         return params;

diff --git a/packages/react-moveable/src/react-moveable/ables/Rotatable.tsx b/packages/react-moveable/src/react-moveable/ables/Rotatable.tsx
@@ -717,7 +717,7 @@ export default {
 
             if (resizeEvent) {
                 resize = resizeEvent;
-                transformEvent = fillAfterTransform(transformEvent, resizeEvent);
+                transformEvent = fillAfterTransform(transformEvent, resizeEvent, e);
             }
         }
 

diff --git a/packages/react-moveable/src/react-moveable/gesto/GestoUtils.ts b/packages/react-moveable/src/react-moveable/gesto/GestoUtils.ts
@@ -366,7 +366,7 @@ export function scaleMatrix(
 }
 
 export function fillTransformStartEvent(e: any): OnTransformStartEvent {
-    const originalDatas = e.originalDatas.beforeRenderable;
+    const originalDatas = getBeforeRenderableDatas(e);
     return {
         setTransform: (transform: string | string[], index = -1) => {
             originalDatas.startTransforms = isArray(transform) ? transform : splitSpace(transform);
@@ -378,13 +378,13 @@ export function fillTransformStartEvent(e: any): OnTransformStartEvent {
     };
 }
 export function setDefaultTransformIndex(e: any, property: string) {
-    const originalDatas = e.originalDatas.beforeRenderable;
+    const originalDatas = getBeforeRenderableDatas(e);
     const startTransforms = originalDatas.startTransforms;
 
     setTransformIndex(e, findIndex<string>(startTransforms, func => func.indexOf(`${property}(`) === 0));
 }
 export function setTransformIndex(e: any, index: number) {
-    const originalDatas = e.originalDatas.beforeRenderable;
+    const originalDatas = getBeforeRenderableDatas(e);
     const datas = e.datas;
 
     datas.transformIndex = index;
@@ -404,11 +404,14 @@ export function fillOriginalTransform(
     e: any,
     transform: string,
 ) {
-    const originalDatas = e.originalDatas.beforeRenderable;
+    const originalDatas = getBeforeRenderableDatas(e);
 
     originalDatas.nextTransforms = splitSpace(transform);
     // originalDatas.nextTargetMatrix = parseMat(transform);
 }
+export function getBeforeRenderableDatas(e: any) {
+    return e.originalDatas.beforeRenderable;
+}
 export function getNextTransforms(e: any) {
     const {
         originalDatas: {
@@ -421,6 +424,11 @@ export function getNextTransforms(e: any) {
 export function getNextTransformText(e: any) {
     return getNextTransforms(e).join(" ");
 }
+
+export function getNextStyle(e: any) {
+    return getBeforeRenderableDatas(e).nextStyle;
+}
+
 export function fillTransformEvent(
     moveable: MoveableManagerInterface<DraggableProps>,
     nextTransform: string,
@@ -441,7 +449,7 @@ export function fillTransformEvent(
         drag: drag as OnDrag,
         ...fillCSSObject({
             transform: afterTransform,
-        }),
+        }, e),
         afterTransform,
     };
 }

diff --git a/packages/react-moveable/src/react-moveable/types.ts b/packages/react-moveable/src/react-moveable/types.ts
@@ -1498,10 +1498,11 @@ export interface OnRenderStart extends OnEvent {
  * @typedef
  * @memberof Moveable
  * @extends Moveable.OnEvent
+ * @extends Moveable.CSSObject
  * @property - a target's next transform string value.
  * @property - Whether or not it is being pinched.
  */
-export interface OnRender extends OnEvent {
+export interface OnRender extends OnEvent, CSSObject {
     transform: string;
     isPinch: boolean;
 }

diff --git a/packages/react-moveable/src/react-moveable/utils.tsx b/packages/react-moveable/src/react-moveable/utils.tsx
@@ -23,7 +23,7 @@ import {
     ElementSizes, MoveablePosition, TransformObject,
 } from "./types";
 import { parse, toMat, calculateMatrixDist, parseMat } from "css-to-mat";
-import { getDragDist } from "./gesto/GestoUtils";
+import { getBeforeRenderableDatas, getDragDist } from "./gesto/GestoUtils";
 
 export function round(num: number) {
     return Math.round(num);
@@ -1008,23 +1008,35 @@ export function getAbsolutePosesByState({
 }) {
     return getAbsolutePoses([pos1, pos2, pos3, pos4], [left, top]);
 }
+
 export function roundSign(num: number) {
     return Math.round(num % 1 === -0.5 ? num - 1 : num);
 }
+
 export function unset(self: any, name: string) {
     self[name]?.unset();
     self[name] = null;
 }
 
-export function fillCSSObject(style: Record<string, any>) {
+export function fillCSSObject(style: Record<string, any>, resolvedEvent?: any) {
+    if (resolvedEvent) {
+        const originalDatas = getBeforeRenderableDatas(resolvedEvent);
+
+        originalDatas.nextStyle = {
+            ...originalDatas.nextStyle,
+            ...style,
+        };
+    }
     return {
         style,
         cssText: getKeys(style).map(name => `${name}: ${style[name]};`).join(""),
     };
 }
+
 export function fillAfterTransform(
     prevEvent: { style: Record<string, string>, transform: string },
     nextEvent: { style: Record<string, string>, transform: string, afterTransform?: string },
+    resolvedEvent?: any
 ): TransformObject {
     const afterTransform = nextEvent.afterTransform || nextEvent.transform;
 
@@ -1033,12 +1045,12 @@ export function fillAfterTransform(
             ...prevEvent.style,
             ...nextEvent.style,
             transform: afterTransform,
-        }),
+        }, resolvedEvent),
         afterTransform,
         transform: prevEvent.transform,
     };
-
 }
+
 export function fillParams<T extends IObject<any>>(
     moveable: any,
     e: any,