Skip to content

Commit

Permalink
maplibre#2498: moved logic related to cooperativeGestures to ScrollZo…
Browse files Browse the repository at this point in the history 
…omHandler
  • Loading branch information
@arekgotfryd
arekgotfryd committed Oct 25, 2023
1 parent 56d1f41 commit ff2e47c
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 58 deletions.
61 changes: 57 additions & 4 deletions src/ui/handler/scroll_zoom.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {interpolates} from '@maplibre/maplibre-gl-style-spec';
import {LngLat} from '../../geo/lng_lat';
import {TransformProvider} from './transform-provider';

import type {Map} from '../map';
import type {GestureOptions, Map} from '../map';
import type Point from '@mapbox/point-geometry';
import type {AroundCenterOptions} from './two_fingers_touch';
import {Handler} from '../handler_manager';
Expand All @@ -30,7 +30,11 @@ const maxScalePerFrame = 2;
*/
export class ScrollZoomHandler implements Handler {
_map: Map;
_cooperativeGesturesScreen: HTMLElement;
_cooperativeGestures: boolean | GestureOptions;
_tr: TransformProvider;
_metaKey: keyof MouseEvent;
//canvasContainer
_el: HTMLElement;
_enabled: boolean;
_active: boolean;
Expand Down Expand Up @@ -66,6 +70,7 @@ export class ScrollZoomHandler implements Handler {
constructor(map: Map, triggerRenderFrame: () => void) {
this._map = map;
this._tr = new TransformProvider(map);
this._metaKey = navigator.platform.indexOf('Mac') === 0 ? 'metaKey' : 'ctrlKey';
this._el = map.getCanvasContainer();
this._triggerRenderFrame = triggerRenderFrame;

Expand Down Expand Up @@ -136,7 +141,9 @@ export class ScrollZoomHandler implements Handler {
if (this.isEnabled()) return;
this._enabled = true;
this._aroundCenter = !!options && (options as AroundCenterOptions).around === 'center';
this._map._setupCooperativeGestures();
if (this._map.getCooperativeGestures()) {
this.setupCooperativeGestures();
}
}

/**
Expand All @@ -150,13 +157,15 @@ export class ScrollZoomHandler implements Handler {
disable() {
if (!this.isEnabled()) return;
this._enabled = false;
this._map._destroyCooperativeGestures();
if (this._map.getCooperativeGestures()) {
this.destroyCooperativeGestures();
}
}

wheel(e: WheelEvent) {
if (!this.isEnabled()) return;
if (this._map._cooperativeGestures) {
if (e[this._map._metaKey]) {
if (e[this._metaKey]) {
e.preventDefault();
} else {
return;
Expand Down Expand Up @@ -360,4 +369,48 @@ export class ScrollZoomHandler implements Handler {
delete this._finishTimeout;
}
}

setupCooperativeGestures() {
this._cooperativeGestures = this._map.getCooperativeGestures();
this._cooperativeGesturesScreen = DOM.create('div', 'maplibregl-cooperative-gesture-screen', this._map._container);
let desktopMessage = typeof this._cooperativeGestures !== 'boolean' && this._cooperativeGestures.windowsHelpText ? this._cooperativeGestures.windowsHelpText : 'Use Ctrl + scroll to zoom the map';
if (navigator.platform.indexOf('Mac') === 0) {
desktopMessage = typeof this._cooperativeGestures !== 'boolean' && this._cooperativeGestures.macHelpText ? this._cooperativeGestures.macHelpText : 'Use ⌘ + scroll to zoom the map';
}
const mobileMessage = typeof this._cooperativeGestures !== 'boolean' && this._cooperativeGestures.mobileHelpText ? this._cooperativeGestures.mobileHelpText : 'Use two fingers to move the map';
this._cooperativeGesturesScreen.innerHTML = `
<div class="maplibregl-desktop-message">${desktopMessage}</div>
<div class="maplibregl-mobile-message">${mobileMessage}</div>
`;

// Remove cooperative gesture screen from the accessibility tree since screenreaders cannot interact with the map using gestures
this._cooperativeGesturesScreen.setAttribute('aria-hidden', 'true');

// Add event to canvas container since gesture container is pointer-events: none
this._el.addEventListener('wheel', this._cooperativeGesturesOnWheel, false);

// Add a cooperative gestures class (enable touch-action: pan-x pan-y;)
this._el.classList.add('maplibregl-cooperative-gestures');
}

destroyCooperativeGestures() {
DOM.remove(this._cooperativeGesturesScreen);
this._el.removeEventListener('wheel', this._cooperativeGesturesOnWheel, false);
this._el.classList.remove('maplibregl-cooperative-gestures');
}

_cooperativeGesturesOnWheel = (event: WheelEvent) => {
this._onCooperativeGesture(event, event[this._metaKey], 1);
};

_onCooperativeGesture(event: any, metaPress, touches) {
if (!metaPress && touches < 2) {
// Alert user how to scroll/pan
this._cooperativeGesturesScreen.classList.add('maplibregl-show');
setTimeout(() => {
this._cooperativeGesturesScreen.classList.remove('maplibregl-show');
}, 100);
}
return false;
}
}
2 changes: 1 addition & 1 deletion src/ui/handler/touch_pan.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export class TouchPanHandler implements Handler {
if (this._map._cooperativeGestures) {
if (this._minTouches === 2 && mapTouches.length < 2 && !this._cancelCooperativeMessage) {
// If coop gesture enabled, show panning info to user
this._map._onCooperativeGesture(e, false, mapTouches.length);
this._map.scrollZoom._onCooperativeGesture(e, false, mapTouches.length);
} else if (!this._cancelCooperativeMessage) {
// If user is successfully navigating, we don't need this warning until the touch resets
this._cancelCooperativeMessage = true;
Expand Down
58 changes: 5 additions & 53 deletions src/ui/map.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -450,15 +450,12 @@ export class Map extends Camera {
style: Style;
painter: Painter;
handlers: HandlerManager;

_container: HTMLElement;
_canvasContainer: HTMLElement;
_controlContainer: HTMLElement;
_controlPositions: {[_: string]: HTMLElement};
_interactive: boolean;
_cooperativeGestures: boolean | GestureOptions;
_cooperativeGesturesScreen: HTMLElement;
_metaKey: keyof MouseEvent;
_showTileBoundaries: boolean;
_showCollisionBoxes: boolean;
_showPadding: boolean;
Expand Down Expand Up @@ -583,7 +580,6 @@ export class Map extends Camera {

this._interactive = options.interactive;
this._cooperativeGestures = options.cooperativeGestures;
this._metaKey = navigator.platform.indexOf('Mac') === 0 ? 'metaKey' : 'ctrlKey';
this._maxTileCacheSize = options.maxTileCacheSize;
this._maxTileCacheZoomLevels = options.maxTileCacheZoomLevels;
this._failIfMajorPerformanceCaveat = options.failIfMajorPerformanceCaveat;
Expand Down Expand Up @@ -656,8 +652,8 @@ export class Map extends Camera {

this.handlers = new HandlerManager(this, options as CompleteMapOptions);

if (this._cooperativeGestures && options.scrollZoom) {
this._setupCooperativeGestures();
if (this._cooperativeGestures) {
this.scrollZoom.setupCooperativeGestures();
}

const hashName = (typeof options.hash === 'string' && options.hash) || undefined;
Expand Down Expand Up @@ -1176,9 +1172,9 @@ export class Map extends Camera {
setCooperativeGestures(gestureOptions?: GestureOptions | boolean | null): Map {
this._cooperativeGestures = gestureOptions;
if (this._cooperativeGestures) {
this._setupCooperativeGestures();
this.scrollZoom.setupCooperativeGestures();
} else {
this._destroyCooperativeGestures();
this.scrollZoom.destroyCooperativeGestures();
}

return this;
Expand Down Expand Up @@ -2940,39 +2936,6 @@ export class Map extends Camera {
this._container.addEventListener('scroll', this._onMapScroll, false);
}

_cooperativeGesturesOnWheel = (event: WheelEvent) => {
this._onCooperativeGesture(event, event[this._metaKey], 1);
};

_setupCooperativeGestures() {
const container = this._container;
this._cooperativeGesturesScreen = DOM.create('div', 'maplibregl-cooperative-gesture-screen', container);
let desktopMessage = typeof this._cooperativeGestures !== 'boolean' && this._cooperativeGestures.windowsHelpText ? this._cooperativeGestures.windowsHelpText : 'Use Ctrl + scroll to zoom the map';
if (navigator.platform.indexOf('Mac') === 0) {
desktopMessage = typeof this._cooperativeGestures !== 'boolean' && this._cooperativeGestures.macHelpText ? this._cooperativeGestures.macHelpText : 'Use ⌘ + scroll to zoom the map';
}
const mobileMessage = typeof this._cooperativeGestures !== 'boolean' && this._cooperativeGestures.mobileHelpText ? this._cooperativeGestures.mobileHelpText : 'Use two fingers to move the map';
this._cooperativeGesturesScreen.innerHTML = `
<div class="maplibregl-desktop-message">${desktopMessage}</div>
<div class="maplibregl-mobile-message">${mobileMessage}</div>
`;

// Remove cooperative gesture screen from the accessibility tree since screenreaders cannot interact with the map using gestures
this._cooperativeGesturesScreen.setAttribute('aria-hidden', 'true');

// Add event to canvas container since gesture container is pointer-events: none
this._canvasContainer.addEventListener('wheel', this._cooperativeGesturesOnWheel, false);

// Add a cooperative gestures class (enable touch-action: pan-x pan-y;)
this._canvasContainer.classList.add('maplibregl-cooperative-gestures');
}

_destroyCooperativeGestures() {
DOM.remove(this._cooperativeGesturesScreen);
this._canvasContainer.removeEventListener('wheel', this._cooperativeGesturesOnWheel, false);
this._canvasContainer.classList.remove('maplibregl-cooperative-gestures');
}

_resizeCanvas(width: number, height: number, pixelRatio: number) {
// Request the required canvas size taking the pixelratio into account.
this._canvas.width = Math.floor(pixelRatio * width);
Expand Down Expand Up @@ -3047,17 +3010,6 @@ export class Map extends Camera {
return false;
};

_onCooperativeGesture(event: any, metaPress, touches) {
if (!metaPress && touches < 2) {
// Alert user how to scroll/pan
this._cooperativeGesturesScreen.classList.add('maplibregl-show');
setTimeout(() => {
this._cooperativeGesturesScreen.classList.remove('maplibregl-show');
}, 100);
}
return false;
}

/**
* Returns a Boolean indicating whether the map is fully loaded.
*
Expand Down Expand Up @@ -3286,7 +3238,7 @@ export class Map extends Camera {
DOM.remove(this._canvasContainer);
DOM.remove(this._controlContainer);
if (this._cooperativeGestures) {
this._destroyCooperativeGestures();
this.scrollZoom.destroyCooperativeGestures();
}
this._container.classList.remove('maplibregl-map');

Expand Down

0 comments on commit ff2e47c

Please sign in to comment.