From a961b948bffde14beacacf555528195bbad26416 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A0=D0=B0=D1=81=D1=83=D0=BB?= Date: Wed, 9 Oct 2024 13:55:18 +0300 Subject: [PATCH] feat: improve camera movement on load, improved icons perfomance --- .../Universe/Graph/Cubes/Text/index.tsx | 22 ++++++++++++------- src/components/Universe/Graph/index.tsx | 18 +++++++++++++++ 2 files changed, 32 insertions(+), 8 deletions(-) diff --git a/src/components/Universe/Graph/Cubes/Text/index.tsx b/src/components/Universe/Graph/Cubes/Text/index.tsx index f7c0a438d..2574a3476 100644 --- 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(null) + const svgRef = useRef(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) => { ) : ( )} diff --git a/src/components/Universe/Graph/index.tsx b/src/components/Universe/Graph/index.tsx index f82fb7955..d7bd5559b 100644 --- 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(null) + const cameraSettled = useRef(false) const linksPositionRef = useRef([]) 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])