diff --git a/libs/shared/lib/vis/visualizations/nodelink/components/NLPixi.tsx b/libs/shared/lib/vis/visualizations/nodelink/components/NLPixi.tsx index da7aebdc62ac9d791029b798812c4fba915fc53f..0bb9dab765e6b501d888905b7ef8636dd8ad77bd 100644 --- a/libs/shared/lib/vis/visualizations/nodelink/components/NLPixi.tsx +++ b/libs/shared/lib/vis/visualizations/nodelink/components/NLPixi.tsx @@ -16,7 +16,8 @@ type Props = { onClick: (node: NodeType, pos: IPointData) => void; // onHover: (data: { node: NodeType; pos: IPointData }) => void; // onUnHover: (data: { node: NodeType; pos: IPointData }) => void; - highlightNodes: NodeType[]; + selectedNodes: NodeType[]; + setSelectedNodes: (nodes: NodeType[]) => void; currentShortestPathEdges?: LinkType[]; highlightedLinks?: LinkType[]; graph?: GraphType; @@ -925,10 +926,19 @@ export const NLPixi = (props: Props) => { } else { node.selected = false; } + updateNode(node); }); }; + + + // if this code is uncommented selection updates will be instantaniously pushed. + // if (props.graph) { + // props.setSelectedNodes(props.graph.nodes.filter((node) => node.selected === true)); + // } + + if (isDragging) { checkNodesWithinPolygon(); } @@ -939,6 +949,10 @@ export const NLPixi = (props: Props) => { isDragging = false; lassoSelection.clear(); points = []; // Clear the points array + + if (props.graph) { + props.setSelectedNodes(props.graph.nodes.filter((node) => node.selected === true)); + } }; if (!viewport.current) throw Error('Viewport is undefined'); @@ -954,6 +968,8 @@ export const NLPixi = (props: Props) => { props.graph.nodes.forEach((node) => { node.selected = false; }); + + props.setSelectedNodes([]); update(); }; diff --git a/libs/shared/lib/vis/visualizations/nodelink/nodelinkvis.tsx b/libs/shared/lib/vis/visualizations/nodelink/nodelinkvis.tsx index 690b3125f581b3832d146476f24266a87e13c51d..a6c6683df9aba029cafad93b05ad903d3d5bef4a 100644 --- a/libs/shared/lib/vis/visualizations/nodelink/nodelinkvis.tsx +++ b/libs/shared/lib/vis/visualizations/nodelink/nodelinkvis.tsx @@ -37,7 +37,7 @@ const displayName = 'NodeLinkVis'; export const NodeLinkVis = React.memo(({ data, ml, dispatch, localConfig }: VisualizationPropTypes<typeof displayName>) => { const ref = useRef<HTMLDivElement>(null); const [graph, setGraph] = useImmer<GraphType | undefined>(undefined); - const [highlightNodes, setHighlightNodes] = useState<NodeType[]>([]); + const [selectedNodes, setSelectedNodes] = useState<NodeType[]>([]); const [highlightedLinks, setHighlightedLinks] = useState<LinkType[]>([]); useEffect(() => { @@ -89,12 +89,17 @@ export const NodeLinkVis = React.memo(({ data, ml, dispatch, localConfig }: Visu } }; + useEffect(() => { + console.log('selectedNodes', selectedNodes); + }, [selectedNodes]); + return ( <> <div className="h-full w-full overflow-hidden" ref={ref}> <NLPixi graph={graph} - highlightNodes={highlightNodes} + selectedNodes={selectedNodes} + setSelectedNodes={setSelectedNodes} highlightedLinks={highlightedLinks} onClick={(node, pos) => { onClickedNode(node, ml);