Skip to content

Commit 246af1c

Browse files
daybrushdaybrush
committed
feat: Add clientX, clientY params
1 parent 775be3a commit 246af1c

File tree

21 files changed

+411
-90
lines changed

21 files changed

+411
-90
lines changed

‎README.md‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,6 @@ $ npm i moveable
5252
<script src="//daybrush.com/moveable/release/latest/dist/moveable.min.js"></script>
5353
```
5454

55-
5655
## 📄 Documents
5756
* [API Documentation](https://daybrush.com/moveable/release/latest/doc/)
5857

@@ -81,7 +80,12 @@ const moveable = new Moveable(document.body, {
8180
scalable: true,
8281
rotatable: true,
8382
origin: true,
84-
}).on("dragStart", ({ target }: OnDragStart) => {
83+
keepRatio: true,
84+
throttleDrag: 0,
85+
throttleResize: 0,
86+
throttleScale: 0,
87+
throttleRotate: 0,
88+
}).on("dragStart", ({ target, clientX, clientY }: OnDragStart) => {
8589
console.log("onDragStart", target);
8690
}).on("drag", ({
8791
target,
@@ -90,37 +94,38 @@ const moveable = new Moveable(document.body, {
9094
right, bottom,
9195
delta, dist,
9296
transform,
97+
clientX, clientY,
9398
}: OnDrag) => {
9499
console.log("onDrag left, top", left, top);
95100
// target!.style.left = `${left}px`;
96101
// target!.style.top = `${top}px`;
97102
console.log("onDrag translate", dist);
98103
target!.style.transform = transform;
99-
}).on("dragEnd", ({ target, isDrag }: OnDragEnd) => {
104+
}).on("dragEnd", ({ target, isDrag, clientX, clientY }: OnDragEnd) => {
100105
console.log("onDragEnd", target, isDrag);
101-
}).on("resizeStart", ({ target }: OnResizeStart) => {
106+
}).on("resizeStart", ({ target, clientX, clientY }: OnResizeStart) => {
102107
console.log("onResizeStart", target);
103-
}).on("resize", ({ target, width, height, dist, delta }: OnResize) => {
108+
}).on("resize", ({ target, width, height, dist, delta, clientX, clientY }: OnResize) => {
104109
console.log("onResize", target);
105110
delta[0] && (target!.style.width = `${width}px`);
106111
delta[1] && (target!.style.height = `${height}px`);
107-
}).on("resizeEnd", ({ target, isDrag }: OnResizeEnd) => {
112+
}).on("resizeEnd", ({ target, isDrag, clientX, clientY }: OnResizeEnd) => {
108113
console.log("onResizeEnd", target, isDrag);
109-
}).on("scaleStart", ({ target }: OnScalableStart) => {
114+
}).on("scaleStart", ({ target, clientX, clientY }: OnScalableStart) => {
110115
console.log("onScaleStart", target);
111116
}).on("scale", ({
112-
target, scale, dist, delta, transform,
117+
target, scale, dist, delta, transform, clientX, clientY,
113118
}: OnScale) => {
114119
console.log("onScale scale", scale);
115120
target!.style.transform = transform;
116-
}).on("scaleEnd", ({ target, isDrag }: OnScaleEnd) => {
121+
}).on("scaleEnd", ({ target, isDrag, clientX, clientY }: OnScaleEnd) => {
117122
console.log("onScaleEnd", target, isDrag);
118-
}).on("rotateStart", ({ target }: OnRotateStart) => {
123+
}).on("rotateStart", ({ target, clientX, clientY }: OnRotateStart) => {
119124
console.log("onRotateStart", target);
120-
}).on("rotate", ({ target, delta, dist, transform }: onRotate) => {
125+
}).on("rotate", ({ target, delta, dist, transform, clientX, clientY }: onRotate) => {
121126
console.log("onRotate", dist);
122127
target!.style.transform = transform;
123-
}).on("rotateEnd", ({ target, isDrag }: OnRotateEnd) => {
128+
}).on("rotateEnd", ({ target, isDrag, clientX, clientY }: OnRotateEnd) => {
124129
console.log("onRotateEnd", target, isDrag);
125130
});
126131
```
@@ -132,7 +137,6 @@ const moveable = new Moveable(document.body, {
132137

133138

134139

135-
136140
## ⭐️ Show Your Support
137141
Please give a ⭐️ if this project helped you!
138142

‎demo/index.html‎

Lines changed: 28 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,10 @@
2222
</head>
2323

2424
<body>
25-
26-
<div class="page">
25+
<div class="label"></div>
26+
<div class="page main">
2727
<div class="container">
28+
2829
<div class="moveable"><span>Moveable</span></div>
2930
<p class="badges">
3031
<a href="https://www.npmjs.com/package/moveable" target="_blank">
@@ -76,7 +77,8 @@ <h2 class="container">Features</h2>
7677
<div class="moveable resizable"><span>Resizable</span></div>
7778
</div>
7879
<div class="right">
79-
<p class="description"><strong>Resizable</strong> indicates whether the target's width and height can be increased or decreased.</p>
80+
<p class="description"><strong>Resizable</strong> indicates whether the target's width and height can be
81+
increased or decreased.</p>
8082
<button class="tab selected" data-tab="vanilla" data-group="resizable">Vanilla</button>
8183
<button class="tab" data-tab="react" data-group="resizable">React</button>
8284
<button class="tab" data-tab="preact" data-group="resizable">Preact</button>
@@ -91,7 +93,8 @@ <h2 class="container">Features</h2>
9193
<div class="moveable scalable"><span>Scalable</span></div>
9294
</div>
9395
<div class="right">
94-
<p class="description"><strong>Scalable</strong> indicates whether the target's x and y can be scale of transform.</p>
96+
<p class="description"><strong>Scalable</strong> indicates whether the target's x and y can be scale of
97+
transform.</p>
9598
<button class="tab selected" data-tab="vanilla" data-group="scalable">Vanilla</button>
9699
<button class="tab" data-tab="react" data-group="scalable">React</button>
97100
<button class="tab" data-tab="preact" data-group="scalable">Preact</button>
@@ -116,6 +119,22 @@ <h2 class="container">Features</h2>
116119
<pre class="panel" data-panel="preact" data-group="rotatable"><code class="javascript"></code></pre>
117120
</div>
118121
</div>
122+
<div class="container">
123+
<div class="left">
124+
<div class="moveable origin"><span>30%, 50%</span></div>
125+
</div>
126+
<div class="right">
127+
<p class="description"><strong>origin</strong> indicates whether or not the origin controlbox will be
128+
visible or not. (transform-origin:30% 50%)</p>
129+
<button class="tab selected" data-tab="vanilla" data-group="origin">Vanilla</button>
130+
<button class="tab" data-tab="react" data-group="origin">React</button>
131+
<button class="tab" data-tab="preact" data-group="origin">Preact</button>
132+
<pre class="panel selected" data-panel="vanilla"
133+
data-group="origin"><code class="javascript"></code></pre>
134+
<pre class="panel" data-panel="react" data-group="origin"><code class="javascript"></code></pre>
135+
<pre class="panel" data-panel="preact" data-group="origin"><code class="javascript"></code></pre>
136+
</div>
137+
</div>
119138
<div class="buttons"><a href="./release/latest/doc" class="button">More Features</a></div>
120139
</div>
121140
<div class="page footer">
@@ -136,10 +155,11 @@ <h2 class="container">Features</h2>
136155
<script src="./dist/index.js"></script>
137156
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-128864447-1"></script>
138157
<script>
139-
window.dataLayer = window.dataLayer || [];
140-
function gtag() { dataLayer.push(arguments); }
141-
gtag('js', new Date());
142-
gtag('config', 'UA-128864447-1');
158+
window.dataLayer = window.dataLayer || [];
159+
function gtag() { dataLayer.push(arguments); }
160+
gtag('js', new Date());
161+
gtag('config', 'UA-128864447-1');
143162
</script>
144163
</body>
164+
145165
</html>

‎demo/src/consts.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Moveable from "moveable";
77
const draggable = new Moveable(document.body, {
88
target: document.querySelector(".draggable"),
99
draggable: true,
10+
throttleDrag: 0,
1011
}).on("drag", ({ left, top, beforeDelta }) => {
1112
e.target.style.left = left + "px";
1213
e.target.style.top = top + "px";
@@ -25,6 +26,7 @@ return (
2526
<Moveable
2627
target={document.querySelector(".draggable")}
2728
draggable={true}
29+
throttleDrag={0}
2830
onDrag={({ left, top, beforeDelta }) => {
2931
e.target.style.left = left + "px";
3032
e.target.style.top = top + "px";
@@ -47,6 +49,8 @@ import Moveable from "moveable";
4749
const resizable = new Moveable(document.body, {
4850
target: document.querySelector(".resizable"),
4951
resizable: true,
52+
throttleResize: 0,
53+
keepRatio: true,
5054
}).on("resize", e => {
5155
console.log(e.width, e.height, e.dist);
5256
e.target.style.width = e.width + "px";
@@ -60,6 +64,8 @@ return (
6064
<Moveable
6165
target={document.querySelector(".resizable")}
6266
resizable={true}
67+
throttleResize={0}
68+
keepRatio={true}
6369
onResize={e => {
6470
console.log(e.width, e.height, e.dist);
6571
e.target.style.width = e.width + "px";
@@ -77,6 +83,8 @@ const scale = [1, 1];
7783
const scalable = new Moveable(document.body, {
7884
target: document.querySelector(".scalable"),
7985
scalable: true,
86+
throttleScale: 0,
87+
keepRatio: true,
8088
}).on("scale", ({ dist }) => {
8189
scale[0] *= dist[0];
8290
scale[1] *= dist[1];
@@ -91,6 +99,8 @@ return (
9199
<Moveable
92100
target={document.querySelector(".scalable")}
93101
scalable={true}
102+
throttleScale={0}
103+
keepRatio={true}
94104
onScale={({ dist }) => {
95105
const scale = this.scale;
96106
scale[0] *= dist[0];
@@ -111,6 +121,7 @@ let rotate = 0;
111121
const rotatable = new Moveable(document.body, {
112122
target: document.querySelector(".rotatable"),
113123
rotatable: true,
124+
throttleRotate: 0,
114125
}).on("rotate", ({ beforeDelta }) => {
115126
rotate += beforeDelta;
116127
e.target.style.transform
@@ -126,12 +137,35 @@ return (
126137
<Moveable
127138
target={document.querySelector(".rotatable")}
128139
rotatable={true}
140+
throttleRotate={0}
129141
onRotate={({ beforeDelta }) => {
130142
this.rotate += beforeDelta;
131143
e.target.style.transform
132144
= "rotate(" + this.rotate + "deg)";
133145
}}
134146
/>
147+
);
148+
`,
149+
},
150+
origin: {
151+
vanilla: `
152+
import Moveable from "moveable";
153+
154+
const rotatable = new Moveable(document.body, {
155+
target: document.querySelector(".origin"),
156+
rotatable: true,
157+
origin: true,
158+
});
159+
`,
160+
react: `
161+
import Moveable from "react-moveable";
162+
163+
return (
164+
<Moveable
165+
target={document.querySelector(".origin")}
166+
rotatable={true}
167+
origin={true}
168+
/>
135169
);
136170
`,
137171
},

‎demo/src/index.css‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ a {
5252
top: 50%;
5353
left: 50%;
5454
transform: translate(-50%, -50%);
55+
white-space: nowrap;
5556
}
5657

5758
.description {
@@ -93,6 +94,22 @@ a {
9394
background: #333;
9495
color: #fff;
9596
}
97+
.page.main {
98+
z-index: 1;
99+
}
100+
.label {
101+
position: fixed;
102+
top: 0;
103+
left: 0;
104+
padding: 5px;
105+
border-radius: 5px;
106+
background: #333;
107+
z-index: 10;
108+
color: #fff;
109+
font-weight: bold;
110+
font-size: 12px;
111+
display: none;
112+
}
96113

97114
.page.feature, .page.footer {
98115
height: auto;
@@ -147,10 +164,13 @@ a {
147164
font-weight: 600;
148165
}
149166

150-
.draggable, .resizable, .scalable, .rotatable {
167+
.draggable, .resizable, .scalable, .rotatable, .origin {
151168
position: absolute;
152169
left: 0;
153170
}
171+
.origin {
172+
transform-origin: 30% 50%;
173+
}
154174

155175
pre {
156176
position: relative;

‎demo/src/index.ts‎

Lines changed: 37 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,19 @@ import "./index.css";
66
declare const hljs: any;
77

88
const moveableElement: HTMLElement = document.querySelector(".moveable");
9+
const labelElement: HTMLElement = document.querySelector(".label");
910

1011
let rotate: number = 0;
1112
const translate = [0, 0];
1213
const scale = [1, 1];
1314

1415
function setTransform(target: HTMLElement | SVGElement) {
15-
target.style.transform = `translate(${translate[0]}px, ${translate[1]}px) rotate(${rotate}deg) scale(${scale[0]}, ${scale[1]})`;
16+
target.style.transform
17+
= `translate(${translate[0]}px, ${translate[1]}px) rotate(${rotate}deg) scale(${scale[0]}, ${scale[1]})`;
18+
}
19+
function setLabel(clientX: number, clientY: number, text) {
20+
labelElement.style.cssText = `display: block; left: ${clientX + 10}px; top: ${clientY + 10}px;`;
21+
labelElement.innerHTML = text;
1622
}
1723
const moveable = new Moveable(moveableElement.parentElement, {
1824
target: moveableElement,
@@ -21,19 +27,32 @@ const moveable = new Moveable(moveableElement.parentElement, {
2127
draggable: true,
2228
rotatable: true,
2329
scalable: true,
24-
}).on("drag", ({ target, left, top }: OnDrag) => {
30+
keepRatio: false,
31+
throttleDrag: 1,
32+
throttleScale: 0.01,
33+
throttleRotate: 0.2,
34+
}).on("drag", ({ target, left, top, clientX, clientY }: OnDrag) => {
2535
target.style.left = `${left}px`;
2636
target.style.top = `${top}px`;
27-
}).on("scale", ({ target, dist }: OnScale) => {
37+
setLabel(clientX, clientY, `X: ${left}px<br/>Y: ${top}px`);
38+
}).on("scale", ({ target, dist, clientX, clientY }: OnScale) => {
2839
scale[0] *= dist[0];
2940
scale[1] *= dist[1];
3041
setTransform(target);
31-
}).on("rotate", ({ target, beforeDelta }: OnRotate) => {
42+
setLabel(clientX, clientY, `S: ${scale[0].toFixed(2)}, ${scale[1].toFixed(2)}`);
43+
}).on("rotate", ({ target, beforeDelta, clientX, clientY }: OnRotate) => {
3244
rotate += beforeDelta;
3345
setTransform(target);
46+
setLabel(clientX, clientY, `R: ${rotate.toFixed(1)}`);
3447
}).on("resize", ({ target, width, height }: OnResize) => {
3548
target.style.width = `${width}px`;
3649
target.style.height = `${height}px`;
50+
}).on("dragEnd", () => {
51+
labelElement.style.display = "none";
52+
}).on("scaleEnd", () => {
53+
labelElement.style.display = "none";
54+
}).on("rotateEnd", () => {
55+
labelElement.style.display = "none";
3756
});
3857

3958
const draggableElement: HTMLElement = document.querySelector(".draggable");
@@ -77,6 +96,20 @@ const rotatable = new Moveable(rotatableElement.parentElement, {
7796
target.style.transform = transform;
7897
});
7998

99+
const originElement: HTMLElement = document.querySelector(".origin");
100+
const origin = new Moveable(originElement.parentElement, {
101+
target: originElement,
102+
container: originElement.parentElement,
103+
origin: true,
104+
draggable: true,
105+
rotatable: true,
106+
}).on("drag", ({ target, left, top }) => {
107+
target.style.left = `${left}px`;
108+
target.style.top = `${top}px`;
109+
}).on("rotate", ({ target, transform }: OnRotate) => {
110+
target.style.transform = transform;
111+
});
112+
80113
window.addEventListener("resize", () => {
81114
moveable.updateRect();
82115
draggable.updateRect();

0 commit comments

Comments
 (0)