Merge pull request #2325 from stakwork/feature/camera-movement

feat: improve camera movement on load, improved icons perfomance
stakwork · Oct 9, 2024 · b67ba6c · b67ba6c
2 parents 851bd3f + a961b94
commit b67ba6c
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 8 deletions.
diff --git a/src/components/Universe/Graph/Cubes/Text/index.tsx b/src/components/Universe/Graph/Cubes/Text/index.tsx
@@ -1,4 +1,4 @@
-import { Html, Text } from '@react-three/drei'
+import { Svg, Text } from '@react-three/drei'
 import { useFrame } from '@react-three/fiber'
 import { Select } from '@react-three/postprocessing'
 import { memo, useMemo, useRef } from 'react'
@@ -11,6 +11,7 @@ import { NodeExtended } from '~/types'
 import { colors } from '~/utils/colors'
 import { removeEmojis } from '~/utils/removeEmojisFromText'
 import { truncateText } from '~/utils/truncateText'
+import { smoothness } from '../Cube/constants'
 import { fontProps } from './constants'
 
 const COLORS_MAP = [
@@ -74,8 +75,10 @@ function splitStringIntoThreeParts(text: string): string {
 
 export const TextNode = memo(({ node, hide }: Props) => {
   const ref = useRef<Mesh | null>(null)
+  const svgRef = useRef<Mesh | null>(null)
   const selectedNode = useSelectedNode()
   const hoveredNode = useHoveredNode()
+
   const selectedNodeRelativeIds = useSelectedNodeRelativeIds()
   const isRelative = selectedNodeRelativeIds.includes(node?.ref_id || '')
   const isSelected = !!selectedNode && selectedNode?.ref_id === node.ref_id
@@ -90,6 +93,11 @@ export const TextNode = memo(({ node, hide }: Props) => {
       // Make text face the camera
       ref.current.quaternion.copy(camera.quaternion)
     }
+
+    if (svgRef?.current) {
+      // Make text face the camera
+      svgRef.current.quaternion.copy(camera.quaternion)
+    }
   })
 
   const textScale = useMemo(() => {
@@ -127,6 +135,8 @@ export const TextNode = memo(({ node, hide }: Props) => {
 
   const Icon = primaryIcon ? Icons[primaryIcon] : null
 
+  const iconName = Icon ? primaryIcon : 'AddCircleIcon'
+
   const sanitizedNodeName = removeEmojis(String(node.name))
 
   return (
@@ -148,13 +158,9 @@ export const TextNode = memo(({ node, hide }: Props) => {
       ) : (
         <Select enabled={!!isSelected}>
           <mesh name={node.id} userData={node} visible={!hide}>
-            <sphereGeometry args={[20, 32, 32]} userData={node} />
-            <meshStandardMaterial color="blue" />
-
-            {/* Attach SVG as HTML over the sphere, and it will move with the sphere */}
-            <Html center distanceFactor={100} position={[20, 20, 20]}>
-              <div style={{ color: '#fff', fontSize: '200px', pointerEvents: 'none' }}>{Icon && <Icon />}</div>
-            </Html>
+            <sphereGeometry args={[30, 32, 32]} userData={node} />
+            <meshStandardMaterial {...smoothness} color={color} />
+            <Svg ref={svgRef} position={[20, 20, 20]} scale={2} src={`svg-icons/${iconName}.svg`} />
           </mesh>
         </Select>
       )}

diff --git a/src/components/Universe/Graph/index.tsx b/src/components/Universe/Graph/index.tsx
@@ -24,6 +24,7 @@ export type LinkPosition = {
 export const Graph = () => {
   const { dataInitial, isLoadingNew, isFetching, dataNew, resetDataNew } = useDataStore((s) => s)
   const groupRef = useRef<Group>(null)
+  const cameraSettled = useRef<boolean>(false)
   const linksPositionRef = useRef<LinkPosition[]>([])
 
   const { setData, simulation, simulationCreate, simulationHelpers, graphStyle, setGraphRadius } = useGraphStore(
@@ -68,6 +69,21 @@ export const Graph = () => {
     }
 
     simulation.on('tick', () => {
+      if (!cameraSettled.current && simulation.alpha() < 0.1) {
+        const nodesVector = simulation.nodes().map((i: NodeExtended) => new Vector3(i.x, i.y, i.z))
+
+        const boundingBox = new Box3().setFromPoints(nodesVector)
+
+        const boundingSphere = new Sphere()
+
+        boundingBox.getBoundingSphere(boundingSphere)
+
+        const sphereRadius = Math.min(5000, boundingSphere.radius)
+
+        setGraphRadius(sphereRadius)
+        cameraSettled.current = true
+      }
+
       if (groupRef.current) {
         const gr = groupRef.current.getObjectByName('simulation-3d-group__nodes') as Group
         const grConnections = groupRef.current.getObjectByName('simulation-3d-group__connections') as Group
@@ -124,6 +140,8 @@ export const Graph = () => {
       const sphereRadius = boundingSphere.radius
 
       setGraphRadius(sphereRadius)
+
+      cameraSettled.current = false
     })
   }, [dataInitial, simulation, setGraphRadius])