diff --git a/examples/main.js b/examples/main.js index fbb42bf..1b5e8d2 100644 --- a/examples/main.js +++ b/examples/main.js @@ -6,4 +6,3 @@ import clickDragComponent from '../src/index'; extras.physics.registerAll(aframe); aframe.registerComponent('keyboard-controls', keyboardControls); clickDragComponent(aframe); - diff --git a/package.json b/package.json index acbd524..2f38600 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "browser": "dist/aframe-click-drag-component.min.js", "scripts": { - "build-example": "browserify examples/main.js --debug --verbose -g uglifyify -t babelify -t [envify --NODE_ENV development ] -o examples/build.js", + "build-example": "browserify examples/main.js --verbose -t babelify -t uglifyify -t [envify --NODE_ENV development ] > examples/build.js", "build-lib": "mkdir -p lib && babel src/index.js -o lib/index.js", "dist": "browserify src/index.js --verbose --debug --standalone registerAframeClickDragComponent -g uglifyify -t [ rollupify --config rollup.config.js ] -t babelify -t [envify --NODE_ENV production ] | exorcist dist/out.map > dist/out.js && uglifyjs dist/out.js --screw-ie8 -c -m --in-source-map dist/out.map --source-map dist/aframe-click-drag-component.min.js.map --source-map-url aframe-click-drag-component.min.js.map > dist/aframe-click-drag-component.min.js && rm dist/out*", "test": "npm run test:lint", diff --git a/src/index.js b/src/index.js index 64f63e3..23c985d 100644 --- a/src/index.js +++ b/src/index.js @@ -360,6 +360,10 @@ function dragItem(THREE, element, offset, camera, depth, mouseInfo, lockToLocalR } } + function onTouchMove({changedTouches: [touchInfo]}) { + onMouseMove(touchInfo); + } + function onCameraChange({detail}) { if ( (detail.name === 'position' || detail.name === 'rotation') @@ -370,11 +374,13 @@ function dragItem(THREE, element, offset, camera, depth, mouseInfo, lockToLocalR } document.addEventListener('mousemove', onMouseMove); + document.addEventListener('touchmove', onTouchMove); camera.addEventListener('componentchanged', onCameraChange); // The "unlisten" function return _ => { document.removeEventListener('mousemove', onMouseMove); + document.removeEventListener('touchmove', onTouchMove); camera.removeEventListener('componentchanged', onCameraChange); }; } @@ -512,6 +518,14 @@ const {initialize, tearDown} = (function closeOverInitAndTearDown() { removeDragListeners = undefined; } + function onTouchStart({changedTouches: [touchInfo]}) { + onMouseDown(touchInfo); + } + + function onTouchEnd({changedTouches: [touchInfo]}) { + onMouseUp(touchInfo); + } + function run() { camera = scene.camera.el; @@ -520,9 +534,15 @@ const {initialize, tearDown} = (function closeOverInitAndTearDown() { document.addEventListener('mousedown', onMouseDown); document.addEventListener('mouseup', onMouseUp); + document.addEventListener('touchstart', onTouchStart); + document.addEventListener('touchend', onTouchEnd); + removeClickListeners = _ => { document.removeEventListener('mousedown', onMouseDown); document.removeEventListener('mouseup', onMouseUp); + + document.removeEventListener('touchstart', onTouchStart); + document.removeEventListener('touchend', onTouchEnd); }; }