Merge pull request #709 from 3DStreet/fix-drag-select-entity

Don't select entity on raycaster click if we used one of the controls
3DStreet · Jul 15, 2024 · be2911a · be2911a
2 parents 58da709 + d06cb51
commit be2911a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 53 deletions.
diff --git a/src/editor/lib/raycaster.js b/src/editor/lib/raycaster.js
@@ -44,8 +44,6 @@ export function initRaycaster(inspector) {
   mouseCursor.addEventListener('click', handleClick);
   mouseCursor.addEventListener('mouseenter', onMouseEnter);
   mouseCursor.addEventListener('mouseleave', onMouseLeave);
-  inspector.container.addEventListener('mousedown', onMouseDown);
-  inspector.container.addEventListener('mouseup', onMouseUp);
   // inspector.container.addEventListener('dblclick', onDoubleClick);
 
   inspector.sceneEl.canvas.addEventListener('mouseleave', () => {
@@ -54,10 +52,6 @@ export function initRaycaster(inspector) {
     });
   });
 
-  const onDownPosition = new THREE.Vector2();
-  const onUpPosition = new THREE.Vector2();
-  // const onDoubleClickPosition = new THREE.Vector2();
-
   function onMouseEnter() {
     Events.emit(
       'raycastermouseenter',
@@ -73,50 +67,13 @@ export function initRaycaster(inspector) {
   }
 
   function handleClick(evt) {
-    // Check to make sure not dragging.
-    const DRAG_THRESHOLD = 0.03;
-    if (onDownPosition.distanceTo(onUpPosition) >= DRAG_THRESHOLD) {
-      return;
-    }
-    inspector.selectEntity(evt.detail.intersectedEl);
-  }
-
-  function onMouseDown(event) {
-    if (event instanceof CustomEvent) {
-      return;
-    }
-    event.preventDefault();
-    const array = getMousePosition(
-      inspector.container,
-      event.clientX,
-      event.clientY
-    );
-    onDownPosition.fromArray(array);
-  }
-
-  function onMouseUp(event) {
-    if (event instanceof CustomEvent) {
-      return;
-    }
-    event.preventDefault();
-    const array = getMousePosition(
-      inspector.container,
-      event.clientX,
-      event.clientY
-    );
-    onUpPosition.fromArray(array);
+    Events.emit('raycasterclick', evt.detail.intersectedEl);
   }
 
   /**
    * Focus on double click.
    */
   // function onDoubleClick(event) {
-  //   const array = getMousePosition(
-  //     inspector.container,
-  //     event.clientX,
-  //     event.clientY
-  //   );
-  //   onDoubleClickPosition.fromArray(array);
   //   const intersectedEl = mouseCursor.components.cursor.intersectedEl;
   //   if (!intersectedEl) {
   //     return;
@@ -128,18 +85,11 @@ export function initRaycaster(inspector) {
     el: mouseCursor,
     enable: () => {
       mouseCursor.setAttribute('raycaster', 'enabled', true);
-      inspector.container.addEventListener('mousedown', onMouseDown);
-      inspector.container.addEventListener('mouseup', onMouseUp);
+      // inspector.container.addEventListener('dblclick', onDoubleClick);
     },
     disable: () => {
       mouseCursor.setAttribute('raycaster', 'enabled', false);
-      inspector.container.removeEventListener('mousedown', onMouseDown);
-      inspector.container.removeEventListener('mouseup', onMouseUp);
+      // inspector.container.removeEventListener('dblclick', onDoubleClick);
     }
   };
 }
-
-function getMousePosition(dom, x, y) {
-  const rect = dom.getBoundingClientRect();
-  return [(x - rect.left) / rect.width, (y - rect.top) / rect.height];
-}
diff --git a/src/editor/lib/viewport.js b/src/editor/lib/viewport.js
@@ -136,6 +136,15 @@ export function Viewport(inspector) {
     hoverBox.visible = false;
   });
 
+  let lastControlsEventTime = 0;
+  Events.on('raycasterclick', (el) => {
+    if (Date.now() - lastControlsEventTime < 500) {
+      // Ignore click if we used EditorControls or TransformControls in the last 500ms.
+      return;
+    }
+    inspector.selectEntity(el);
+  });
+
   function updateHelpers(object) {
     object.traverse((node) => {
       if (inspector.helpers[node.uuid] && inspector.helpers[node.uuid].update) {
@@ -151,6 +160,7 @@ export function Viewport(inspector) {
   );
   transformControls.size = 0.75;
   transformControls.addEventListener('objectChange', (evt) => {
+    lastControlsEventTime = Date.now();
     const object = transformControls.object;
     if (object === undefined) {
       return;
@@ -214,6 +224,9 @@ export function Viewport(inspector) {
   controls.rotationSpeed = 0.0035;
   controls.zoomSpeed = 0.05;
   controls.setAspectRatio(sceneEl.canvas.width / sceneEl.canvas.height);
+  controls.addEventListener('change', () => {
+    lastControlsEventTime = Date.now();
+  });
 
   Events.on('cameratoggle', (data) => {
     controls.setCamera(data.camera);