From 2faaee19643179612e6f21c3eec8a1b459b7bf3e Mon Sep 17 00:00:00 2001 From: Gabriel Gonzalez Date: Tue, 14 Jan 2025 22:17:17 +0000 Subject: [PATCH 1/2] Add buttons option in dragPan configuration on map initialization and dragPan.enable --- src/ui/handler/drag_handler.ts | 10 +++++++++- src/ui/handler/drag_move_state_manager.ts | 18 +++++++++++++----- src/ui/handler/mouse.ts | 20 ++++++++++++++------ src/ui/handler/shim/drag_pan.ts | 9 ++++++++- src/ui/handler_inertia.ts | 1 + src/ui/handler_manager.ts | 2 +- 6 files changed, 46 insertions(+), 14 deletions(-) diff --git a/src/ui/handler/drag_handler.ts b/src/ui/handler/drag_handler.ts index 87d5f9031f3..903eb9e8e5b 100644 --- a/src/ui/handler/drag_handler.ts +++ b/src/ui/handler/drag_handler.ts @@ -62,6 +62,8 @@ export type DragMoveHandlerOptions = { * If true, handler will be enabled during construction */ enable?: boolean; + + buttons?: number[]; }; /** @@ -95,6 +97,9 @@ export class DragHandler implemen options.assignEvents(this); + if (options.buttons) { + this._moveStateManager.updateButtons(options.buttons); + } this.reset(); } @@ -155,7 +160,10 @@ export class DragHandler implemen this.reset(e); } - enable() { + enable(options?: { buttons?: number[] }): void { + if (options && options.buttons) { + this._moveStateManager.updateButtons(options.buttons); + } this._enabled = true; } diff --git a/src/ui/handler/drag_move_state_manager.ts b/src/ui/handler/drag_move_state_manager.ts index 5ef48fb7247..3a931e2efbb 100644 --- a/src/ui/handler/drag_move_state_manager.ts +++ b/src/ui/handler/drag_move_state_manager.ts @@ -1,12 +1,14 @@ import {DOM} from '../../util/dom'; const LEFT_BUTTON = 0; +const MIDDLE_BUTTON = 1; const RIGHT_BUTTON = 2; // the values for each button in MouseEvent.buttons const BUTTONS_FLAGS = { [LEFT_BUTTON]: 1, - [RIGHT_BUTTON]: 2 + [MIDDLE_BUTTON]: 4, + [RIGHT_BUTTON]: 2, }; function buttonNoLongerPressed(e: MouseEvent, button: number) { @@ -36,14 +38,16 @@ export interface DragMoveStateManager { isValidStartEvent: (e: E) => boolean; isValidMoveEvent: (e: E) => boolean; isValidEndEvent: (e?: E) => boolean; + updateButtons?: (buttons: number[]) => void; } export class MouseMoveStateManager implements DragMoveStateManager { _eventButton: number | undefined; - _correctEvent: (e: MouseEvent) => boolean; + _correctEvent: (e: MouseEvent, buttons?: number[]) => boolean; + _buttons: number[] = [LEFT_BUTTON]; constructor(options: { - checkCorrectEvent: (e: MouseEvent) => boolean; + checkCorrectEvent: (e: MouseEvent, buttons?:number[]) => boolean; }) { this._correctEvent = options.checkCorrectEvent; } @@ -58,7 +62,7 @@ export class MouseMoveStateManager implements DragMoveStateManager { } isValidStartEvent(e: MouseEvent) { - return this._correctEvent(e); + return this._correctEvent(e, this._buttons); } isValidMoveEvent(e: MouseEvent) { @@ -75,6 +79,10 @@ export class MouseMoveStateManager implements DragMoveStateManager { const eventButton = DOM.mouseButton(e); return eventButton === this._eventButton; } + + updateButtons(buttons: number[]) { + this._buttons = buttons; + } } export class OneFingerTouchMoveStateManager implements DragMoveStateManager { @@ -116,7 +124,7 @@ export class OneFingerTouchMoveStateManager implements DragMoveStateManager { constructor( - private mouseMoveStateManager = new MouseMoveStateManager({checkCorrectEvent: () => true}), + private mouseMoveStateManager = new MouseMoveStateManager({checkCorrectEvent: () => true}), private oneFingerTouchMoveStateManager = new OneFingerTouchMoveStateManager() ) {} diff --git a/src/ui/handler/mouse.ts b/src/ui/handler/mouse.ts index 30dd66471fd..c6257d82462 100644 --- a/src/ui/handler/mouse.ts +++ b/src/ui/handler/mouse.ts @@ -34,23 +34,31 @@ const assignEvents = (handler: DragHandler) => { }; }; -export function generateMousePanHandler({enable, clickTolerance}: { +export function generateMousePanHandler({enable, clickTolerance, dragPan}: { clickTolerance: number; enable?: boolean; + dragPan?: any; }): MousePanHandler { const mouseMoveStateManager = new MouseMoveStateManager({ - checkCorrectEvent: (e: MouseEvent) => DOM.mouseButton(e) === LEFT_BUTTON && !e.ctrlKey, + checkCorrectEvent: (e: MouseEvent, buttons?:number[]) => { + const button = DOM.mouseButton(e); + return buttons.includes(button) && !e.ctrlKey; + } }); - return new DragHandler({ + const handler = new DragHandler({ clickTolerance, move: (lastPoint: Point, point: Point) => ({around: point, panDelta: point.sub(lastPoint)}), activateOnStart: true, moveStateManager: mouseMoveStateManager, - enable, assignEvents, }); -}; + if(enable) { + handler.enable(dragPan??{}); + } + + return handler; +} export function generateMouseRotationHandler({enable, clickTolerance, aroundCenter = true, minPixelCenterThreshold = 100, rotateDegreesPerPixelMoved = 0.8}: { clickTolerance: number; @@ -98,7 +106,7 @@ export function generateMousePitchHandler({enable, clickTolerance, pitchDegreesP }); return new DragHandler({ clickTolerance, - move: (lastPoint: Point, point: Point) => + move: (lastPoint: Point, point: Point) => ({pitchDelta: (point.y - lastPoint.y) * pitchDegreesPerPixelMoved}), // prevent browser context menu when necessary; we don't allow it with rotation // because we can't discern rotation gesture start from contextmenu on Mac diff --git a/src/ui/handler/shim/drag_pan.ts b/src/ui/handler/shim/drag_pan.ts index 6c86fd6775a..fbb177ab1fa 100644 --- a/src/ui/handler/shim/drag_pan.ts +++ b/src/ui/handler/shim/drag_pan.ts @@ -26,6 +26,12 @@ export type DragPanOptions = { * @defaultValue 2500 */ maxSpeed?: number; + /** + * the buttons that can be used to drag the map. + * @defaultValue [0] + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button + */ + buttons?: number[]; }; /** @@ -60,12 +66,13 @@ export class DragPanHandler { * easing: bezier(0, 0, 0.3, 1), * maxSpeed: 1400, * deceleration: 2500, + * buttons: [0,1] // left and middle mouse buttons * }); * ``` */ enable(options?: DragPanOptions | boolean) { this._inertiaOptions = options || {}; - this._mousePan.enable(); + this._mousePan.enable(this._inertiaOptions); this._touchPan.enable(); this._el.classList.add('maplibregl-touch-drag-pan'); } diff --git a/src/ui/handler_inertia.ts b/src/ui/handler_inertia.ts index e1f9c3749cc..bf6b9eaca44 100644 --- a/src/ui/handler_inertia.ts +++ b/src/ui/handler_inertia.ts @@ -40,6 +40,7 @@ export type InertiaOptions = { easing: (t: number) => number; deceleration: number; maxSpeed: number; + buttons?: number[]; // buttons that can be used to trigger pan }; export class HandlerInertia { diff --git a/src/ui/handler_manager.ts b/src/ui/handler_manager.ts index 9898fb09014..2f97930f89c 100644 --- a/src/ui/handler_manager.ts +++ b/src/ui/handler_manager.ts @@ -38,7 +38,7 @@ class RenderFrameEvent extends Event { * would return a `panDelta` on the mousemove. */ export interface Handler { - enable(): void; + enable(options?): void; disable(): void; isEnabled(): boolean; /** From 921a48c9075541cb6df0180c0dc63404acd4462c Mon Sep 17 00:00:00 2001 From: Gabriel Gonzalez Date: Wed, 15 Jan 2025 13:30:40 +0000 Subject: [PATCH 2/2] Remove unnecessary buttons option in InertiaOptions --- src/ui/handler_inertia.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/ui/handler_inertia.ts b/src/ui/handler_inertia.ts index bf6b9eaca44..e1f9c3749cc 100644 --- a/src/ui/handler_inertia.ts +++ b/src/ui/handler_inertia.ts @@ -40,7 +40,6 @@ export type InertiaOptions = { easing: (t: number) => number; deceleration: number; maxSpeed: number; - buttons?: number[]; // buttons that can be used to trigger pan }; export class HandlerInertia {