Skip to content

Commit 23c597e

Browse files
daybrushdaybrush
committed
fix: fix that isPinch is undefined during onDrag #212 
1 parent bdc6143 commit 23c597e

File tree

6 files changed

+48
-41
lines changed

6 files changed

+48
-41
lines changed

‎packages/react-moveable/src/react-moveable/CustomDragger.ts‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,23 @@ import { convertDragDist } from "./utils";
33

44
export function setCustomDrag(
55
state: MoveableManagerState<any>,
6-
delta: number[], inputEvent: any,
7-
isConvert: boolean = true,
6+
delta: number[],
7+
inputEvent: any,
8+
isPinch: boolean,
9+
isConvert: boolean,
810
) {
911
const result = state.dragger!.move(delta, inputEvent);
12+
13+
const datas = result.datas;
14+
const draggableDatas = datas.draggable || (datas.draggable = {});
15+
1016
return {
1117
...(isConvert ? convertDragDist(state, result) : result),
18+
isDrag: true,
19+
isPinch: !!isPinch,
1220
parentEvent: true,
21+
datas: draggableDatas,
22+
originalDatas: datas,
1323
};
1424
}
1525

‎packages/react-moveable/src/react-moveable/ables/Pinchable.ts‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export default {
2626
moveable: MoveableManager<PinchableProps, SnappableState>,
2727
e: any,
2828
) {
29-
const { datas, clientX, clientY, touches, inputEvent, targets } = e;
29+
const { datas, touches, targets } = e;
3030
const { pinchable, ables } = moveable.props;
3131

3232
if (!pinchable) {
@@ -59,12 +59,10 @@ export default {
5959
pinchAbles.forEach(able => {
6060
datas[able.name + "Datas"] = {};
6161
const ableEvent: any = {
62+
...e,
6263
datas: datas[able.name + "Datas"],
63-
clientX,
64-
clientY,
65-
inputEvent,
6664
parentRotate,
67-
pinchFlag: true,
65+
isPinch: true,
6866
};
6967
able[controlEventName]!(moveable, ableEvent);
7068
});
@@ -78,7 +76,7 @@ export default {
7876
moveable: MoveableManager<PinchableProps>,
7977
e: any,
8078
) {
81-
const { datas, clientX, clientY, scale: pinchScale, distance, touches, inputEvent, targets } = e;
79+
const { datas, scale: pinchScale, distance, touches, inputEvent, targets } = e;
8280
if (!datas.isPinch) {
8381
return;
8482
}
@@ -97,13 +95,12 @@ export default {
9795

9896
ables.forEach(able => {
9997
able[controlEventName]!(moveable, {
100-
clientX,
101-
clientY,
98+
...e,
10299
datas: datas[able.name + "Datas"],
103100
inputEvent,
104101
parentDistance,
105102
parentRotate,
106-
pinchFlag: true,
103+
isPinch: true,
107104
} as any);
108105
});
109106
return params;
@@ -112,7 +109,7 @@ export default {
112109
moveable: MoveableManager<PinchableProps>,
113110
e: any,
114111
) {
115-
const { datas, clientX, clientY, isPinch, inputEvent, targets } = e;
112+
const { datas, isPinch, inputEvent, targets } = e;
116113
if (!datas.isPinch) {
117114
return;
118115
}
@@ -129,12 +126,11 @@ export default {
129126

130127
ables.forEach(able => {
131128
able[controlEventName]!(moveable, {
132-
clientX,
133-
clientY,
129+
...e,
134130
isDrag: isPinch,
135131
datas: datas[able.name + "Datas"],
136132
inputEvent,
137-
pinchFlag: true,
133+
isPinch: true,
138134
} as any);
139135
});
140136
return isPinch;

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

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -64,19 +64,19 @@ export default {
6464
) {
6565
const {
6666
inputEvent,
67-
pinchFlag,
67+
isPinch,
6868
parentDirection,
6969
datas,
7070
} = e;
7171

72-
const direction = parentDirection || (pinchFlag ? [1, 1] : getDirection(inputEvent.target));
72+
const direction = parentDirection || (isPinch ? [1, 1] : getDirection(inputEvent.target));
7373

7474
const { target, width, height } = moveable.state;
7575

7676
if (!direction || !target) {
7777
return false;
7878
}
79-
!pinchFlag && setDragStart(moveable, { datas });
79+
!isPinch && setDragStart(moveable, { datas });
8080

8181
datas.datas = {};
8282
datas.direction = direction;
@@ -123,12 +123,13 @@ export default {
123123
const {
124124
datas,
125125
distX, distY,
126-
parentFlag, pinchFlag,
126+
parentFlag, isPinch,
127127
parentDistance, parentScale, inputEvent,
128128
parentKeepRatio,
129129
dragClient,
130130
parentDist,
131131
} = e;
132+
132133
const {
133134
direction,
134135
isResize,
@@ -170,7 +171,7 @@ export default {
170171
distWidth = (parentScale[0] - 1) * startOffsetWidth;
171172
distHeight = (parentScale[1] - 1) * startOffsetHeight;
172173

173-
} else if (pinchFlag) {
174+
} else if (isPinch) {
174175
if (parentDistance) {
175176
distWidth = parentDistance;
176177
distHeight = parentDistance * startOffsetHeight / startOffsetWidth;
@@ -214,7 +215,7 @@ export default {
214215
}
215216
let snapDist = [0, 0];
216217

217-
if (!pinchFlag) {
218+
if (!isPinch) {
218219
snapDist = checkSnapSize(
219220
moveable, nextWidth,
220221
nextHeight, direction,
@@ -284,7 +285,7 @@ export default {
284285
return;
285286
}
286287

287-
const inverseDelta = !parentFlag && pinchFlag
288+
const inverseDelta = !parentFlag && isPinch
288289
? [0, 0]
289290
: getResizeDist(
290291
moveable,
@@ -299,10 +300,10 @@ export default {
299300
direction,
300301
dist: [distWidth, distHeight],
301302
delta,
302-
isPinch: !!pinchFlag,
303+
isPinch: !!isPinch,
303304
drag: Draggable.drag(
304305
moveable,
305-
setCustomDrag(moveable.state, inverseDelta, inputEvent, false),
306+
setCustomDrag(moveable.state, inverseDelta, inputEvent, !!isPinch, false),
306307
) as OnDrag,
307308
});
308309
triggerEvent(moveable, "onResize", params);

‎packages/react-moveable/src/react-moveable/ables/Rotatable.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,7 @@ export default {
180180
const {
181181
datas,
182182
clientX, clientY,
183-
parentRotate, parentFlag, pinchFlag,
183+
parentRotate, parentFlag, isPinch,
184184
isRequest,
185185
} = e;
186186
const {
@@ -198,7 +198,7 @@ export default {
198198
datas.left = left;
199199
datas.top = top;
200200

201-
if (isRequest || pinchFlag || parentFlag) {
201+
if (isRequest || isPinch || parentFlag) {
202202
const externalRotate = parentRotate || 0;
203203

204204
datas.beforeInfo = {
@@ -242,7 +242,7 @@ export default {
242242
moveable: MoveableManager<RotatableProps>,
243243
e: any,
244244
) {
245-
const { datas, clientX, clientY, parentRotate, parentFlag, pinchFlag } = e;
245+
const { datas, clientX, clientY, parentRotate, parentFlag, isPinch } = e;
246246
const {
247247
direction,
248248
beforeDirection,
@@ -275,7 +275,7 @@ export default {
275275
= getParentDeg(moveable, rect, afterInfo, parentDist, direction, startRotate);
276276
[beforeDelta, beforeDist, beforeRotate]
277277
= getParentDeg(moveable, rect, beforeInfo, parentDist, direction, startRotate);
278-
} else if (pinchFlag || parentFlag) {
278+
} else if (isPinch || parentFlag) {
279279
[delta, dist, rotate]
280280
= getDeg(moveable, rect, afterInfo, parentRotate, direction, startRotate, throttleRotate);
281281
[beforeDelta, beforeDist, beforeRotate]
@@ -299,7 +299,7 @@ export default {
299299
beforeDelta,
300300
beforeRotate,
301301
transform: `${datas.transform} rotate(${dist}deg)`,
302-
isPinch: !!pinchFlag,
302+
isPinch: !!isPinch,
303303
});
304304
triggerEvent(moveable, "onRotate", params);
305305

@@ -397,7 +397,7 @@ export default {
397397

398398
const dragResult = Draggable.drag(
399399
child,
400-
setCustomDrag(child.state, delta, inputEvent, false),
400+
setCustomDrag(child.state, delta, inputEvent, !!e.isPinch, false),
401401
);
402402
result.drag = dragResult;
403403
},

‎packages/react-moveable/src/react-moveable/ables/Scalable.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -56,8 +56,8 @@ export default {
5656
moveable: MoveableManager<ScalableProps & DraggableProps, SnappableState>,
5757
e: any) {
5858

59-
const { datas, pinchFlag, inputEvent, parentDirection } = e;
60-
const direction = parentDirection || (pinchFlag ? [1, 1] : getDirection(inputEvent.target));
59+
const { datas, isPinch, inputEvent, parentDirection } = e;
60+
const direction = parentDirection || (isPinch ? [1, 1] : getDirection(inputEvent.target));
6161
const {
6262
width,
6363
height,
@@ -68,7 +68,7 @@ export default {
6868
if (!direction || !target) {
6969
return false;
7070
}
71-
if (!pinchFlag) {
71+
if (!isPinch) {
7272
setDragStart(moveable, { datas });
7373
}
7474

@@ -110,7 +110,7 @@ export default {
110110
parentScale,
111111
parentDistance,
112112
parentKeepRatio,
113-
parentFlag, pinchFlag, inputEvent,
113+
parentFlag, isPinch, inputEvent,
114114
dragClient,
115115
parentDist,
116116
} = e;
@@ -144,7 +144,7 @@ export default {
144144
if (parentScale) {
145145
scaleX = parentScale[0];
146146
scaleY = parentScale[1];
147-
} else if (pinchFlag) {
147+
} else if (isPinch) {
148148
if (parentDistance) {
149149
scaleX = (width + parentDistance) / width;
150150
scaleY = (height + parentDistance * height / width) / height;
@@ -206,7 +206,7 @@ export default {
206206
}
207207
let snapDist = [0, 0];
208208

209-
if (!pinchFlag) {
209+
if (!isPinch) {
210210
snapDist = checkSnapScale(
211211
moveable,
212212
nowDist,
@@ -280,7 +280,7 @@ export default {
280280
if (scaleX === prevDist[0] && scaleY === prevDist[1] && !parentMoveable) {
281281
return false;
282282
}
283-
const inverseDelta = !parentFlag && pinchFlag
283+
const inverseDelta = !parentFlag && isPinch
284284
? [0, 0]
285285
: getScaleDist(moveable, delta, direction, dragClient);
286286

@@ -290,10 +290,10 @@ export default {
290290
dist: nowDist,
291291
delta,
292292
transform: `${transform} scale(${scaleX}, ${scaleY})`,
293-
isPinch: !!pinchFlag,
293+
isPinch: !!isPinch,
294294
drag: Draggable.drag(
295295
moveable,
296-
setCustomDrag(moveable.state, inverseDelta, inputEvent, false),
296+
setCustomDrag(moveable.state, inverseDelta, inputEvent, isPinch, false),
297297
) as OnDrag,
298298
});
299299
triggerEvent(moveable, "onScale", params);

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,15 @@ export function triggerAble<T extends IObject<any>>(
3636
const events = ables.filter((able: any) => able[eventName]);
3737
const datas = e.datas;
3838
const renderDatas = datas.render || (datas.render = {});
39-
const renderEvent = {...e, datas: renderDatas };
39+
const renderEvent = {...e, datas: renderDatas, originalDatas: datas };
4040

4141
const results = events.filter((able: any) => {
4242
const condition = isStart && able[conditionName];
4343
const ableName = able.name;
4444
const nextDatas = datas[ableName] || (datas[ableName] = {});
4545

4646
if (!condition || condition(e, moveable)) {
47-
return able[eventName](moveable, {...e, datas: nextDatas });
47+
return able[eventName](moveable, {...e, datas: nextDatas, originalDatas: datas });
4848
}
4949
return false;
5050
});

0 commit comments

Comments
 (0)