feat: add OrginDraggable, Warpable css object #807

packages/react-moveable/src/ables/OriginDraggable.tsx

@@ -1,6 +1,6 @@
 import {
     prefix, triggerEvent,
-    fillParams, calculatePoses, getRect, fillEndParams, convertCSSSize,
+    fillParams, calculatePoses, getRect, fillEndParams, convertCSSSize, fillCSSObject,
 } from "../utils";
 import {
     OnDragOriginStart, OnDragOrigin,
@@ -115,17 +115,22 @@ export default {
             convertCSSSize(targetOrigin[0], width, originRelative),
             convertCSSSize(targetOrigin[1], height, originRelative),
         ].join(" ");
+        const result = Draggable.drag(
+            moveable,
+            setCustomDrag(e, moveable.state, dragDelta, !!isPinch, false),
+        )!;
         const params = fillParams<OnDragOrigin>(moveable, e, {
             width,
             height,
             origin,
             dist,
             delta,
             transformOrigin,
-            drag: Draggable.drag(
-                moveable,
-                setCustomDrag(e, moveable.state, dragDelta, !!isPinch, false),
-            )!,
+            drag: result,
+            ...fillCSSObject({
+                transform: result.transform,
+            }, e),
+            afterTransform: result.transform,
         });
         triggerEvent(moveable, "onDragOrigin", params);
         return params;

packages/react-moveable/src/ables/Warpable.tsx

@@ -1,6 +1,6 @@
 import {
     prefix, getLineStyle, getDirection, getAbsolutePosesByState,
-    triggerEvent, fillParams, fillEndParams, getDirectionViewClassName,
+    triggerEvent, fillParams, fillEndParams, getDirectionViewClassName, fillCSSObject,
 } from "../utils";
 import {
     convertDimension, invert, multiply,
@@ -256,6 +256,9 @@ export default {
             dist: matrix,
             multiply,
             transform: nextTransform,
+            ...fillCSSObject({
+                transform: nextTransform,
+            }, e),
         }));
         return true;
     },

packages/react-moveable/src/types.ts

@@ -780,22 +780,42 @@ export interface OnDragOriginStart extends OnEvent {
  * @typedef
  * @memberof Moveable.OriginDraggable
  * @extends Moveable.OnEvent
- * @property - Offset width of target
- * @property - Offset height of target
- * @property - The delta of [x, y]
- * @property - The distance of [x, y]
- * @property - The target's moved transform-origin poses
- * @property - The target's moved transform-origin css
- * @property - `dragOrigin` causes a `drag` event.
+ * @extends Moveable.CSSObject
  */
-export interface OnDragOrigin extends OnEvent {
+export interface OnDragOrigin extends OnEvent, CSSObject {
+    /**
+     * Offset width of target
+     */
     width: number;
+    /**
+     * Offset height of target
+     */
     height: number;
+    /**
+     * The delta of [x, y]
+     */
     delta: number[];
+    /**
+     * The distance of [x, y]
+     */
     dist: number[];
+    /**
+     * The target's moved transform-origin poses
+     */
     origin: number[];
+    /**
+     * The target's moved transform-origin css
+     */
     transformOrigin: string;
+    /**
+     * A transform obtained by the simultaneous occurrence of other events in the current event
+     */
+    afterTransform: string;
+    /**
+     * `dragOrigin` causes a `drag` event.
+     */
     drag: OnDrag;
+
 }
 /**
  * @typedef
@@ -1302,17 +1322,28 @@ export interface OnWarpStart extends OnEvent, OnTransformStartEvent {
  * @typedef
  * @memberof Moveable.Warpable
  * @extends Moveable.OnEvent
- * @property - a target's transform
- * @property - The delta of warp matrix
- * @property - The dist of warp matrix
- * @property - The calculated warp matrix
- * @property - Multiply function that can multiply previous matrix by warp matrix
+ * @extends Moveable.CSSObject
  */
-export interface OnWarp extends OnEvent {
-    transform: string;
+export interface OnWarp extends OnEvent, CSSObject {
+    /**
+     * The delta of warp matrix
+     */
     delta: number[];
+    /**
+     * The dist of warp matrix
+     */
     dist: number[];
+    /**
+     * The calculated warp matrix
+     */
     matrix: number[];
+    /**
+     * a target's transform
+     */
+    transform: string;
+    /**
+     * Multiply function that can multiply previous matrix by warp matrix
+     */
     multiply: (matrix1: number[], matrix2: number[], n?: number) => number[];
 }
 /**

packages/react-moveable/src/utils.tsx

@@ -21,7 +21,7 @@ import {
     MoveableProps, ArrayFormat, MoveableRefType,
     MatrixInfo, ExcludeEndParams, ExcludeParams,
     ElementSizes, MoveablePosition, TransformObject,
-    MoveableRefTargetsResultType, MoveableRefTargetType, MoveableManagerInterface,
+    MoveableRefTargetsResultType, MoveableRefTargetType, MoveableManagerInterface, CSSObject,
 } from "./types";
 import { parse, toMat, calculateMatrixDist, parseMat } from "css-to-mat";
 import { getBeforeRenderableDatas, getDragDist } from "./gesto/GestoUtils";
@@ -980,7 +980,7 @@ export function unset(self: any, name: string) {
     self[name] = null;
 }
 
-export function fillCSSObject(style: Record<string, any>, resolvedEvent?: any) {
+export function fillCSSObject(style: Record<string, any>, resolvedEvent?: any): CSSObject {
     if (resolvedEvent) {
         const originalDatas = getBeforeRenderableDatas(resolvedEvent);
 

packages/react-moveable/stories/1-Basic/0-Basic.stories.tsx

@@ -69,3 +69,8 @@ group.add("Roundable", {
     app: require("./ReactRoundableApp").default,
     path: require.resolve("./ReactRoundableApp"),
 });
+
+group.add("OriginDraggable", {
+    app: require("./ReactOriginDraggableApp").default,
+    path: require.resolve("./ReactOriginDraggableApp"),
+});

packages/react-moveable/stories/1-Basic/ReactOriginDraggableApp.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import Moveable from "@/react-moveable";
+
+export default function App(props: Record<string, any>) {
+    const targetRef = React.useRef<HTMLDivElement>(null);
+
+    return (
+        <div className="root">
+            <div className="container">
+                <div className="target" ref={targetRef}>Target</div>
+                <Moveable
+                    target={targetRef}
+                    originDraggable={true}
+                    draggable={true}
+                    rotatable={true}
+                    onDrag={e => {
+                        e.target.style.transform = e.transform;
+                    }}
+                    onDragOrigin={e => {
+                        e.target.style.transformOrigin = e.transformOrigin;
+                        e.target.style.transform = e.drag.transform;
+                    }}
+                    onRotate={e => {
+                        e.target.style.transform = e.drag.transform;
+                    }}
+                />
+            </div>
+        </div>
+    );
+}