Merge pull request #583 from geonetwork/fix-weird-box-zoom

Change dragPanCondition to fix box zoom on map

libs/feature/map/src/lib/utils/map-utils.service.spec.ts

@@ -26,6 +26,7 @@ import {
   PinchRotate,
 } from 'ol/interaction'
 import { MetadataLinkType } from '@geonetwork-ui/util/shared'
+import MapBrowserEvent from 'ol/MapBrowserEvent'
 
 const wmsUtilsMock = {
   getLayerLonLatBBox: jest.fn(() => of([1.33, 48.81, 4.3, 51.1])),
@@ -265,6 +266,47 @@ describe('MapUtilsService', () => {
     })
   })
 
+  describe('#dragPanCondition', () => {
+    let interaction: DragPan
+    beforeEach(() => {
+      interaction = new DragPan()
+      const map = new Map({})
+      map.addInteraction(interaction)
+    })
+
+    it('returns true for a left click without modifier key', () => {
+      const nativeEvent = {
+        type: 'pointer',
+        pointerType: 'mouse',
+        isPrimary: true,
+        button: 0,
+      }
+      const event = new MapBrowserEvent(
+        'pointer',
+        interaction.getMap(),
+        nativeEvent as PointerEvent
+      )
+
+      expect(dragPanCondition.bind(interaction)(event)).toBe(true)
+    })
+    it('returns false for a left click with modifier key', () => {
+      const nativeEvent = {
+        type: 'pointer',
+        pointerType: 'mouse',
+        isPrimary: true,
+        button: 0,
+        shiftKey: true,
+      }
+      const event = new MapBrowserEvent(
+        'pointer',
+        interaction.getMap(),
+        nativeEvent as PointerEvent
+      )
+
+      expect(dragPanCondition.bind(interaction)(event)).toBe(false)
+    })
+  })
+
   const SAMPLE_WMTS_LINK = {
     name: 'GEOGRAPHICALGRIDSYSTEMS.ETATMAJOR10',
     url: 'http://my.server.org/wmts',

libs/feature/map/src/lib/utils/map-utils.service.ts

@@ -14,7 +14,12 @@ import TileWMS from 'ol/source/TileWMS'
 import VectorSource from 'ol/source/Vector'
 import { Options, optionsFromCapabilities } from 'ol/source/WMTS'
 import { DragPan, MouseWheelZoom, defaults, Interaction } from 'ol/interaction'
-import { mouseOnly, platformModifierKeyOnly } from 'ol/events/condition'
+import {
+  mouseOnly,
+  noModifierKeys,
+  platformModifierKeyOnly,
+  primaryAction,
+} from 'ol/events/condition'
 import WMTSCapabilities from 'ol/format/WMTSCapabilities'
 import { from, Observable, of } from 'rxjs'
 import { map } from 'rxjs/operators'
@@ -220,7 +225,8 @@ export function dragPanCondition(
   if (!dragPanCondition) {
     this.getMap().dispatchEvent('mapmuted')
   }
-  return dragPanCondition
+  // combine the condition with the default DragPan conditions
+  return dragPanCondition && noModifierKeys(event) && primaryAction(event)
 }
 
 export function mouseWheelZoomCondition(