@ezuikit/control-zoom 0.0.1-alpha.1

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.
@@ -0,0 +1,719 @@
1
+ /*
2
+ * @ezuikit/control-zoom v0.0.1-alpha.1
3
+ * Copyright (c) 2025-10-08 Ezviz-OpenBiz
4
+ * Released under the MIT License.
5
+ */
6
+ (function (global, factory) {
7
+ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
8
+ typeof define === 'function' && define.amd ? define(factory) :
9
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Zoom = factory());
10
+ })(this, (function () { 'use strict';
11
+
12
+ /**
13
+ * Zoom position
14
+ *
15
+ */ function _defineProperties(target, props) {
16
+ for(var i = 0; i < props.length; i++){
17
+ var descriptor = props[i];
18
+ descriptor.enumerable = descriptor.enumerable || false;
19
+ descriptor.configurable = true;
20
+ if ("value" in descriptor) descriptor.writable = true;
21
+ Object.defineProperty(target, descriptor.key, descriptor);
22
+ }
23
+ }
24
+ function _create_class(Constructor, protoProps, staticProps) {
25
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
26
+ return Constructor;
27
+ }
28
+ var ZOOM_DEFAULT_POSITION = [
29
+ 0,
30
+ 0
31
+ ];
32
+ /**
33
+ * 默认值
34
+ */ var DefaultOptions = {
35
+ initialZoom: 1,
36
+ defaultCursor: 'pointer',
37
+ scrollVelocity: 0.1,
38
+ animDuration: 0.25,
39
+ allowZoom: true,
40
+ allowPan: true,
41
+ onChange: function() {},
42
+ onTranslateChange: function() {},
43
+ onTap: function() {},
44
+ max: 8,
45
+ min: 1,
46
+ zoomStep: 0.1,
47
+ allowTouchEvents: false,
48
+ allowWheel: true,
49
+ ignoredMouseButtons: [],
50
+ doubleTouchMaxDelay: 300,
51
+ decelerationDuration: 750
52
+ };
53
+ /**
54
+ * dom 节点放大和拖动
55
+ *
56
+ */ var Zoom = /*#__PURE__*/ function() {
57
+ function Zoom(container, options) {
58
+ var _this = this;
59
+ this._dragging = false;
60
+ /**
61
+ * 销毁
62
+ * destroy
63
+ */ this.destroy = function() {
64
+ _this.setAllowZoom(false);
65
+ _this.reset();
66
+ _this.removeEventListeners();
67
+ };
68
+ /**
69
+ * 设置是否旋转
70
+ * @param trans - 是否transform
71
+ */ this.setTransform = function(trans) {
72
+ _this.transform = trans;
73
+ };
74
+ /**
75
+ * 获取是否旋转
76
+ * @returns
77
+ */ this.getTransform = function() {
78
+ return _this.transform;
79
+ };
80
+ /**
81
+ * 更新x轴和Y轴平移值
82
+ */ this.updateTranslate = function() {
83
+ var translateX = 0;
84
+ var translateY = 0;
85
+ if (_this.percentPos[0] < 0) {
86
+ translateX = _this.percentPos[0] < -(0.5 * (_this.zoom - 1)) ? -(0.5 * (_this.zoom - 1)) : _this.percentPos[0];
87
+ } else {
88
+ translateX = _this.percentPos[0] > 0.5 * (_this.zoom - 1) ? 0.5 * (_this.zoom - 1) : _this.percentPos[0];
89
+ }
90
+ if (_this.percentPos[1] < 0) {
91
+ translateY = _this.percentPos[1] < -(0.5 * (_this.zoom - 1)) ? -(0.5 * (_this.zoom - 1)) : _this.percentPos[1];
92
+ } else {
93
+ translateY = _this.percentPos[1] > 0.5 * (_this.zoom - 1) ? 0.5 * (_this.zoom - 1) : _this.percentPos[1];
94
+ }
95
+ _this.percentPos = [
96
+ translateX,
97
+ translateY
98
+ ];
99
+ };
100
+ /**
101
+ * 更新容器样式
102
+ */ this.update = function() {
103
+ if (!_this.container) return;
104
+ _this.updateTranslate();
105
+ _this.container.style.transition = "transform ease-out " + _this.transition + "s";
106
+ _this.container.style.transform = "translate3d(" + _this.percentPos[0] * 100 + "%, " + _this.percentPos[1] * 100 + "%, 0) scale(" + _this.zoom + ")";
107
+ };
108
+ /**
109
+ * 设置支持缩放
110
+ * @param allow
111
+ */ this.setAllowZoom = function(allow) {
112
+ _this.options.allowZoom = allow;
113
+ };
114
+ /**
115
+ * 设置缩放值
116
+ * @param zoom - 缩放值
117
+ * @param reset - 是否重置
118
+ */ this.setZoom = function(zoom, reset) {
119
+ zoom = parseFloat(zoom.toFixed(_this.getPrecision(_this.options.zoomStep)));
120
+ if (_this.zoom !== zoom) {
121
+ _this.zoom = zoom;
122
+ _this.update();
123
+ _this.options.onChange == null ? void 0 : _this.options.onChange.call(_this.options, +_this.zoom.toFixed(_this.getPrecision(_this.options.zoomStep)), reset);
124
+ }
125
+ };
126
+ /**
127
+ * 获取缩放值
128
+ * @returns
129
+ */ this.getZoom = function() {
130
+ return _this.zoom;
131
+ };
132
+ /**
133
+ * 设置位置
134
+ * @param pos - 位置 [X轴坐标转换, Y轴坐标转换]
135
+ */ this.setPos = function(pos) {
136
+ var _this_container, _this_container1;
137
+ var containerWidth = (_this_container = _this.container) == null ? void 0 : _this_container.clientWidth;
138
+ var containerHeight = (_this_container1 = _this.container) == null ? void 0 : _this_container1.clientHeight;
139
+ if (+_this.pos[0] !== pos[0] || +_this.pos[1] !== pos[1]) {
140
+ _this.percentPos = [
141
+ pos[0] / containerWidth,
142
+ pos[1] / containerHeight
143
+ ];
144
+ _this.update();
145
+ _this.options.onTranslateChange == null ? void 0 : _this.options.onTranslateChange.call(_this.options, {
146
+ posX: pos[0],
147
+ posY: pos[1]
148
+ });
149
+ }
150
+ };
151
+ /**
152
+ * 设置过渡时间
153
+ * @param duration - 过渡时间, 单位秒
154
+ */ this.setTransitionDuration = function(duration) {
155
+ _this.transition = duration;
156
+ _this.update();
157
+ };
158
+ /**
159
+ * 设置鼠标样式
160
+ * @param cursor
161
+ * @returns
162
+ */ this.setCursor = function(cursor) {
163
+ if (!_this.container) return;
164
+ _this.container.style.cssText += "cursor:" + cursor + ";";
165
+ _this.cursor = cursor;
166
+ };
167
+ this.zoomIn = function(value) {
168
+ var newPosX = _this.pos[0];
169
+ var newPosY = _this.pos[1];
170
+ var prevZoom = _this.zoom;
171
+ var _this_options_max, _this_options_max1;
172
+ var newZoom = prevZoom + value < ((_this_options_max = _this.options.max) != null ? _this_options_max : 8) ? prevZoom + value : (_this_options_max1 = _this.options.max) != null ? _this_options_max1 : 8;
173
+ if (newZoom !== prevZoom) {
174
+ newPosX = newPosX * (newZoom - 1) / (prevZoom > 1 ? prevZoom - 1 : prevZoom);
175
+ newPosY = newPosY * (newZoom - 1) / (prevZoom > 1 ? prevZoom - 1 : prevZoom);
176
+ }
177
+ _this.setZoom(newZoom);
178
+ _this.setPos([
179
+ newPosX,
180
+ newPosY
181
+ ]);
182
+ _this.setTransitionDuration(_this.options.animDuration);
183
+ };
184
+ this.zoomOut = function(value) {
185
+ var newPosX = _this.pos[0];
186
+ var newPosY = _this.pos[1];
187
+ var prevZoom = _this.zoom;
188
+ var _this_options_min, _this_options_min1;
189
+ var newZoom = prevZoom - value > ((_this_options_min = _this.options.min) != null ? _this_options_min : 1) ? prevZoom - value : (_this_options_min1 = _this.options.min) != null ? _this_options_min1 : 1;
190
+ if (newZoom !== prevZoom) {
191
+ newPosX = newPosX * (newZoom - 1) / (prevZoom - 1);
192
+ newPosY = newPosY * (newZoom - 1) / (prevZoom - 1);
193
+ }
194
+ _this.setZoom(newZoom);
195
+ _this.setPos([
196
+ newPosX,
197
+ newPosY
198
+ ]);
199
+ _this.setTransitionDuration(_this.options.animDuration);
200
+ };
201
+ this.zoomToZone = function(relX, relY, relWidth, relHeight) {
202
+ var _this_container;
203
+ if (!_this.container) return;
204
+ var newPosX = _this.pos[0];
205
+ var newPosY = _this.pos[1];
206
+ var parentRect = ((_this_container = _this.container) == null ? void 0 : _this_container.parentNode).getBoundingClientRect();
207
+ var prevZoom = _this.zoom;
208
+ // Calculate zoom factor to scale the zone
209
+ var optimalZoomX = parentRect.width / relWidth;
210
+ var optimalZoomY = parentRect.height / relHeight;
211
+ var _this_options_max;
212
+ var newZoom = Math.min(optimalZoomX, optimalZoomY, (_this_options_max = _this.options.max) != null ? _this_options_max : 8);
213
+ // Calculate new position to center the zone
214
+ var rect = _this.container.getBoundingClientRect();
215
+ var _ref = [
216
+ rect.width / prevZoom / 2,
217
+ rect.height / prevZoom / 2
218
+ ], centerX = _ref[0], centerY = _ref[1];
219
+ var _ref1 = [
220
+ relX + relWidth / 2,
221
+ relY + relHeight / 2
222
+ ], zoneCenterX = _ref1[0], zoneCenterY = _ref1[1];
223
+ newPosX = (centerX - zoneCenterX) * newZoom;
224
+ newPosY = (centerY - zoneCenterY) * newZoom;
225
+ _this.setZoom(newZoom);
226
+ _this.setPos([
227
+ newPosX,
228
+ newPosY
229
+ ]);
230
+ _this.setTransitionDuration(_this.options.animDuration);
231
+ };
232
+ this.getNewPosition = function(x, y, newZoom) {
233
+ var _ref = [
234
+ _this.zoom,
235
+ _this.pos[0],
236
+ _this.pos[1]
237
+ ], prevZoom = _ref[0];
238
+ if (newZoom === 1 || !_this) return ZOOM_DEFAULT_POSITION;
239
+ var _ref1 = [
240
+ _this.container.clientWidth,
241
+ _this.container.clientHeight
242
+ ], clientWidth = _ref1[0], clientHeight = _ref1[1];
243
+ if (newZoom > prevZoom) {
244
+ return [
245
+ 0,
246
+ 0
247
+ ];
248
+ } else {
249
+ // 放到最大
250
+ var w = -((x - clientWidth / 2) / (clientWidth / 2)) * newZoom / 2;
251
+ var h = -((y - clientHeight / 2) / (clientHeight / 2)) * newZoom / 2;
252
+ if (w > newZoom / 2 - 0.5) {
253
+ w = 3.5;
254
+ }
255
+ if (h > newZoom / 2 - 0.5) {
256
+ h = 3.5;
257
+ }
258
+ return [
259
+ clientWidth * w,
260
+ clientHeight * h
261
+ ];
262
+ }
263
+ };
264
+ /**
265
+ * 缩放到最大
266
+ * @param x - 点击点X坐标
267
+ * @param y - 点击点Y坐标
268
+ */ this.fullZoomInOnPosition = function(x, y) {
269
+ var _this_options_max;
270
+ var zoom = (_this_options_max = _this.options.max) != null ? _this_options_max : DefaultOptions.max;
271
+ _this.setZoom(zoom != null ? zoom : DefaultOptions.max);
272
+ _this.setPos(_this.getNewPosition(x, y, zoom));
273
+ _this.setTransitionDuration(_this.options.animDuration);
274
+ };
275
+ this.getLimitedShift = function(shift, minLimit, maxLimit, minElement, maxElement) {
276
+ if (shift > 0) {
277
+ if (minElement > minLimit) {
278
+ return 0;
279
+ } else if (minElement + shift > minLimit) {
280
+ return minLimit - minElement;
281
+ }
282
+ } else if (shift < 0) {
283
+ if (maxElement < maxLimit) {
284
+ return 0;
285
+ } else if (maxElement + shift < maxLimit) {
286
+ return maxLimit - maxElement;
287
+ }
288
+ }
289
+ return shift;
290
+ };
291
+ this.getCursor = function(canMoveOnX, canMoveOnY) {
292
+ if (canMoveOnX && canMoveOnY) {
293
+ return 'move';
294
+ } else if (canMoveOnX) {
295
+ return 'ew-resize';
296
+ } else if (canMoveOnY) {
297
+ return 'ns-resize';
298
+ } else {
299
+ return 'auto';
300
+ }
301
+ };
302
+ this.move = function(shiftX, shiftY, transitionDuration) {
303
+ if (transitionDuration === void 0) transitionDuration = 0;
304
+ if (!_this.container) return;
305
+ var newPosX = _this.pos[0];
306
+ var newPosY = _this.pos[1];
307
+ // let canMoveOnX: boolean, canMoveOnY: boolean;
308
+ var rect = _this.container.getBoundingClientRect();
309
+ var parentRect = _this.container.parentNode.getBoundingClientRect();
310
+ // 根据是否进行了伪横屏旋转,决定是使用 shiftX 还是 shiftY 来对画面进行移动
311
+ var shiftHorizontal = _this.transform ? shiftY : shiftX;
312
+ var shiftVertical = _this.transform ? shiftX : shiftY;
313
+ var _ref = _this.transform ? [
314
+ rect.height > parentRect.bottom - parentRect.top,
315
+ shiftVertical > 0 && rect.top - parentRect.top < 0,
316
+ shiftVertical < 0 && rect.bottom - parentRect.bottom > 0
317
+ ] : [
318
+ rect.width > parentRect.right - parentRect.left,
319
+ shiftHorizontal > 0 && rect.left - parentRect.left < 0,
320
+ shiftHorizontal < 0 && rect.right - parentRect.right > 0
321
+ ], isLargerHor = _ref[0], isOutLeftBoundary = _ref[1], isOutRightBoundary = _ref[2];
322
+ var canMoveOnX = isLargerHor || isOutLeftBoundary || isOutRightBoundary;
323
+ if (canMoveOnX) {
324
+ if (_this.transform) {
325
+ newPosX += _this.getLimitedShift(shiftVertical, parentRect.top, parentRect.bottom, rect.top, rect.bottom);
326
+ } else {
327
+ newPosX += _this.getLimitedShift(shiftHorizontal, parentRect.left, parentRect.right, rect.left, rect.right);
328
+ }
329
+ }
330
+ var _ref1 = _this.transform ? [
331
+ rect.width > parentRect.right - parentRect.left,
332
+ shiftHorizontal > 0 && rect.right - parentRect.right < 0,
333
+ shiftHorizontal < 0 && rect.left - parentRect.left > 0
334
+ ] : [
335
+ rect.height > parentRect.bottom - parentRect.top,
336
+ shiftVertical > 0 && rect.top - parentRect.top < 0,
337
+ shiftVertical < 0 && rect.bottom - parentRect.bottom > 0
338
+ ], isLargerVer = _ref1[0], isOutTopBoundary = _ref1[1], isOutBottomBoundary = _ref1[2];
339
+ var canMoveOnY = isLargerVer || isOutTopBoundary || isOutBottomBoundary;
340
+ if (canMoveOnY) {
341
+ if (_this.transform) {
342
+ var transformGetLimitedShift = function(shift, minLimit, maxLimit, minElement, maxElement) {
343
+ // css伪横屏边界判断特殊处理
344
+ if (shift > 0) {
345
+ if (maxElement < maxLimit + 1) {
346
+ return 0;
347
+ } else if (maxElement + shift < maxLimit + 1) {
348
+ return maxLimit - maxElement;
349
+ }
350
+ } else if (shift < 0) {
351
+ if (minElement + 1 > minLimit) {
352
+ return 0;
353
+ } else if (minElement + 1 + shift > minLimit) {
354
+ return minLimit - minElement;
355
+ }
356
+ }
357
+ return shift;
358
+ };
359
+ newPosY += transformGetLimitedShift(shiftHorizontal, parentRect.left, parentRect.right, rect.left, rect.right);
360
+ } else {
361
+ newPosY += _this.getLimitedShift(shiftVertical, parentRect.top, parentRect.bottom, rect.top, rect.bottom);
362
+ }
363
+ }
364
+ var cursor = _this.getCursor(canMoveOnX, canMoveOnY);
365
+ _this.setPos([
366
+ newPosX,
367
+ newPosY
368
+ ]);
369
+ _this.setCursor(cursor);
370
+ _this.setTransitionDuration(transitionDuration);
371
+ };
372
+ /**
373
+ * 移动端双击
374
+ * @returns
375
+ */ this.isDoubleTapping = function() {
376
+ var touchTime = new Date().getTime();
377
+ var _this_lastTouchTime, _this_options_doubleTouchMaxDelay, _this_lastDoubleTapTime, _this_options_doubleTouchMaxDelay1;
378
+ var isDoubleTap = touchTime - ((_this_lastTouchTime = _this.lastTouchTime) != null ? _this_lastTouchTime : 0) < ((_this_options_doubleTouchMaxDelay = _this.options.doubleTouchMaxDelay) != null ? _this_options_doubleTouchMaxDelay : 300) && touchTime - ((_this_lastDoubleTapTime = _this.lastDoubleTapTime) != null ? _this_lastDoubleTapTime : 0) > ((_this_options_doubleTouchMaxDelay1 = _this.options.doubleTouchMaxDelay) != null ? _this_options_doubleTouchMaxDelay1 : 750);
379
+ if (isDoubleTap) {
380
+ _this.lastDoubleTapTime = touchTime;
381
+ return true;
382
+ }
383
+ _this.lastTouchTime = touchTime;
384
+ return false;
385
+ };
386
+ this.startDeceleration = function(lastShiftOnX, lastShiftOnY) {
387
+ var startTimestamp = null;
388
+ var startDecelerationMove = function(timestamp) {
389
+ if (startTimestamp === null) startTimestamp = timestamp;
390
+ var progress = timestamp - startTimestamp;
391
+ var _this_options_decelerationDuration, _this_options_decelerationDuration1;
392
+ var ratio = (((_this_options_decelerationDuration = _this.options.decelerationDuration) != null ? _this_options_decelerationDuration : 750) - progress) / ((_this_options_decelerationDuration1 = _this.options.decelerationDuration) != null ? _this_options_decelerationDuration1 : 750);
393
+ var _ref = [
394
+ lastShiftOnX * ratio,
395
+ lastShiftOnY * ratio
396
+ ], shiftX = _ref[0], shiftY = _ref[1];
397
+ var _this_options_decelerationDuration2;
398
+ if (progress < ((_this_options_decelerationDuration2 = _this.options.decelerationDuration) != null ? _this_options_decelerationDuration2 : 750) && Math.max(Math.abs(shiftX), Math.abs(shiftY)) > 1) {
399
+ _this.move(shiftX, shiftY, 0);
400
+ _this.lastRequestAnimationId = requestAnimationFrame(startDecelerationMove);
401
+ } else {
402
+ _this.lastRequestAnimationId = null;
403
+ }
404
+ };
405
+ _this.lastRequestAnimationId = requestAnimationFrame(startDecelerationMove);
406
+ };
407
+ this.reset = function() {
408
+ _this.setZoom(_this.options.initialZoom, true);
409
+ _this.cursor = _this.options.defaultCursor;
410
+ _this.setTransitionDuration(_this.options.animDuration);
411
+ _this.setPos(ZOOM_DEFAULT_POSITION);
412
+ };
413
+ // api向前兼容
414
+ this.addScale = function(scale) {
415
+ if (scale === void 0) scale = 1;
416
+ _this.handleZoomAdd(scale);
417
+ };
418
+ this.handleZoomAdd = function(scale) {
419
+ if (scale === void 0) scale = 1;
420
+ if (!_this.options.allowZoom || !_this.options.allowWheel) return;
421
+ var newZoom = parseFloat((_this.zoom + scale).toFixed(_this.getPrecision(_this.options.zoomStep)));
422
+ var _this_options_max;
423
+ if (newZoom > ((_this_options_max = _this.options.max) != null ? _this_options_max : 8)) {
424
+ newZoom = 8;
425
+ }
426
+ _this.setZoom(newZoom);
427
+ _this.setPos(_this.pos);
428
+ _this.setTransitionDuration(0.05);
429
+ };
430
+ // api向前兼容
431
+ this.subScale = function(scale) {
432
+ if (scale === void 0) scale = 1;
433
+ _this.handleZoomSub(scale);
434
+ };
435
+ this.handleZoomSub = function(scale) {
436
+ if (scale === void 0) scale = 1;
437
+ if (!_this.options.allowZoom || !_this.options.allowWheel) return;
438
+ var newZoom = parseFloat((_this.zoom - scale).toFixed(_this.getPrecision(_this.options.zoomStep)));
439
+ if (newZoom < 1) {
440
+ newZoom = 1;
441
+ }
442
+ _this.setZoom(newZoom);
443
+ _this.setPos(_this.pos);
444
+ _this.setTransitionDuration(0.05);
445
+ };
446
+ this.handleMouseWheel = function(event) {
447
+ event.preventDefault();
448
+ if (!_this.options.allowZoom || !_this.options.allowWheel) return;
449
+ var velocity = event.deltaY < 0 ? _this.options.scrollVelocity : 0 - _this.options.scrollVelocity;
450
+ var _this_options_max, _this_options_min;
451
+ var newZoom = parseFloat(Math.max(Math.min(_this.zoom + velocity, (_this_options_max = _this.options.max) != null ? _this_options_max : 8), (_this_options_min = _this.options.min) != null ? _this_options_min : 1).toFixed(_this.getPrecision(_this.options.zoomStep)));
452
+ _this.setZoom(newZoom);
453
+ // this.setPos(this.getNewPosition(posX, posY, newZoom));
454
+ _this.setTransitionDuration(0.05);
455
+ };
456
+ this.handleMouseStart = function(event) {
457
+ var _this_options_ignoredMouseButtons;
458
+ event.preventDefault();
459
+ if (!_this.options.allowPan || ((_this_options_ignoredMouseButtons = _this.options.ignoredMouseButtons) == null ? void 0 : _this_options_ignoredMouseButtons.includes(event.button))) return;
460
+ _this._dragging = true;
461
+ if (_this.lastRequestAnimationId) cancelAnimationFrame(_this.lastRequestAnimationId);
462
+ _this.lastCursor = _this.getCoordinates(event);
463
+ };
464
+ this.handleMouseMove = function(event) {
465
+ event.preventDefault();
466
+ if (!_this.options.allowPan || !_this.lastCursor || !_this._dragging) return;
467
+ _this._touchOrMouseDrag(event);
468
+ };
469
+ this.handleMouseStop = function(event) {
470
+ event.preventDefault();
471
+ if (_this.lastShift) {
472
+ _this.startDeceleration(_this.lastShift[0], _this.lastShift[1]);
473
+ _this.lastShift = null;
474
+ }
475
+ _this.lastCursor = null;
476
+ _this.setCursor('auto');
477
+ _this._dragging = false;
478
+ };
479
+ this.handleTouchStart = function(event) {
480
+ var isThisDoubleTapping = _this.isDoubleTapping();
481
+ _this.isMultiTouch = event.touches.length;
482
+ if (!_this.options.allowTouchEvents) event.preventDefault();
483
+ if (_this.lastRequestAnimationId) cancelAnimationFrame(_this.lastRequestAnimationId);
484
+ var _this_getCoordinates = _this.getCoordinates(event.touches[0]), posX = _this_getCoordinates[0], posY = _this_getCoordinates[1];
485
+ if (_this.isMultiTouch > 1) {
486
+ _this.lastCursor = [
487
+ posX,
488
+ posY
489
+ ];
490
+ return;
491
+ }
492
+ if (isThisDoubleTapping && _this.options.allowZoom) {
493
+ if (_this.zoom === 1) {
494
+ var _this_container_getBoundingClientRect = _this.container.getBoundingClientRect(); _this_container_getBoundingClientRect.top; _this_container_getBoundingClientRect.left; var x = _this_container_getBoundingClientRect.x, y = _this_container_getBoundingClientRect.y;
495
+ var ref;
496
+ ref = _this.transform ? [
497
+ y,
498
+ x
499
+ ] : [
500
+ x,
501
+ y
502
+ ], x = ref[0], y = ref[1];
503
+ var ref1;
504
+ ref1 = [
505
+ posX - x,
506
+ posY - y
507
+ ], posX = ref1[0], posY = ref1[1];
508
+ // 双击放大到最大
509
+ _this.fullZoomInOnPosition(posX, posY);
510
+ } else {
511
+ _this.reset();
512
+ }
513
+ return;
514
+ }
515
+ _this._tapStartTime = new Date().getTime();
516
+ if (_this.options.allowPan) _this.lastCursor = [
517
+ posX,
518
+ posY
519
+ ];
520
+ };
521
+ this.handleTouchMove = function(event) {
522
+ if (!_this.options.allowTouchEvents) event.preventDefault();
523
+ if (!_this.lastCursor) return;
524
+ if (_this.isMultiTouch === 1) {
525
+ _this._touchOrMouseDrag(event.touches[0]);
526
+ _this.lastTouchDistance = null;
527
+ } else if (_this.isMultiTouch > 1) {
528
+ var newZoom = _this.zoom;
529
+ // If we detect two points, we shall zoom up or down
530
+ var _this_getCoordinates = _this.getCoordinates(event.touches[0]), pos1X = _this_getCoordinates[0], pos1Y = _this_getCoordinates[1];
531
+ var _this_getCoordinates1 = _this.getCoordinates(event.touches[1]), pos2X = _this_getCoordinates1[0], pos2Y = _this_getCoordinates1[1];
532
+ var distance = Math.sqrt(Math.pow(pos2X - pos1X, 2) + Math.pow(pos2Y - pos1Y, 2));
533
+ if (_this.lastTouchDistance && distance && distance !== _this.lastTouchDistance) {
534
+ if (_this.options.allowZoom) {
535
+ newZoom += (distance - _this.lastTouchDistance) / 100;
536
+ var _this_options_max, _this_options_min;
537
+ if (newZoom > ((_this_options_max = _this.options.max) != null ? _this_options_max : 8)) {
538
+ var _this_options_max1;
539
+ newZoom = (_this_options_max1 = _this.options.max) != null ? _this_options_max1 : 8;
540
+ } else if (newZoom < ((_this_options_min = _this.options.min) != null ? _this_options_min : 1)) {
541
+ var _this_options_min1;
542
+ newZoom = (_this_options_min1 = _this.options.min) != null ? _this_options_min1 : 1;
543
+ }
544
+ }
545
+ // 不要做移动,因为会有冲突
546
+ _this.setZoom(newZoom);
547
+ _this.setTransitionDuration(0);
548
+ }
549
+ // Save data for the next move
550
+ _this.lastCursor = [
551
+ pos1X,
552
+ pos1Y
553
+ ];
554
+ _this.lastTouchDistance = distance;
555
+ }
556
+ };
557
+ this.handleTouchStop = function() {
558
+ if (_this.lastShift) {
559
+ // Use the last shift to make a decelerating movement effect
560
+ _this.startDeceleration(_this.lastShift[0], _this.lastShift[1]);
561
+ _this.lastShift = null;
562
+ }
563
+ if (_this._tapStartTime && new Date().getTime() - _this._tapStartTime < 200) {
564
+ _this.options.onTap == null ? void 0 : _this.options.onTap.call(_this.options);
565
+ }
566
+ _this._tapStartTime = undefined;
567
+ _this.lastCursor = null;
568
+ _this.lastTouchDistance = null;
569
+ _this.isMultiTouch = 0;
570
+ };
571
+ this.container = container;
572
+ this.options = Object.assign({}, DefaultOptions, options || {});
573
+ this.percentPos = ZOOM_DEFAULT_POSITION;
574
+ this.transition = this.options.animDuration;
575
+ this.zoom = 1;
576
+ this.cursor = 'auto';
577
+ this.lastCursor = [
578
+ 0,
579
+ 0
580
+ ];
581
+ this.lastShift = null;
582
+ this.lastTouchDistance = null;
583
+ this.lastRequestAnimationId = null;
584
+ this.lastTouchTime = new Date().getTime();
585
+ this.lastDoubleTapTime = new Date().getTime();
586
+ this.transform = false; // 是否为横屏模式
587
+ this.isMultiTouch = 1;
588
+ this.handleMouseMove = this.handleMouseMove.bind(this);
589
+ this.handleMouseStart = this.handleMouseStart.bind(this);
590
+ this.handleMouseStop = this.handleMouseStop.bind(this);
591
+ this.handleMouseWheel = this.handleMouseWheel.bind(this);
592
+ this.handleTouchStart = this.handleTouchStart.bind(this);
593
+ this.handleTouchMove = this.handleTouchMove.bind(this);
594
+ this.handleTouchStop = this.handleTouchStop.bind(this);
595
+ this.getZoom = this.getZoom.bind(this);
596
+ this.setZoom = this.setZoom.bind(this);
597
+ }
598
+ var _proto = Zoom.prototype;
599
+ // 设置事件侦听器
600
+ _proto.setUpEventListeners = function setUpEventListeners() {
601
+ var refCurrentValue = this.container;
602
+ var hasMouseDevice = window.matchMedia('(pointer: fine)').matches;
603
+ if (hasMouseDevice) {
604
+ if (this.options.allowWheel) {
605
+ refCurrentValue == null ? void 0 : refCurrentValue.addEventListener('wheel', this.handleMouseWheel, {
606
+ passive: false
607
+ });
608
+ }
609
+ // Apply mouse events only to devices which include an accurate pointing device
610
+ refCurrentValue == null ? void 0 : refCurrentValue.addEventListener('mousedown', this.handleMouseStart, {
611
+ passive: false
612
+ });
613
+ refCurrentValue == null ? void 0 : refCurrentValue.addEventListener('mousemove', this.handleMouseMove, {
614
+ passive: false
615
+ });
616
+ refCurrentValue == null ? void 0 : refCurrentValue.addEventListener('mouseup', this.handleMouseStop, {
617
+ passive: false
618
+ });
619
+ refCurrentValue == null ? void 0 : refCurrentValue.addEventListener('mouseleave', this.handleMouseStop, {
620
+ passive: false
621
+ });
622
+ } else {
623
+ // Apply touch events to all other devices
624
+ refCurrentValue == null ? void 0 : refCurrentValue.addEventListener('touchstart', this.handleTouchStart, {
625
+ passive: false
626
+ });
627
+ refCurrentValue == null ? void 0 : refCurrentValue.addEventListener('touchmove', this.handleTouchMove, {
628
+ passive: false
629
+ });
630
+ refCurrentValue == null ? void 0 : refCurrentValue.addEventListener('touchend', this.handleTouchStop, {
631
+ passive: false
632
+ });
633
+ refCurrentValue == null ? void 0 : refCurrentValue.addEventListener('touchcancel', this.handleTouchStop, {
634
+ passive: false
635
+ });
636
+ }
637
+ };
638
+ // 移除事件侦听器
639
+ _proto.removeEventListeners = function removeEventListeners() {
640
+ var refCurrentValue = this.container;
641
+ var hasMouseDevice = window.matchMedia('(pointer: fine)').matches;
642
+ if (hasMouseDevice) {
643
+ if (this.options.allowWheel) {
644
+ refCurrentValue == null ? void 0 : refCurrentValue.removeEventListener('wheel', this.handleMouseWheel);
645
+ }
646
+ refCurrentValue == null ? void 0 : refCurrentValue.removeEventListener('mousedown', this.handleMouseStart);
647
+ refCurrentValue == null ? void 0 : refCurrentValue.removeEventListener('mousemove', this.handleMouseMove);
648
+ refCurrentValue == null ? void 0 : refCurrentValue.removeEventListener('mouseup', this.handleMouseStop);
649
+ refCurrentValue == null ? void 0 : refCurrentValue.removeEventListener('mouseleave', this.handleMouseStop);
650
+ } else {
651
+ refCurrentValue == null ? void 0 : refCurrentValue.removeEventListener('touchstart', this.handleTouchStart);
652
+ refCurrentValue == null ? void 0 : refCurrentValue.removeEventListener('touchmove', this.handleTouchMove);
653
+ refCurrentValue == null ? void 0 : refCurrentValue.removeEventListener('touchend', this.handleTouchStop);
654
+ refCurrentValue == null ? void 0 : refCurrentValue.removeEventListener('touchcancel', this.handleTouchStop);
655
+ }
656
+ };
657
+ _proto.getPrecision = function getPrecision(value) {
658
+ if (value === void 0) value = 1;
659
+ var valueStr = value.toString();
660
+ if (valueStr.includes('.')) {
661
+ return valueStr.split('.')[1].length;
662
+ } else {
663
+ return 1;
664
+ }
665
+ };
666
+ /**
667
+ * 获取坐标 (伪横屏X、Y轴坐标转换, 相对值)
668
+ * @param event
669
+ * @returns
670
+ */ _proto.getCoordinates = function getCoordinates(event) {
671
+ var clientHeight = this.container.clientHeight;
672
+ var clientTop = this.container.clientTop;
673
+ var clientLeft = this.container.clientLeft;
674
+ var _ref = this.transform ? [
675
+ event.clientY,
676
+ clientHeight - event.clientX
677
+ ] : [
678
+ event.clientX - clientTop,
679
+ event.clientY - clientLeft
680
+ ], x1 = _ref[0], y1 = _ref[1];
681
+ return [
682
+ x1,
683
+ y1
684
+ ];
685
+ };
686
+ _proto._touchOrMouseDrag = function _touchOrMouseDrag(event) {
687
+ if (this.lastCursor) {
688
+ var _this_getCoordinates = this.getCoordinates(event), posX = _this_getCoordinates[0], posY = _this_getCoordinates[1];
689
+ var shiftX = posX - this.lastCursor[0];
690
+ var shiftY = posY - this.lastCursor[1];
691
+ this.move(shiftX, shiftY, 0);
692
+ this.lastCursor = [
693
+ posX,
694
+ posY
695
+ ];
696
+ this.lastShift = [
697
+ shiftX,
698
+ shiftY
699
+ ];
700
+ }
701
+ };
702
+ _create_class(Zoom, [
703
+ {
704
+ key: "pos",
705
+ get: function get() {
706
+ return [
707
+ this.container.clientWidth * this.percentPos[0],
708
+ this.container.clientHeight * this.percentPos[1]
709
+ ];
710
+ }
711
+ }
712
+ ]);
713
+ return Zoom;
714
+ }();
715
+ Zoom.VERSION = '0.0.1-alpha.1';
716
+
717
+ return Zoom;
718
+
719
+ }));