Enable Multi-MouseButton Support for dragPan

src/ui/handler/drag_handler.ts

@@ -62,6 +62,8 @@
      * If true, handler will be enabled during construction
      */
     enable?: boolean;
+
+    buttons?: number[];
 };
 
 /**
@@ -95,6 +97,9 @@
 
         options.assignEvents(this);
 
+        if (options.buttons) {
+            this._moveStateManager.updateButtons(options.buttons);
+        }
         this.reset();
     }
 
@@ -155,7 +160,10 @@
         this.reset(e);
     }
 
-    enable() {
+    enable(options?: { buttons?: number[] }): void {
+        if (options && options.buttons) {
+            this._moveStateManager.updateButtons(options.buttons);
+        }
         this._enabled = true;
     }
 

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 @@
     isValidStartEvent: (e: E) => boolean;
     isValidMoveEvent: (e: E) => boolean;
     isValidEndEvent: (e?: E) => boolean;
+    updateButtons?: (buttons: number[]) => void;
 }
 
 export class MouseMoveStateManager implements DragMoveStateManager<MouseEvent> {
     _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 @@
     }
 
     isValidStartEvent(e: MouseEvent) {
-        return this._correctEvent(e);
+        return this._correctEvent(e, this._buttons);
     }
 
     isValidMoveEvent(e: MouseEvent) {
@@ -75,6 +79,10 @@
         const eventButton = DOM.mouseButton(e);
         return eventButton === this._eventButton;
     }
+
+    updateButtons(buttons: number[]) {
+        this._buttons = buttons;
+    }
 }
 
 export class OneFingerTouchMoveStateManager implements DragMoveStateManager<TouchEvent> {
@@ -116,7 +124,7 @@
 
 export class MouseOrTouchMoveStateManager implements DragMoveStateManager<MouseEvent | TouchEvent> {
     constructor(
-        private mouseMoveStateManager = new MouseMoveStateManager({checkCorrectEvent: () => true}), 
+        private mouseMoveStateManager = new MouseMoveStateManager({checkCorrectEvent: () => true}),
         private oneFingerTouchMoveStateManager = new OneFingerTouchMoveStateManager()
     ) {}
 

src/ui/handler/mouse.ts

@@ -34,23 +34,31 @@
     };
 };
 
-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<DragPanResult, MouseEvent>({
+    const handler = new DragHandler<DragPanResult, MouseEvent>({
         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 @@
     });
     return new DragHandler<DragPitchResult, MouseEvent>({
         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

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

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 {

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;
     /**