diff --git a/src/components/Universe/Graph/Cubes/SelectionDataNodes/index.tsx b/src/components/Universe/Graph/Cubes/SelectionDataNodes/index.tsx index 490b7a2ec..fadc7dae5 100644 --- a/src/components/Universe/Graph/Cubes/SelectionDataNodes/index.tsx +++ b/src/components/Universe/Graph/Cubes/SelectionDataNodes/index.tsx @@ -1,15 +1,15 @@ import { Segments } from '@react-three/drei' +import { forceCollide, forceLink, forceSimulation } from 'd3-force-3d' import { memo, useEffect, useRef, useState } from 'react' import { Group } from 'three' import { useShallow } from 'zustand/react/shallow' import { usePrevious } from '~/hooks/usePrevious' import { useDataStore } from '~/stores/useDataStore' import { useGraphStore, useSelectedNode, useSelectedNodeRelativeIds } from '~/stores/useGraphStore' -import { ForceSimulation, runForceSimulation } from '~/transformers/forceSimulation' +import { ForceSimulation } from '~/transformers/forceSimulation' import { GraphData, Link, NodeExtended } from '~/types' import { Segment } from '../../Segment' import { PathwayBadges } from '../../Segment/LinkBadge' -import { Cube } from '../Cube' import { TextNode } from '../Text' export const SelectionDataNodes = memo(() => { @@ -61,13 +61,25 @@ export const SelectionDataNodes = memo(() => { const structuredLinks = structuredClone(selectionGraphData.links) - const simulation = runForceSimulation(selectionGraphData.nodes, structuredLinks as unknown as Link[], { - numDimensions: 2, - forceLinkStrength: 0.01, - forceCenterStrength: 0.85, - forceChargeStrength: -20, - velocityDecay: 0.9, - }) + const simulation = forceSimulation([]) + .numDimensions(2) + .stop() + .nodes(selectionGraphData.nodes) + .force( + 'link', + forceLink() + .links(structuredLinks) + .id((d: NodeExtended) => d.ref_id), + ) + .force( + 'collide', + forceCollide() + .radius(() => 150) + .strength(1) + .iterations(1), + ) + .alpha(1) + .restart() setSimulation2D(simulation) @@ -101,18 +113,12 @@ export const SelectionDataNodes = memo(() => { }) }, [simulation2d]) - console.log(selectionGraphData.nodes) - return ( <> {selectionGraphData?.nodes.map((node) => ( - {node.name ? ( - - ) : ( - - )} + ))} diff --git a/src/components/Universe/Graph/Cubes/Text/index.tsx b/src/components/Universe/Graph/Cubes/Text/index.tsx index 3e831d8d1..e257a4373 100644 --- a/src/components/Universe/Graph/Cubes/Text/index.tsx +++ b/src/components/Universe/Graph/Cubes/Text/index.tsx @@ -47,6 +47,7 @@ type Props = { node: NodeExtended hide?: boolean isHovered: boolean + ignoreDistance: boolean } function splitStringIntoThreeParts(text: string): string { @@ -67,7 +68,7 @@ function splitStringIntoThreeParts(text: string): string { return `${firstPart}\n${secondPart}\n${thirdPart}` } -export const TextNode = memo(({ node, hide, isHovered }: Props) => { +export const TextNode = memo(({ node, hide, isHovered, ignoreDistance }: Props) => { const svgRef = useRef(null) const ringRef = useRef(null) const circleRef = useRef(null) @@ -88,7 +89,7 @@ export const TextNode = memo(({ node, hide, isHovered }: Props) => { const nodePosition = nodePositionRef.current.setFromMatrixPosition(ringRef.current!.matrixWorld) if (ringRef.current) { - ringRef.current.visible = nodePosition.distanceTo(camera.position) < 2500 + ringRef.current.visible = ignoreDistance ? true : nodePosition.distanceTo(camera.position) < 2500 } // Set visibility based on distance diff --git a/src/components/Universe/Graph/Cubes/index.tsx b/src/components/Universe/Graph/Cubes/index.tsx index b9474f7e6..ac96d9c86 100644 --- a/src/components/Universe/Graph/Cubes/index.tsx +++ b/src/components/Universe/Graph/Cubes/index.tsx @@ -120,6 +120,7 @@ export const Cubes = memo(() => { @@ -127,11 +128,10 @@ export const Cubes = memo(() => { ) })} - {true && ( - - - - )} + + + + {hideUniverse && } )