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

Add events for dragging

Browse source
This commit is contained in:
Jess Telford 2016-09-28 17:44:08 +10:00
parent fb3f512fe6
commit 07383417de
3 changed files with 59 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

30
examples/events/index.html Normal file
View file

@ -0,0 +1,30 @@
<html>
<head>
<title>A-Frame Click & Drag Component - Events</title>
<script src="../build.js"></script>
</head>
<body>
<a-scene>
<a-sphere
click-drag
position="0 1.25 -1"
radius="1.25"
color="#EF2D5E"
event-set__1="_event: dragstart; material.opacity: 0.2"
event-set__1="_event: dragend; material.opacity: 1"
>
<a-animation attribute="material.opacity" begin="dragstart" from="1.0" to="0.2" dur="200"></a-animation>
<a-animation attribute="material.opacity" begin="dragend" from="0.2" to="1.0" dur="200"></a-animation>
</a-sphere>
<a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
<a-entity position="0 0 3.8">
<a-camera look-controls-enabled="false"></a-camera>
</a-entity>
</a-scene>
</body>
</html>

6
examples/index.html
View file

@ -21,9 +21,13 @@
</head>
<body>
<h1>A-Frame Click & Drag Component</h1>
<a href="basic/">Demo</a>
<a href="basic/">Basic Demo</a>
<p>Click + Drag entities on the screen. Note the plane cannot be dragged (it does not have the "click-drag" attribute).</p>
<p>Try the WASD keys to move around while dragging an entity!</p>
<hr />
<a href="events/">Events Demo</a>
<p>Events are fired for beginning to drag, ending a drag, and for each drag event in etween.</p>
<p>This example shows how those events can be used to "ghost" a dragged entity</p>
<!-- GitHub Corner. -->
<a href="https://github.com/jesstelford/aframe-click-drag-component" class="github-corner">

26
src/index.js
View file

@ -1,6 +1,9 @@
import deepEqual from 'deep-equal';
const COMPONENT_NAME = 'click-drag';
const DRAG_START_EVENT = 'dragstart';
const DRAG_MOVE_EVENT = 'dragmove';
const DRAG_END_EVENT = 'dragend';
function cameraPositionToVec3(camera, vec3) {
@ -298,7 +301,11 @@ function dragItem(THREE, element, offset, camera, depth, mouseInfo) {
depth
);
element.setAttribute('position', {x: x - offsetX, y: y - offsetY, z: z - offsetZ});
const nextPosition = {x: x - offsetX, y: y - offsetY, z: z - offsetZ};
element.emit(DRAG_MOVE_EVENT, {nextPosition, clientX, clientY});
element.setAttribute('position', nextPosition);
}
function onCameraMove({detail}) {
@ -330,6 +337,8 @@ const {initialize, tearDown} = (function closeOverInitAndTearDown() {
// 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;
function onMouseDown({clientX, clientY}) {
@ -339,10 +348,23 @@ const {initialize, tearDown} = (function closeOverInitAndTearDown() {
// Can only drag one item at a time, so no need to check if any
// listener is already set up
removeDragListeners = dragItem(THREE, element, offset, camera, depth, {clientX, clientY});
draggedElement = element;
dragInfo = {
offset: {x: offset.x, y: offset.y, z: offset.z},
depth,
clientX,
clientY,
};
element.emit(DRAG_START_EVENT, dragInfo);
}
}
function onMouseUp() {
function onMouseUp({clientX, clientY}) {
draggedElement.emit(DRAG_END_EVENT, Object.assign({}, dragInfo, {clientX, clientY}));
removeDragListeners && removeDragListeners(); // eslint-disable-line no-unused-expressions
removeDragListeners = undefined;
}