@zoompinch/core 0.0.27 → 0.0.30
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 +117 -114
- package/dist/zoompinch-core.umd.js +1 -1
- package/dist/zoompinch.d.ts +5 -0
- package/package.json +1 -1
|
@@ -1,58 +1,53 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
function
|
|
5
|
-
return
|
|
1
|
+
var P = Object.defineProperty;
|
|
2
|
+
var z = (h, l, t) => l in h ? P(h, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : h[l] = t;
|
|
3
|
+
var d = (h, l, t) => z(h, typeof l != "symbol" ? l + "" : l, t);
|
|
4
|
+
function F(h) {
|
|
5
|
+
return h * Math.PI / 180;
|
|
6
6
|
}
|
|
7
|
-
function
|
|
8
|
-
return Math.min(Math.max(
|
|
7
|
+
function B(h, l, t) {
|
|
8
|
+
return Math.min(Math.max(h, l), t);
|
|
9
9
|
}
|
|
10
|
-
function
|
|
11
|
-
const [
|
|
10
|
+
function v(h, l, t) {
|
|
11
|
+
const [e, s] = h, [a, n] = l, r = Math.cos(t) * (e - a) - Math.sin(t) * (s - n) + a, i = Math.sin(t) * (e - a) + Math.cos(t) * (s - n) + n;
|
|
12
12
|
return [r, i];
|
|
13
13
|
}
|
|
14
|
-
function
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}
|
|
22
|
-
function B(o, h) {
|
|
23
|
-
const t = h.find((s) => o % s === 0);
|
|
24
|
-
return t ? o / t : 1;
|
|
25
|
-
}
|
|
26
|
-
function y(o, h, t, s, e) {
|
|
27
|
-
let a = o.left - h, n = o.top - t;
|
|
28
|
-
const r = Math.cos(-e), i = Math.sin(-e);
|
|
29
|
-
let c = a * r - n * i, l = a * i + n * r;
|
|
30
|
-
const u = o.width / s, d = o.height / s;
|
|
31
|
-
return c /= s, l /= s, { x: Y(c, 4), y: Y(l, 4), width: Y(u, 4), height: Y(d, 4) };
|
|
14
|
+
function I(h) {
|
|
15
|
+
if (h.ctrlKey) {
|
|
16
|
+
const { deltaY: t, deltaMode: e, ctrlKey: s } = h, a = Math.abs(t), n = a === 120 || a === 100 || a === 3, r = t % 1 !== 0, i = e === 0;
|
|
17
|
+
return s ? a < 50 && i || r : !n && (r || i && a < 50);
|
|
18
|
+
} else {
|
|
19
|
+
var l = !1;
|
|
20
|
+
return h.wheelDeltaY ? h.wheelDeltaY === h.deltaY * -3 && (l = !0) : h.deltaMode === 0 && (l = !0), l;
|
|
21
|
+
}
|
|
32
22
|
}
|
|
33
|
-
class
|
|
34
|
-
constructor(t,
|
|
23
|
+
class x extends EventTarget {
|
|
24
|
+
constructor(t, e, s, a, n, r, i = 0.1, c = 10, o = !1, u = !0) {
|
|
35
25
|
super();
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
this
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
26
|
+
d(this, "wrapperBounds");
|
|
27
|
+
d(this, "canvasBounds");
|
|
28
|
+
d(this, "translateSpeed", 1);
|
|
29
|
+
d(this, "zoomSpeed", 1);
|
|
30
|
+
d(this, "translateSpeedAppleTrackpad", 1);
|
|
31
|
+
d(this, "zoomSpeedAppleTrackpad", 1);
|
|
32
|
+
d(this, "isGestureActive", !1);
|
|
33
|
+
d(this, "gestureStartRotate", 0);
|
|
34
|
+
d(this, "dragStart", null);
|
|
35
|
+
d(this, "dragStartFrozenX", null);
|
|
36
|
+
d(this, "dragStartFrozenY", null);
|
|
37
|
+
d(this, "touchStarts", null);
|
|
38
|
+
d(this, "touchStartTranslateX", 0);
|
|
39
|
+
d(this, "touchStartTranslateY", 0);
|
|
40
|
+
this.element = t, this.offset = e, this.translateX = s, this.translateY = a, this.scale = n, this.rotate = r, this.minScale = i, this.maxScale = c, this.clampBounds = o, this.rotation = u;
|
|
41
|
+
const p = new ResizeObserver(() => {
|
|
42
|
+
const { x: g, y: m, width: S, height: Y } = this.element.getBoundingClientRect();
|
|
43
|
+
this.wrapperBounds = { x: g, y: m, width: S, height: Y }, this.update();
|
|
44
|
+
}), f = new ResizeObserver((g) => {
|
|
45
|
+
const { width: m, height: S } = g[0].contentRect;
|
|
46
|
+
(m !== this.canvasBounds.width || S !== this.canvasBounds.height) && (this.canvasBounds = { ...this.canvasBounds, width: m, height: S }, this.isGestureActive || this.update());
|
|
52
47
|
});
|
|
53
48
|
requestAnimationFrame(() => {
|
|
54
49
|
this.wrapperBounds = this.element.getBoundingClientRect(), this.canvasBounds = this.canvasElement.getBoundingClientRect(), this.update(), this.dispatchEvent(new Event("init"));
|
|
55
|
-
}),
|
|
50
|
+
}), f.observe(this.canvasElement), p.observe(this.element);
|
|
56
51
|
}
|
|
57
52
|
get canvasElement() {
|
|
58
53
|
return this.element.querySelector(".canvas");
|
|
@@ -82,22 +77,22 @@ class E extends EventTarget {
|
|
|
82
77
|
}
|
|
83
78
|
// The clamping is an explicit user intention
|
|
84
79
|
// The reason is that we do not want side effects when toggling the clamp
|
|
85
|
-
setTranslateFromUserGesture(t,
|
|
80
|
+
setTranslateFromUserGesture(t, e) {
|
|
86
81
|
if (this.clampBounds) {
|
|
87
|
-
const
|
|
88
|
-
this.translateX =
|
|
82
|
+
const s = this.clampTranslate({ translateX: t, translateY: e, scale: this.scale, rotate: this.rotate });
|
|
83
|
+
this.translateX = s.translateX, this.translateY = s.translateY, this.rotate = 0;
|
|
89
84
|
} else
|
|
90
|
-
this.translateX = t, this.translateY =
|
|
85
|
+
this.translateX = t, this.translateY = e;
|
|
91
86
|
}
|
|
92
87
|
handleGesturestart(t) {
|
|
93
88
|
this.gestureStartRotate = this.rotate;
|
|
94
89
|
}
|
|
95
90
|
handleGesturechange(t) {
|
|
96
|
-
const { clientX:
|
|
91
|
+
const { clientX: e, clientY: s } = t, a = t.rotation;
|
|
97
92
|
if (a === 0 || !this.rotation)
|
|
98
93
|
return;
|
|
99
|
-
const n = this.normalizeClientCoords(
|
|
100
|
-
this.rotateCanvas(n[0], n[1], this.gestureStartRotate +
|
|
94
|
+
const n = this.normalizeClientCoords(e, s);
|
|
95
|
+
this.rotateCanvas(n[0], n[1], this.gestureStartRotate + F(a));
|
|
101
96
|
}
|
|
102
97
|
handleGestureend(t) {
|
|
103
98
|
}
|
|
@@ -109,109 +104,117 @@ class E extends EventTarget {
|
|
|
109
104
|
}
|
|
110
105
|
handleMousemove(t) {
|
|
111
106
|
if (t.preventDefault(), this.dragStart && this.dragStartFrozenX !== null && this.dragStartFrozenY !== null) {
|
|
112
|
-
const
|
|
107
|
+
const e = t.clientX - this.dragStart[0], s = t.clientY - this.dragStart[1], a = this.dragStartFrozenX - -e, n = this.dragStartFrozenY - -s;
|
|
113
108
|
this.setTranslateFromUserGesture(a, n), this.update();
|
|
114
109
|
}
|
|
115
110
|
}
|
|
116
111
|
handleWheel(t) {
|
|
117
|
-
let { deltaX:
|
|
118
|
-
const n =
|
|
119
|
-
|
|
120
|
-
const
|
|
112
|
+
let { deltaX: e, deltaY: s, ctrlKey: a } = t;
|
|
113
|
+
const n = I(t);
|
|
114
|
+
n || (Math.abs(s) >= 100 && (s = Math.sign(s) * (Math.abs(s) / 120)), Math.abs(e) >= 100 && (e = Math.sign(e) * (Math.abs(e) / 120)));
|
|
115
|
+
const r = this.scale;
|
|
121
116
|
if (a) {
|
|
122
|
-
const
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
117
|
+
const i = n ? 0.01 * this.zoomSpeedAppleTrackpad : 0.1 * this.zoomSpeed, c = 1 + -s * i;
|
|
118
|
+
let o = r * c;
|
|
119
|
+
if (o = B(o, this.minScale, this.maxScale), (o === this.minScale || o === this.maxScale) && (o === this.minScale && c < 1 || o === this.maxScale && c > 1)) {
|
|
120
|
+
t.preventDefault();
|
|
121
|
+
return;
|
|
122
|
+
}
|
|
123
|
+
const u = this.relativeWrapperCoordinatesFromClientCoords(t.clientX, t.clientY), [p, f] = this.calcProjectionTranslate(o, u, this.normalizeMatrixCoordinates(t.clientX, t.clientY));
|
|
124
|
+
this.setTranslateFromUserGesture(p, f), this.scale = o;
|
|
125
|
+
} else {
|
|
126
|
+
const i = n ? 1 * this.translateSpeedAppleTrackpad : 25 * this.translateSpeed;
|
|
127
|
+
this.setTranslateFromUserGesture(this.translateX - e * i, this.translateY - s * i);
|
|
128
|
+
}
|
|
126
129
|
this.update(), t.preventDefault();
|
|
127
130
|
}
|
|
128
131
|
freezeTouches(t) {
|
|
129
|
-
return Array.from(t).map((
|
|
130
|
-
const
|
|
132
|
+
return Array.from(t).map((e) => {
|
|
133
|
+
const s = this.clientCoordsToWrapperCoords(e.clientX, e.clientY);
|
|
131
134
|
return {
|
|
132
|
-
client: [
|
|
133
|
-
canvasRel: this.getCanvasCoordsRel(
|
|
135
|
+
client: [e.clientX, e.clientY],
|
|
136
|
+
canvasRel: this.getCanvasCoordsRel(s[0], s[1])
|
|
134
137
|
};
|
|
135
138
|
});
|
|
136
139
|
}
|
|
137
140
|
handleTouchstart(t) {
|
|
138
|
-
this.touchStarts = this.freezeTouches(t.touches), this.touchStartTranslateX = this.translateX, this.touchStartTranslateY = this.translateY, t.preventDefault();
|
|
141
|
+
this.touchStarts = this.freezeTouches(t.touches), this.touchStartTranslateX = this.translateX, this.touchStartTranslateY = this.translateY, this.isGestureActive = !0, t.preventDefault();
|
|
139
142
|
}
|
|
140
143
|
handleTouchmove(t) {
|
|
141
144
|
t.preventDefault();
|
|
142
|
-
const
|
|
145
|
+
const e = Array.from(t.touches).map((s) => this.clientCoordsToWrapperCoords(s.clientX, s.clientY));
|
|
143
146
|
if (this.touchStarts) {
|
|
144
|
-
if (
|
|
145
|
-
const
|
|
147
|
+
if (e.length >= 2 && this.touchStarts.length >= 2) {
|
|
148
|
+
const s = [this.touchStarts[0].canvasRel[0] * this.canvasBounds.width, this.touchStarts[0].canvasRel[1] * this.canvasBounds.height], a = [this.touchStarts[1].canvasRel[0] * this.canvasBounds.width, this.touchStarts[1].canvasRel[1] * this.canvasBounds.height], n = Math.sqrt(Math.pow(s[0] - a[0], 2) + Math.pow(s[1] - a[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 = B(r / n, this.minScale, this.maxScale), c = [e[0][0] / this.wrapperInnerWidth, e[0][1] / this.wrapperInnerHeight], o = this.touchStarts[0].canvasRel, [u, p] = this.calcProjectionTranslate(i, c, o, 0);
|
|
146
149
|
if (this.rotation) {
|
|
147
|
-
let
|
|
148
|
-
const S = Math.atan2(a[1] -
|
|
149
|
-
m = Math.atan2(
|
|
150
|
-
const
|
|
151
|
-
|
|
150
|
+
let f = 0, g = 0, m = 0;
|
|
151
|
+
const S = Math.atan2(a[1] - s[1], a[0] - s[0]);
|
|
152
|
+
m = Math.atan2(e[1][1] - e[0][1], e[1][0] - e[0][0]) - S;
|
|
153
|
+
const X = (R, M) => [this.offset.left + this.canvasBounds.width * R * this.naturalScale * i + u, this.offset.top + this.canvasBounds.height * M * this.naturalScale * i + p], w = X(0, 0), C = X(this.touchStarts[0].canvasRel[0], this.touchStarts[0].canvasRel[1]), T = v(w, C, m);
|
|
154
|
+
f = T[0] - w[0], g = T[1] - w[1], this.scale = i, this.rotate = m, this.setTranslateFromUserGesture(u + f, p + g);
|
|
152
155
|
} else
|
|
153
|
-
this.scale = i, this.setTranslateFromUserGesture(u,
|
|
156
|
+
this.scale = i, this.setTranslateFromUserGesture(u, p);
|
|
154
157
|
} else {
|
|
155
|
-
const
|
|
158
|
+
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, r = this.touchStartTranslateY + a;
|
|
156
159
|
this.setTranslateFromUserGesture(n, r);
|
|
157
160
|
}
|
|
158
161
|
this.update();
|
|
159
162
|
}
|
|
160
163
|
}
|
|
161
164
|
handleTouchend(t) {
|
|
162
|
-
t.touches.length === 0 ? this.touchStarts = null : (this.touchStarts = this.freezeTouches(t.touches), this.touchStartTranslateX = this.translateX, this.touchStartTranslateY = this.translateY);
|
|
165
|
+
t.touches.length === 0 ? this.touchStarts = null : (this.touchStarts = this.freezeTouches(t.touches), this.touchStartTranslateX = this.translateX, this.touchStartTranslateY = this.translateY), this.isGestureActive = !1;
|
|
163
166
|
}
|
|
164
|
-
calcProjectionTranslate(t,
|
|
165
|
-
const n = this.canvasBounds.width * this.naturalScale, r = this.canvasBounds.height * this.naturalScale, i =
|
|
166
|
-
return [
|
|
167
|
+
calcProjectionTranslate(t, e, s, a) {
|
|
168
|
+
const n = this.canvasBounds.width * this.naturalScale, r = this.canvasBounds.height * this.naturalScale, i = s[0] * n * t, c = s[1] * r * t, o = v([i, c], [0, 0], a ?? this.rotate), u = e[0] * this.wrapperInnerWidth, p = e[1] * this.wrapperInnerHeight, f = u - o[0], g = p - o[1];
|
|
169
|
+
return [f, g];
|
|
167
170
|
}
|
|
168
|
-
applyTransform(t,
|
|
169
|
-
const a = this.calcProjectionTranslate(t,
|
|
171
|
+
applyTransform(t, e, s) {
|
|
172
|
+
const a = this.calcProjectionTranslate(t, e, s, 0);
|
|
170
173
|
this.scale = t, this.setTranslateFromUserGesture(a[0], a[1]), this.update();
|
|
171
174
|
}
|
|
172
|
-
composeRelPoint(t,
|
|
173
|
-
|
|
174
|
-
const i = [this.offset.left, this.offset.top], c = [this.offset.left + this.canvasBounds.width * (
|
|
175
|
-
return [
|
|
175
|
+
composeRelPoint(t, e, s, a, n, r) {
|
|
176
|
+
s = s ?? this.scale, a = a ?? this.translateX, n = n ?? this.translateY, r = r ?? this.rotate;
|
|
177
|
+
const i = [this.offset.left, this.offset.top], c = [this.offset.left + this.canvasBounds.width * (s * this.naturalScale) * t, this.offset.top + this.canvasBounds.height * (s * this.naturalScale) * e], o = v(c, i, r);
|
|
178
|
+
return [o[0] + a, o[1] + n];
|
|
176
179
|
}
|
|
177
|
-
composePoint(t,
|
|
178
|
-
const
|
|
179
|
-
return this.composeRelPoint(
|
|
180
|
+
composePoint(t, e) {
|
|
181
|
+
const s = t / this.canvasBounds.width, a = e / this.canvasBounds.height;
|
|
182
|
+
return this.composeRelPoint(s, a);
|
|
180
183
|
}
|
|
181
|
-
getAnchorOffset(t,
|
|
184
|
+
getAnchorOffset(t, e, s, a, n = [0.5, 0.5]) {
|
|
182
185
|
const r = this.calcProjectionTranslate(t, n, n, 0), i = [
|
|
183
186
|
this.offset.left + r[0] + this.canvasBounds.width * (t * this.naturalScale) * n[0],
|
|
184
187
|
this.offset.top + r[1] + this.canvasBounds.height * (t * this.naturalScale) * n[1]
|
|
185
|
-
], c = this.composeRelPoint(n[0], n[1], t,
|
|
186
|
-
return [
|
|
188
|
+
], c = this.composeRelPoint(n[0], n[1], t, e, s, a), o = c[0] - i[0], u = c[1] - i[1];
|
|
189
|
+
return [o, u];
|
|
187
190
|
}
|
|
188
191
|
// Converts absolute inner wrapper coordinates to relative canvas coordinates (0-1, 0-1)
|
|
189
|
-
getCanvasCoordsRel(t,
|
|
190
|
-
const
|
|
192
|
+
getCanvasCoordsRel(t, e) {
|
|
193
|
+
const s = [0, 0], a = [t - this.translateX, e - this.translateY], n = v(a, s, -this.rotate), r = [n[0] / this.renderinScale, n[1] / this.renderinScale];
|
|
191
194
|
return [r[0] / this.canvasBounds.width, r[1] / this.canvasBounds.height];
|
|
192
195
|
}
|
|
193
196
|
// Converts absolute client to coordinates to absolute inner-wrapper coorinates
|
|
194
|
-
clientCoordsToWrapperCoords(t,
|
|
195
|
-
return [t - this.wrapperInnerX,
|
|
197
|
+
clientCoordsToWrapperCoords(t, e) {
|
|
198
|
+
return [t - this.wrapperInnerX, e - this.wrapperInnerY];
|
|
196
199
|
}
|
|
197
200
|
// Converts absolute client coordinates to relative wrapper coordinates (0-1, 0-1)
|
|
198
|
-
relativeWrapperCoordinatesFromClientCoords(t,
|
|
199
|
-
const [
|
|
200
|
-
return [
|
|
201
|
+
relativeWrapperCoordinatesFromClientCoords(t, e) {
|
|
202
|
+
const [s, a] = this.clientCoordsToWrapperCoords(t, e);
|
|
203
|
+
return [s / this.wrapperInnerWidth, a / this.wrapperInnerHeight];
|
|
201
204
|
}
|
|
202
205
|
// Converts client coordinates to relative canvas coordinates (0-1, 0-1)
|
|
203
|
-
normalizeMatrixCoordinates(t,
|
|
204
|
-
const
|
|
205
|
-
return this.getCanvasCoordsRel(
|
|
206
|
+
normalizeMatrixCoordinates(t, e) {
|
|
207
|
+
const s = this.clientCoordsToWrapperCoords(t, e);
|
|
208
|
+
return this.getCanvasCoordsRel(s[0], s[1]);
|
|
206
209
|
}
|
|
207
210
|
// Converts client coordinates to absolute canvas coordinates
|
|
208
|
-
normalizeClientCoords(t,
|
|
209
|
-
const [
|
|
210
|
-
return [
|
|
211
|
+
normalizeClientCoords(t, e) {
|
|
212
|
+
const [s, a] = this.normalizeMatrixCoordinates(t, e);
|
|
213
|
+
return [s * this.canvasBounds.width, a * this.canvasBounds.height];
|
|
211
214
|
}
|
|
212
|
-
rotateCanvas(t,
|
|
213
|
-
const a = t / this.canvasBounds.width, n =
|
|
214
|
-
this.setTranslateFromUserGesture(i[0] - r[0], i[1] - r[1]), this.rotate =
|
|
215
|
+
rotateCanvas(t, e, s) {
|
|
216
|
+
const a = t / this.canvasBounds.width, n = e / this.canvasBounds.height, r = this.composeRelPoint(a, n, this.scale, 0, 0, s), i = this.composeRelPoint(a, n);
|
|
217
|
+
this.setTranslateFromUserGesture(i[0] - r[0], i[1] - r[1]), this.rotate = s, this.update();
|
|
215
218
|
}
|
|
216
219
|
get renderinScale() {
|
|
217
220
|
return this.naturalScale * this.scale;
|
|
@@ -225,11 +228,11 @@ class E extends EventTarget {
|
|
|
225
228
|
get renderingRotate() {
|
|
226
229
|
return this.rotate;
|
|
227
230
|
}
|
|
228
|
-
clampTranslate(t,
|
|
229
|
-
const
|
|
231
|
+
clampTranslate(t, e = [0.5, 0.5]) {
|
|
232
|
+
const s = this.canvasBounds.width * this.naturalScale * t.scale, a = this.canvasBounds.height * this.naturalScale * t.scale, n = s - this.wrapperInnerWidth, r = a - this.wrapperInnerHeight, i = n > 0 ? -n : 0, c = Math.min(0, Math.max(t.translateX, i)), o = r > 0 ? -r : 0, u = Math.min(0, Math.max(t.translateY, o)), p = -Math.min(0, n) * e[0], f = -Math.min(0, r) * e[1];
|
|
230
233
|
return {
|
|
231
|
-
translateX: c +
|
|
232
|
-
translateY: u +
|
|
234
|
+
translateX: c + p,
|
|
235
|
+
translateY: u + f
|
|
233
236
|
};
|
|
234
237
|
}
|
|
235
238
|
update() {
|
|
@@ -239,5 +242,5 @@ class E extends EventTarget {
|
|
|
239
242
|
}
|
|
240
243
|
}
|
|
241
244
|
export {
|
|
242
|
-
|
|
245
|
+
x as Zoompinch
|
|
243
246
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(
|
|
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 I=Object.defineProperty;var W=(p,d,w)=>d in p?I(p,d,{enumerable:!0,configurable:!0,writable:!0,value:w}):p[d]=w;var l=(p,d,w)=>W(p,typeof d!="symbol"?d+"":d,w);function d(u){return u*Math.PI/180}function w(u,m,t){return Math.min(Math.max(u,m),t)}function X(u,m,t){const[e,s]=u,[a,n]=m,r=Math.cos(t)*(e-a)-Math.sin(t)*(s-n)+a,i=Math.sin(t)*(e-a)+Math.cos(t)*(s-n)+n;return[r,i]}function M(u){if(u.ctrlKey){const{deltaY:t,deltaMode:e,ctrlKey:s}=u,a=Math.abs(t),n=a===120||a===100||a===3,r=t%1!==0,i=e===0;return s?a<50&&i||r:!n&&(r||i&&a<50)}else{var m=!1;return u.wheelDeltaY?u.wheelDeltaY===u.deltaY*-3&&(m=!0):u.deltaMode===0&&(m=!0),m}}class P extends EventTarget{constructor(t,e,s,a,n,r,i=.1,h=10,o=!1,c=!0){super();l(this,"wrapperBounds");l(this,"canvasBounds");l(this,"translateSpeed",1);l(this,"zoomSpeed",1);l(this,"translateSpeedAppleTrackpad",1);l(this,"zoomSpeedAppleTrackpad",1);l(this,"isGestureActive",!1);l(this,"gestureStartRotate",0);l(this,"dragStart",null);l(this,"dragStartFrozenX",null);l(this,"dragStartFrozenY",null);l(this,"touchStarts",null);l(this,"touchStartTranslateX",0);l(this,"touchStartTranslateY",0);this.element=t,this.offset=e,this.translateX=s,this.translateY=a,this.scale=n,this.rotate=r,this.minScale=i,this.maxScale=h,this.clampBounds=o,this.rotation=c;const f=new ResizeObserver(()=>{const{x:S,y:v,width:Y,height:B}=this.element.getBoundingClientRect();this.wrapperBounds={x:S,y:v,width:Y,height:B},this.update()}),g=new ResizeObserver(S=>{const{width:v,height:Y}=S[0].contentRect;(v!==this.canvasBounds.width||Y!==this.canvasBounds.height)&&(this.canvasBounds={...this.canvasBounds,width:v,height:Y},this.isGestureActive||this.update())});requestAnimationFrame(()=>{this.wrapperBounds=this.element.getBoundingClientRect(),this.canvasBounds=this.canvasElement.getBoundingClientRect(),this.update(),this.dispatchEvent(new Event("init"))}),g.observe(this.canvasElement),f.observe(this.element)}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}setTranslateFromUserGesture(t,e){if(this.clampBounds){const s=this.clampTranslate({translateX:t,translateY:e,scale:this.scale,rotate:this.rotate});this.translateX=s.translateX,this.translateY=s.translateY,this.rotate=0}else this.translateX=t,this.translateY=e}handleGesturestart(t){this.gestureStartRotate=this.rotate}handleGesturechange(t){const{clientX:e,clientY:s}=t,a=t.rotation;if(a===0||!this.rotation)return;const n=this.normalizeClientCoords(e,s);this.rotateCanvas(n[0],n[1],this.gestureStartRotate+d(a))}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],a=this.dragStartFrozenX- -e,n=this.dragStartFrozenY- -s;this.setTranslateFromUserGesture(a,n),this.update()}}handleWheel(t){let{deltaX:e,deltaY:s,ctrlKey:a}=t;const n=M(t);n||(Math.abs(s)>=100&&(s=Math.sign(s)*(Math.abs(s)/120)),Math.abs(e)>=100&&(e=Math.sign(e)*(Math.abs(e)/120)));const r=this.scale;if(a){const i=n?.01*this.zoomSpeedAppleTrackpad:.1*this.zoomSpeed,h=1+-s*i;let o=r*h;if(o=w(o,this.minScale,this.maxScale),(o===this.minScale||o===this.maxScale)&&(o===this.minScale&&h<1||o===this.maxScale&&h>1)){t.preventDefault();return}const c=this.relativeWrapperCoordinatesFromClientCoords(t.clientX,t.clientY),[f,g]=this.calcProjectionTranslate(o,c,this.normalizeMatrixCoordinates(t.clientX,t.clientY));this.setTranslateFromUserGesture(f,g),this.scale=o}else{const i=n?1*this.translateSpeedAppleTrackpad:25*this.translateSpeed;this.setTranslateFromUserGesture(this.translateX-e*i,this.translateY-s*i)}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,this.isGestureActive=!0,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],a=[this.touchStarts[1].canvasRel[0]*this.canvasBounds.width,this.touchStarts[1].canvasRel[1]*this.canvasBounds.height],n=Math.sqrt(Math.pow(s[0]-a[0],2)+Math.pow(s[1]-a[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=w(r/n,this.minScale,this.maxScale),h=[e[0][0]/this.wrapperInnerWidth,e[0][1]/this.wrapperInnerHeight],o=this.touchStarts[0].canvasRel,[c,f]=this.calcProjectionTranslate(i,h,o,0);if(this.rotation){let g=0,S=0,v=0;const Y=Math.atan2(a[1]-s[1],a[0]-s[0]);v=Math.atan2(e[1][1]-e[0][1],e[1][0]-e[0][0])-Y;const C=(F,x)=>[this.offset.left+this.canvasBounds.width*F*this.naturalScale*i+c,this.offset.top+this.canvasBounds.height*x*this.naturalScale*i+f],T=C(0,0),z=C(this.touchStarts[0].canvasRel[0],this.touchStarts[0].canvasRel[1]),R=X(T,z,v);g=R[0]-T[0],S=R[1]-T[1],this.scale=i,this.rotate=v,this.setTranslateFromUserGesture(c+g,f+S)}else this.scale=i,this.setTranslateFromUserGesture(c,f)}else{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,r=this.touchStartTranslateY+a;this.setTranslateFromUserGesture(n,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),this.isGestureActive=!1}calcProjectionTranslate(t,e,s,a){const n=this.canvasBounds.width*this.naturalScale,r=this.canvasBounds.height*this.naturalScale,i=s[0]*n*t,h=s[1]*r*t,o=X([i,h],[0,0],a??this.rotate),c=e[0]*this.wrapperInnerWidth,f=e[1]*this.wrapperInnerHeight,g=c-o[0],S=f-o[1];return[g,S]}applyTransform(t,e,s){const a=this.calcProjectionTranslate(t,e,s,0);this.scale=t,this.setTranslateFromUserGesture(a[0],a[1]),this.update()}composeRelPoint(t,e,s,a,n,r){s=s??this.scale,a=a??this.translateX,n=n??this.translateY,r=r??this.rotate;const i=[this.offset.left,this.offset.top],h=[this.offset.left+this.canvasBounds.width*(s*this.naturalScale)*t,this.offset.top+this.canvasBounds.height*(s*this.naturalScale)*e],o=X(h,i,r);return[o[0]+a,o[1]+n]}composePoint(t,e){const s=t/this.canvasBounds.width,a=e/this.canvasBounds.height;return this.composeRelPoint(s,a)}getAnchorOffset(t,e,s,a,n=[.5,.5]){const r=this.calcProjectionTranslate(t,n,n,0),i=[this.offset.left+r[0]+this.canvasBounds.width*(t*this.naturalScale)*n[0],this.offset.top+r[1]+this.canvasBounds.height*(t*this.naturalScale)*n[1]],h=this.composeRelPoint(n[0],n[1],t,e,s,a),o=h[0]-i[0],c=h[1]-i[1];return[o,c]}getCanvasCoordsRel(t,e){const s=[0,0],a=[t-this.translateX,e-this.translateY],n=X(a,s,-this.rotate),r=[n[0]/this.renderinScale,n[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,a]=this.clientCoordsToWrapperCoords(t,e);return[s/this.wrapperInnerWidth,a/this.wrapperInnerHeight]}normalizeMatrixCoordinates(t,e){const s=this.clientCoordsToWrapperCoords(t,e);return this.getCanvasCoordsRel(s[0],s[1])}normalizeClientCoords(t,e){const[s,a]=this.normalizeMatrixCoordinates(t,e);return[s*this.canvasBounds.width,a*this.canvasBounds.height]}rotateCanvas(t,e,s){const a=t/this.canvasBounds.width,n=e/this.canvasBounds.height,r=this.composeRelPoint(a,n,this.scale,0,0,s),i=this.composeRelPoint(a,n);this.setTranslateFromUserGesture(i[0]-r[0],i[1]-r[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}clampTranslate(t,e=[.5,.5]){const s=this.canvasBounds.width*this.naturalScale*t.scale,a=this.canvasBounds.height*this.naturalScale*t.scale,n=s-this.wrapperInnerWidth,r=a-this.wrapperInnerHeight,i=n>0?-n:0,h=Math.min(0,Math.max(t.translateX,i)),o=r>0?-r:0,c=Math.min(0,Math.max(t.translateY,o)),f=-Math.min(0,n)*e[0],g=-Math.min(0,r)*e[1];return{translateX:h+f,translateY:c+g}}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=P,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})}));
|
package/dist/zoompinch.d.ts
CHANGED
|
@@ -29,6 +29,11 @@ export declare class Zoompinch extends EventTarget {
|
|
|
29
29
|
rotation: boolean;
|
|
30
30
|
wrapperBounds: Bounds;
|
|
31
31
|
canvasBounds: Bounds;
|
|
32
|
+
translateSpeed: number;
|
|
33
|
+
zoomSpeed: number;
|
|
34
|
+
translateSpeedAppleTrackpad: number;
|
|
35
|
+
zoomSpeedAppleTrackpad: number;
|
|
36
|
+
private isGestureActive;
|
|
32
37
|
constructor(element: HTMLElement, offset: Offset, translateX: number, translateY: number, scale: number, rotate: number, minScale?: number, maxScale?: number, clampBounds?: boolean, rotation?: boolean);
|
|
33
38
|
get canvasElement(): HTMLElement;
|
|
34
39
|
get wrapperInnerX(): 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.30",
|
|
5
5
|
"private": false,
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "./dist/zoompinch-core.umd.js",
|