feat: selection v2

src/components/Universe/Controls/CameraAnimations/index.ts

@@ -22,9 +22,7 @@ export const useCameraAnimations = (
 
   useAutoNavigate(cameraControlsRef)
 
-  const isUserDragging = useControlStore((s) => s.isUserDragging)
-
-  const { graphRadius, disableCameraRotation } = useGraphStore((s) => s)
+  const { graphRadius } = useGraphStore((s) => s)
 
   useEffect(() => {
     if (!enabled) {
@@ -58,6 +56,9 @@ export const useCameraAnimations = (
   useFrame((_, delta) => {
     if (cameraControlsRef.current) {
       //  do camera rotation
+      const { disableCameraRotation } = useGraphStore.getState()
+      const { isUserDragging } = useControlStore.getState()
+
       if (!disableCameraRotation && !isUserDragging) {
         cameraControlsRef.current.azimuthAngle += autoRotateSpeed * delta * MathUtils.DEG2RAD
       }

src/components/Universe/Graph/Cubes/SelectionDataNodes/Connections/index.tsx

@@ -1,43 +1,39 @@
 import { memo } from 'react'
-import { useGraphStore } from '~/stores/useGraphStore'
 import { Link } from '~/types'
 import { LinkPosition } from '../../..'
 import { Connection } from './Connection'
 
 type Props = {
   linksPosition: Map<string, LinkPosition>
+  links: Link[]
 }
 
-export const Connections = memo(({ linksPosition }: Props) => {
-  const { selectionGraphData } = useGraphStore((s) => s)
+export const Connections = memo(({ linksPosition, links }: Props) => (
+  <group name="simulation-3d-group__connections">
+    {links?.map((l: Link) => {
+      const position = linksPosition.get(l.ref_id) || {
+        sx: 0,
+        sy: 0,
+        sz: 0,
+        tx: 0,
+        ty: 0,
+        tz: 0,
+      }
 
-  return (
-    <group name="simulation-3d-group__connections">
-      {selectionGraphData?.links.map((l: Link) => {
-        const position = linksPosition.get(l.ref_id) || {
-          sx: 0,
-          sy: 0,
-          sz: 0,
-          tx: 0,
-          ty: 0,
-          tz: 0,
-        }
-
-        return (
-          <Connection
-            key={l.ref_id}
-            label={l.edge_type}
-            sourceX={position.sx}
-            sourceY={position.sy}
-            sourceZ={position.sz}
-            targetX={position.tx}
-            targetY={position.ty}
-            targetZ={position.tz}
-          />
-        )
-      })}
-    </group>
-  )
-})
+      return (
+        <Connection
+          key={l.ref_id}
+          label={l.edge_type}
+          sourceX={position.sx}
+          sourceY={position.sy}
+          sourceZ={position.sz}
+          targetX={position.tx}
+          targetY={position.ty}
+          targetZ={position.tz}
+        />
+      )
+    })}
+  </group>
+))
 
 Connections.displayName = 'Connections'