Click + Drag entities on the screen. Note the plane cannot be dragged (it does not have the "click-drag" attribute).
Try the WASD keys to move around while dragging an entity!
+Events are fired for beginning to drag, ending a drag, and for each drag event in etween.
+This example shows how those events can be used to "ghost" a dragged entity
diff --git a/src/index.js b/src/index.js index e59797b..2d6ad01 100644 --- a/src/index.js +++ b/src/index.js @@ -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; }