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

Support touch events for dragging

Browse source
This commit is contained in:
Jess Telford 2016-10-05 07:40:57 +11:00
parent 3d47edafbb
commit 299698fe3e
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);
aframe.registerComponent('keyboard-controls', keyboardControls);
clickDragComponent(aframe);

2
package.json
View file

@ -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",

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}) {
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);
};
}