feat: update dependencies to newer versions
Updated several dependencies to their newer versions to leverage recent fixes and improvements, enhance security, and ensure compatibility with modern environments. This includes updates to core utilities, stream management tools, glob matching libraries, and more. Significant changes include updates to `lodash`, `minimatch`, `source-map`, and `three`. Ensuring these updates also involved minor adjustments for compatibility with updated API surfaces and behavior. These changes may improve overall performance, offer better features, and close potential security gaps in previous versions.
This commit is contained in:
parent
b463522e66
commit
887a55f37c
GPG key ID:
ECBCC9082395383F
|
|
@ -1,21 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>A-Frame Click & Drag Component - Basic</title>
|
||||
<script src="../build.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<a-scene>
|
||||
|
||||
<a-sphere click-drag position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
|
||||
<a-box click-drag position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box>
|
||||
<a-cylinder click-drag position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
|
||||
<a-plane click-drag="enabled: false" 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" keyboard-controls="mode: fps"></a-camera>
|
||||
</a-entity>
|
||||
</a-scene>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>A-Frame Click & Drag Component - Basic</title>
|
||||
<script src="../build.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<a-scene>
|
||||
|
||||
<a-cylinder click-drag position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
|
||||
<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" keyboard-controls="mode: fps">
|
||||
|
||||
<a-sphere click-drag position="0 0.5 -4" radius="1.25" color="#EF2D5E">
|
||||
<a-box click-drag position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box>
|
||||
</a-sphere>
|
||||
|
||||
</a-camera>
|
||||
</a-entity>
|
||||
</a-scene>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<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" keyboard-controls="mode: fps"></a-camera>
|
||||
</a-entity>
|
||||
</a-scene>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>A-Frame Click & Drag Component</title>
|
||||
<style>
|
||||
html {
|
||||
background: #33425B;
|
||||
color: #FAFAFA;
|
||||
font-family: monospace;
|
||||
font-size: 20px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
h1 {
|
||||
font-weight: 300;
|
||||
}
|
||||
a.demo-link {
|
||||
display: block;
|
||||
padding: 15px 0;
|
||||
}
|
||||
a {
|
||||
color: #FAFAFA;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>A-Frame Click & Drag Component</h1>
|
||||
<a class="demo-link" 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 class="demo-link" 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>
|
||||
|
||||
<hr />
|
||||
|
||||
<a class="demo-link" href="children/">Children Demo</a>
|
||||
<p>Child entities can be dragged around too!</p>
|
||||
<p>In this example, the cube is a child of the sphere, which is a child of the camera.</p>
|
||||
|
||||
<hr />
|
||||
|
||||
<a class="demo-link" href="physics/">Physics Demo</a>
|
||||
<p>Calculating the velocity at the time of drag end.</p>
|
||||
<p>Combined with a physics library (for example; <a href="https://github.com/donmccurdy/aframe-extras/tree/master/src/physics">aframe-extras physics</a>), we get some very nice interactions.</p>
|
||||
<p>Try gently tossing the ball around / throwing it at the ground.</p>
|
||||
|
||||
<hr />
|
||||
|
||||
<a class="demo-link" href="physics-2/">Physics Demo #2</a>
|
||||
<p>Try gently tossing the ball at the stacked boxes!</p>
|
||||
|
||||
<!-- GitHub Corner. -->
|
||||
<a href="https://github.com/jesstelford/aframe-click-drag-component" class="github-corner">
|
||||
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#222; color:#fff; position: absolute; top: 0; border: 0; right: 0;">
|
||||
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import aframe from 'aframe';
|
||||
import extras from 'aframe-extras';
|
||||
import keyboardControls from 'aframe-keyboard-controls';
|
||||
import clickDragComponent from '../src/index';
|
||||
|
||||
extras.physics.registerAll(aframe);
|
||||
aframe.registerComponent('keyboard-controls', keyboardControls);
|
||||
clickDragComponent(aframe);
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>A-Frame Click & Drag Component - Physics 2</title>
|
||||
<script src="../build.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<a-scene physics="debug: true; gravity: -20">
|
||||
|
||||
<a-sphere
|
||||
click-drag
|
||||
dynamic-body="mass: 10"
|
||||
position="0 3 -1"
|
||||
radius="1"
|
||||
color="#EF2D5E"
|
||||
>
|
||||
</a-sphere>
|
||||
|
||||
|
||||
<a-box dynamic-body="mass: 0.1" position="-2.8 0.6 -8" color="#EF2D5E"></a-box>
|
||||
<a-box dynamic-body="mass: 0.1" position="-1.4 0.6 -8" color="#EF2D5E"></a-box>
|
||||
<a-box dynamic-body="mass: 0.1" position="0 0.6 -8" color="#EF2D5E"></a-box>
|
||||
<a-box dynamic-body="mass: 0.1" position="1.4 0.6 -8" color="#EF2D5E"></a-box>
|
||||
<a-box dynamic-body="mass: 0.1" position="2.8 0.6 -8" color="#EF2D5E"></a-box>
|
||||
|
||||
<a-box dynamic-body="mass: 0.1" position="-2 1.7 -8" color="#EF2D5E"></a-box>
|
||||
<a-box dynamic-body="mass: 0.1" position="-0.7 1.7 -8" color="#EF2D5E"></a-box>
|
||||
<a-box dynamic-body="mass: 0.1" position="0.7 1.7 -8" color="#EF2D5E"></a-box>
|
||||
<a-box dynamic-body="mass: 0.1" position="2 1.7 -8" color="#EF2D5E"></a-box>
|
||||
|
||||
<a-box dynamic-body="mass: 0.1" position="-1.4 2.8 -8" color="#EF2D5E"></a-box>
|
||||
<a-box dynamic-body="mass: 0.1" position="0 2.8 -8" color="#EF2D5E"></a-box>
|
||||
<a-box dynamic-body="mass: 0.1" position="1.4 2.8 -8" color="#EF2D5E"></a-box>
|
||||
|
||||
<a-box dynamic-body="mass: 0.1" position="-0.7 3.9 -8" color="#EF2D5E"></a-box>
|
||||
<a-box dynamic-body="mass: 0.1" position="0.7 3.9 -8" color="#EF2D5E"></a-box>
|
||||
|
||||
<a-box dynamic-body="mass: 0.1" position="0 5 -8" color="#EF2D5E"></a-box>
|
||||
|
||||
|
||||
<a-plane static-body rotation="-90 0 0" width="200" height="200" color="#7BC8A4"></a-plane>
|
||||
|
||||
<a-sky color="#ECECEC"></a-sky>
|
||||
|
||||
<a-entity position="0 0 3.8">
|
||||
<a-camera look-controls-enabled="false" keyboard-controls="mode: fps"></a-camera>
|
||||
</a-entity>
|
||||
<script>
|
||||
var draggable = document.querySelector('[click-drag]');
|
||||
draggable.addEventListener('dragstart', function(dragInfo) {
|
||||
draggable.components['dynamic-body'].pause();
|
||||
});
|
||||
draggable.addEventListener('dragend', function(dragInfo) {
|
||||
|
||||
// We're dealing with a very heavy ball (mass: 10), so we want to
|
||||
// reduce the velocity a little
|
||||
var velocityDamp = 0.5;
|
||||
|
||||
var camera = draggable.sceneEl.camera;
|
||||
|
||||
// The "up" vector of the camera
|
||||
var rotation = camera.up.clone();
|
||||
// crossed with the "forward" / direction vector of the camera
|
||||
// gives us the 3rd orthogonal axis of the camera's rotation
|
||||
rotation.cross(camera.getWorldDirection());
|
||||
|
||||
// A damped down velocity vector
|
||||
var rotatedVelocity = new window.AFRAME.THREE.Vector3(
|
||||
dragInfo.detail.velocity.x * velocityDamp,
|
||||
dragInfo.detail.velocity.y * velocityDamp,
|
||||
dragInfo.detail.velocity.z * velocityDamp
|
||||
);
|
||||
|
||||
// Which we then rotate *into* the screen by 45 degrees
|
||||
// This gives the feeling of "tossing" the ball
|
||||
rotatedVelocity.applyAxisAngle(rotation, Math.PI / 8);
|
||||
|
||||
draggable.components['dynamic-body'].play();
|
||||
draggable.body.velocity.set(rotatedVelocity.x, rotatedVelocity.y, rotatedVelocity.z);
|
||||
});
|
||||
</script>
|
||||
</a-scene>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>A-Frame Click & Drag Component - Physics</title>
|
||||
<script src="../build.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<a-scene physics="debug: true">
|
||||
|
||||
<a-sphere
|
||||
click-drag
|
||||
dynamic-body="mass: 20"
|
||||
position="0 3 -1"
|
||||
radius="1.25"
|
||||
color="#EF2D5E"
|
||||
>
|
||||
</a-sphere>
|
||||
|
||||
<a-plane static-body rotation="-90 0 0" width="200" height="200" color="#7BC8A4"></a-plane>
|
||||
|
||||
<a-sky color="#ECECEC"></a-sky>
|
||||
|
||||
<a-entity position="0 0 3.8">
|
||||
<a-camera look-controls-enabled="false" keyboard-controls="mode: fps"></a-camera>
|
||||
</a-entity>
|
||||
<script>
|
||||
var draggable = document.querySelector('[click-drag]');
|
||||
draggable.addEventListener('dragstart', function(dragInfo) {
|
||||
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.components['dynamic-body'].play();
|
||||
draggable.body.velocity.set(x, y, z);
|
||||
console.log('drag end', dragInfo.detail.velocity);
|
||||
});
|
||||
</script>
|
||||
</a-scene>
|
||||
</body>
|
||||
</html>
|
||||
44
package.json
44
package.json
|
|
@ -4,16 +4,8 @@
|
|||
"description": "Click & Drag component for A-Frame.",
|
||||
"main": "lib/index.js",
|
||||
"scripts": {
|
||||
"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",
|
||||
"test:lint": "eslint ./src",
|
||||
"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",
|
||||
"version": "version-changelog CHANGELOG.md && changelog-verify CHANGELOG.md && git add CHANGELOG.md"
|
||||
"prepublishOnly": "npm run build-lib"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
@ -34,39 +26,17 @@
|
|||
},
|
||||
"homepage": "https://github.com/jesstelford/aframe-click-drag-component#readme",
|
||||
"peerDependencies": {
|
||||
"aframe": "^0.4.0 || ^0.3.0"
|
||||
"aframe": "^1.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"aframe": "^0.4.0",
|
||||
"aframe-extras": "^3.1.0",
|
||||
"aframe-keyboard-controls": "^1.2.1",
|
||||
"babel-cli": "^6.14.0",
|
||||
"babel-cli": "^6.26.0",
|
||||
"babel-plugin-transform-object-rest-spread": "^6.20.2",
|
||||
"babel-preset-es2015": "^6.9.0",
|
||||
"babel-preset-stage-0": "^6.5.0",
|
||||
"babelify": "^7.3.0",
|
||||
"browserify": "^13.1.0",
|
||||
"browserify-css": "^0.9.1",
|
||||
"budo": "^9.3.0",
|
||||
"changelog-verify": "^1.0.4",
|
||||
"envify": "^3.4.1",
|
||||
"eslint": "^3.12.2",
|
||||
"eslint-config-airbnb": "^10.0.0",
|
||||
"eslint-plugin-import": "^1.12.0",
|
||||
"eslint-plugin-jsx-a11y": "^2.0.1",
|
||||
"eslint-plugin-react": "^6.8.0",
|
||||
"exorcist": "^0.4.0",
|
||||
"ghpages": "^0.0.8",
|
||||
"in-publish": "^2.0.0",
|
||||
"rollup-plugin-commonjs": "^5.0.4",
|
||||
"rollup-plugin-node-resolve": "^2.0.0",
|
||||
"rollupify": "^0.3.6",
|
||||
"uglify-js": "^2.7.5",
|
||||
"uglifyify": "^3.0.3",
|
||||
"version-changelog": "^2.0.1"
|
||||
"babel-preset-stage-0": "^6.5.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"deep-equal": "^1.0.1"
|
||||
"aframe-extras": "^7.4.0",
|
||||
"deep-equal": "^1.1.2"
|
||||
},
|
||||
"babel": {
|
||||
"presets": [
|
||||
|
|
@ -77,4 +47,4 @@
|
|||
"transform-object-rest-spread"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
62
src/index.js
62
src/index.js
|
|
@ -1,4 +1,5 @@
|
|||
import deepEqual from 'deep-equal';
|
||||
import { Linter } from 'eslint';
|
||||
|
||||
const COMPONENT_NAME = 'click-drag';
|
||||
const DRAG_START_EVENT = 'dragstart';
|
||||
|
|
@ -39,16 +40,16 @@ function cameraPositionToVec3(camera, vec3) {
|
|||
vec3.set(
|
||||
camera.components.position.data.x,
|
||||
camera.components.position.data.y,
|
||||
camera.components.position.data.z
|
||||
camera.components.position.data.z,
|
||||
);
|
||||
|
||||
forEachParent(camera, element => {
|
||||
forEachParent(camera, (element) => {
|
||||
|
||||
if (element.components && element.components.position) {
|
||||
vec3.set(
|
||||
vec3.x + element.components.position.data.x,
|
||||
vec3.y + element.components.position.data.y,
|
||||
vec3.z + element.components.position.data.z
|
||||
vec3.z + element.components.position.data.z,
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -81,7 +82,8 @@ const {unproject} = (function unprojectFunction() {
|
|||
|
||||
initialized = initialized || initialize(THREE);
|
||||
|
||||
vector.applyMatrix4(matrix.getInverse(threeCamera.projectionMatrix));
|
||||
const matrixInv = matrix.copy(threeCamera.projectionMatrix).invert();
|
||||
vector.applyMatrix4(matrixInv);
|
||||
|
||||
return localToWorld(THREE, threeCamera, vector);
|
||||
|
||||
|
|
@ -89,7 +91,6 @@ const {unproject} = (function unprojectFunction() {
|
|||
};
|
||||
}());
|
||||
|
||||
|
||||
const {screenCoordsToDirection} = (function screenCoordsToDirectionFunction() {
|
||||
|
||||
let initialized = false;
|
||||
|
|
@ -108,7 +109,7 @@ const {screenCoordsToDirection} = (function screenCoordsToDirectionFunction() {
|
|||
screenCoordsToDirection(
|
||||
THREE,
|
||||
aframeCamera,
|
||||
{x: clientX, y: clientY}
|
||||
{x: clientX, y: clientY},
|
||||
) {
|
||||
|
||||
initialized = initialized || initialize(THREE);
|
||||
|
|
@ -171,7 +172,7 @@ const {directionToWorldCoords} = (function directionToWorldCoordsFunction() {
|
|||
aframeCamera,
|
||||
camera,
|
||||
{x: directionX, y: directionY, z: directionZ},
|
||||
depth
|
||||
depth,
|
||||
) {
|
||||
|
||||
initialized = initialized || initialize(THREE);
|
||||
|
|
@ -183,7 +184,7 @@ const {directionToWorldCoords} = (function directionToWorldCoordsFunction() {
|
|||
const newPosition = rayPlaneIntersection(
|
||||
camera.getWorldDirection(),
|
||||
depth,
|
||||
direction
|
||||
direction,
|
||||
);
|
||||
|
||||
// Reposition back to the camera position
|
||||
|
|
@ -225,7 +226,7 @@ const {selectItem} = (function selectItemFunction() {
|
|||
const {x: directionX, y: directionY, z: directionZ} = screenCoordsToDirection(
|
||||
THREE,
|
||||
camera,
|
||||
{x: clientX, y: clientY}
|
||||
{x: clientX, y: clientY},
|
||||
);
|
||||
|
||||
cameraPositionToVec3(camera, cameraPosAsVec3);
|
||||
|
|
@ -236,18 +237,22 @@ const {selectItem} = (function selectItemFunction() {
|
|||
// Push meshes onto list of objects to intersect.
|
||||
// TODO: Can we do this at some other point instead of every time a ray is
|
||||
// cast? Is that a micro optimization?
|
||||
const objects = Array.from(
|
||||
camera.sceneEl.querySelectorAll(`[${selector}]`)
|
||||
).map(object => object.object3D);
|
||||
let objects = Array.from(
|
||||
camera.sceneEl.querySelectorAll(`[${selector}]`),
|
||||
).map((object) => object.object3D);
|
||||
|
||||
const recursive = true;
|
||||
|
||||
objects = objects.filter((object) => object !== undefined);
|
||||
|
||||
console.log('objects', objects);
|
||||
|
||||
const intersected = raycaster
|
||||
.intersectObjects(objects, recursive)
|
||||
// Only keep intersections against objects that have a reference to an entity.
|
||||
.filter(intersection => !!intersection.object.el)
|
||||
.filter((intersection) => !!intersection.object.el)
|
||||
// Only keep ones that are visible
|
||||
.filter(intersection => intersection.object.parent.visible)
|
||||
.filter((intersection) => intersection.object.parent.visible)
|
||||
// The first element is the closest
|
||||
[0]; // eslint-disable-line no-unexpected-multiline
|
||||
|
||||
|
|
@ -261,7 +266,7 @@ const {selectItem} = (function selectItemFunction() {
|
|||
// At the specified intersection point
|
||||
plane.setFromNormalAndCoplanarPoint(
|
||||
camera.components.camera.camera.getWorldDirection().clone().negate(),
|
||||
point.clone().sub(cameraPosAsVec3)
|
||||
point.clone().sub(cameraPosAsVec3),
|
||||
);
|
||||
|
||||
const depth = plane.constant;
|
||||
|
|
@ -297,7 +302,7 @@ function dragItem(THREE, element, offset, camera, depth, mouseInfo) {
|
|||
|
||||
const activeCamera = element.sceneEl.systems.camera.activeCameraEl;
|
||||
|
||||
const isChildOfActiveCamera = someParent(element, parent => parent === activeCamera);
|
||||
const isChildOfActiveCamera = someParent(element, (parent) => parent === activeCamera);
|
||||
|
||||
function onMouseMove({clientX, clientY}) {
|
||||
|
||||
|
|
@ -306,7 +311,7 @@ function dragItem(THREE, element, offset, camera, depth, mouseInfo) {
|
|||
const direction = screenCoordsToDirection(
|
||||
THREE,
|
||||
camera,
|
||||
{x: clientX, y: clientY}
|
||||
{x: clientX, y: clientY},
|
||||
);
|
||||
|
||||
const {x, y, z} = directionToWorldCoords(
|
||||
|
|
@ -314,10 +319,9 @@ function dragItem(THREE, element, offset, camera, depth, mouseInfo) {
|
|||
camera,
|
||||
camera.components.camera.camera,
|
||||
direction,
|
||||
depth
|
||||
depth,
|
||||
);
|
||||
|
||||
|
||||
let rotationDiff;
|
||||
|
||||
// Start by rotating backwards from the initial camera rotation
|
||||
|
|
@ -359,7 +363,9 @@ function dragItem(THREE, element, offset, camera, depth, mouseInfo) {
|
|||
nextPosition.z = offsetVector.z;
|
||||
}
|
||||
|
||||
element.emit(DRAG_MOVE_EVENT, {nextPosition, nextRotation, clientX, clientY});
|
||||
element.emit(DRAG_MOVE_EVENT, {
|
||||
nextPosition, nextRotation, clientX, clientY,
|
||||
});
|
||||
|
||||
element.setAttribute('position', nextPosition);
|
||||
|
||||
|
|
@ -384,7 +390,7 @@ function dragItem(THREE, element, offset, camera, depth, mouseInfo) {
|
|||
camera.addEventListener('componentchanged', onCameraChange);
|
||||
|
||||
// The "unlisten" function
|
||||
return _ => {
|
||||
return (_) => {
|
||||
document.removeEventListener('mousemove', onMouseMove);
|
||||
document.removeEventListener('touchmove', onTouchMove);
|
||||
camera.removeEventListener('componentchanged', onCameraChange);
|
||||
|
|
@ -420,7 +426,7 @@ const {didMount, didUnmount} = (function getDidMountAndUnmount() {
|
|||
// Continuously clean up so we don't get huge logs built up
|
||||
cleanUpPositionLog();
|
||||
positionLog.push({
|
||||
position: Object.assign({}, nextPosition),
|
||||
position: {...nextPosition},
|
||||
time: performance.now(),
|
||||
});
|
||||
}
|
||||
|
|
@ -446,7 +452,7 @@ const {didMount, didUnmount} = (function getDidMountAndUnmount() {
|
|||
{
|
||||
clientX,
|
||||
clientY,
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
draggedElement = element;
|
||||
|
|
@ -460,7 +466,7 @@ const {didMount, didUnmount} = (function getDidMountAndUnmount() {
|
|||
|
||||
element.addEventListener(DRAG_MOVE_EVENT, onDragged);
|
||||
|
||||
removeDragListeners = _ => {
|
||||
removeDragListeners = (_) => {
|
||||
element.removeEventListener(DRAG_MOVE_EVENT, onDragged);
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
removeDragItemListeners && removeDragItemListeners();
|
||||
|
|
@ -501,7 +507,9 @@ const {didMount, didUnmount} = (function getDidMountAndUnmount() {
|
|||
|
||||
draggedElement.emit(
|
||||
DRAG_END_EVENT,
|
||||
Object.assign({}, dragInfo, {clientX, clientY, velocity})
|
||||
{
|
||||
...dragInfo, clientX, clientY, velocity,
|
||||
},
|
||||
);
|
||||
|
||||
removeDragListeners && removeDragListeners(); // eslint-disable-line no-unused-expressions
|
||||
|
|
@ -527,7 +535,7 @@ const {didMount, didUnmount} = (function getDidMountAndUnmount() {
|
|||
document.addEventListener('touchstart', onTouchStart);
|
||||
document.addEventListener('touchend', onTouchEnd);
|
||||
|
||||
removeClickListeners = _ => {
|
||||
removeClickListeners = (_) => {
|
||||
document.removeEventListener('mousedown', onMouseDown);
|
||||
document.removeEventListener('mouseup', onMouseUp);
|
||||
|
||||
|
|
@ -590,7 +598,7 @@ const {didMount, didUnmount} = (function getDidMountAndUnmount() {
|
|||
*/
|
||||
export default function aframeDraggableComponent(aframe, componentName = COMPONENT_NAME) {
|
||||
|
||||
const THREE = aframe.THREE;
|
||||
const {THREE} = aframe;
|
||||
|
||||
/**
|
||||
* Draggable component for A-Frame.
|
||||
|
|
|
|||
Loading…
Reference in a new issue