kumi/aframe-click-drag-component
1
0
Fork 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity

Merge pull request #4 from jesstelford/touch-support

Browse source 
Support touch events for dragging
This commit is contained in:
Jess Telford 2016-10-05 07:45:01 +11:00 committed by GitHub
commit be6f895948
3 changed files with 21 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
examples/main.js
View file

@ -6,4 +6,3 @@ import clickDragComponent from '../src/index';
extras.physics.registerAll(aframe); extras.physics.registerAll(aframe);
aframe.registerComponent('keyboard-controls', keyboardControls); aframe.registerComponent('keyboard-controls', keyboardControls);
clickDragComponent(aframe); clickDragComponent(aframe);

2
package.json
View file

@ -5,7 +5,7 @@
"main": "lib/index.js", "main": "lib/index.js",
"browser": "dist/aframe-click-drag-component.min.js", "browser": "dist/aframe-click-drag-component.min.js",
"scripts": { "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", "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*", "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", "test": "npm run test:lint",

20
src/index.js
View file

@ -360,6 +360,10 @@ function dragItem(THREE, element, offset, camera, depth, mouseInfo, lockToLocalR
} }
} }
function onTouchMove({changedTouches: [touchInfo]}) {
onMouseMove(touchInfo);
}
function onCameraChange({detail}) { function onCameraChange({detail}) {
if ( if (
(detail.name === 'position' || detail.name === 'rotation') (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('mousemove', onMouseMove);
document.addEventListener('touchmove', onTouchMove);
camera.addEventListener('componentchanged', onCameraChange); camera.addEventListener('componentchanged', onCameraChange);
// The "unlisten" function // The "unlisten" function
return _ => { return _ => {
document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('touchmove', onTouchMove);
camera.removeEventListener('componentchanged', onCameraChange); camera.removeEventListener('componentchanged', onCameraChange);
}; };
} }
@ -512,6 +518,14 @@ const {initialize, tearDown} = (function closeOverInitAndTearDown() {
removeDragListeners = undefined; removeDragListeners = undefined;
} }
function onTouchStart({changedTouches: [touchInfo]}) {
onMouseDown(touchInfo);
}
function onTouchEnd({changedTouches: [touchInfo]}) {
onMouseUp(touchInfo);
}
function run() { function run() {
camera = scene.camera.el; camera = scene.camera.el;
@ -520,9 +534,15 @@ const {initialize, tearDown} = (function closeOverInitAndTearDown() {
document.addEventListener('mousedown', onMouseDown); document.addEventListener('mousedown', onMouseDown);
document.addEventListener('mouseup', onMouseUp); document.addEventListener('mouseup', onMouseUp);
document.addEventListener('touchstart', onTouchStart);
document.addEventListener('touchend', onTouchEnd);
removeClickListeners = _ => { removeClickListeners = _ => {
document.removeEventListener('mousedown', onMouseDown); document.removeEventListener('mousedown', onMouseDown);
document.removeEventListener('mouseup', onMouseUp); document.removeEventListener('mouseup', onMouseUp);
document.removeEventListener('touchstart', onTouchStart);
document.removeEventListener('touchend', onTouchEnd);
}; };
} }