fix: add able request #141

Author: daybrush

packages/react-moveable/src/App.tsx

@@ -384,34 +384,27 @@ class App extends React.Component {
         const keycon = new KeyController(window);
 
         let requester: any;
-        let snapRequester: any;
         keycon.keydown("shift", () => {
             this.setState({ isResizable: false, isShift: true });
         }).keydown("right", () => {
             if (!requester) {
-                snapRequester = this.moveable.request("snappable")!;
                 requester = this.moveable.request("draggable")!;
             }
             requester.request({ deltaX: 10, deltaY: 0});
         }).keydown("left", () => {
             if (!requester) {
                 requester = this.moveable.request("draggable")!;
-                snapRequester = this.moveable.request("snappable")!;
             }
             requester.request({ deltaX: -10, deltaY: 0});
         }).keyup("left", () => {
             if (requester) {
                 requester.requestEnd();
-                snapRequester.requestEnd();
                 requester = null;
-                snapRequester = null;
             }
         }).keyup("right", () => {
             if (requester) {
                 requester.requestEnd();
-                snapRequester.requestEnd();
                 requester = null;
-                snapRequester = null;
             }
         }).keydown("up", e => {
             this.moveable.request("draggable", { deltaX: 0, deltaY: -10});

packages/react-moveable/src/react-moveable/MoveableManager.tsx

@@ -17,8 +17,8 @@ import {
 import styled from "react-css-styled";
 import Dragger from "@daybrush/drag";
 import { ref } from "framework-utils";
-import { MoveableManagerProps, MoveableManagerState, Able, RectInfo, AbleRequester } from "./types";
-import { getAbleDragger } from "./getAbleDragger";
+import { MoveableManagerProps, MoveableManagerState, Able, RectInfo, Requester } from "./types";
+import { getAbleDragger, triggerAble } from "./getAbleDragger";
 import CustomDragger from "./CustomDragger";
 import { getRad } from "@moveable/matrix";
 import { IObject } from "@daybrush/utils";
@@ -226,28 +226,28 @@ export default class MoveableManager<T = {}, U = {}>
             offsetHeight,
         };
     }
-    public request(ableName: string, param: IObject<any> = {}): AbleRequester | undefined {
+    public request(ableName: string, param: IObject<any> = {}, isInstant?: boolean): Requester | undefined {
         const requsetAble = this.props.ables!.filter(able => able.name === ableName)[0];
 
         if (!requsetAble || !requsetAble.request) {
             return;
         }
         const self = this;
-        const ableRequester = requsetAble.request(this, param);
+        const ableRequester = requsetAble.request();
 
         const requester = {
-            request(ableParam: IObject<any>, isInstant?: boolean) {
-                ableRequester.request(ableParam);
-                !isInstant && self.updateTarget("");
+            request(ableParam: IObject<any>) {
+                triggerAble(self, "targetAbles", "drag", "", "", ableRequester.request(ableParam), isInstant);
                 return this;
             },
             requestEnd() {
-                ableRequester.requestEnd();
-                self.updateTarget("End");
+                triggerAble(self, "targetAbles", "drag", "", "End", ableRequester.requestEnd());
                 return this;
             },
         };
-        return param.isInstant ? requester.request(param, true).requestEnd() : requester;
+        triggerAble(self, "targetAbles", "drag", "", "Start", ableRequester.requestStart(param), isInstant);
+
+        return param.isInstant ? requester.request(param).requestEnd() : requester;
     }
     public checkUpdate() {
         const { target, container, parentMoveable } = this.props;

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

@@ -129,7 +129,6 @@ export default {
         }
 
         if (!isPinch && !parentEvent && !parentFlag && (distX || distY)) {
-            console.log("??");
             const [verticalInfo, horizontalInfo] = checkSnapDrag(moveable, distX, distY, datas);
             const {
                 isSnap: isVerticalSnap,
@@ -312,24 +311,23 @@ export default {
 
         return isDrag;
     },
-    request(moveable: MoveableManager<any, any>, startParam: IObject<any>) {
+    request() {
         const datas = {};
-        const self = this;
-
-        this.dragStart(moveable, { datas });
         let distX = 0;
         let distY = 0;
+
         return {
-            request({ deltaX, deltaY }: IObject<any>) {
-                distX += deltaX;
-                distY += deltaY;
-                self.drag(moveable, { datas, distX, distY });
+            requestStart(e: IObject<any>) {
+                return { datas };
+            },
+            request(e: IObject<any>) {
+                distX += e.deltaX;
+                distY += e.deltaY;
 
-                return this;
+                return { datas, distX, distY };
             },
             requestEnd() {
-                self.dragEnd(moveable, { datas, isDrag: true });
-                return this;
+                return { datas, isDrag: true };
             },
         };
     },

packages/react-moveable/src/react-moveable/ables/Resizable.ts

@@ -55,13 +55,14 @@ export default {
         const {
             inputEvent,
             pinchFlag,
+            parentDirection,
             datas,
         } = e;
         const {
             target: inputTarget,
         } = inputEvent;
 
-        const direction = pinchFlag ? [1, 1] : getDirection(inputTarget);
+        const direction = parentDirection || (pinchFlag ? [1, 1] : getDirection(inputTarget));
         const { target, width, height } = moveable.state;
 
         if (!direction || !target) {

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

@@ -1403,28 +1403,6 @@ export default {
     dragGroupControlEnd(moveable: any) {
         this.unset(moveable);
     },
-    request(moveable: MoveableManager<any, any>, startParam: IObject<any>) {
-        const self = this;
-
-        const {
-            type = "drag",
-        } = startParam;
-
-        if (type === "drag") {
-            this.dragStart(moveable, {});
-        } else if (type === "dragControl") {
-            this.dragControlStart(moveable, {});
-        }
-        return {
-            request(param: IObject<any>) {
-                return this;
-            },
-            requestEnd() {
-                self.dragEnd(moveable);
-                return this;
-            },
-        };
-    },
     unset(moveable: any) {
         const state = moveable.state;
 

packages/react-moveable/src/react-moveable/getAbleDragger.ts

@@ -1,17 +1,18 @@
 import MoveableManager from "./MoveableManager";
-import Dragger, { OnDragStart, OnDrag, OnDragEnd, OnPinchEnd } from "@daybrush/drag";
+import Dragger from "@daybrush/drag";
 import { Able } from "./types";
 import { IObject } from "@daybrush/utils";
 import { triggerRenderStart, triggerRenderEnd, triggerRender } from "./ables/triggerRender";
 import MoveableGroup from "./MoveableGroup";
 
-function triggerAble<T extends IObject<any>>(
+export function triggerAble<T extends IObject<any>>(
     moveable: MoveableManager<any>,
     ableType: string,
     eventOperation: string,
     eventAffix: string,
     eventType: any,
-    e: OnDragStart | OnDrag | OnDragEnd | OnPinchEnd,
+    e: any,
+    isReqeust?: boolean,
 ) {
     const isStart = eventType === "Start";
 
@@ -66,7 +67,7 @@ function triggerAble<T extends IObject<any>>(
             moveable.updateRect(eventType, true, false);
         }
     }
-    if ((!isStart && isUpdate) || (isEnd && !isUpdate)) {
+    if (((!isStart && isUpdate) || (isEnd && !isUpdate)) && !isReqeust) {
         moveable.forceUpdate();
     }
     if (!isStart && !isEnd && !isAfter && isUpdate) {

packages/react-moveable/src/react-moveable/types.ts

@@ -137,7 +137,7 @@ export interface Able<T = any> {
     dragGroupControl?: (moveable: MoveableManagerProps<any>, e: DraggerTypes.OnDragStart) => any;
     dragGroupControlEnd?: (moveable: MoveableManagerProps<any>, e: DraggerTypes.OnDragEnd) => any;
 
-    request?: (moveable: MoveableManagerProps<any>, startParam: AbleRequestParam) => AbleRequester;
+    request?: () => AbleRequester;
 }
 
 /**
@@ -162,9 +162,14 @@ export interface AbleRequestParam {
     isInstant?: boolean;
     [key: string]: any;
 }
+export interface Requester {
+    request(param: IObject<any>): this;
+    requestEnd(param: IObject<any>): this;
+}
 export interface AbleRequester {
-    request(param: IObject<any>, isInstant?: boolean): this;
-    requestEnd(): this;
+    requestStart(param: IObject<any>): IObject<any>;
+    request(param: IObject<any>): IObject<any>;
+    requestEnd(): IObject<any>;
 }
 
 /**