Skip to content

Commit

Permalink
feat: improve camera movement on load, improved icons perfomance
Browse files Browse the repository at this point in the history
  • Loading branch information
Rassl committed Oct 9, 2024
1 parent faa7a4f commit a961b94
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 8 deletions.
22 changes: 14 additions & 8 deletions src/components/Universe/Graph/Cubes/Text/index.tsx
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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 = [
Expand Down Expand Up @@ -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
Expand All @@ -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(() => {
Expand Down Expand Up @@ -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 (
Expand All @@ -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>
)}
Expand Down
18 changes: 18 additions & 0 deletions src/components/Universe/Graph/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -124,6 +140,8 @@ export const Graph = () => {
const sphereRadius = boundingSphere.radius

setGraphRadius(sphereRadius)

cameraSettled.current = false
})
}, [dataInitial, simulation, setGraphRadius])

Expand Down

0 comments on commit a961b94

Please sign in to comment.