fix(composer): click on overlay causing camera to follow mouse

awslabs · May 18, 2023 · 6cbd5f5 · 6cbd5f5
1 parent 0c68f5e
commit 6cbd5f5
Show file tree

Hide file tree

Showing 3 changed files with 2 additions and 57 deletions.
diff --git a/...s/scene-composer/src/components/three-fiber/DataOverlayComponent/DataOverlayContainer.tsx b/...s/scene-composer/src/components/three-fiber/DataOverlayComponent/DataOverlayContainer.tsx
@@ -4,7 +4,6 @@ import { IDataOverlayComponentInternal, ISceneNodeInternal } from '../../../stor
 import { Component } from '../../../models/SceneModels';
 import { useStore, useViewOptionState } from '../../../store';
 import { sceneComposerIdContext } from '../../../common/sceneComposerIdContext';
-import useCallbackWhenNotPanning from '../../../hooks/useCallbackWhenNotPanning';
 
 import { DataOverlayRows } from './DataOverlayRows';
 import {
@@ -56,7 +55,7 @@ export const DataOverlayContainer = ({ component, node }: DataOverlayContainerPr
   }, [componentVisible]);
 
   // Same behavior as other components to select node when clicked on the panel
-  const [onPointerDown, onPointerUp] = useCallbackWhenNotPanning(
+  const onPointerUp = useCallback(
     (e) => {
       e.stopPropagation();
       if (selectedSceneNodeRef !== node.ref) {
@@ -79,7 +78,7 @@ export const DataOverlayContainer = ({ component, node }: DataOverlayContainerPr
       <div
         ref={containerRef}
         onPointerUp={onPointerUp}
-        onPointerDown={onPointerDown}
+        onPointerDown={(e) => e.stopPropagation()}
         style={{ ...tmContainer, ...(isAnnotation ? tmAnnotationContainer : tmPanelContainer) }}
       >
         {!isAnnotation && !componentVisible && (

diff --git a/...c/components/three-fiber/DataOverlayComponent/__tests__/DataOverlayContainerSnap.spec.tsx b/...c/components/three-fiber/DataOverlayComponent/__tests__/DataOverlayContainerSnap.spec.tsx
@@ -7,13 +7,6 @@ import { Component } from '../../../../models/SceneModels';
 import { DataOverlayContainer } from '../DataOverlayContainer';
 import { DataOverlayRowsProps } from '../DataOverlayRows';
 
-jest.mock('../../../../hooks/useCallbackWhenNotPanning', () => (cb) => [
-  jest.fn(),
-  function Hack(e) {
-    cb(e);
-  },
-]);
-
 jest.mock('../DataOverlayRows', () => ({
   DataOverlayRows: (...props: [DataOverlayRowsProps, object]) => <div data-testid='rows'>{JSON.stringify(props)}</div>,
 }));

diff --git a/packages/scene-composer/src/hooks/useCallbackWhenNotPanning.ts b/packages/scene-composer/src/hooks/useCallbackWhenNotPanning.ts