Skip to content

Commit c2b2385

Browse files
daybrushdaybrush
committed
fix: fix Pinchable with Resizable, Scalable
1 parent 23c597e commit c2b2385

File tree

15 files changed

+186
-86
lines changed

15 files changed

+186
-86
lines changed

‎packages/react-moveable/package-lock.json‎

Lines changed: 15 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/react-moveable/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-moveable",
3-
"version": "0.19.1",
3+
"version": "0.19.2",
44
"description": "A React Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable.",
55
"main": "./dist/moveable.cjs.js",
66
"module": "./dist/moveable.esm.js",
@@ -77,7 +77,7 @@
7777
"typescript": "^3.4.5"
7878
},
7979
"dependencies": {
80-
"@daybrush/drag": "^0.12.0",
80+
"@daybrush/drag": "^0.13.1",
8181
"@daybrush/utils": "^0.10.1",
8282
"@egjs/agent": "^2.1.5",
8383
"@egjs/children-differ": "^1.0.0",

‎packages/react-moveable/src/App.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,7 @@ class App extends React.Component<any, any> {
129129
ev.target.style.cssText += groupItem.toCSS();
130130
});
131131
}}
132+
132133
onResizeGroupStart={e => {
133134
console.log("rgs", e);
134135

@@ -160,7 +161,7 @@ class App extends React.Component<any, any> {
160161
});
161162
}}
162163
onSnap={e => {
163-
console.log(e);
164+
// console.log(e);
164165
}}
165166
onScaleGroupStart={e => {
166167
console.log("scs", e);
@@ -212,9 +213,9 @@ class App extends React.Component<any, any> {
212213
// snapCenter={true}
213214
// snapThreshold={10}
214215
// scalable={!isResizable}
216+
scalable={true}
215217
// scalable={true}
216-
// scalable={true}
217-
resizable={true}
218+
// resizable={true}
218219
// resizable={isResizable}
219220
rotatable={true}
220221
// resizable={isResizable}
@@ -302,6 +303,9 @@ class App extends React.Component<any, any> {
302303
onClick={e => {
303304
console.log(e);
304305
}}
306+
onPinchEnd={e => {
307+
console.log(e);
308+
}}
305309
/>
306310

307311
<div className="App" onMouseDown={this.onClick} onTouchStart={this.onClick} data-target="app">

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

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@ export function setCustomDrag(
99
isConvert: boolean,
1010
) {
1111
const result = state.dragger!.move(delta, inputEvent);
12-
13-
const datas = result.datas;
12+
const datas = result.originalDatas || result.datas;
1413
const draggableDatas = datas.draggable || (datas.draggable = {});
1514

1615
return {
@@ -19,7 +18,6 @@ export function setCustomDrag(
1918
isPinch: !!isPinch,
2019
parentEvent: true,
2120
datas: draggableDatas,
22-
originalDatas: datas,
2321
};
2422
}
2523

@@ -30,13 +28,16 @@ export default class CustomDragger {
3028
private startY = 0;
3129
private isDrag = false;
3230
private isFlag = false;
33-
private datas = {};
31+
private datas: any = {
32+
draggable: {},
33+
};
3434

3535
public dragStart(client: number[], inputEvent: any) {
3636
this.isDrag = false;
3737
this.isFlag = false;
38-
this.datas = {};
39-
38+
this.datas = {
39+
draggable: {},
40+
};
4041
return this.move(client, inputEvent);
4142
}
4243
public drag(client: number[], inputEvent: any) {
@@ -77,7 +78,8 @@ export default class CustomDragger {
7778
distY: clientY - this.startY,
7879
deltaX: delta[0],
7980
deltaY: delta[1],
80-
datas: this.datas,
81+
datas: this.datas.draggable,
82+
originalDatas: this.datas,
8183
parentEvent: true,
8284
parentDragger: this,
8385
};

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

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -222,7 +222,7 @@ export function getScaleDist(
222222
moveable: MoveableManager<any>,
223223
scale: number[],
224224
direction: number[],
225-
dragClient?: number[],
225+
fixedPosition: number[],
226226
) {
227227
const state = moveable.state;
228228
const {
@@ -239,12 +239,7 @@ export function getScaleDist(
239239
const groupLeft = groupable ? left : 0;
240240
const groupTop = groupable ? top : 0;
241241

242-
const startPos = dragClient ? dragClient : getStartPos(getAbsolutePosesByState(moveable.state), direction);
243-
244-
const dist = getDist(
245-
startPos, nextMatrix, width, height, n,
246-
direction,
247-
);
242+
const dist = getDist(fixedPosition, nextMatrix, width, height, n, direction);
248243

249244
return minus(dist, [groupLeft, groupTop]);
250245
}
@@ -253,8 +248,6 @@ export function getResizeDist(
253248
moveable: MoveableManager<GroupableProps>,
254249
width: number,
255250
height: number,
256-
// prevWidth: number,
257-
// prevHeight: number,
258251
direction: number[],
259252
fixedPosition: number[],
260253
transformOrigin: string[],

‎packages/react-moveable/src/react-moveable/MoveableGroup.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import MoveableManager from "./MoveableManager";
22
import { GroupableProps, MoveableManagerProps } from "./types";
33
import ChildrenDiffer from "@egjs/children-differ";
4-
import { getAbleDragger } from "./getAbleDragger";
4+
import { getAbleDragger, getAreaAbleDragger } from "./getAbleDragger";
55
import Groupable from "./ables/Groupable";
66
import { MIN_NUM, MAX_NUM, TINY_NUM } from "./consts";
77
import { getTargetInfo, throttle, getAbsolutePosesByState, equals } from "./utils";
@@ -111,7 +111,7 @@ class MoveableGroup extends MoveableManager<GroupableProps, any> {
111111
state.target = this.areaElement;
112112

113113
this.controlBox.getElement().style.display = "block";
114-
this.targetDragger = getAbleDragger(this, state.target!, "targetAbles", "Group");
114+
this.targetDragger = getAreaAbleDragger(this, "targetAbles", "Group");
115115
this.controlDragger = getAbleDragger(this, this.controlBox.getElement(), "controlAbles", "GroupControl");
116116
}
117117
const isContainerChanged = !equals(prevProps.container, props.container);

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import styled from "react-css-styled";
1919
import Dragger from "@daybrush/drag";
2020
import { ref } from "framework-utils";
2121
import { MoveableManagerProps, MoveableManagerState, Able, RectInfo, Requester } from "./types";
22-
import { getAbleDragger, triggerAble } from "./getAbleDragger";
22+
import { getAbleDragger, triggerAble, getAreaAbleDragger } from "./getAbleDragger";
2323
import CustomDragger from "./CustomDragger";
2424
import { getRad, plus } from "@moveable/matrix";
2525
import { IObject } from "@daybrush/utils";
@@ -197,7 +197,7 @@ export default class MoveableManager<T = {}, U = {}>
197197

198198
if (target && hasTargetAble && !this.targetDragger) {
199199
if (dragArea) {
200-
this.targetDragger = getAbleDragger(this, this.areaElement!, "targetAbles", "");
200+
this.targetDragger = getAreaAbleDragger(this, "targetAbles", "");
201201
} else {
202202
this.targetDragger = getAbleDragger(this, target!, "targetAbles", "");
203203
}

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

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
OnDragGroupStart, OnDragStart, OnDragEnd, DraggableState, Renderer,
88
} from "../types";
99
import MoveableGroup from "../MoveableGroup";
10-
import { triggerChildAble } from "../groupUtils";
10+
import { triggerChildDragger } from "../groupUtils";
1111
import { checkSnapDrag, startCheckSnapDrag } from "./Snappable";
1212
import { IObject } from "@daybrush/utils";
1313

@@ -107,9 +107,9 @@ export default {
107107
moveable: MoveableManager<DraggableProps, any>,
108108
e: any,
109109
): OnDrag | undefined {
110-
const { datas, parentEvent, parentFlag } = e;
110+
const { datas, parentEvent, parentFlag, isPinch } = e;
111111
let { distX, distY } = e;
112-
const { isPinch, isDrag, prevDist, prevBeforeDist, transform, startTranslate } = datas;
112+
const { isDrag, prevDist, prevBeforeDist, transform, startTranslate } = datas;
113113

114114
if (!isDrag) {
115115
return;
@@ -151,6 +151,8 @@ export default {
151151
distX += verticalOffset;
152152
distY += horizontalOffset;
153153
}
154+
datas.passDeltaX = distX - (datas.passDistX || 0);
155+
datas.passDeltaY = distY - (datas.passDistY || 0);
154156
datas.passDistX = distX;
155157
datas.passDistY = distY;
156158
const beforeTranslate = plus(getDragDist({ datas, distX, distY }, true), startTranslate);
@@ -215,14 +217,15 @@ export default {
215217
return isDrag;
216218
},
217219
dragGroupStart(moveable: MoveableGroup, e: any) {
218-
const datas = e.datas;
220+
const { datas, clientX, clientY } = e;
219221

220222
const params = this.dragStart(moveable, e);
221223

222224
if (!params) {
223225
return false;
224226
}
225-
const events = triggerChildAble(moveable, this, "dragStart", datas, e);
227+
const events = triggerChildDragger(moveable, this, "dragStart", [clientX, clientY], e, false);
228+
226229
const nextParams: OnDragGroupStart = {
227230
...params,
228231
targets: moveable.props.targets!,
@@ -235,14 +238,15 @@ export default {
235238
return datas.isDrag ? params : false;
236239
},
237240
dragGroup(moveable: MoveableGroup, e: any) {
238-
const datas = e.datas;
241+
const { datas } = e;
239242

240243
if (!datas.isDrag) {
241244
return;
242245
}
243246
const params = this.drag(moveable, e);
244-
const { passDistX, passDistY } = e.datas;
245-
const events = triggerChildAble(moveable, this, "drag", datas, { ...e, distX: passDistX, distY: passDistY });
247+
const { passDeltaX, passDeltaY } = e.datas;
248+
249+
const events = triggerChildDragger(moveable, this, "drag", [passDeltaX, passDeltaY], e, false);
246250

247251
if (!params) {
248252
return;
@@ -263,7 +267,11 @@ export default {
263267
return;
264268
}
265269
this.dragEnd(moveable, e);
266-
triggerChildAble(moveable, this, "dragEnd", datas, e);
270+
271+
datas.childDraggers.forEach(() => {
272+
273+
})
274+
triggerChildDragger(moveable, this, "dragEnd", [0, 0], e, false);
267275
triggerEvent(moveable, "onDragGroupEnd", fillParams(moveable, e, {
268276
targets: moveable.props.targets!,
269277
isDrag,

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,10 @@ export default {
5858

5959
pinchAbles.forEach(able => {
6060
datas[able.name + "Datas"] = {};
61+
62+
if (!able[controlEventName]) {
63+
return;
64+
}
6165
const ableEvent: any = {
6266
...e,
6367
datas: datas[able.name + "Datas"],
@@ -94,6 +98,9 @@ export default {
9498
const controlEventName = `drag${targets ? "Group" : ""}Control` as "dragControl";
9599

96100
ables.forEach(able => {
101+
if (!able[controlEventName]) {
102+
return;
103+
}
97104
able[controlEventName]!(moveable, {
98105
...e,
99106
datas: datas[able.name + "Datas"],
@@ -125,6 +132,9 @@ export default {
125132
const controlEventName = `drag${targets ? "Group" : ""}ControlEnd` as "dragControlEnd";
126133

127134
ables.forEach(able => {
135+
if (!able[controlEventName]) {
136+
return;
137+
}
128138
able[controlEventName]!(moveable, {
129139
...e,
130140
isDrag: isPinch,

0 commit comments

Comments
 (0)