Skip to content

Commit

Permalink
DragControls. Use PointerEvents.
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mugen87
Mugen87 committed Nov 21, 2020
1 parent 39b5476 commit a027979
Show file tree
Hide file tree
Showing 2 changed files with 138 additions and 40 deletions.
89 changes: 69 additions & 20 deletions examples/js/controls/DragControls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,25 +18,25 @@ THREE.DragControls = function ( _objects, _camera, _domElement ) {

function activate() {

_domElement.addEventListener( 'mousemove', onDocumentMouseMove, false );
_domElement.addEventListener( 'mousedown', onDocumentMouseDown, false );
_domElement.addEventListener( 'mouseup', onDocumentMouseCancel, false );
_domElement.addEventListener( 'mouseleave', onDocumentMouseCancel, false );
_domElement.addEventListener( 'touchmove', onDocumentTouchMove, false );
_domElement.addEventListener( 'touchstart', onDocumentTouchStart, false );
_domElement.addEventListener( 'touchend', onDocumentTouchEnd, false );
_domElement.addEventListener( 'pointermove', onPointerMove, false );
_domElement.addEventListener( 'pointerdown', onPointerDown, false );
_domElement.addEventListener( 'pointerup', onPointerCancel, false );
_domElement.addEventListener( 'pointerleave', onPointerCancel, false );
_domElement.addEventListener( 'touchmove', onTouchMove, false );
_domElement.addEventListener( 'touchstart', onTouchStart, false );
_domElement.addEventListener( 'touchend', onTouchEnd, false );

}

function deactivate() {

_domElement.removeEventListener( 'mousemove', onDocumentMouseMove, false );
_domElement.removeEventListener( 'mousedown', onDocumentMouseDown, false );
_domElement.removeEventListener( 'mouseup', onDocumentMouseCancel, false );
_domElement.removeEventListener( 'mouseleave', onDocumentMouseCancel, false );
_domElement.removeEventListener( 'touchmove', onDocumentTouchMove, false );
_domElement.removeEventListener( 'touchstart', onDocumentTouchStart, false );
_domElement.removeEventListener( 'touchend', onDocumentTouchEnd, false );
_domElement.removeEventListener( 'pointermove', onPointerMove, false );
_domElement.removeEventListener( 'pointerdown', onPointerDown, false );
_domElement.removeEventListener( 'pointerup', onPointerCancel, false );
_domElement.removeEventListener( 'pointerleave', onPointerCancel, false );
_domElement.removeEventListener( 'touchmove', onTouchMove, false );
_domElement.removeEventListener( 'touchstart', onTouchStart, false );
_domElement.removeEventListener( 'touchend', onTouchEnd, false );

_domElement.style.cursor = '';

Expand All @@ -54,10 +54,25 @@ THREE.DragControls = function ( _objects, _camera, _domElement ) {

}

function onDocumentMouseMove( event ) {
function onPointerMove( event ) {

event.preventDefault();

switch ( event.pointerType ) {

case 'mouse':
case 'pen':
onMouseMove( event );
break;

// TODO touch

}

}

function onMouseMove( event ) {

var rect = _domElement.getBoundingClientRect();

_mouse.x = ( ( event.clientX - rect.left ) / rect.width ) * 2 - 1;
Expand Down Expand Up @@ -114,7 +129,24 @@ THREE.DragControls = function ( _objects, _camera, _domElement ) {

}

function onDocumentMouseDown( event ) {
function onPointerDown( event ) {

event.preventDefault();

switch ( event.pointerType ) {

case 'mouse':
case 'pen':
onMouseDown( event );
break;

// TODO touch

}

}

function onMouseDown( event ) {

event.preventDefault();

Expand Down Expand Up @@ -143,7 +175,24 @@ THREE.DragControls = function ( _objects, _camera, _domElement ) {

}

function onDocumentMouseCancel( event ) {
function onPointerCancel( event ) {

event.preventDefault();

switch ( event.pointerType ) {

case 'mouse':
case 'pen':
onMouseCancel( event );
break;

// TODO touch

}

}

function onMouseCancel( event ) {

event.preventDefault();

Expand All @@ -159,7 +208,7 @@ THREE.DragControls = function ( _objects, _camera, _domElement ) {

}

function onDocumentTouchMove( event ) {
function onTouchMove( event ) {

event.preventDefault();
event = event.changedTouches[ 0 ];
Expand Down Expand Up @@ -187,7 +236,7 @@ THREE.DragControls = function ( _objects, _camera, _domElement ) {

}

function onDocumentTouchStart( event ) {
function onTouchStart( event ) {

event.preventDefault();
event = event.changedTouches[ 0 ];
Expand Down Expand Up @@ -224,7 +273,7 @@ THREE.DragControls = function ( _objects, _camera, _domElement ) {

}

function onDocumentTouchEnd( event ) {
function onTouchEnd( event ) {

event.preventDefault();

Expand Down
89 changes: 69 additions & 20 deletions examples/jsm/controls/DragControls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,25 +27,25 @@ var DragControls = function ( _objects, _camera, _domElement ) {

function activate() {

_domElement.addEventListener( 'mousemove', onDocumentMouseMove, false );
_domElement.addEventListener( 'mousedown', onDocumentMouseDown, false );
_domElement.addEventListener( 'mouseup', onDocumentMouseCancel, false );
_domElement.addEventListener( 'mouseleave', onDocumentMouseCancel, false );
_domElement.addEventListener( 'touchmove', onDocumentTouchMove, false );
_domElement.addEventListener( 'touchstart', onDocumentTouchStart, false );
_domElement.addEventListener( 'touchend', onDocumentTouchEnd, false );
_domElement.addEventListener( 'pointermove', onPointerMove, false );
_domElement.addEventListener( 'pointerdown', onPointerDown, false );
_domElement.addEventListener( 'pointerup', onPointerCancel, false );
_domElement.addEventListener( 'pointerleave', onPointerCancel, false );
_domElement.addEventListener( 'touchmove', onTouchMove, false );
_domElement.addEventListener( 'touchstart', onTouchStart, false );
_domElement.addEventListener( 'touchend', onTouchEnd, false );

}

function deactivate() {

_domElement.removeEventListener( 'mousemove', onDocumentMouseMove, false );
_domElement.removeEventListener( 'mousedown', onDocumentMouseDown, false );
_domElement.removeEventListener( 'mouseup', onDocumentMouseCancel, false );
_domElement.removeEventListener( 'mouseleave', onDocumentMouseCancel, false );
_domElement.removeEventListener( 'touchmove', onDocumentTouchMove, false );
_domElement.removeEventListener( 'touchstart', onDocumentTouchStart, false );
_domElement.removeEventListener( 'touchend', onDocumentTouchEnd, false );
_domElement.removeEventListener( 'pointermove', onPointerMove, false );
_domElement.removeEventListener( 'pointerdown', onPointerDown, false );
_domElement.removeEventListener( 'pointerup', onPointerCancel, false );
_domElement.removeEventListener( 'pointerleave', onPointerCancel, false );
_domElement.removeEventListener( 'touchmove', onTouchMove, false );
_domElement.removeEventListener( 'touchstart', onTouchStart, false );
_domElement.removeEventListener( 'touchend', onTouchEnd, false );

_domElement.style.cursor = '';

Expand All @@ -63,10 +63,25 @@ var DragControls = function ( _objects, _camera, _domElement ) {

}

function onDocumentMouseMove( event ) {
function onPointerMove( event ) {

event.preventDefault();

switch ( event.pointerType ) {

case 'mouse':
case 'pen':
onMouseMove( event );
break;

// TODO touch

}

}

function onMouseMove( event ) {

var rect = _domElement.getBoundingClientRect();

_mouse.x = ( ( event.clientX - rect.left ) / rect.width ) * 2 - 1;
Expand Down Expand Up @@ -123,7 +138,24 @@ var DragControls = function ( _objects, _camera, _domElement ) {

}

function onDocumentMouseDown( event ) {
function onPointerDown( event ) {

event.preventDefault();

switch ( event.pointerType ) {

case 'mouse':
case 'pen':
onMouseDown( event );
break;

// TODO touch

}

}

function onMouseDown( event ) {

event.preventDefault();

Expand Down Expand Up @@ -152,7 +184,24 @@ var DragControls = function ( _objects, _camera, _domElement ) {

}

function onDocumentMouseCancel( event ) {
function onPointerCancel( event ) {

event.preventDefault();

switch ( event.pointerType ) {

case 'mouse':
case 'pen':
onMouseCancel( event );
break;

// TODO touch

}

}

function onMouseCancel( event ) {

event.preventDefault();

Expand All @@ -168,7 +217,7 @@ var DragControls = function ( _objects, _camera, _domElement ) {

}

function onDocumentTouchMove( event ) {
function onTouchMove( event ) {

event.preventDefault();
event = event.changedTouches[ 0 ];
Expand Down Expand Up @@ -196,7 +245,7 @@ var DragControls = function ( _objects, _camera, _domElement ) {

}

function onDocumentTouchStart( event ) {
function onTouchStart( event ) {

event.preventDefault();
event = event.changedTouches[ 0 ];
Expand Down Expand Up @@ -233,7 +282,7 @@ var DragControls = function ( _objects, _camera, _domElement ) {

}

function onDocumentTouchEnd( event ) {
function onTouchEnd( event ) {

event.preventDefault();

Expand Down

0 comments on commit a027979

Please sign in to comment.