From 5f6d392f4731a4728b7e04e856d4a4805f7ac89b Mon Sep 17 00:00:00 2001 From: Daybrush Date: Sat, 21 Oct 2023 12:50:03 +0900 Subject: [PATCH] fix: fix throttleDrag for group --- .../react-moveable/src/ables/Draggable.tsx | 41 +++++++++++++++---- packages/react-moveable/src/groupUtils.ts | 13 ++++-- 2 files changed, 41 insertions(+), 13 deletions(-) diff --git a/packages/react-moveable/src/ables/Draggable.tsx b/packages/react-moveable/src/ables/Draggable.tsx index 53aaf5c70..16020241c 100644 --- 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,7 +315,10 @@ 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"); @@ -321,12 +326,19 @@ export default { 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, 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(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 index dbd41aa4c..0348a97b6 100644 --- a/packages/react-moveable/src/groupUtils.ts +++ b/packages/react-moveable/src/groupUtils.ts @@ -46,7 +46,9 @@ 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; const gestos = state.gestos; @@ -54,9 +56,8 @@ export function triggerChildGesto( if (isStart) { childEvent = new CustomGesto(ableName).dragStart(delta, ev); + childEvents.push(childEvent); } else { - - if (!gestos[ableName]) { gestos[ableName] = datas.childGestos[i]; } @@ -64,6 +65,7 @@ export function triggerChildGesto( 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( moveable: MoveableGroupInterface,