@zoompinch/core 0.0.3 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/zoompinch-core.es.js +84 -89
- package/dist/zoompinch-core.umd.js +1 -1
- package/dist/zoompinch.d.ts +3 -9
- package/package.json +1 -1
|
@@ -1,70 +1,64 @@
|
|
|
1
1
|
var x = Object.defineProperty;
|
|
2
2
|
var z = (r, o, t) => o in r ? x(r, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[o] = t;
|
|
3
|
-
var
|
|
4
|
-
function
|
|
3
|
+
var f = (r, o, t) => z(r, typeof o != "symbol" ? o + "" : o, t);
|
|
4
|
+
function I(r) {
|
|
5
5
|
return r * Math.PI / 180;
|
|
6
6
|
}
|
|
7
7
|
function R(r, o, t) {
|
|
8
8
|
return Math.min(Math.max(r, o), t);
|
|
9
9
|
}
|
|
10
10
|
function v(r, o, t) {
|
|
11
|
-
const [
|
|
11
|
+
const [e, s] = r, [a, n] = o, i = Math.cos(t) * (e - a) - Math.sin(t) * (s - n) + a, h = Math.sin(t) * (e - a) + Math.cos(t) * (s - n) + n;
|
|
12
12
|
return [i, h];
|
|
13
13
|
}
|
|
14
14
|
function w(r, o) {
|
|
15
15
|
const t = Math.pow(10, o);
|
|
16
16
|
return Math.round(r * t) / t;
|
|
17
17
|
}
|
|
18
|
-
function
|
|
18
|
+
function W(r) {
|
|
19
19
|
var o = !1;
|
|
20
20
|
return r.wheelDeltaY ? r.wheelDeltaY === r.deltaY * -3 && (o = !0) : r.deltaMode === 0 && (o = !0), o;
|
|
21
21
|
}
|
|
22
22
|
function C(r, o) {
|
|
23
|
-
const t = o.find((
|
|
23
|
+
const t = o.find((e) => r % e === 0);
|
|
24
24
|
return t ? r / t : 1;
|
|
25
25
|
}
|
|
26
|
-
function y(r, o, t,
|
|
26
|
+
function y(r, o, t, e, s) {
|
|
27
27
|
let a = r.left - o, n = r.top - t;
|
|
28
|
-
const i = Math.cos(-
|
|
28
|
+
const i = Math.cos(-s), h = Math.sin(-s);
|
|
29
29
|
let c = a * i - n * h, l = a * h + n * i;
|
|
30
|
-
const d = r.width /
|
|
31
|
-
return c /=
|
|
30
|
+
const d = r.width / e, u = r.height / e;
|
|
31
|
+
return c /= e, l /= e, { x: w(c, 4), y: w(l, 4), width: w(d, 4), height: w(u, 4) };
|
|
32
32
|
}
|
|
33
33
|
class E extends EventTarget {
|
|
34
|
-
constructor(t,
|
|
34
|
+
constructor(t, e, s, a, n, i, h = 0.1, c = 10) {
|
|
35
35
|
super();
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
translateX: 0,
|
|
47
|
-
translateY: 0,
|
|
48
|
-
scale: 1,
|
|
49
|
-
radians: 0
|
|
50
|
-
});
|
|
51
|
-
this.element = t, this.offset = s, this.translateX = e, this.translateY = a, this.scale = n, this.rotate = i, this.minScale = h, this.maxScale = c;
|
|
36
|
+
f(this, "wrapperBounds");
|
|
37
|
+
f(this, "canvasBounds");
|
|
38
|
+
f(this, "gestureStartRotate", 0);
|
|
39
|
+
f(this, "dragStart", null);
|
|
40
|
+
f(this, "dragStartFrozenX", null);
|
|
41
|
+
f(this, "dragStartFrozenY", null);
|
|
42
|
+
f(this, "touchStarts", null);
|
|
43
|
+
f(this, "touchStartTranslateX", 0);
|
|
44
|
+
f(this, "touchStartTranslateY", 0);
|
|
45
|
+
this.element = t, this.offset = e, this.translateX = s, this.translateY = a, this.scale = n, this.rotate = i, this.minScale = h, this.maxScale = c;
|
|
52
46
|
const l = new ResizeObserver(() => {
|
|
53
|
-
const { x: u, y:
|
|
54
|
-
this.wrapperBounds = { x: u, y:
|
|
47
|
+
const { x: u, y: p, width: g, height: S } = this.element.getBoundingClientRect();
|
|
48
|
+
this.wrapperBounds = { x: u, y: p, width: g, height: S }, this.update();
|
|
55
49
|
}), d = new ResizeObserver(() => {
|
|
56
|
-
const { x: u, y:
|
|
50
|
+
const { x: u, y: p, width: g, height: S } = y(
|
|
57
51
|
this.canvasElement.getBoundingClientRect(),
|
|
58
52
|
this.renderingTranslateX,
|
|
59
53
|
this.renderingTranslateY,
|
|
60
54
|
this.renderinScale,
|
|
61
55
|
this.renderingRotate
|
|
62
56
|
);
|
|
63
|
-
this.canvasBounds = { x: u, y:
|
|
57
|
+
this.canvasBounds = { x: u, y: p, width: g, height: S }, this.update();
|
|
64
58
|
});
|
|
65
59
|
requestAnimationFrame(() => {
|
|
66
60
|
this.wrapperBounds = this.element.getBoundingClientRect(), this.canvasBounds = this.canvasElement.getBoundingClientRect(), this.update();
|
|
67
|
-
}), d.observe(this.canvasElement), l.observe(this.element);
|
|
61
|
+
}), d.observe(this.canvasElement), l.observe(this.element), console.log("INIT");
|
|
68
62
|
}
|
|
69
63
|
get canvasElement() {
|
|
70
64
|
return this.element.querySelector(".canvas");
|
|
@@ -93,14 +87,14 @@ class E extends EventTarget {
|
|
|
93
87
|
return this.canvasNaturalRatio >= this.wrapperInnerRatio ? this.wrapperInnerWidth / this.canvasBounds.width : this.wrapperInnerHeight / this.canvasBounds.height;
|
|
94
88
|
}
|
|
95
89
|
handleGesturestart(t) {
|
|
96
|
-
this.
|
|
90
|
+
this.gestureStartRotate = this.rotate;
|
|
97
91
|
}
|
|
98
92
|
handleGesturechange(t) {
|
|
99
|
-
const { clientX:
|
|
93
|
+
const { clientX: e, clientY: s } = t, a = t.rotation;
|
|
100
94
|
if (a === 0)
|
|
101
95
|
return;
|
|
102
|
-
const n = this.normalizeMatrixCoordinates(
|
|
103
|
-
this.rotateCanvas(n[0], n[1], this.
|
|
96
|
+
const n = this.normalizeMatrixCoordinates(e, s);
|
|
97
|
+
this.rotateCanvas(n[0], n[1], this.gestureStartRotate + I(a));
|
|
104
98
|
}
|
|
105
99
|
handleGestureend(t) {
|
|
106
100
|
}
|
|
@@ -112,32 +106,32 @@ class E extends EventTarget {
|
|
|
112
106
|
}
|
|
113
107
|
handleMousemove(t) {
|
|
114
108
|
if (t.preventDefault(), this.dragStart && this.dragStartFrozenX !== null && this.dragStartFrozenY !== null) {
|
|
115
|
-
const
|
|
109
|
+
const e = t.clientX - this.dragStart[0], s = t.clientY - this.dragStart[1], a = this.dragStartFrozenX - -e, n = this.dragStartFrozenY - -s;
|
|
116
110
|
this.translateX = a, this.translateY = n, this.update();
|
|
117
111
|
}
|
|
118
112
|
}
|
|
119
113
|
handleWheel(t) {
|
|
120
|
-
let { deltaX:
|
|
114
|
+
let { deltaX: e, deltaY: s, ctrlKey: a } = t;
|
|
121
115
|
const n = [120, 100], i = 2;
|
|
122
|
-
|
|
116
|
+
W(t) || ((Math.abs(e) === 120 || Math.abs(e) === 200) && (e = e / (100 / i * C(e, n)) * Math.sign(e)), (Math.abs(s) === 120 || Math.abs(s) === 200) && (s = s / (100 / i * C(s, n)) * Math.sign(s)));
|
|
123
117
|
const h = this.scale;
|
|
124
118
|
if (a) {
|
|
125
|
-
const c = -
|
|
119
|
+
const c = -s / 100 * h, l = R(h + c, this.minScale, this.maxScale), d = this.relativeWrapperCoordinatesFromClientCoords(t.clientX, t.clientY), [u, p] = this.calcProjectionTranslate(
|
|
126
120
|
l,
|
|
127
121
|
d,
|
|
128
122
|
this.normalizeMatrixCoordinates(t.clientX, t.clientY)
|
|
129
123
|
);
|
|
130
|
-
this.translateX = u, this.translateY =
|
|
124
|
+
this.translateX = u, this.translateY = p, this.scale = l;
|
|
131
125
|
} else
|
|
132
|
-
this.translateX = this.translateX -
|
|
126
|
+
this.translateX = this.translateX - e, this.translateY = this.translateY - s;
|
|
133
127
|
this.update(), t.preventDefault();
|
|
134
128
|
}
|
|
135
129
|
freezeTouches(t) {
|
|
136
|
-
return Array.from(t).map((
|
|
137
|
-
const
|
|
130
|
+
return Array.from(t).map((e) => {
|
|
131
|
+
const s = this.clientCoordsToWrapperCoords(e.clientX, e.clientY);
|
|
138
132
|
return {
|
|
139
|
-
client: [
|
|
140
|
-
canvasRel: this.getCanvasCoordsRel(
|
|
133
|
+
client: [e.clientX, e.clientY],
|
|
134
|
+
canvasRel: this.getCanvasCoordsRel(s[0], s[1])
|
|
141
135
|
};
|
|
142
136
|
});
|
|
143
137
|
}
|
|
@@ -146,31 +140,31 @@ class E extends EventTarget {
|
|
|
146
140
|
}
|
|
147
141
|
handleTouchmove(t) {
|
|
148
142
|
t.preventDefault();
|
|
149
|
-
const
|
|
150
|
-
(
|
|
143
|
+
const e = Array.from(t.touches).map(
|
|
144
|
+
(s) => this.clientCoordsToWrapperCoords(s.clientX, s.clientY)
|
|
151
145
|
);
|
|
152
146
|
if (this.touchStarts) {
|
|
153
|
-
if (
|
|
154
|
-
const
|
|
147
|
+
if (e.length >= 2 && this.touchStarts.length >= 2) {
|
|
148
|
+
const s = [
|
|
155
149
|
this.touchStarts[0].canvasRel[0] * this.canvasBounds.width,
|
|
156
150
|
this.touchStarts[0].canvasRel[1] * this.canvasBounds.height
|
|
157
151
|
], a = [
|
|
158
152
|
this.touchStarts[1].canvasRel[0] * this.canvasBounds.width,
|
|
159
153
|
this.touchStarts[1].canvasRel[1] * this.canvasBounds.height
|
|
160
154
|
], n = Math.sqrt(
|
|
161
|
-
Math.pow(
|
|
155
|
+
Math.pow(s[0] - a[0], 2) + Math.pow(s[1] - a[1], 2)
|
|
162
156
|
), i = Math.sqrt(
|
|
163
|
-
Math.pow(
|
|
157
|
+
Math.pow(e[0][0] - e[1][0], 2) + Math.pow(e[0][1] - e[1][1], 2)
|
|
164
158
|
) / this.naturalScale, h = R(i / n, this.minScale, this.maxScale), c = [
|
|
165
|
-
|
|
166
|
-
|
|
159
|
+
e[0][0] / this.wrapperInnerWidth,
|
|
160
|
+
e[0][1] / this.wrapperInnerHeight
|
|
167
161
|
], l = this.touchStarts[0].canvasRel, [d, u] = this.calcProjectionTranslate(h, c, l, 0);
|
|
168
|
-
let
|
|
162
|
+
let p = 0, g = 0, S = 0;
|
|
169
163
|
const T = Math.atan2(
|
|
170
|
-
a[1] -
|
|
171
|
-
a[0] -
|
|
164
|
+
a[1] - s[1],
|
|
165
|
+
a[0] - s[0]
|
|
172
166
|
);
|
|
173
|
-
S = Math.atan2(
|
|
167
|
+
S = Math.atan2(e[1][1] - e[0][1], e[1][0] - e[0][0]) - T;
|
|
174
168
|
const m = (M, P) => [
|
|
175
169
|
this.offset.left + this.canvasBounds.width * M * this.naturalScale * h + d,
|
|
176
170
|
this.offset.top + this.canvasBounds.height * P * this.naturalScale * h + u
|
|
@@ -182,9 +176,9 @@ class E extends EventTarget {
|
|
|
182
176
|
B,
|
|
183
177
|
S
|
|
184
178
|
);
|
|
185
|
-
|
|
179
|
+
p = X[0] - Y[0], g = X[1] - Y[1], this.scale = h, this.rotate = S, this.translateX = d + p, this.translateY = u + g;
|
|
186
180
|
} else {
|
|
187
|
-
const
|
|
181
|
+
const s = t.touches[0].clientX - this.touchStarts[0].client[0], a = t.touches[0].clientY - this.touchStarts[0].client[1], n = this.touchStartTranslateX + s, i = this.touchStartTranslateY + a;
|
|
188
182
|
this.translateX = n, this.translateY = i;
|
|
189
183
|
}
|
|
190
184
|
this.update();
|
|
@@ -193,60 +187,61 @@ class E extends EventTarget {
|
|
|
193
187
|
handleTouchend(t) {
|
|
194
188
|
t.touches.length === 0 ? this.touchStarts = null : (this.touchStarts = this.freezeTouches(t.touches), this.touchStartTranslateX = this.translateX, this.touchStartTranslateY = this.translateY);
|
|
195
189
|
}
|
|
196
|
-
calcProjectionTranslate(t,
|
|
197
|
-
const n = this.canvasBounds.width * this.naturalScale, i = this.canvasBounds.height * this.naturalScale, h =
|
|
198
|
-
return [
|
|
190
|
+
calcProjectionTranslate(t, e, s, a) {
|
|
191
|
+
const n = this.canvasBounds.width * this.naturalScale, i = this.canvasBounds.height * this.naturalScale, h = s[0] * n * t, c = s[1] * i * t, l = v([h, c], [0, 0], a ?? this.rotate), d = e[0] * this.wrapperInnerWidth, u = e[1] * this.wrapperInnerHeight, p = d - l[0], g = u - l[1];
|
|
192
|
+
return [p, g];
|
|
199
193
|
}
|
|
200
|
-
applyTransform(t,
|
|
201
|
-
|
|
194
|
+
applyTransform(t, e, s) {
|
|
195
|
+
console.log("....apply transform");
|
|
196
|
+
const a = this.calcProjectionTranslate(t, e, s, 0);
|
|
202
197
|
this.scale = t, this.translateX = a[0], this.translateY = a[1], this.update();
|
|
203
198
|
}
|
|
204
|
-
composeRelPoint(t,
|
|
205
|
-
|
|
199
|
+
composeRelPoint(t, e, s, a, n, i) {
|
|
200
|
+
s = s ?? this.scale, a = a ?? this.translateX, n = n ?? this.translateY, i = i ?? this.rotate;
|
|
206
201
|
const h = [this.offset.left, this.offset.top], c = [
|
|
207
|
-
this.offset.left + this.canvasBounds.width * (
|
|
208
|
-
this.offset.top + this.canvasBounds.height * (
|
|
202
|
+
this.offset.left + this.canvasBounds.width * (s * this.naturalScale) * t,
|
|
203
|
+
this.offset.top + this.canvasBounds.height * (s * this.naturalScale) * e
|
|
209
204
|
], l = v(c, h, i);
|
|
210
205
|
return [l[0] + a, l[1] + n];
|
|
211
206
|
}
|
|
212
|
-
composePoint(t,
|
|
213
|
-
const
|
|
214
|
-
return this.composeRelPoint(
|
|
207
|
+
composePoint(t, e) {
|
|
208
|
+
const s = t / this.canvasBounds.width, a = e / this.canvasBounds.height;
|
|
209
|
+
return this.composeRelPoint(s, a);
|
|
215
210
|
}
|
|
216
|
-
getAnchorOffset(t,
|
|
211
|
+
getAnchorOffset(t, e, s, a, n = [0.5, 0.5]) {
|
|
217
212
|
const i = this.calcProjectionTranslate(t, n, n, 0), h = [
|
|
218
213
|
this.offset.left + i[0] + this.canvasBounds.width * (t * this.naturalScale) * n[0],
|
|
219
214
|
this.offset.top + i[1] + this.canvasBounds.height * (t * this.naturalScale) * n[1]
|
|
220
|
-
], c = this.composeRelPoint(n[0], n[1], t,
|
|
215
|
+
], c = this.composeRelPoint(n[0], n[1], t, e, s, a), l = c[0] - h[0], d = c[1] - h[1];
|
|
221
216
|
return [l, d];
|
|
222
217
|
}
|
|
223
218
|
// Converts absolute inner wrapper coordinates to relative canvas coordinates (0-1, 0-1)
|
|
224
|
-
getCanvasCoordsRel(t,
|
|
225
|
-
const
|
|
219
|
+
getCanvasCoordsRel(t, e) {
|
|
220
|
+
const s = [0, 0], a = [t - this.translateX, e - this.translateY], n = v(a, s, -this.rotate), i = [n[0] / this.renderinScale, n[1] / this.renderinScale];
|
|
226
221
|
return [i[0] / this.canvasBounds.width, i[1] / this.canvasBounds.height];
|
|
227
222
|
}
|
|
228
223
|
// Converts absolute client to coordinates to absolute inner-wrapper coorinates
|
|
229
|
-
clientCoordsToWrapperCoords(t,
|
|
230
|
-
return [t - this.wrapperInnerX,
|
|
224
|
+
clientCoordsToWrapperCoords(t, e) {
|
|
225
|
+
return [t - this.wrapperInnerX, e - this.wrapperInnerY];
|
|
231
226
|
}
|
|
232
227
|
// Converts absolute client coordinates to relative wrapper coordinates (0-1, 0-1)
|
|
233
|
-
relativeWrapperCoordinatesFromClientCoords(t,
|
|
234
|
-
const [
|
|
235
|
-
return [
|
|
228
|
+
relativeWrapperCoordinatesFromClientCoords(t, e) {
|
|
229
|
+
const [s, a] = this.clientCoordsToWrapperCoords(t, e);
|
|
230
|
+
return [s / this.wrapperInnerWidth, a / this.wrapperInnerHeight];
|
|
236
231
|
}
|
|
237
232
|
// Converts client coordinates to relative canvas coordinates (0-1, 0-1)
|
|
238
|
-
normalizeMatrixCoordinates(t,
|
|
239
|
-
const
|
|
240
|
-
return this.getCanvasCoordsRel(
|
|
233
|
+
normalizeMatrixCoordinates(t, e) {
|
|
234
|
+
const s = this.clientCoordsToWrapperCoords(t, e);
|
|
235
|
+
return this.getCanvasCoordsRel(s[0], s[1]);
|
|
241
236
|
}
|
|
242
237
|
// Converts client coordinates to absolute canvas coordinates
|
|
243
|
-
normalizeClientCoords(t,
|
|
244
|
-
const [
|
|
245
|
-
return [
|
|
238
|
+
normalizeClientCoords(t, e) {
|
|
239
|
+
const [s, a] = this.normalizeMatrixCoordinates(t, e);
|
|
240
|
+
return [s * this.canvasBounds.width, a * this.canvasBounds.height];
|
|
246
241
|
}
|
|
247
|
-
rotateCanvas(t,
|
|
248
|
-
const a = this.composeRelPoint(t,
|
|
249
|
-
this.translateX = n[0] - a[0], this.translateY = n[1] - a[1], this.rotate =
|
|
242
|
+
rotateCanvas(t, e, s) {
|
|
243
|
+
const a = this.composeRelPoint(t, e, this.scale, 0, 0, s), n = this.composeRelPoint(t, e);
|
|
244
|
+
this.translateX = n[0] - a[0], this.translateY = n[1] - a[1], this.rotate = s, this.update();
|
|
250
245
|
}
|
|
251
246
|
get renderinScale() {
|
|
252
247
|
return this.naturalScale * this.scale;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(p,d){typeof exports=="object"&&typeof module<"u"?d(exports):typeof define=="function"&&define.amd?define(["exports"],d):(p=typeof globalThis<"u"?globalThis:p||self,d(p.
|
|
1
|
+
(function(p,d){typeof exports=="object"&&typeof module<"u"?d(exports):typeof define=="function"&&define.amd?define(["exports"],d):(p=typeof globalThis<"u"?globalThis:p||self,d(p.Zoompinch={}))})(this,(function(p){"use strict";var D=Object.defineProperty;var F=(p,d,m)=>d in p?D(p,d,{enumerable:!0,configurable:!0,writable:!0,value:m}):p[d]=m;var S=(p,d,m)=>F(p,typeof d!="symbol"?d+"":d,m);function d(o){return o*Math.PI/180}function m(o,c,t){return Math.min(Math.max(o,c),t)}function Y(o,c,t){const[e,s]=o,[n,a]=c,r=Math.cos(t)*(e-n)-Math.sin(t)*(s-a)+n,i=Math.sin(t)*(e-n)+Math.cos(t)*(s-a)+a;return[r,i]}function X(o,c){const t=Math.pow(10,c);return Math.round(o*t)/t}function M(o){var c=!1;return o.wheelDeltaY?o.wheelDeltaY===o.deltaY*-3&&(c=!0):o.deltaMode===0&&(c=!0),c}function C(o,c){const t=c.find(e=>o%e===0);return t?o/t:1}function P(o,c,t,e,s){let n=o.left-c,a=o.top-t;const r=Math.cos(-s),i=Math.sin(-s);let l=n*r-a*i,h=n*i+a*r;const u=o.width/e,f=o.height/e;return l/=e,h/=e,{x:X(l,4),y:X(h,4),width:X(u,4),height:X(f,4)}}class x extends EventTarget{constructor(t,e,s,n,a,r,i=.1,l=10){super();S(this,"wrapperBounds");S(this,"canvasBounds");S(this,"gestureStartRotate",0);S(this,"dragStart",null);S(this,"dragStartFrozenX",null);S(this,"dragStartFrozenY",null);S(this,"touchStarts",null);S(this,"touchStartTranslateX",0);S(this,"touchStartTranslateY",0);this.element=t,this.offset=e,this.translateX=s,this.translateY=n,this.scale=a,this.rotate=r,this.minScale=i,this.maxScale=l;const h=new ResizeObserver(()=>{const{x:f,y:g,width:v,height:w}=this.element.getBoundingClientRect();this.wrapperBounds={x:f,y:g,width:v,height:w},this.update()}),u=new ResizeObserver(()=>{const{x:f,y:g,width:v,height:w}=P(this.canvasElement.getBoundingClientRect(),this.renderingTranslateX,this.renderingTranslateY,this.renderinScale,this.renderingRotate);this.canvasBounds={x:f,y:g,width:v,height:w},this.update()});requestAnimationFrame(()=>{this.wrapperBounds=this.element.getBoundingClientRect(),this.canvasBounds=this.canvasElement.getBoundingClientRect(),this.update()}),u.observe(this.canvasElement),h.observe(this.element),console.log("INIT")}get canvasElement(){return this.element.querySelector(".canvas")}get wrapperInnerX(){return this.wrapperBounds.x+this.offset.left}get wrapperInnerY(){return this.wrapperBounds.y+this.offset.top}get wrapperInnerWidth(){return this.wrapperBounds.width-this.offset.left-this.offset.right}get wrapperInnerHeight(){return this.wrapperBounds.height-this.offset.top-this.offset.bottom}get wrapperInnerRatio(){return this.wrapperInnerWidth/this.wrapperInnerHeight}get canvasNaturalRatio(){return this.canvasBounds.width/this.canvasBounds.height}get naturalScale(){return this.canvasNaturalRatio>=this.wrapperInnerRatio?this.wrapperInnerWidth/this.canvasBounds.width:this.wrapperInnerHeight/this.canvasBounds.height}handleGesturestart(t){this.gestureStartRotate=this.rotate}handleGesturechange(t){const{clientX:e,clientY:s}=t,n=t.rotation;if(n===0)return;const a=this.normalizeMatrixCoordinates(e,s);this.rotateCanvas(a[0],a[1],this.gestureStartRotate+d(n))}handleGestureend(t){}handleMousedown(t){t.preventDefault(),this.dragStart=[t.clientX,t.clientY],this.dragStartFrozenX=this.translateX,this.dragStartFrozenY=this.translateY}handleMouseup(t){t.preventDefault(),this.dragStart=null,this.dragStartFrozenX=null,this.dragStartFrozenY=null}handleMousemove(t){if(t.preventDefault(),this.dragStart&&this.dragStartFrozenX!==null&&this.dragStartFrozenY!==null){const e=t.clientX-this.dragStart[0],s=t.clientY-this.dragStart[1],n=this.dragStartFrozenX- -e,a=this.dragStartFrozenY- -s;this.translateX=n,this.translateY=a,this.update()}}handleWheel(t){let{deltaX:e,deltaY:s,ctrlKey:n}=t;const a=[120,100],r=2;M(t)||((Math.abs(e)===120||Math.abs(e)===200)&&(e=e/(100/r*C(e,a))*Math.sign(e)),(Math.abs(s)===120||Math.abs(s)===200)&&(s=s/(100/r*C(s,a))*Math.sign(s)));const i=this.scale;if(n){const l=-s/100*i,h=m(i+l,this.minScale,this.maxScale),u=this.relativeWrapperCoordinatesFromClientCoords(t.clientX,t.clientY),[f,g]=this.calcProjectionTranslate(h,u,this.normalizeMatrixCoordinates(t.clientX,t.clientY));this.translateX=f,this.translateY=g,this.scale=h}else this.translateX=this.translateX-e,this.translateY=this.translateY-s;this.update(),t.preventDefault()}freezeTouches(t){return Array.from(t).map(e=>{const s=this.clientCoordsToWrapperCoords(e.clientX,e.clientY);return{client:[e.clientX,e.clientY],canvasRel:this.getCanvasCoordsRel(s[0],s[1])}})}handleTouchstart(t){this.touchStarts=this.freezeTouches(t.touches),this.touchStartTranslateX=this.translateX,this.touchStartTranslateY=this.translateY,t.preventDefault()}handleTouchmove(t){t.preventDefault();const e=Array.from(t.touches).map(s=>this.clientCoordsToWrapperCoords(s.clientX,s.clientY));if(this.touchStarts){if(e.length>=2&&this.touchStarts.length>=2){const s=[this.touchStarts[0].canvasRel[0]*this.canvasBounds.width,this.touchStarts[0].canvasRel[1]*this.canvasBounds.height],n=[this.touchStarts[1].canvasRel[0]*this.canvasBounds.width,this.touchStarts[1].canvasRel[1]*this.canvasBounds.height],a=Math.sqrt(Math.pow(s[0]-n[0],2)+Math.pow(s[1]-n[1],2)),r=Math.sqrt(Math.pow(e[0][0]-e[1][0],2)+Math.pow(e[0][1]-e[1][1],2))/this.naturalScale,i=m(r/a,this.minScale,this.maxScale),l=[e[0][0]/this.wrapperInnerWidth,e[0][1]/this.wrapperInnerHeight],h=this.touchStarts[0].canvasRel,[u,f]=this.calcProjectionTranslate(i,l,h,0);let g=0,v=0,w=0;const y=Math.atan2(n[1]-s[1],n[0]-s[0]);w=Math.atan2(e[1][1]-e[0][1],e[1][0]-e[0][0])-y;const T=(I,W)=>[this.offset.left+this.canvasBounds.width*I*this.naturalScale*i+u,this.offset.top+this.canvasBounds.height*W*this.naturalScale*i+f],R=T(0,0),z=T(this.touchStarts[0].canvasRel[0],this.touchStarts[0].canvasRel[1]),B=Y(R,z,w);g=B[0]-R[0],v=B[1]-R[1],this.scale=i,this.rotate=w,this.translateX=u+g,this.translateY=f+v}else{const s=t.touches[0].clientX-this.touchStarts[0].client[0],n=t.touches[0].clientY-this.touchStarts[0].client[1],a=this.touchStartTranslateX+s,r=this.touchStartTranslateY+n;this.translateX=a,this.translateY=r}this.update()}}handleTouchend(t){t.touches.length===0?this.touchStarts=null:(this.touchStarts=this.freezeTouches(t.touches),this.touchStartTranslateX=this.translateX,this.touchStartTranslateY=this.translateY)}calcProjectionTranslate(t,e,s,n){const a=this.canvasBounds.width*this.naturalScale,r=this.canvasBounds.height*this.naturalScale,i=s[0]*a*t,l=s[1]*r*t,h=Y([i,l],[0,0],n??this.rotate),u=e[0]*this.wrapperInnerWidth,f=e[1]*this.wrapperInnerHeight,g=u-h[0],v=f-h[1];return[g,v]}applyTransform(t,e,s){console.log("....apply transform");const n=this.calcProjectionTranslate(t,e,s,0);this.scale=t,this.translateX=n[0],this.translateY=n[1],this.update()}composeRelPoint(t,e,s,n,a,r){s=s??this.scale,n=n??this.translateX,a=a??this.translateY,r=r??this.rotate;const i=[this.offset.left,this.offset.top],l=[this.offset.left+this.canvasBounds.width*(s*this.naturalScale)*t,this.offset.top+this.canvasBounds.height*(s*this.naturalScale)*e],h=Y(l,i,r);return[h[0]+n,h[1]+a]}composePoint(t,e){const s=t/this.canvasBounds.width,n=e/this.canvasBounds.height;return this.composeRelPoint(s,n)}getAnchorOffset(t,e,s,n,a=[.5,.5]){const r=this.calcProjectionTranslate(t,a,a,0),i=[this.offset.left+r[0]+this.canvasBounds.width*(t*this.naturalScale)*a[0],this.offset.top+r[1]+this.canvasBounds.height*(t*this.naturalScale)*a[1]],l=this.composeRelPoint(a[0],a[1],t,e,s,n),h=l[0]-i[0],u=l[1]-i[1];return[h,u]}getCanvasCoordsRel(t,e){const s=[0,0],n=[t-this.translateX,e-this.translateY],a=Y(n,s,-this.rotate),r=[a[0]/this.renderinScale,a[1]/this.renderinScale];return[r[0]/this.canvasBounds.width,r[1]/this.canvasBounds.height]}clientCoordsToWrapperCoords(t,e){return[t-this.wrapperInnerX,e-this.wrapperInnerY]}relativeWrapperCoordinatesFromClientCoords(t,e){const[s,n]=this.clientCoordsToWrapperCoords(t,e);return[s/this.wrapperInnerWidth,n/this.wrapperInnerHeight]}normalizeMatrixCoordinates(t,e){const s=this.clientCoordsToWrapperCoords(t,e);return this.getCanvasCoordsRel(s[0],s[1])}normalizeClientCoords(t,e){const[s,n]=this.normalizeMatrixCoordinates(t,e);return[s*this.canvasBounds.width,n*this.canvasBounds.height]}rotateCanvas(t,e,s){const n=this.composeRelPoint(t,e,this.scale,0,0,s),a=this.composeRelPoint(t,e);this.translateX=a[0]-n[0],this.translateY=a[1]-n[1],this.rotate=s,this.update()}get renderinScale(){return this.naturalScale*this.scale}get renderingTranslateX(){return this.offset.left+this.translateX}get renderingTranslateY(){return this.offset.top+this.translateY}get renderingRotate(){return this.rotate}update(){this.canvasElement.style.transformOrigin="top left",this.canvasElement.style.transform=`translateX(${this.renderingTranslateX}px) translateY(${this.renderingTranslateY}px) scale(${this.renderinScale}) rotate(${this.renderingRotate}rad)`,this.dispatchEvent(new Event("update"))}destroy(){}}p.Zoompinch=x,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})}));
|
package/dist/zoompinch.d.ts
CHANGED
|
@@ -14,7 +14,7 @@ export type Transform = {
|
|
|
14
14
|
translateX: number;
|
|
15
15
|
translateY: number;
|
|
16
16
|
scale: number;
|
|
17
|
-
|
|
17
|
+
rotate: number;
|
|
18
18
|
};
|
|
19
19
|
export declare class Zoompinch extends EventTarget {
|
|
20
20
|
element: HTMLElement;
|
|
@@ -36,7 +36,7 @@ export declare class Zoompinch extends EventTarget {
|
|
|
36
36
|
get wrapperInnerRatio(): number;
|
|
37
37
|
get canvasNaturalRatio(): number;
|
|
38
38
|
get naturalScale(): number;
|
|
39
|
-
private
|
|
39
|
+
private gestureStartRotate;
|
|
40
40
|
handleGesturestart(event: UIEvent): void;
|
|
41
41
|
handleGesturechange(event: UIEvent): void;
|
|
42
42
|
handleGestureend(event: UIEvent): void;
|
|
@@ -67,13 +67,7 @@ export declare class Zoompinch extends EventTarget {
|
|
|
67
67
|
private relativeWrapperCoordinatesFromClientCoords;
|
|
68
68
|
private normalizeMatrixCoordinates;
|
|
69
69
|
normalizeClientCoords(clientX: number, clientY: number): [number, number];
|
|
70
|
-
rotateCanvas(x: number, y: number,
|
|
71
|
-
centeredTransform: {
|
|
72
|
-
translateX: number;
|
|
73
|
-
translateY: number;
|
|
74
|
-
scale: number;
|
|
75
|
-
radians: number;
|
|
76
|
-
};
|
|
70
|
+
rotateCanvas(x: number, y: number, rotate: number): void;
|
|
77
71
|
get renderinScale(): number;
|
|
78
72
|
get renderingTranslateX(): number;
|
|
79
73
|
get renderingTranslateY(): number;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zoompinch/core",
|
|
3
3
|
"description": "Pinch-and-zoom experience that's feels native and communicates the transform reactively and lets you project any layer on top of the transformed canvas",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.5",
|
|
5
5
|
"private": false,
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "./dist/zoompinch-core.umd.js",
|