VladPolskiy/leaflet
1
0
Fork 0
mirror of https://github.com/Leaflet/Leaflet.git synced 2025-07-20 16:37:08 +00:00
Code Issues Packages Projects Releases 1 Wiki Activity

Rename TouchZoom handler to PinchZoom (keep TouchZoom as alias for backward compatibility) (#9642)

Browse Source 
Co-authored-by: Florian Bischof <design.falke@gmail.com>
This commit is contained in:
Mahendra Pratap Singh
2025-04-20 17:24:24 +05:30
committed by GitHub
parent c1d74dc61c
commit 07252ebffb
8 changed files with 107 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
debug/map/zoom-remain-centered.html
View File

@ -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);

4
docs/examples/extending/class-diagram.txt
View File

@ -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]

2
spec/suites/map/handler/Map.DragSpec.js
View File

@ -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();

119
spec/suites/map/handler/Map.TouchZoomSpec.js → spec/suites/map/handler/Map.PinchZoomSpec.js
View File

@ -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);
});
});

2
src/dom/Draggable.js
View File

@ -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();
}

2
src/layer/tile/GridLayer.js
View File

@ -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

34
src/map/handler/Map.TouchZoom.js → src/map/handler/Map.PinchZoom.js
View File

@ -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();
}
});

5
src/map/index.js
View File

@ -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';