three.js: controls end event broken for mousewheel

Describe the bug

Currently mousewheel is treated like this in controls:

function onMouseWheel(event) {
  if ( scope.enabled === false || scope.enableZoom === false || ( state !== STATE.NONE && state !== STATE.ROTATE ) ) return
  event.preventDefault()
  event.stopPropagation()
  scope.dispatchEvent(startEvent)
  handleMouseWheel(event)
  scope.dispatchEvent(endEvent)
}

That means that start and stop for zoom cannot be relied upon as it behaves differently from all other gestures, pan and rotate for instance. This makes it hard to detect when the control has stopped on the parental level.

We started to notice this because we render on demand. Controls tell the state model that the scene is moving or not. Zoom caused issues when the canvas flips on-demand-rendering on and off.

To Reproduce

https://codesandbox.io/s/r3f-basic-demo-forked-omcxr

Open the dev console and pan, you will see 1 start, 1 stop. Zoom and it will spit out hundreds of start/stops.

Expected behavior

start and stop should not leak internals, they should tell the user when controls are active and when not. As long as controls are dollying, either because mousewheel is firing in sequence or because damping is enabled, stop should not be called. In this case it has to anticipate browser behaviour and debounce the tail call. It could do the same to start with a leading call but it’s not as important imo.

import debounce from "lodash-es/debounce"

const debouncedEnd = debounce(() => scope.dispatchEvent(endEvent), 100)

function onMouseWheel(event) {
  if ( scope.enabled === false || scope.enableZoom === false || ( state !== STATE.NONE && state !== STATE.ROTATE ) ) return
  event.preventDefault()
  event.stopPropagation()
  scope.dispatchEvent(startEvent)
  handleMouseWheel(event)
  debouncedEnd()
}