diff --git a/src/components/Universe/Controls/CameraAnimations/index.ts b/src/components/Universe/Controls/CameraAnimations/index.ts index e9f04569f..bc8fca123 100644 --- a/src/components/Universe/Controls/CameraAnimations/index.ts +++ b/src/components/Universe/Controls/CameraAnimations/index.ts @@ -24,7 +24,7 @@ export const useCameraAnimations = ( const isUserDragging = useControlStore((s) => s.isUserDragging) - const { graphStyle, graphRadius, disableCameraRotation } = useGraphStore((s) => s) + const { graphRadius, disableCameraRotation } = useGraphStore((s) => s) useEffect(() => { if (!enabled) { @@ -33,22 +33,24 @@ export const useCameraAnimations = ( } }, [enabled]) - useEffect(() => { - if (cameraControlsRef.current && graphRadius) { - if (graphStyle === 'sphere') { - cameraControlsRef.current.maxDistance = 8000 - cameraControlsRef.current.minDistance = 200 - cameraControlsRef.current.setTarget(0, 0, 500, true) - } else { - cameraControlsRef.current.maxDistance = cameraControlsRef.current.getDistanceToFitSphere(graphRadius + 200) - cameraControlsRef.current.minDistance = 100 - } - } - }, [graphRadius, graphStyle, cameraControlsRef]) + // useEffect(() => { + // if (cameraControlsRef.current && graphRadius) { + // cameraControlsRef.current.maxDistance = cameraControlsRef.current.getDistanceToFitSphere(graphRadius + 200) + // cameraControlsRef.current.minDistance = 100 + // } + // }, [graphRadius, cameraControlsRef]) useEffect(() => { if (!selectedNode && cameraControlsRef.current) { - cameraControlsRef.current.setLookAt(initialCameraPosition.x, initialCameraPosition.y, graphRadius, 0, 0, 0, true) + cameraControlsRef.current.setLookAt( + initialCameraPosition.x, + initialCameraPosition.y, + graphRadius + 200, + 0, + 0, + 0, + true, + ) } // eslint-disable-next-line react-hooks/exhaustive-deps }, [selectedNode, graphRadius]) diff --git a/src/components/Universe/Graph/Connections/LineComponent.tsx b/src/components/Universe/Graph/Connections/LineComponent.tsx index 8c9b9177a..92737f371 100644 --- a/src/components/Universe/Graph/Connections/LineComponent.tsx +++ b/src/components/Universe/Graph/Connections/LineComponent.tsx @@ -5,6 +5,7 @@ import { memo, useEffect, useRef } from 'react' import { Line2 } from 'three-stdlib' import { useGraphStore } from '~/stores/useGraphStore' import { LINE_WIDTH } from '../../constants' +import { fontProps } from '../Cubes/Text/constants' type LineComponentProps = { label: string @@ -78,8 +79,8 @@ const _LineComponent = (props: LineComponentProps) => { points={[sourceX, sourceY, sourceZ, targetX, targetY, targetZ]} /> - - {label}1 + + {label} diff --git a/src/components/Universe/Graph/Cubes/SelectionDataNodes/Connections/Connection/index.tsx b/src/components/Universe/Graph/Cubes/SelectionDataNodes/Connections/Connection/index.tsx index e43b44003..8c5f202d5 100644 --- a/src/components/Universe/Graph/Cubes/SelectionDataNodes/Connections/Connection/index.tsx +++ b/src/components/Universe/Graph/Cubes/SelectionDataNodes/Connections/Connection/index.tsx @@ -1,6 +1,7 @@ import { Line, Text } from '@react-three/drei' import { memo, useRef } from 'react' import { Line2 } from 'three-stdlib' +import { fontProps } from '../../../Text/constants' type LineComponentProps = { label: string @@ -31,7 +32,7 @@ const _Connection = (props: LineComponentProps) => { - + {label} diff --git a/src/components/Universe/Graph/Cubes/SelectionDataNodes/Node/index.tsx b/src/components/Universe/Graph/Cubes/SelectionDataNodes/Node/index.tsx index fd8ebd191..1f07b1446 100644 --- a/src/components/Universe/Graph/Cubes/SelectionDataNodes/Node/index.tsx +++ b/src/components/Universe/Graph/Cubes/SelectionDataNodes/Node/index.tsx @@ -57,7 +57,9 @@ export const Node = ({ onClick, node, selected, rounded = true }: Props) => { ) } -const Wrapper = styled(Flex)`` +const Wrapper = styled(Flex)` + background: black; +` const Text = styled(Flex)` color: ${colors.white}; diff --git a/src/components/Universe/Graph/Cubes/SelectionDataNodes/index.tsx b/src/components/Universe/Graph/Cubes/SelectionDataNodes/index.tsx index 3b529070e..b8e52c5fe 100644 --- a/src/components/Universe/Graph/Cubes/SelectionDataNodes/index.tsx +++ b/src/components/Universe/Graph/Cubes/SelectionDataNodes/index.tsx @@ -55,21 +55,30 @@ export const SelectionDataNodes = memo(() => { const data = await fetchNodeEdges(selectedNode.ref_id, 0, 5) if (data) { - const graphNodes: NodeExtended[] = data.nodes - .filter((node) => node.ref_id !== selectedNode.ref_id) - .map((node: Node) => ({ ...node, x: 0, y: 0, z: 0 })) + const filteredNodes: NodeExtended[] = data.nodes.filter( + (node, index) => node.ref_id !== selectedNode.ref_id && index < 7, + ) + + const graphNodes = filteredNodes.map((node: Node) => ({ ...node, x: 0, y: 0, z: 0 })) const nodes: NodeExtended[] = [ ...graphNodes, { ...selectedNode, x: 0, y: 0, z: 0, fx: 0, fy: 0, fz: 0 } as NodeExtended, ] - setSelectionData({ nodes, links: data.edges as unknown as GraphData['links'] }) + const links = data.edges.filter( + (link: Link) => + nodes.some((node: NodeExtended) => node.ref_id === link.target) && + nodes.some((node: NodeExtended) => node.ref_id === link.source), + ) + + setSelectionData({ nodes, links: links as unknown as GraphData['links'] }) setSimulation2D(null) linksPositionRef.current = new Map() + // - addNewNode(data) + addNewNode({ nodes: filteredNodes, edges: links }) } } catch (error) { console.error(error) @@ -197,7 +206,7 @@ export const SelectionDataNodes = memo(() => { const midPoint = new Vector3((sx + tx) / 2, (sy + ty) / 2, 0) - text.position.set(midPoint.x, midPoint.y, 2) + text.position.set(midPoint.x, midPoint.y, 1) let angle = Math.atan2(ty - sy, tx - sx) diff --git a/src/components/Universe/Graph/Cubes/index.tsx b/src/components/Universe/Graph/Cubes/index.tsx index a66f4fd2a..60aa4579f 100644 --- a/src/components/Universe/Graph/Cubes/index.tsx +++ b/src/components/Universe/Graph/Cubes/index.tsx @@ -120,7 +120,7 @@ export const Cubes = memo(() => { index={index} node={node} scale={node.scale || 1} - stopFrames={hideUniverse} + stopFrames={false} /> ) })} diff --git a/src/components/Universe/Graph/index.tsx b/src/components/Universe/Graph/index.tsx index 2d653449f..17d26bd6a 100644 --- a/src/components/Universe/Graph/index.tsx +++ b/src/components/Universe/Graph/index.tsx @@ -24,7 +24,6 @@ export type LinkPosition = { export const Graph = () => { const { dataInitial, isLoadingNew, isFetching, dataNew, resetDataNew } = useDataStore((s) => s) const groupRef = useRef(null) - const cameraSettled = useRef(false) const { normalizedSchemasByType } = useSchemaStore((s) => s) const linksPositionRef = useRef(new Map()) @@ -78,25 +77,6 @@ export const Graph = () => { return } - 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) - - if (false) { - setGraphRadius(sphereRadius) - cameraSettled.current = true - } - } - }) - simulation.on('end', () => { const nodesVector = simulation.nodes().map((i: NodeExtended) => { // eslint-disable-next-line no-param-reassign @@ -182,7 +162,15 @@ export const Graph = () => { const boundingBox = new Box3().setFromPoints(nodesVector) - console.log(boundingBox) + const boundingSphere = new Sphere() + + boundingBox.getBoundingSphere(boundingSphere) + + const sphereRadius = Math.min(5000, boundingSphere.radius) + + console.log(sphereRadius) + + setGraphRadius(sphereRadius) }) }, [dataInitial, simulation, setGraphRadius, normalizedSchemasByType])