CELE-107 Outline for selected neurons

MetaCell · Oct 30, 2024 · 9697279 · 9697279
1 parent 3b92283
commit 9697279
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 13 deletions.
diff --git a/applications/visualizer/frontend/src/components/viewers/ThreeD/STLMesh.tsx b/applications/visualizer/frontend/src/components/viewers/ThreeD/STLMesh.tsx
@@ -1,6 +1,6 @@
 import { Outlines } from "@react-three/drei";
 import type { ThreeEvent } from "@react-three/fiber";
-import type { FC } from "react";
+import { useCallback, type FC } from "react";
 import { useSelector } from "react-redux";
 import { type BufferGeometry, DoubleSide, NormalBlending } from "three";
 import { useGlobalContext } from "../../../contexts/GlobalContext";
@@ -23,20 +23,23 @@ const STLMesh: FC<Props> = ({ id, color, opacity, renderOrder, isWireframe, stl
   const { workspaces } = useGlobalContext();
   const workspaceId = useSelector((state: RootState) => state.workspaceId);
   const workspace: Workspace = workspaces[workspaceId];
-  const selectedNeurons = workspace.getViewerSelectedNeurons(ViewerType.Graph);
+  const selectedNeurons = workspace.getViewerSelectedNeurons(ViewerType.ThreeD);
   const isSelected = selectedNeurons.includes(id);
 
-  const onClick = (event: ThreeEvent<MouseEvent>) => {
-    const clicked = getFurthestIntersectedObject(event);
-    const { id } = clicked.userData;
-    if (clicked) {
-      if (isSelected) {
-        console.log(`Neurons selected: ${id}`);
-      } else {
-        console.log(`Neurons un selected: ${id}`);
+  const onClick = useCallback(
+    (event: ThreeEvent<MouseEvent>) => {
+      const clicked = getFurthestIntersectedObject(event);
+      const { id } = clicked.userData;
+      if (clicked) {
+        if (isSelected) {
+          workspace.removeSelection(id, ViewerType.ThreeD);
+        } else {
+          workspace.addSelection(id, ViewerType.ThreeD);
+        }
       }
-    }
-  };
+    },
+    [workspace],
+  );
 
   return (
     <mesh userData={{ id }} onClick={onClick} frustumCulled={false} renderOrder={renderOrder}>

diff --git a/applications/visualizer/frontend/src/settings/threeDSettings.ts b/applications/visualizer/frontend/src/settings/threeDSettings.ts
@@ -12,5 +12,5 @@ export const LIGHT_2_POSITION = new Vector3(-1, 0.75, -0.5);
 export const LIGHT_SCENE_BACKGROUND = "#f6f5f4";
 export const DARK_SCENE_BACKGROUND = "#21201c";
 
-export const OUTLINE_THICKNESS = 0.05;
+export const OUTLINE_THICKNESS = 5;
 export const OUTLINE_COLOR = "hotpink";