How to detect scrolling on CameraControls

[IDrumsey]

As stated here

mouseButtons.wheel (Mouse wheel control) does not emit 'controlstart' and 'controlend'. mouseButtons.wheel uses scroll-event internally, and scroll-event happens intermittently. That means "start" and "end" cannot be detected.

Is there any way to detect the scroll event on the CameraControls? I've tried putting the event listener 'scroll' on the Canvas and a on a wrapper div around the Canvas. Nothing gets fired. My use case is when the user has scrolled to the minDistance or maxDistance, the zooming will stop and the mouse wheel will start to regularly scroll that page.

[yomotsu]

Unfortunately, CC will block scroll currently...

CC prevents wheel events, then scroll events will be blocked as a side effect.
here is the code:

camera-controls/src/CameraControls.ts

Lines 840 to 866 in cee0427

	const onMouseWheel = ( event: WheelEvent ): void => {
	if ( ! this._domElement ) return;
	if ( ! this._enabled || this.mouseButtons.wheel === ACTION.NONE ) return;
	if (
	this._interactiveArea.left !== 0 ||
	this._interactiveArea.top !== 0 ||
	this._interactiveArea.width !== 1 ||
	this._interactiveArea.height !== 1
	) {
	const elRect = this._domElement.getBoundingClientRect();
	const left = event.clientX / elRect.width;
	const top = event.clientY / elRect.height;
	// check if the interactiveArea contains the drag start position.
	if (
	left < this._interactiveArea.left ||
	left > this._interactiveArea.right ||
	top < this._interactiveArea.top ||
	top > this._interactiveArea.bottom
	) return;
	}
	event.preventDefault();

Maybe we could add a new option like releaseWheelOnEdges to disable the event prevention for wheel events.
(should we consider touch events too...?)
(any idea for good naming for the new option...?)

[IDrumsey]

@yomotsu Is zooming with touch events done differently than scrolling the page with touch events? Just thinking... on desktop you zoom with the mouse wheel AND page scroll with the mouse wheel. But if on mobile zooming is done with two fingers and scrolling is performed with a different action, we might not need to include touch events for this new feature.

Some naming options...

• normalScrollOnZoomBounds
• scrollOnZoomBounds
• swapZoomToScrollOnZoomBounds

just a few ideas

[esnho]

@IDrumsey on mobile the scrolling is prevented by the camera orbit event, would be great if CC let the page scroll when the orbit reached its limit!

@yomotsu what do you think of an option like releaseEventOnEdges available on those behaviours that can reach an edge?
Probably on scrolling is something easier than on dragging

[IDrumsey]

@esnho, yeah. I forgot about orbiting constraints. Would make sense to start auto scrolling when the limits were reached.

Not familiar with the codebase, but maybe something like releaseEventOnEdges(eventTypes: [event type] = [Zoom, Orbit, ...]){}

[yomotsu]

Thank you, guys, for your suggestions.
The name releaseEventOnEdges sounds to cover both wheel and touch events.
Let me use the name!

It may take time, but I will add features when I have time.

Probably on scrolling is something easier than on dragging

Yeah...actually I have no idea for detecting orbit limit...but oneday.
I will start with wheel control.

[SrinivasPrabhu794]

Hi,

Will this be released anytime soon ?