Skip to content

Commit 37aa417

Browse files
daybrushdaybrush
committed
fix: Fix README
1 parent ad37964 commit 37aa417

File tree

3 files changed

+107
-125
lines changed

3 files changed

+107
-125
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -201,6 +201,7 @@ moveable.on("pinchStart", ({ target, clientX, clientY }) => {
201201
console.log("onPinchEnd");
202202
});
203203
```
204+
## 🚀 [How to use Groupable](https://github.com/daybrush/moveable/blob/master/groupable.md)
204205

205206

206207
## 📦 Packages

‎groupable.md‎

Lines changed: 104 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -25,137 +25,119 @@
2525

2626

2727
```tsx
28-
import Moveable from "react-moveable";
28+
import Moveable from "moveable";
2929

30-
render() {
31-
return (
32-
<Moveable
33-
/* multiple targets */
34-
target={[].slice.call(document.querySelectorAll(".target"))}
35-
container={null}
36-
origin={true}
30+
const moveable = new Moveable(document.body, {
31+
target: document.querySelector(".target"),
32+
// If the container is null, the position is fixed. (default: parentElement(document.body))
33+
container: document.body,
34+
draggable: true,
35+
resizable: true,
36+
scalable: true,
37+
rotatable: true,
38+
warpable: true,
39+
// Enabling pincable lets you use events that
40+
// can be used in draggable, resizable, scalable, and rotateable.
41+
pinchable: true, // ["resizable", "scalable", "rotatable"]
42+
origin: true,
43+
keepRatio: true,
44+
// Resize, Scale Events at edges.
45+
edge: false,
46+
throttleDrag: 0,
47+
throttleResize: 0,
48+
throttleScale: 0,
49+
throttleRotate: 0,
50+
});
3751

38-
/* Resize event edges */
39-
edge={false}
52+
/* draggable */
53+
moveable.on("draGroupStart", ({ targets }) => {
54+
console.log("onDragGroupStart", targets);
55+
}).on("dragGroup", ({ targets, events }) => {
56+
console.log("onDragGroup", targets);
4057

41-
/* draggable */
42-
draggable={true}
43-
throttleDrag={0}
44-
onDragGroupStart={({ targets }) => {
45-
console.log("onDragGroupStart", targets);
46-
}}
47-
onDragGroup={({ targets, events }) => {
48-
console.log("onDragGroup", targets);
58+
events.forEach(ev => {
59+
// drag event
60+
console.log("onDrag left, top", ev.left, ev.top);
61+
// ev.target!.style.left = `${ev.left}px`;
62+
// ev.target!.style.top = `${ev.top}px`;
63+
console.log("onDrag translate", ev.dist);
64+
ev.target!.style.transform = ev.transform;)
65+
});
66+
}).on("dragGroupEnd", ({ targets, isDrag, clientX, clientY }) => {
67+
console.log("onDragGroupEnd", targets, isDrag);
68+
});
4969

50-
events.forEach(ev => {
51-
// drag event
52-
console.log("onDrag left, top", ev.left, ev.top);
53-
// ev.target!.style.left = `${ev.left}px`;
54-
// ev.target!.style.top = `${ev.top}px`;
55-
console.log("onDrag translate", ev.dist);
56-
ev.target!.style.transform = ev.transform;
57-
});
58-
}}
59-
onDragGroupEnd={({ targets, isDrag, clientX, clientY }) => {
60-
console.log("onDragGroupEnd", target, isDrag);
61-
}}
70+
/* resizable */
71+
moveable.on("resizeGroupStart", ({ target, clientX, clientY }) => {
72+
console.log("onResizeGroupStart", target);
73+
}).on("resizeGroup", ({ targets, events, direction }) => {
74+
console.log("onResizeGroup", targets);
6275

63-
/* When resize or scale, keeps a ratio of the width, height. */
64-
keepRatio={true}
76+
events.forEach(ev => {
77+
const offset = [
78+
direction[0] < 0 ? -ev.delta[0] : 0,
79+
direction[1] < 0 ? -ev.delta[1] : 0,
80+
];
81+
// ev.drag is a drag event that occurs when the group resize.
82+
const left = offset[0] + ev.drag.beforeDist[0];
83+
const top = offset[1] + ev.drag.beforeDist[1];
84+
const width = ev.width;
85+
const top = ev.top;
86+
});
87+
}).on("resizeGroupEnd", ({ targets, isDrag, clientX, clientY }) => {
88+
console.log("onResizeGroupEnd", targets, isDrag);
89+
});
6590

66-
/* resizable*/
67-
/* Only one of resizable, scalable, warpable can be used. */
68-
resizable={true}
69-
throttleResize={0}
70-
onResizeGroupStart={({ targets, clientX, clientY }) => {
71-
console.log("onResizeGroupStart", targets);
72-
}}
73-
onResizeGroup={({ targets, direction }) => {
74-
console.log("onResizeGroup", targets);
91+
/* scalable */
92+
moveable.on("scaleGroupStart", ({ targets, clientX, clientY }) => {
93+
console.log("onScaleGroupStart", targets);
94+
}).on("scaleGroup", (({ targets, events }) => {
95+
console.log("onScaleGroup", targets);
7596

76-
e.events.forEach(ev => {
77-
const offset = [
78-
direction[0] < 0 ? -ev.delta[0] : 0,
79-
direction[1] < 0 ? -ev.delta[1] : 0,
80-
];
81-
// ev.drag is a drag event that occurs when the group resize.
82-
const left = offset[0] + ev.drag.beforeDist[0];
83-
const top = offset[1] + ev.drag.beforeDist[1];
84-
const width = ev.width;
85-
const top = ev.top;
86-
});
87-
}}
88-
onResizeGroupEnd={({ targets, isDrag, clientX, clientY }) => {
89-
console.log("onResizeGroupEnd", targets, isDrag);
90-
}}
97+
events.forEach(ev => {
98+
const target = ev.target;
99+
// ev.drag is a drag event that occurs when the group scale.
100+
const left = ev.drag.beforeDist[0];
101+
const top = ev.drag.beforeDist[0];
102+
const scaleX = ev.scale[0];
103+
const scaleX = ev.scale[1];
104+
});
105+
}).on("scaleGroupEnd", ({ targets, isDrag, clientX, clientY }) => {
106+
console.log("onScaleGroupEnd", targets, isDrag);
107+
});
91108

92-
/* scalable */
93-
/* Only one of resizable, scalable, warpable can be used. */
94-
scalable={true}
95-
throttleScale={0}
96-
onScaleGroupStart={({ targets, clientX, clientY }) => {
97-
console.log("onScaleGroupStart", targets);
98-
}}
99-
onScale={({
100-
targets,
101-
events,
102-
}) => {
103-
console.log("onScaleGroup", targets);
109+
/* rotatable */
110+
moveable.on("rotateGroupStart", ({ targets, clientX, clientY }) => {
111+
console.log("onRotateGroupStart", targets);
112+
}).on("rotateGroup", ({
113+
targets,
114+
events
115+
delta, dist,
116+
}) => {
117+
e.events.forEach(ev => {
118+
const target = ev.target;
119+
// ev.drag is a drag event that occurs when the group rotate.
120+
const left = ev.drag.beforeDist[0];
121+
const top = ev.drag.beforeDist[1];
122+
const deg = ev.beforeDist;
123+
});
124+
}).on("rotateGroupEnd", ({ targets, isDrag, clientX, clientY }) => {
125+
console.log("onRotateGroupEnd", targets, isDrag);
126+
});
104127

105-
events.forEach(ev => {
106-
const target = ev.target;
107-
// ev.drag is a drag event that occurs when the group scale.
108-
const left = ev.drag.beforeDist[0];
109-
const top = ev.drag.beforeDist[0];
110-
const scaleX = ev.scale[0];
111-
const scaleX = ev.scale[1];
112-
});
113-
target!.style.transform = transform;
114-
}}
115-
onScaleEnd={({ target, isDrag, clientX, clientY }) => {
116-
console.log("onScaleGroupEnd", target, isDrag);
117-
}}
128+
/* pinchable */
129+
// Enabling pincable lets you use events that
130+
// can be used in draggable, resizable, scalable, and rotateable.
131+
moveable.on("pinchGroupStart", ({ targets, clientX, clientY }) => {
132+
// pinchGroupStart event occur before dragGroupStart, rotateGroupStart, scaleGroupStart, resizeGroupStart
133+
console.log("onPinchGroupStart", targets);
134+
}).on("pinchGroup", ({ targets, clientX, clientY, datas }) => {
135+
// pinchGroup event occur before dragGroup, rotateGroup, scaleGroup, resizeGroup
136+
console.log("onPinchGroup", targets);
137+
}).on("pinchGroupEnd", ({ isDrag, targets, clientX, clientY, datas }) => {
138+
// pinchGroupEnd event occur before dragGroupEnd, rotateGroupEnd, scaleGroupEnd, resizeGroupEnd
139+
console.log("onPinchGroupEnd", targets);
140+
});
118141

119-
/* rotatable */
120-
rotatable={true}
121-
throttleRotate={0}
122-
onRotateGroupStart={({ targets, clientX, clientY }) => {
123-
console.log("onRotateGroupStart", targets);
124-
}}
125-
onRotateGroup={({
126-
targets,
127-
events
128-
delta, dist,
129-
}) => {
130-
e.events.forEach(ev => {
131-
const target = ev.target;
132-
// ev.drag is a drag event that occurs when the group rotate.
133-
const left = ev.drag.beforeDist[0];
134-
const top = ev.drag.beforeDist[1];
135-
const deg = ev.beforeDist;
136-
});
137142

138-
}}
139-
onRotateGroupEnd={({ targets, isDrag, clientX, clientY }) => {
140-
console.log("onRotateGroupEnd", targets, isDrag);
141-
}}
142-
143-
// Enabling pincable lets you use events that
144-
// can be used in draggable, resizable, scalable, and rotateable.
145-
pinchable={true}
146-
onPinchGroupStart={({ targets, clientX, clientY, datas }) => {
147-
// pinchGroupStart event occur before dragGroupStart, rotateGroupStart, scaleGroupStart, resizeGroupStart
148-
console.log("onPinchGroupStart");
149-
}}
150-
onPinchGroup={({ targets, clientX, clientY, datas }) => {
151-
// pinchGroup event occur before dragGroup, rotateGroup, scaleGroup, resizeGroup
152-
console.log("onPinchGroup");
153-
}}
154-
onPinchGroupEnd={({ isDrag, targets, clientX, clientY, datas }) => {
155-
// pinchGroupEnd event occur before dragGroupEnd, rotateGroupEnd, scaleGroupEnd, resizeGroupEnd
156-
console.log("onPinchGroupEnd");
157-
}}
158-
/>
159-
);
160-
}
161143
```

‎packages/react-moveable/groupable.md‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -70,10 +70,10 @@ render() {
7070
onResizeGroupStart={({ targets, clientX, clientY }) => {
7171
console.log("onResizeGroupStart", targets);
7272
}}
73-
onResizeGroup={({ targets, direction }) => {
73+
onResizeGroup={({ events, targets, direction }) => {
7474
console.log("onResizeGroup", targets);
7575

76-
e.events.forEach(ev => {
76+
events.forEach(ev => {
7777
const offset = [
7878
direction[0] < 0 ? -ev.delta[0] : 0,
7979
direction[1] < 0 ? -ev.delta[1] : 0,
@@ -110,7 +110,6 @@ render() {
110110
const scaleX = ev.scale[0];
111111
const scaleX = ev.scale[1];
112112
});
113-
target!.style.transform = transform;
114113
}}
115114
onScaleEnd={({ target, isDrag, clientX, clientY }) => {
116115
console.log("onScaleGroupEnd", target, isDrag);

0 commit comments

Comments
 (0)