Focus on node children

package.json

@@ -174,7 +174,7 @@
     "rollup-plugin-node-polyfills": "^0.2.1",
     "rollup-plugin-polyfill-node": "^0.12.0",
     "typescript": "4.9.5",
-    "vite": "^4.3.9",
+    "vite": "^4.4.11",
     "vite-compatible-readable-stream": "^3.6.1",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-istanbul": "^4.1.0",

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

@@ -2,7 +2,7 @@ import { Vector3 } from 'three'
 
 export const initialCameraPosition = new Vector3(5000, 600, 1600)
 
-export const arriveDistance = 300
+export const arriveDistance = 100
 
 export const topicArriveDistance = 600
 

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

@@ -1,12 +1,13 @@
 /* eslint-disable no-param-reassign */
-import type { CameraControls } from '@react-three/drei'
+import { type CameraControls } from '@react-three/drei'
 import { Camera, useFrame, useThree } from '@react-three/fiber'
 import { RefObject, useEffect, useMemo, useState } from 'react'
 import { Vector3 } from 'three'
 import { playInspectSound } from '~/components/common/Sounds'
 import { useControlStore } from '~/stores/useControlStore'
 import { useDataStore, useSelectedNode } from '~/stores/useDataStore'
 import { getPointAbove } from '~/transformers/earthGraph'
+import { NodeExtended } from '~/types'
 import { getNearbyNodeIds } from '../constants'
 import { arriveDistance, selectionGraphCameraPosition, selectionGraphDistance, topicArriveDistance } from './constants'
 
@@ -37,13 +38,51 @@ export const useAutoNavigate = (cameraControlsRef: RefObject<CameraControls | nu
   // camera movement to selection params
   const [minDistance, setMinDistance] = useState(arriveDistance)
 
+  // find the target position for the camera
   const destination = useMemo(() => {
     if (showSelectionGraph) {
       return new Vector3(0, 0, 0)
     }
 
     const selected = graphData?.nodes.find((f) => f.ref_id === selectedNode?.ref_id)
 
+    let pos = new Vector3(0, 0, 0)
+
+    if (selected && graphData) {
+      // find all node children ... is there a better way?
+      const children: NodeExtended[] = graphData?.nodes.filter((node) =>
+        selected.children?.find((str) => str === node.id),
+      )
+
+      // position of node
+      const spos = new Vector3(selected.x, selected.y, selected.z)
+      // average positioon of children
+      let avgDir = new Vector3(0, 0, 0)
+
+      children.map((child: NodeExtended) => {
+        avgDir = avgDir.add(new Vector3(child.x, child.y, child.z).normalize())
+
+        return child
+      })
+
+      // offset from node based on children
+      const sizeOffset = selected.scale ? 1 - 1 / (selected.scale + 10) : 1
+      const offset = spos.sub(avgDir).multiplyScalar(0.8 * sizeOffset)
+
+      pos = spos.add(offset)
+    }
+
+    return pos
+  }, [showSelectionGraph, selectedNode, graphData])
+
+  // find the node that the camera should look at
+  const lookat = useMemo(() => {
+    if (showSelectionGraph) {
+      return new Vector3(0, 0, 0)
+    }
+
+    const selected = graphData?.nodes.find((f) => f.ref_id === selectedNode?.ref_id)
+
     return new Vector3(selected?.x || 0, selected?.y || 0, selected?.z || 0)
   }, [showSelectionGraph, selectedNode, graphData])
 
@@ -92,7 +131,7 @@ export const useAutoNavigate = (cameraControlsRef: RefObject<CameraControls | nu
     if (selectedNode) {
       if (!showSelectionGraph && graphStyle === 'earth' && cameraControlsRef?.current) {
         const distanceFromCenter = cameraControlsRef.current.camera.position.distanceTo(new Vector3())
-        const newPosition = getPointAbove(destination, -distanceFromCenter / 2)
+        const newPosition = getPointAbove(lookat, -distanceFromCenter / 2)
 
         cameraControlsRef.current.setLookAt(newPosition.x, newPosition.y, newPosition.z, 0, 0, 0, true)
       } else {
@@ -130,7 +169,7 @@ export const useAutoNavigate = (cameraControlsRef: RefObject<CameraControls | nu
         }
 
         if (!lookAtReached) {
-          turnCameraToNode(destination, state.camera)
+          turnCameraToNode(lookat, state.camera)
         }
       }
     }