Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: set links in Map #2440

Merged
merged 1 commit into from
Nov 6, 2024
Merged

feat: set links in Map #2440

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 1 addition & 7 deletions src/components/Universe/Graph/Connections/LineComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,6 @@ type LineComponentProps = {
position: LinkPosition
}

const VECTOR = new Vector3(0, 0, 0)

// eslint-disable-next-line no-underscore-dangle
const _LineComponent = forwardRef<Line2, LineComponentProps>(({ isSelected, position }, ref) => {
useEffect(() => {
Expand All @@ -35,11 +33,7 @@ const _LineComponent = forwardRef<Line2, LineComponentProps>(({ isSelected, posi
ref={ref}
isLine2
opacity={0.5}
points={
position
? [new Vector3(position.sx, position.sy, position.sz), new Vector3(position.tx, position.ty, position.tz)]
: [VECTOR, VECTOR]
}
points={[new Vector3(position.sx, position.sy, position.sz), new Vector3(position.tx, position.ty, position.tz)]}
/>
)
})
Expand Down
39 changes: 24 additions & 15 deletions src/components/Universe/Graph/Connections/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { LINE_WIDTH } from '../../constants'
import { LineComponent } from './LineComponent'

type Props = {
linksPosition: LinkPosition[]
linksPosition: Map<string, LinkPosition>
}

const LINE_TRANSFORM_DURATION = 0.5
Expand All @@ -19,7 +19,7 @@ export const Connections = memo(({ linksPosition }: Props) => {
const { showSelectionGraph } = useGraphStore((s) => s)
const selectedNode = useSelectedNode()
const hoveredNode = useHoveredNode()
const lineRefs = useRef<Line2[]>([])
const lineRefs = useRef(new Map<string, Line2 | null>())

useEffect(() => {
const activeNode = hoveredNode || selectedNode
Expand All @@ -37,15 +37,13 @@ export const Connections = memo(({ linksPosition }: Props) => {
return
}

lineRefs.current.forEach((line, index) => {
if (data?.links[index].source === activeNode?.ref_id || data?.links[index].target === activeNode?.ref_id) {
gsap.to(line.material, {
linewidth: LINE_WIDTH * 2,
duration: LINE_TRANSFORM_DURATION,
})
} else {
lineRefs.current.forEach((line, refId) => {
if (line) {
const link = data?.links.find((l) => l.ref_id === refId)
const isActive = link && (link.source === activeNode.ref_id || link.target === activeNode.ref_id)

gsap.to(line.material, {
linewidth: 0,
linewidth: isActive ? LINE_WIDTH * 2 : 0,
duration: LINE_TRANSFORM_DURATION,
})
}
Expand All @@ -54,19 +52,30 @@ export const Connections = memo(({ linksPosition }: Props) => {

return (
<group name="simulation-3d-group__connections" visible={!showSelectionGraph || true}>
{data?.links.map((l: Link, index: number) => {
const isSelected = selectedNode?.ref_id === l.source || selectedNode?.ref_id === l.target
{data?.links.map((l: Link) => {
const isSelected = selectedNode?.ref_id === l.source || selectedNode?.ref_id === l.target // Adjust to match link with its position

// eslint-disable-next-line no-nested-ternary
const position = linksPosition.get(l.ref_id) || {
sx: 0,
sy: 0,
sz: 0,
tx: 0,
ty: 0,
tz: 0,
}

return (
<LineComponent
key={l.ref_id}
ref={(el) => {
lineRefs.current[index] = el as Line2
if (el) {
lineRefs.current.set(l.ref_id, el as Line2)
} else {
lineRefs.current.delete(l.ref_id)
}
}}
isSelected={isSelected}
position={linksPosition[index]}
position={position}
/>
)
})}
Expand Down
9 changes: 6 additions & 3 deletions src/components/Universe/Graph/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,10 @@ 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 { normalizedSchemasByType } = useSchemaStore((s) => s)

const linksPositionRef = useRef(new Map<string, LinkPosition>())

const { setData, simulation, simulationCreate, simulationHelpers, graphStyle, setGraphRadius } = useGraphStore(
(s) => s,
)
Expand Down Expand Up @@ -115,6 +116,8 @@ export const Graph = () => {
}

if (grConnections) {
linksPositionRef.current.clear()

grConnections.children.forEach((r, i) => {
const link = dataInitial?.links[i]
const Line = r as Line2
Expand All @@ -126,14 +129,14 @@ export const Graph = () => {
const { x: sx, y: sy, z: sz } = sourceNode
const { x: tx, y: ty, z: tz } = targetNode

linksPositionRef.current[i] = {
linksPositionRef.current.set(link.ref_id, {
sx,
sy,
sz,
tx,
ty,
tz,
}
})

const lineColor = normalizedSchemasByType[sourceNode.node_type]?.primary_color || 'white'

Expand Down
Loading