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

Merge pull request #6 from jesstelford/pause-support

Browse source 
Pause support
This commit is contained in:
Jess Telford 2016-11-05 13:45:17 +11:00 committed by GitHub
commit 7157f2c215
5 changed files with 249 additions and 184 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
CHANGELOG.md Normal file
View file

@ -0,0 +1,65 @@
# Change Log
All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](http://keepachangelog.com/)
and this project adheres to [Semantic Versioning](http://semver.org/).
## [Unreleased][]
### Added
- This changelog
### Fixed
- Remove drag listeners when entity paused
## [1.3.1][] - 2016-10-15
### Examples
- Updated to latest keyboard controls in examples
## [1.3.0][] - 2016-10-05
### Added
- Touch support
## [1.2.0][] - 2016-10-04
### Added
- Support for locking to camera during rotation
## [1.1.1][] - 2016-09-30
### Fixed
- Correct the main export
### Examples
- Physics based examples
## [1.1.0][] - 2016-09-28
### Added
- Events - `dragstart`, `dragmove` & `dragend`
- Drag end velocity calculation
## [1.0.1][] - 2016-09-23
### Initial release
- Click & Drag component for A-Frame.
[Unreleased]: https://github.com/jesstelford/aframe-click-drag-component/compare/v1.3.1...HEAD
[1.3.1]: https://github.com/jesstelford/aframe-click-drag-component/compare/v1.3.0...v1.3.1
[1.3.0]: https://github.com/jesstelford/aframe-click-drag-component/compare/v1.2.0...v1.3.0
[1.2.0]: https://github.com/jesstelford/aframe-click-drag-component/compare/v1.1.1...v1.2.0
[1.1.1]: https://github.com/jesstelford/aframe-click-drag-component/compare/v1.1.0...v1.1.1
[1.1.0]: https://github.com/jesstelford/aframe-click-drag-component/compare/v1.0.1...v1.1.0
[1.0.1]: https://github.com/jesstelford/aframe-click-drag-component/tree/v1.0.1

4
examples/physics-2/index.html
View file

@ -47,7 +47,7 @@
<script>
var draggable = document.querySelector('[click-drag]');
draggable.addEventListener('dragstart', function(dragInfo) {
draggable.pause();
draggable.components['dynamic-body'].pause();
});
draggable.addEventListener('dragend', function(dragInfo) {
@ -74,7 +74,7 @@
// This gives the feeling of "tossing" the ball
rotatedVelocity.applyAxisAngle(rotation, Math.PI / 8);
draggable.play();
draggable.components['dynamic-body'].play();
draggable.body.velocity.set(rotatedVelocity.x, rotatedVelocity.y, rotatedVelocity.z);
});
</script>

4
examples/physics/index.html
View file

@ -25,14 +25,14 @@
<script>
var draggable = document.querySelector('[click-drag]');
draggable.addEventListener('dragstart', function(dragInfo) {
draggable.pause();
draggable.components['dynamic-body'].pause();
});
draggable.addEventListener('dragend', function(dragInfo) {
var x = dragInfo.detail.velocity.x;
var y = dragInfo.detail.velocity.y;
var z = dragInfo.detail.velocity.z;
draggable.play();
draggable.components['dynamic-body'].play();
draggable.body.velocity.set(x, y, z);
console.log('drag end', dragInfo.detail.velocity);
});

7
package.json
View file

@ -12,7 +12,8 @@
"start": "budo examples/main.js:../build.js --serve build.js --dir examples --port 8000 --live --open -- --debug --verbose -t babelify -t [envify --NODE_ENV development ]",
"prepublish": "in-publish && npm run dist && npm run build-lib || not-in-publish",
"preghpages": "npm run build-example && rm -rf gh-pages && mkdir gh-pages && cp -r examples/* gh-pages",
"ghpages": "npm run preghpages && ghpages -p gh-pages"
"ghpages": "npm run preghpages && ghpages -p gh-pages",
"version": "version-changelog CHANGELOG.md && changelog-verify CHANGELOG.md && git add CHANGELOG.md"
},
"repository": {
"type": "git",
@ -47,6 +48,7 @@
"browserify": "^13.1.0",
"browserify-css": "^0.9.1",
"budo": "^9.2.0",
"changelog-verify": "^1.0.4",
"envify": "^3.4.1",
"eslint": "^3.2.2",
"eslint-config-airbnb": "^10.0.0",
@ -60,7 +62,8 @@
"rollup-plugin-node-resolve": "^2.0.0",
"rollupify": "^0.3.4",
"uglify-js": "^2.7.3",
"uglifyify": "^3.0.3"
"uglifyify": "^3.0.3",
"version-changelog": "^2.0.1"
},
"dependencies": {
"deep-equal": "^1.0.1",

353
src/index.js
View file

@ -386,186 +386,180 @@ function dragItem(THREE, element, offset, camera, depth, mouseInfo, lockToLocalR
}
// Closure to close over the removal of the event listeners
const {initialize, tearDown} = (function closeOverInitAndTearDown() {
let removeClickListeners;
return {
initialize(THREE, componentName, lockToLocalRotation) {
// TODO: Based on a scene from the element passed in?
const scene = document.querySelector('a-scene');
// delay loading of this as we're not 100% if the scene has loaded yet or not
let camera;
let removeDragListeners;
let draggedElement;
let dragInfo;
const positionLog = [];
function cleanUpPositionLog() {
const now = performance.now();
while (positionLog.length && now - positionLog[0].time > TIME_TO_KEEP_LOG) {
// remove the first element;
positionLog.shift();
}
}
function onDragged({detail: {nextPosition}}) {
// Continuously clean up so we don't get huge logs built up
cleanUpPositionLog();
positionLog.push({
position: Object.assign({}, nextPosition),
time: performance.now(),
});
}
function onMouseDown({clientX, clientY}) {
const {depth, offset, element} = selectItem(THREE, componentName, camera, clientX, clientY);
if (element) {
// Can only drag one item at a time, so no need to check if any
// listener is already set up
let removeDragItemListeners = dragItem(
THREE,
element,
offset,
camera,
depth,
{
clientX,
clientY,
},
lockToLocalRotation
);
draggedElement = element;
dragInfo = {
offset: {x: offset.x, y: offset.y, z: offset.z},
depth,
clientX,
clientY,
};
element.emit(DRAG_START_EVENT, dragInfo);
element.addEventListener(DRAG_MOVE_EVENT, onDragged);
removeDragListeners = _ => {
element.removeEventListener(DRAG_MOVE_EVENT, onDragged);
// eslint-disable-next-line no-unused-expressions
removeDragItemListeners && removeDragItemListeners();
// in case this removal function gets called more than once
removeDragItemListeners = null;
};
}
}
function fitLineToVelocity(dimension) {
if (positionLog.length < 2) {
return 0;
}
const velocities = positionLog
// Pull out just the x, y, or z values
.map(log => ({time: log.time, value: log.position[dimension]}))
// Then convert that into an array of array pairs [time, value]
.reduce((memo, log, index, collection) => {
// skip the first item (we're looking for pairs)
if (index === 0) {
return memo;
}
const deltaPosition = log.value - collection[index - 1].value;
const deltaTime = (log.time - collection[index - 1].time) / 1000;
// The new value is the change in position
memo.push([log.time, deltaPosition / deltaTime]);
return memo;
}, []);
// Calculate the line function
const lineFunction = linearRegressionLine(linearRegression(velocities));
// Calculate what the point was at the end of the line
// ie; the velocity at the time the drag stopped
return lineFunction(positionLog[positionLog.length - 1].time);
}
function onMouseUp({clientX, clientY}) {
cleanUpPositionLog();
const velocity = {
x: fitLineToVelocity('x'),
y: fitLineToVelocity('y'),
z: fitLineToVelocity('z'),
};
draggedElement.emit(
DRAG_END_EVENT,
Object.assign({}, dragInfo, {clientX, clientY, velocity})
);
removeDragListeners && removeDragListeners(); // eslint-disable-line no-unused-expressions
removeDragListeners = undefined;
}
function onTouchStart({changedTouches: [touchInfo]}) {
onMouseDown(touchInfo);
}
function onTouchEnd({changedTouches: [touchInfo]}) {
onMouseUp(touchInfo);
}
function run() {
camera = scene.camera.el;
// TODO: Attach to canvas?
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);
};
}
if (scene.hasLoaded) {
run();
} else {
scene.addEventListener('loaded', run);
}
},
tearDown() {
removeClickListeners && removeClickListeners(); // eslint-disable-line no-unused-expressions
removeClickListeners = undefined;
},
};
}());
const {didMount, didUnmount} = (function getDidMountAndUnmount() {
let removeClickListeners;
let removeDragListeners;
const cache = [];
function initialize(THREE, componentName, lockToLocalRotation) {
// TODO: Based on a scene from the element passed in?
const scene = document.querySelector('a-scene');
// delay loading of this as we're not 100% if the scene has loaded yet or not
let camera;
let draggedElement;
let dragInfo;
const positionLog = [];
function cleanUpPositionLog() {
const now = performance.now();
while (positionLog.length && now - positionLog[0].time > TIME_TO_KEEP_LOG) {
// remove the first element;
positionLog.shift();
}
}
function onDragged({detail: {nextPosition}}) {
// Continuously clean up so we don't get huge logs built up
cleanUpPositionLog();
positionLog.push({
position: Object.assign({}, nextPosition),
time: performance.now(),
});
}
function onMouseDown({clientX, clientY}) {
const {depth, offset, element} = selectItem(THREE, componentName, camera, clientX, clientY);
if (element) {
// Can only drag one item at a time, so no need to check if any
// listener is already set up
let removeDragItemListeners = dragItem(
THREE,
element,
offset,
camera,
depth,
{
clientX,
clientY,
},
lockToLocalRotation
);
draggedElement = element;
dragInfo = {
offset: {x: offset.x, y: offset.y, z: offset.z},
depth,
clientX,
clientY,
};
element.addEventListener(DRAG_MOVE_EVENT, onDragged);
removeDragListeners = _ => {
element.removeEventListener(DRAG_MOVE_EVENT, onDragged);
// eslint-disable-next-line no-unused-expressions
removeDragItemListeners && removeDragItemListeners();
// in case this removal function gets called more than once
removeDragItemListeners = null;
};
element.emit(DRAG_START_EVENT, dragInfo);
}
}
function fitLineToVelocity(dimension) {
if (positionLog.length < 2) {
return 0;
}
const velocities = positionLog
// Pull out just the x, y, or z values
.map(log => ({time: log.time, value: log.position[dimension]}))
// Then convert that into an array of array pairs [time, value]
.reduce((memo, log, index, collection) => {
// skip the first item (we're looking for pairs)
if (index === 0) {
return memo;
}
const deltaPosition = log.value - collection[index - 1].value;
const deltaTime = (log.time - collection[index - 1].time) / 1000;
// The new value is the change in position
memo.push([log.time, deltaPosition / deltaTime]);
return memo;
}, []);
// Calculate the line function
const lineFunction = linearRegressionLine(linearRegression(velocities));
// Calculate what the point was at the end of the line
// ie; the velocity at the time the drag stopped
return lineFunction(positionLog[positionLog.length - 1].time);
}
function onMouseUp({clientX, clientY}) {
cleanUpPositionLog();
const velocity = {
x: fitLineToVelocity('x'),
y: fitLineToVelocity('y'),
z: fitLineToVelocity('z'),
};
draggedElement.emit(
DRAG_END_EVENT,
Object.assign({}, dragInfo, {clientX, clientY, velocity})
);
removeDragListeners && removeDragListeners(); // eslint-disable-line no-unused-expressions
removeDragListeners = undefined;
}
function onTouchStart({changedTouches: [touchInfo]}) {
onMouseDown(touchInfo);
}
function onTouchEnd({changedTouches: [touchInfo]}) {
onMouseUp(touchInfo);
}
function run() {
camera = scene.camera.el;
// TODO: Attach to canvas?
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);
};
}
if (scene.hasLoaded) {
run();
} else {
scene.addEventListener('loaded', run);
}
}
function tearDown() {
removeClickListeners && removeClickListeners(); // eslint-disable-line no-unused-expressions
removeClickListeners = undefined;
}
return {
didMount(element, THREE, componentName, lockToLocalRotation) {
@ -582,6 +576,9 @@ const {didMount, didUnmount} = (function getDidMountAndUnmount() {
const cacheIndex = cache.indexOf(element);
removeDragListeners && removeDragListeners(); // eslint-disable-line no-unused-expressions
removeDragListeners = undefined;
if (cacheIndex === -1) {
return;
}
@ -638,7 +635,7 @@ export default function aframeDraggableComponent(aframe, componentName = COMPONE
* Generally undoes all modifications to the entity.
*/
remove() {
didUnmount();
didUnmount(this);
},
/**
@ -646,7 +643,7 @@ export default function aframeDraggableComponent(aframe, componentName = COMPONE
* Use to stop or remove any dynamic or background behavior such as events.
*/
pause() {
didUnmount();
didUnmount(this);
},
/**