How to enable/disable mouse wheel for zoom?

[lmc3s3f0r]

I'm trying to extract the info from vue3-openlayers and OpenLayers docs, but it's a bit difficult. So far I've reached this:

In <script>:

import { defaults as defaultInteractions, MouseWheelZoom } from 'ol/interaction'

const props = defineProps()

const interactions = ref(
  defaultInteractions({
    mouseWheelZoom: props.enableMouseWheel
  })
)

In :

<ol-map
   ref="mapRef"
   :interactions="interactions"
   class="size-full min-h-[100px] relative"
   @error="handleMapError"
   @click="handleMapClick"
> 
... (map stuff)
</ol-map>

However, no matter if I set props.enableMouseWheel to true or false, mouse wheel is always disabled. It will only work if I remove the ":interactions=interactions" line in .

I'm sure I'm missing something obvious, but I've tried for a few hours and no luck so far. Any hint is greatly appreciated :)

[lmc3s3f0r]

Ok, found the way to access and edit interactions. My previous question was about disabling zoom, but now I switched to allowing zoom when pressing ctrl/cmd. In case someone else is looking for it, here's how to do it.

In <script>, import this:

import type { Map } from 'ol'
import { MouseWheelZoom } from 'ol/interaction'

Second, in <script> too, create the map reference variable properly:

const mapRef = ref<{ map: Map }>()

And then, whenever you want, do this:

// First remove the default MouseWheelZoom interaction
mapRef.value?.map.getInteractions().forEach(interaction => {
  if (interaction instanceof MouseWheelZoom) {
    mapRef.value?.map.removeInteraction(interaction)
  }
})

// Then create the new mouse wheel interaction:
const mouseWheelInteraction = new MouseWheelZoom({
  condition: platformModifierKeyOnly
})

// And finally, add it to the map
mapRef.value?.map.addInteraction(mouseWheelInteraction)

For me the trickiest thing was figuring out that I have to remove and add in order to fully editing an interaction. I was trying to directly edit the precise interaction but OpenLayers doesn't allow that.

[d-koppenhagen]

I work on a feature to provide this as component as well. Should be straightforward

[d-koppenhagen]

I released a new component ol-interaction-mouse-wheel-zoom which let's you define the mouse wheel zoom condition (can be deactivated this way):
https://vue3openlayers.netlify.app/componentsguide/interactions/mousewheelzoom/

[lmc3s3f0r]

Oh, so cool! Will this make it to vue3-openlayers 9? I'm currently stuck to OpenLayers 9 ^_^U