Remove mousemove event onPointerMove function in TransformControls

[vyrnix9582046173]

This PR remove mousemove event onPointerMove function in TransformControls. A bug we ran into at exokitxr/exokit#1065 while using TransformControls.

[gkjohnson]

Can you explain the bug you're running in to? It's not immediately clear looking at your other issue.

[vyrnix9582046173]

hopefully this isn't more confusing:

the problem:

• transformControls has an event listener on change that still updates because a changeEvent is dispatched, even though the transformControls is not longer selected. (hold mouse down, drag outside of window, let go, then move mouse back inside without a mouseclick being held down) https://github.com/exokitxr/exokit/blob/studio/examples/studio.html#L1099-L1103

the breakdown of solution was:

• studio.html disposes of transformControls - https://github.com/exokitxr/exokit/blob/studio/examples/studio.html#L1118
• disposing of transformControls removes mouseup listener for onPointerUp - https://github.com/exokitxr/exokit/blob/studio/examples/TransformControls.js#L126
• mouseup listener is the only way that would document.removeEventListener( "mousemove", onPointerMove, false ); - https://github.com/exokitxr/exokit/blob/studio/examples/TransformControls.js#L568

so simply adding to the dispose in TransformControls.js:
document.removeEventListener( "mousemove", onPointerMove, false );

fixes it

[gkjohnson]

Okay it sounds like the fundamental issue is that in certain conditions the TransformControls leaves a lingering event on document that also causes a "sticky" behavior with the controls and doesn't get cleaned up even when the controls are disposed, right?

You can reproduce the sticky behavior in Chrome here:

1. Got to https://threejs.org/examples/?q=transform#misc_controls_transform
2. Click and hold on a drag handle
3. Drag outside the iframe and release click
4. Move mouse back into iframe
5. Drag controls still move with mouse even though no buttons are pressed.

Interestingly I can't reproduce this when the example is not embedded in an iframe in chrome -- it must have to do with how events are delegated. In Firefox it works as expected in both cases.

I think one solution is to add a "mouseenter" callback to the document that checks if the mouse button is pressed and if it's not then remove the "mousemove" event. That way if the user does click drag out of the window and release the event will get removed when hovering over the window again.

I'm not sure how tightly we want to consider these two issues but that solution may help with your issue, as well.

[looeee]

This behaves differently again in Edge - when moving the mouse over the menu while dragging the position of the cube "jumps". So we have different behaviour in Chrome, Firefox and Edge, only Firefox is correct.

[arodic]

I think this PR should be merged regardless of the sticky behavior which I can fix in a separate PR. I think it is a good practice to dispose all event listeners just in case dispose() happens in the middle of an interaction for whatever reason.

[arodic]

Interesting... the sticky behavior happens only if OrbitControls are added alongside with TransformControls.

Edit: it appears to be this preventDefault() shomehow blocks the correct behavior. I'm not sure why.

[mrdoob]

Thanks!

[arodic]

Hey @WestLangley, I noticed you added this line. Would it be possible to remove it since it causes sticky behavior when releasing drag outside an iframe? The comment says "Prevent the browser from scrolling." Is that intended for touch scroll?

[WestLangley]

@arodic I'll have to defer to others on this -- there are so many use-cases, it is nearly impossible to please everyone. Maybe @greggman can be of help. #15620.

[gkjohnson]

It seems like it should be possible to achieve both use cases. I wonder why that line would be causing sticky behavior.

[arodic]

@gkjohnson I'm not sure why it is but you can clearly see in this fiddle.

With preventDefault() on mousedown, there are no events logged if you click-and-drag outside the iframe. If you disable preventDefault(), both mousemove and mouseup continue tracking outside the iframe.

[arodic]

My theory is that mousedown event "captures" the pointer so that while you are dragging, mouse events keeps getting dispatched to the original iframe as you drag outside. I you preventDefault(), the capture doesn't happen.

[greggman]

The comment in the OrbitControls is wrong. My bad.

The line itself is old

22182b0

If you remove the line you can probably remove the line after as well.

I did a quick test with it removed and I didn't notice anything but I might have missed what it's for.

Things it might have been for? It might have been for stopping selection a long time ago before user-select: none; existed? Just a guess.