diff --git a/debug/map/zoom-remain-centered.html b/debug/map/zoom-remain-centered.html index 87d166ede..2e055f524 100644 --- a/debug/map/zoom-remain-centered.html +++ b/debug/map/zoom-remain-centered.html @@ -29,7 +29,7 @@ layers: [osm], scrollWheelZoom: 'center', // zoom to center regardless where mouse is doubleClickZoom: 'center', - touchZoom: 'center' + pinchZoom: 'center' }); new Marker(latlng).addTo(map); diff --git a/docs/examples/extending/class-diagram.txt b/docs/examples/extending/class-diagram.txt index 32dcb8147..286689176 100644 --- a/docs/examples/extending/class-diagram.txt +++ b/docs/examples/extending/class-diagram.txt @@ -52,7 +52,7 @@ [L.Map] has one -.-> [L.CRS] [L.Class] ^- [L.Handler|addHooks();removeHooks()] -[L.Handler] ^- [L.Map.BoxZoom;L.Map.DoubleClickZoom;L.Map.Drag;L.Map.Keyboard;L.Map.ScrollWheelZoom;L.Map.Tap;L.Map.TouchZoom] +[L.Handler] ^- [L.Map.BoxZoom;L.Map.DoubleClickZoom;L.Map.Drag;L.Map.Keyboard;L.Map.ScrollWheelZoom;L.Map.Tap;L.Map.PinchZoom] // L.Handler] ^- L.Map.BoxZoom] // L.Handler] ^- L.Map.DoubleClickZoom] @@ -60,7 +60,7 @@ // L.Handler] ^- L.Map.Keyboard] // L.Handler] ^- L.Map.ScrollWheelZoom] // L.Handler] ^- L.Map.Tap] -// L.Handler] ^- L.Map.TouchZoom] +// L.Handler] ^- L.Map.PinchZoom] [L.Layer] ^- [L.Marker] [L.Icon] ^- [L.Icon.Default] diff --git a/spec/suites/map/handler/Map.DragSpec.js b/spec/suites/map/handler/Map.DragSpec.js index 22998ce22..d90b4c447 100644 --- a/spec/suites/map/handler/Map.DragSpec.js +++ b/spec/suites/map/handler/Map.DragSpec.js @@ -377,7 +377,7 @@ describe('Map.Drag', () => { }); map.setView([0, 0], 1); - // Change default events order to make the tap comming before the touchzoom. + // Change default events order to make the tap comming before the pinchZoom. // See #4315 map.dragging.disable(); map.dragging.enable(); diff --git a/spec/suites/map/handler/Map.TouchZoomSpec.js b/spec/suites/map/handler/Map.PinchZoomSpec.js similarity index 73% rename from spec/suites/map/handler/Map.TouchZoomSpec.js rename to spec/suites/map/handler/Map.PinchZoomSpec.js index d9a518ca3..5927fbcf1 100644 --- a/spec/suites/map/handler/Map.TouchZoomSpec.js +++ b/spec/suites/map/handler/Map.PinchZoomSpec.js @@ -4,13 +4,13 @@ import Hand from 'prosthetic-hand'; import sinon from 'sinon'; import {createContainer, removeMapContainer, touchEventType} from '../../SpecHelper.js'; -describe('Map.TouchZoom', () => { +describe('Map.PinchZoom', () => { let container, map; beforeEach(() => { container = createContainer(); map = new Map(container, { - touchZoom: true, + pinchZoom: true, inertia: false, zoomAnimation: false // If true, the test has to wait extra 250msec }); @@ -133,11 +133,11 @@ describe('Map.TouchZoom', () => { }); - it.skipIfNotTouch('TouchZoom works with disabled map dragging', (done) => { + it.skipIfNotTouch('PinchZoom works with disabled map dragging', (done) => { map.remove(); map = new Map(container, { - touchZoom: true, + pinchZoom: true, inertia: false, zoomAnimation: false, // If true, the test has to wait extra 250msec, dragging: false @@ -167,7 +167,7 @@ describe('Map.TouchZoom', () => { map.remove(); map = new Map(container, { - touchZoom: true, + pinchZoom: true, inertia: false, zoomAnimation: true }); @@ -220,16 +220,16 @@ describe('Map.TouchZoom', () => { hand.sync(5); f1.wait(100).moveTo(75, 300, 0) - .down().moveBy(200, 0, 500); + .down().moveBy(200, 0, 500).up(); f2.wait(100).moveTo(525, 300, 0) - .down().moveBy(-200, 0, 500); + .down().moveBy(-200, 0, 500).up(); }); it.skipIfNotTouch('Layer is rendered correctly while pinch zoom when zoomAnim is false', (done) => { map.remove(); map = new Map(container, { - touchZoom: true, + pinchZoom: true, inertia: false, zoomAnimation: false }); @@ -243,47 +243,74 @@ describe('Map.TouchZoom', () => { [1, 0] ]).addTo(map); - let alreadyCalled = false; - const hand = new Hand({ - timing: 'fastframe', - onStop() { - setTimeout(() => { - if (alreadyCalled) { - return; // Will recursivly call itself otherwise - } - alreadyCalled = true; - const renderedRect = polygon._path.getBoundingClientRect(); - - const width = renderedRect.width; - const height = renderedRect.height; - - expect(height < 50).to.be.true; - expect(width < 50).to.be.true; - expect(height + width > 0).to.be.true; - - const x = renderedRect.x; - const y = renderedRect.y; - - expect(x).to.be.within(299, 301); - expect(y).to.be.within(270, 280); - - // Fingers lifted after expects as bug goes away when lifted - this._fingers[0].up(); - this._fingers[1].up(); - - done(); - }, 100); - } + map.pinchZoom._onTouchStart({ + touches: [ + {clientX: 75, clientY: 300}, + {clientX: 525, clientY: 300} + ], + }); + map.pinchZoom._onTouchMove({ + touches: [ + {clientX: 275, clientY: 300}, + {clientX: 325, clientY: 300} + ], }); - const f1 = hand.growFinger(touchEventType); - const f2 = hand.growFinger(touchEventType); + setTimeout(() => { + map.pinchZoom._onTouchEnd(); - hand.sync(5); - f1.wait(100).moveTo(75, 300, 0) - .down().moveBy(200, 0, 500); - f2.wait(100).moveTo(525, 300, 0) - .down().moveBy(-200, 0, 500); + const renderedRect = polygon._path.getBoundingClientRect(); + + const width = renderedRect.width; + const height = renderedRect.height; + + expect(height < 50).to.be.true; + expect(width < 50).to.be.true; + expect(height + width > 0).to.be.true; + + const x = renderedRect.x; + const y = renderedRect.y; + + expect(x).to.be.within(297, 300); + expect(y).to.be.within(270, 280); + + done(); + }, 100); }); + + it.skipIfNotTouch('disables pinchZoom when touchZoom is false (backward compatibility)', () => { + const warnSpy = sinon.spy(console, 'warn'); + + const localContainer = createContainer(); + const localMap = new Map(localContainer, { + touchZoom: false + }); + + expect(localMap.pinchZoom.enabled()).to.be.false; + expect(warnSpy.calledOnce).to.be.true; + expect(warnSpy.firstCall.args[0]).to.eq('Map: touchZoom option is deprecated and will be removed in future versions. Use pinchZoom instead.'); + + warnSpy.restore(); + removeMapContainer(localMap, localContainer); + }); + + + it.skipIfNotTouch('enables pinchZoom when touchZoom is true and pinchZoom is false (touchZoom takes precedence)', () => { + const warnSpy = sinon.spy(console, 'warn'); + + const localContainer = createContainer(); + const localMap = new Map(localContainer, { + touchZoom: true, + pinchZoom: false + }); + + expect(localMap.pinchZoom.enabled()).to.be.true; + expect(warnSpy.calledOnce).to.be.true; + expect(warnSpy.firstCall.args[0]).to.eq('Map: touchZoom option is deprecated and will be removed in future versions. Use pinchZoom instead.'); + + warnSpy.restore(); + removeMapContainer(localMap, localContainer); + }); + }); diff --git a/src/dom/Draggable.js b/src/dom/Draggable.js index 924b515a0..ab521413a 100644 --- a/src/dom/Draggable.js +++ b/src/dom/Draggable.js @@ -81,7 +81,7 @@ export const Draggable = Evented.extend({ if (this._element.classList.contains('leaflet-zoom-anim')) { return; } if (e.touches && e.touches.length !== 1) { - // Finish dragging to avoid conflict with touchZoom + // Finish dragging to avoid conflict with pinchZoom. if (Draggable._dragging === this) { this.finishDrag(); } diff --git a/src/layer/tile/GridLayer.js b/src/layer/tile/GridLayer.js index 192f8c846..41465234c 100755 --- a/src/layer/tile/GridLayer.js +++ b/src/layer/tile/GridLayer.js @@ -93,7 +93,7 @@ export const GridLayer = Layer.extend({ updateWhenIdle: Browser.mobile, // @option updateWhenZooming: Boolean = true - // By default, a smooth zoom animation (during a [touch zoom](#map-touchzoom) or a [`flyTo()`](#map-flyto)) will update grid layers every integer zoom level. Setting this option to `false` will update the grid layer only when the smooth animation ends. + // By default, a smooth zoom animation (during a [pinch zoom](#map-pinchzoom) or a [`flyTo()`](#map-flyto)) will update grid layers every integer zoom level. Setting this option to `false` will update the grid layer only when the smooth animation ends. updateWhenZooming: true, // @option updateInterval: Number = 200 diff --git a/src/map/handler/Map.TouchZoom.js b/src/map/handler/Map.PinchZoom.js similarity index 81% rename from src/map/handler/Map.TouchZoom.js rename to src/map/handler/Map.PinchZoom.js index 3b5e57670..d9bf0f5fb 100644 --- a/src/map/handler/Map.TouchZoom.js +++ b/src/map/handler/Map.PinchZoom.js @@ -4,19 +4,19 @@ import * as DomEvent from '../../dom/DomEvent.js'; import Browser from '../../core/Browser.js'; /* - * L.Handler.TouchZoom is used by L.Map to add pinch zoom on supported mobile browsers. + * L.Handler.PinchZoom is used by L.Map to add pinch zoom on supported mobile browsers. */ // @namespace Map // @section Interaction Options Map.mergeOptions({ // @section Touch interaction options - // @option touchZoom: Boolean|String = * + // @option pinchZoom: Boolean|String = * // Whether the map can be zoomed by touch-dragging with two fingers. If // passed `'center'`, it will zoom to the center of the view regardless of // where the touch events (fingers) were. Enabled for touch-capable web // browsers. - touchZoom: Browser.touch, + pinchZoom: Browser.touch, // @option bounceAtZoomLimits: Boolean = true // Set it to false if you don't want the map to zoom beyond min/max zoom @@ -24,7 +24,7 @@ Map.mergeOptions({ bounceAtZoomLimits: true }); -export const TouchZoom = Handler.extend({ +export const PinchZoom = Handler.extend({ addHooks() { this._map._container.classList.add('leaflet-touch-zoom'); DomEvent.on(this._map._container, 'touchstart', this._onTouchStart, this); @@ -44,7 +44,7 @@ export const TouchZoom = Handler.extend({ this._centerPoint = map.getSize()._divideBy(2); this._startLatLng = map.containerPointToLatLng(this._centerPoint); - if (map.options.touchZoom !== 'center') { + if (map.options.pinchZoom !== 'center') { this._pinchStartLatLng = map.containerPointToLatLng(p1.add(p2)._divideBy(2)); } @@ -78,7 +78,7 @@ export const TouchZoom = Handler.extend({ this._zoom = map._limitZoom(this._zoom); } - if (map.options.touchZoom === 'center') { + if (map.options.pinchZoom === 'center') { this._center = this._startLatLng; if (scale === 1) { return; } } else { @@ -123,6 +123,22 @@ export const TouchZoom = Handler.extend({ }); // @section Handlers -// @property touchZoom: Handler -// Touch zoom handler. -Map.addInitHook('addHandler', 'touchZoom', TouchZoom); +// @property pinchZoom: Handler +// Pinch zoom handler. +Map.addInitHook('addHandler', 'pinchZoom', PinchZoom); + +// Deprecated - Backward compatibility touchZoom +Map.addInitHook(function () { + this.touchZoom = this.pinchZoom; + + if (this.options.touchZoom !== undefined) { + console.warn('Map: touchZoom option is deprecated and will be removed in future versions. Use pinchZoom instead.'); + this.options.pinchZoom = this.options.touchZoom; + delete this.options.touchZoom; + } + if (this.options.pinchZoom) { + this.pinchZoom.enable(); + } else { + this.pinchZoom.disable(); + } +}); diff --git a/src/map/index.js b/src/map/index.js index 1ebcc8d20..9fcdbcae8 100644 --- a/src/map/index.js +++ b/src/map/index.js @@ -11,7 +11,8 @@ import {ScrollWheelZoom} from './handler/Map.ScrollWheelZoom.js'; Map.ScrollWheelZoom = ScrollWheelZoom; import {TapHold} from './handler/Map.TapHold.js'; Map.TapHold = TapHold; -import {TouchZoom} from './handler/Map.TouchZoom.js'; -Map.TouchZoom = TouchZoom; +import {PinchZoom} from './handler/Map.PinchZoom.js'; +Map.PinchZoom = PinchZoom; +Map.TouchZoom = PinchZoom; // backward compatibility export {Map, createMap as map} from './Map.js';