feat: add getMoveables with request #940

daybrush · Jul 2, 2023 · b926985 · b926985
1 parent 85d17d7
commit b926985
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 20 deletions.
diff --git a/packages/react-moveable/src/InitialMoveable.tsx b/packages/react-moveable/src/InitialMoveable.tsx
@@ -292,6 +292,9 @@ export class InitialMoveable<T = {}>
     public getManager(): MoveableManagerInterface<any, any> {
         return this.moveable;
     }
+    public getMoveables(): MoveableManagerInterface[] {
+        return this.moveable.getMoveables();
+    }
     private _updateRefs(isRender?: boolean) {
         const prevRefTargets = this.refTargets;
         const nextRefTargets = getRefTargets((this.props.target || this.props.targets) as any);

diff --git a/packages/react-moveable/src/MoveableGroup.tsx b/packages/react-moveable/src/MoveableGroup.tsx
@@ -1,5 +1,5 @@
 import MoveableManager from "./MoveableManager";
-import { GroupableProps, GroupRect, MoveableTargetGroupsType, RectInfo } from "./types";
+import { GroupableProps, GroupRect, MoveableManagerInterface, MoveableTargetGroupsType, RectInfo } from "./types";
 import ChildrenDiffer from "@egjs/children-differ";
 import { getAbleGesto, getTargetAbleGesto } from "./gesto/getAbleGesto";
 import Groupable from "./ables/Groupable";
@@ -422,6 +422,10 @@ class MoveableGroup extends MoveableManager<GroupableProps> {
 
         return styleNames;
     }
+
+    public getMoveables(): MoveableManagerInterface[] {
+        return [...this.moveables];
+    }
     protected updateAbles() {
         super.updateAbles([...this.props.ables!, Groupable], "Group");
     }

diff --git a/packages/react-moveable/src/MoveableIndividualGroup.tsx b/packages/react-moveable/src/MoveableIndividualGroup.tsx
@@ -1,7 +1,7 @@
 import { ref, refs } from "framework-utils";
 import * as React from "react";
 import MoveableManager from "./MoveableManager";
-import { GroupableProps, IndividualGroupableProps, RectInfo } from "./types";
+import { GroupableProps, IndividualGroupableProps, MoveableManagerInterface, RectInfo } from "./types";
 import { prefix } from "./utils";
 import { setStoreCache } from "./store/Store";
 
@@ -90,6 +90,9 @@ class MoveableIndividualGroup extends MoveableManager<GroupableProps & Individua
     public isDragging() {
         return false;
     }
+    public getMoveables(): MoveableManagerInterface[] {
+        return [...this.moveables];
+    }
     public updateRenderPoses() { }
     public checkUpdate() { }
     public triggerEvent() { }

diff --git a/packages/react-moveable/src/MoveableManager.tsx b/packages/react-moveable/src/MoveableManager.tsx
@@ -651,9 +651,17 @@ export default class MoveableManager<T = {}>
      * requester.request({ deltaX: 10, deltaY: 10 });
      * requester.requestEnd();
      */
-    public request(ableName: string, param: IObject<any> = {}, isInstant?: boolean): Requester {
-        const { ables, groupable } = this.props as any;
-        const requsetAble: Able = ables!.filter((able: Able) => able.name === ableName)[0];
+    public request(
+        ableName: string,
+        param: IObject<any> = {},
+        isInstant?: boolean,
+    ): Requester {
+        const self = this;
+        const props = self.props;
+        const manager = props.parentMoveable || props.wrapperMoveable || self;
+        const allAbles = manager.props.ables!;
+        const groupable = props.groupable;
+        const requsetAble = find(allAbles, (able: Able) => able.name === ableName);
 
         if (this.isDragging() || !requsetAble || !requsetAble.request) {
             return {
@@ -665,40 +673,50 @@ export default class MoveableManager<T = {}>
                 },
             };
         }
-        const self = this;
-        const ableRequester = requsetAble.request(this);
 
+        const ableRequester = requsetAble.request(self);
         const requestInstant = isInstant || param.isInstant;
         const ableType = ableRequester.isControl ? "controlAbles" : "targetAbles";
         const eventAffix = `${(groupable ? "Group" : "")}${ableRequester.isControl ? "Control" : ""}`;
+        const moveableAbles: Able[] = [...manager[ableType]];
 
         const requester = {
             request(ableParam: IObject<any>) {
-                triggerAble(self, ableType, ["drag"], eventAffix, "", {
+                triggerAble(self, moveableAbles, ["drag"], eventAffix, "", {
                     ...ableRequester.request(ableParam),
                     requestAble: ableName,
                     isRequest: true,
                 }, requestInstant);
-                return this;
+                return requester;
             },
             requestEnd() {
-                triggerAble(self, ableType, ["drag"], eventAffix, "End", {
+                triggerAble(self, moveableAbles, ["drag"], eventAffix, "End", {
                     ...ableRequester.requestEnd(),
                     requestAble: ableName,
                     isRequest: true,
                 }, requestInstant);
-                return this;
+                return requester;
             },
         };
 
-        triggerAble(self, ableType, ["drag"], eventAffix, "Start", {
+        triggerAble(self, moveableAbles, ["drag"], eventAffix, "Start", {
             ...ableRequester.requestStart(param),
             requestAble: ableName,
             isRequest: true,
         }, requestInstant);
 
         return requestInstant ? requester.request(param).requestEnd() : requester;
     }
+    /**
+     * moveable is the top level that manages targets
+     * `Single`: MoveableManager instance
+     * `Group`: MoveableGroup instance
+     * `IndividualGroup`: MoveableIndividaulGroup instance
+     * Returns leaf target MoveableManagers.
+     */
+    public getMoveables(): MoveableManagerInterface[] {
+        return [this];
+    }
     /**
      * Remove the Moveable object and the events.
      * @method Moveable#destroy
@@ -814,9 +832,19 @@ export default class MoveableManager<T = {}>
     public waitToChangeTarget(): Promise<void> {
         return new Promise(() => { });
     }
-    public triggerEvent(name: string, e: any): any {
+    public triggerEvent(
+        name: string,
+        e: any,
+    ): any {
+        const props = this.props;
+
         this._emitter.trigger(name, e);
-        const callback = (this.props as any)[name];
+
+        if (props.parentMoveable && e.isRequest && !e.isRequestChild) {
+            return props.parentMoveable.triggerEvent(name, e, true);
+        }
+
+        const callback = (props as any)[name];
 
         return callback && callback(e);
     }

diff --git a/packages/react-moveable/src/consts.ts b/packages/react-moveable/src/consts.ts
@@ -295,4 +295,5 @@ export const MOVEABLE_METHODS: Array<keyof MoveableInterface> = [
     "getTargets",
     "stopDrag",
     "getControlBoxElement",
+    "getMoveables",
 ];
diff --git a/packages/react-moveable/src/gesto/getAbleGesto.ts b/packages/react-moveable/src/gesto/getAbleGesto.ts
@@ -7,7 +7,7 @@ import Renderable from "../ables/Renderable";
 
 export function triggerAble(
     moveable: MoveableManagerInterface,
-    ableType: string,
+    moveableAbles: Able[],
     eventOperations: string[],
     eventAffix: string,
     eventType: any,
@@ -31,7 +31,7 @@ export function triggerAble(
     ) {
         return false;
     }
-    const ables: Able[] = [...(moveable as any)[ableType]];
+    const ables: Able[] = [...moveableAbles];
 
     if (isRequest) {
         const requestAble = e.requestAble;
@@ -195,7 +195,7 @@ export function triggerAble(
 
     }
     if (!isStart && !isEnd && !isAfter && updatedCount && !requestInstant) {
-        triggerAble(moveable, ableType, eventOperations, eventAffix, eventType + "After", e);
+        triggerAble(moveable, moveableAbles, eventOperations, eventAffix, eventType + "After", e);
     }
     return true;
 }
@@ -294,8 +294,8 @@ export function getAbleGesto(
                     return;
                 }
                 const eventOperations = eventOperation === "drag" ? [eventOperation] : ["drag", eventOperation];
-
-                const result = triggerAble(moveable, ableType, eventOperations, eventAffix, eventType, e);
+                const moveableAbles: Able[] = [...(moveable as any)[ableType]];
+                const result = triggerAble(moveable, moveableAbles, eventOperations, eventAffix, eventType, e);
 
                 if (!result) {
                     e.stop();

diff --git a/packages/react-moveable/src/groupUtils.ts b/packages/react-moveable/src/groupUtils.ts
@@ -25,6 +25,7 @@ export function fillChildEvents(
 
         return {
             ...e,
+            isRequestChild: true,
             datas: childDatas[i][name],
             originalDatas: childDatas[i],
         };

diff --git a/packages/react-moveable/src/types.ts b/packages/react-moveable/src/types.ts
@@ -3362,6 +3362,14 @@ export interface MoveableInterface {
         RequestParam extends AbleRequesters[Name],
         Name extends string = string,
     >(ableName: Name, params?: RequestParam, isInstant?: boolean): Requester<RequestParam>;
+    /**
+     * moveable is the top level that manages targets
+     * `Single`: MoveableManager instance
+     * `Group`: MoveableGroup instance
+     * `IndividualGroup`: MoveableIndividaulGroup instance
+     * Returns leaf target MoveableManagers.
+     */
+    getMoveables(): MoveableManagerInterface[];
     /**
      * Returns the element of the control box.
      */

diff --git a/packages/react-moveable/src/utils.tsx b/packages/react-moveable/src/utils.tsx
@@ -1011,6 +1011,8 @@ export function fillParams<T extends IObject<any>>(
         currentTarget: moveable,
         moveable,
         datas: datas.datas,
+        isRequest: e.isRequest,
+        isRequestChild: e.isRequestChild,
         isFirstDrag: !!e.isFirstDrag,
         isTrusted: e.isTrusted !== false,
         stopAble() {
@@ -1068,8 +1070,14 @@ export function triggerEvent<EventName extends keyof Props, Props extends IObjec
     name: EventName,
     params: Props[EventName] extends ((e: infer P) => any) | undefined ? P : IObject<any>,
     isManager?: boolean,
+    isRequest?: boolean,
 ): any {
-    return moveable.triggerEvent(name, params, isManager);
+    return moveable.triggerEvent(
+        name,
+        params,
+        isManager,
+        isRequest,
+    );
 }
 
 export function getComputedStyle(el: Element, pseudoElt?: string | null) {