From 98d53503c9a3a1907449cc98c5ce6f2d7f0e4ab7 Mon Sep 17 00:00:00 2001 From: Peter C <63091190+petoc@users.noreply.github.com> Date: Thu, 22 Feb 2024 08:01:36 +0100 Subject: [PATCH] compatibility fix --- package.json | 4 +- src/leaflet-double-touch-drag-zoom.js | 73 ++++++++++++--------------- 2 files changed, 35 insertions(+), 42 deletions(-) diff --git a/package.json b/package.json index 51192f4..685d105 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "@petoc/leafet-double-touch-drag-zoom", - "version": "1.0.0", + "name": "@petoc/leaflet-double-touch-drag-zoom", + "version": "1.0.1", "author": "Peter C.", "license": "MIT", "description": "Leaflet plugin for one finger zoom.", diff --git a/src/leaflet-double-touch-drag-zoom.js b/src/leaflet-double-touch-drag-zoom.js index 6dfdd55..47e52ab 100644 --- a/src/leaflet-double-touch-drag-zoom.js +++ b/src/leaflet-double-touch-drag-zoom.js @@ -41,53 +41,52 @@ this._onTouchEnd = this._onTouchEnd.bind(this); L.DomUtil.addClass(this._map._container, 'leaflet-double-touch-drag-zoom'); this._map._container.addEventListener('touchstart', this._onTouchStart); + this._map._container.addEventListener('pointerdown', this._onTouchStart); this._map._container.addEventListener('mousedown', this._onTouchStart); }, removeHooks: function () { - this._onTouchStart = this._onTouchStart.bind(this); L.DomUtil.removeClass(this._map._container, 'leaflet-double-touch-drag-zoom'); this._map._container.removeEventListener('touchstart', this._onTouchStart); + this._map._container.removeEventListener('pointerdown', this._onTouchStart); this._map._container.removeEventListener('mousedown', this._onTouchStart); }, _disableHandlers: function () { - var map = this._map; - - if (map.dragging.enabled()) { - map.dragging.disable(); + if (this._map.dragging.enabled()) { + this._map.dragging.disable(); this._draggingDisabled = true; } - if (map.doubleClickZoom.enabled()) { - map.doubleClickZoom.disable(); + if (this._map.doubleClickZoom.enabled()) { + this._map.doubleClickZoom.disable(); this._doubleClickZoomDisabled = true; } }, _enableHandlers: function () { - var map = this._map; - if (this._draggingDisabled === true) { - map.dragging.enable(); + this._map.dragging.enable(); } if (this._doubleClickZoomDisabled === true) { - map.doubleClickZoom.enable(); + this._map.doubleClickZoom.enable(); } }, _onTouchStart: function (e) { - if (this._map._animatingZoom || this._zooming) { return; } + if (this._map._animatingZoom || this._zooming || (this._touchStartEvent && this._touchStartEvent !== e.type)) { return; } this._touch = true; + this._touchStartEvent = e.type; var now = Date.now(); this._doubleTouch = this._lastTouchTime && ((now - this._lastTouchTime) <= this._map.options.doubleTouchDragZoomDelay); + this._eventNameMove = e.type.replace('start', 'move').replace('down', 'move'); + this._eventNameEnd = e.type.replace('start', 'end').replace('down', 'up'); if (this._doubleTouch) { L.DomUtil.addClass(this._map._container, 'leaflet-double-touch'); - this._startPoint = this._map.mouseEventToContainerPoint(e); - this._startTouch = e; + this._startPoint = this._map.mouseEventToContainerPoint(e.touches && e.touches.length > 0 ? e.touches[0] : e); this._centerPoint = this._map.getSize()._divideBy(2); this._startLatLng = this._map.containerPointToLatLng(this._centerPoint); @@ -103,10 +102,9 @@ this._map._stop(); L.DomUtil.addClass(this._map._container, 'leaflet-double-touch-drag-zoom'); - document.addEventListener('touchmove', this._onTouchMove); - document.addEventListener('touchend', this._onTouchEnd); - document.addEventListener('mousemove', this._onTouchMove); - document.addEventListener('mouseup', this._onTouchEnd); + document.addEventListener(this._eventNameMove, this._onTouchMove); + document.addEventListener(this._eventNameEnd, this._onTouchEnd); + this._touchStartEvent = null; } this._lastTouchTime = now; @@ -121,34 +119,33 @@ L.DomUtil.addClass(this._map._container, 'leaflet-double-touch-drag'); } - var map = this._map; - var p = map.mouseEventToContainerPoint(e); + var p = this._map.mouseEventToContainerPoint(e.touches && e.touches.length > 0 ? e.touches[0] : e); var py = this._map.options.doubleTouchDragZoomInvert ? this._startPoint.y - p.y : p.y - this._startPoint.y; var scale = Math.exp(py / this._map.options.doubleTouchDragZoomScaleFactor); - this._zoom = map.getScaleZoom(scale, this._startZoom); + this._zoom = this._map.getScaleZoom(scale, this._startZoom); - if (!map.options.bounceAtZoomLimits && ( - (this._zoom < map.getMinZoom() && scale < 1) || - (this._zoom > map.getMaxZoom() && scale > 1))) { - this._zoom = map._limitZoom(this._zoom); + if (!this._map.options.bounceAtZoomLimits && ( + (this._zoom < this._map.getMinZoom() && scale < 1) || + (this._zoom > this._map.getMaxZoom() && scale > 1))) { + this._zoom = this._map._limitZoom(this._zoom); } - if (map.options.doubleTouchDragZoom === 'center') { + if (this._map.options.doubleTouchDragZoom === 'center') { this._center = this._startLatLng; if (scale === 1) { return; } } else { var delta = (new L.Point(this._startPoint.x, this._startPoint.y))._subtract(this._centerPoint); if (scale === 1 && delta.x === 0 && delta.y === 0) { return; } - this._center = map.unproject(map.project(this._doubleTouchStartLatLng, this._zoom).subtract(delta), this._zoom); + this._center = this._map.unproject(this._map.project(this._doubleTouchStartLatLng, this._zoom).subtract(delta), this._zoom); } if (!this._moved) { - map._moveStart(true, false); + this._map._moveStart(true, false); this._moved = true; } L.Util.cancelAnimFrame(this._animRequest); - var moveFn = L.Util.bind(map._move, map, this._center, this._zoom, {pinch: true, round: false}); + var moveFn = L.Util.bind(this._map._move, this._map, this._center, this._zoom, {pinch: true, round: false}); this._animRequest = L.Util.requestAnimFrame(moveFn, this, true); } }, @@ -156,15 +153,11 @@ _onTouchEnd: function () { if (!this._touch) { return; } - var map = this._map; - if (this._doubleTouch) { L.DomUtil.removeClass(this._map._container, 'leaflet-double-touch-drag'); L.DomUtil.removeClass(this._map._container, 'leaflet-double-touch'); - document.removeEventListener('touchmove', this._onTouchMove); - document.removeEventListener('touchend', this._onTouchEnd); - document.removeEventListener('mousemove', this._onTouchMove); - document.removeEventListener('mouseup', this._onTouchEnd); + document.removeEventListener(this._eventNameMove, this._onTouchMove); + document.removeEventListener(this._eventNameEnd, this._onTouchEnd); if (!this._moved || !this._zooming) { this._zooming = false; @@ -180,14 +173,14 @@ var zoomend = function () { this._enableHandlers(); - L.DomEvent.off(map, 'zoomend', zoomend, this); + L.DomEvent.off(this._map, 'zoomend', zoomend, this); }; - L.DomEvent.on(map, 'zoomend', zoomend, this); + L.DomEvent.on(this._map, 'zoomend', zoomend, this); - if (map.options.doubleTouchDragZoom === 'center') { - map.setZoom(map._limitZoom(this._zoom)); + if (this._map.options.doubleTouchDragZoom === 'center') { + this._map.setZoom(this._map._limitZoom(this._zoom)); } else { - map.setZoomAround(this._startPoint, map._limitZoom(this._zoom)); + this._map.setZoomAround(this._startPoint, this._map._limitZoom(this._zoom)); } this._center = null; }