fix: fix throttleDrag for group

daybrush · Oct 21, 2023 · 5f6d392 · 5f6d392
1 parent 809073d
commit 5f6d392
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 13 deletions.
diff --git a/packages/react-moveable/src/ables/Draggable.tsx b/packages/react-moveable/src/ables/Draggable.tsx
@@ -1,7 +1,7 @@
 import {
     setDragStart, getBeforeDragDist, getTransformDist,
     convertTransformFormat, resolveTransformEvent, fillTransformStartEvent,
-    setDefaultTransformIndex, fillOriginalTransform,
+    setDefaultTransformIndex, fillOriginalTransform, getBeforeRenderableDatas,
 } from "../gesto/GestoUtils";
 import {
     triggerEvent, fillParams,
@@ -145,6 +145,8 @@ export default {
             parentFlag, isPinch, deltaOffset,
             useSnap,
             isRequest,
+            isGroup,
+            parentThrottleDrag,
         } = e;
         let { distX, distY } = e;
         const { isDrag, prevDist, prevBeforeDist, startValue } = datas;
@@ -160,7 +162,7 @@ export default {
         const props = moveable.props;
 
         const parentMoveable = props.parentMoveable;
-        const throttleDrag = parentEvent ? 0 : (props.throttleDrag || 0);
+        const throttleDrag = isGroup ? 0 : (props.throttleDrag || parentThrottleDrag || 0);
         const throttleDragRotate = parentEvent ? 0 : (props.throttleDragRotate || 0);
 
         let dragRotateRad = 0;
@@ -313,20 +315,30 @@ export default {
         if (!params) {
             return false;
         }
-        const events = triggerChildGesto(moveable, this, "dragStart", [
+        const {
+            childEvents,
+            eventParams,
+        } = triggerChildGesto(moveable, this, "dragStart", [
             clientX || 0,
             clientY || 0,
         ], e, false, "draggable");
 
         const nextParams: OnDragGroupStart = {
             ...params,
             targets: moveable.props.targets!,
-            events,
+            events: eventParams,
         };
         const result = triggerEvent(moveable, "onDragGroupStart", nextParams);
 
         datas.isDrag = result !== false;
 
+
+        // find data.startValue and based on first child moveable
+        const startValue = childEvents[0]?.datas.startValue ?? [0, 0];
+
+
+        datas.throttleOffset = [startValue[0] % 1, startValue[1] % 1];
+
         return datas.isDrag ? params : false;
     },
     dragGroup(moveable: MoveableGroupInterface<any, any>, e: any) {
@@ -335,16 +347,24 @@ export default {
         if (!datas.isDrag) {
             return;
         }
-        const params = this.drag(moveable, e);
+        const params = this.drag(moveable, {
+            ...e,
+            parentThrottleDrag: moveable.props.throttleDrag,
+        });
         const { passDelta } = e.datas;
-        const events = triggerChildGesto(moveable, this, "drag", passDelta, e, false, "draggable");
+        const {
+            eventParams,
+        } = triggerChildGesto(moveable, this, "drag", passDelta, e, false, "draggable");
 
         if (!params) {
             return;
         }
+
+        console.log(eventParams);
+
         const nextParams: OnDragGroup = {
             targets: moveable.props.targets!,
-            events,
+            events: eventParams,
             ...params,
         };
 
@@ -358,10 +378,12 @@ export default {
             return;
         }
         this.dragEnd(moveable, e);
-        const events = triggerChildGesto(moveable, this, "dragEnd", [0, 0], e, false, "draggable");
+        const {
+            eventParams,
+        } = triggerChildGesto(moveable, this, "dragEnd", [0, 0], e, false, "draggable");
         triggerEvent(moveable, "onDragGroupEnd", fillEndParams<OnDragGroupEnd>(moveable, e, {
             targets: moveable.props.targets!,
-            events,
+            events: eventParams,
         }));
 
         return isDrag;
@@ -450,6 +472,7 @@ export default {
 /**
  * throttle of x, y when drag.
  * @name Moveable.Draggable#throttleDrag
+ * @default 0
  * @example
  * import Moveable from "moveable";
  *

diff --git a/packages/react-moveable/src/groupUtils.ts b/packages/react-moveable/src/groupUtils.ts
@@ -46,24 +46,26 @@ export function triggerChildGesto(
     const datas = e.datas;
     const events = fillChildEvents(moveable, able.name, e);
     const moveables = moveable.moveables;
-    const childs = events.map((ev, i) => {
+
+    const childEvents: any[] = [];
+    const eventParams = events.map((ev, i) => {
         const childMoveable = moveables[i];
         const state = childMoveable.state as MoveableManagerState<any>;
         const gestos = state.gestos;
         let childEvent: any = ev;
 
         if (isStart) {
             childEvent = new CustomGesto(ableName).dragStart(delta, ev);
+            childEvents.push(childEvent);
         } else {
-
-
             if (!gestos[ableName]) {
                 gestos[ableName] = datas.childGestos[i];
             }
             if (!gestos[ableName]) {
                 return;
             }
             childEvent = setCustomDrag(ev, state, delta, isPinch, isConvert, ableName);
+            childEvents.push(childEvent);
         }
         const result = (able as any)[type]!(childMoveable,  { ...childEvent, parentFlag: true });
 
@@ -75,7 +77,10 @@ export function triggerChildGesto(
     if (isStart) {
         datas.childGestos = moveables.map(child => child.state.gestos[ableName]);
     }
-    return childs;
+    return {
+        eventParams,
+        childEvents,
+    };
 }
 export function triggerChildAbles<T extends Able>(
     moveable: MoveableGroupInterface<any, any>,