refactor(nodes): only use node internals

src/components/ConnectionLine/index.tsx

@@ -27,7 +27,7 @@ interface ConnectionLineProps {
   CustomConnectionLineComponent?: ConnectionLineComponent;
 }
 
-const selector = (s: ReactFlowState) => ({ nodeInternals: s.nodeInternals, nodes: s.nodes, transform: s.transform });
+const selector = (s: ReactFlowState) => ({ nodeInternals: s.nodeInternals, transform: s.transform });
 
 export default ({
   connectionNodeId,
@@ -43,9 +43,9 @@ export default ({
   const nodeId = connectionNodeId;
   const handleId = connectionHandleId;
 
-  const { nodeInternals, nodes, transform } = useStore(selector, shallow);
+  const { nodeInternals, transform } = useStore(selector, shallow);
   const sourceNodeInternals = useRef<NodeInternalsItem | undefined>(nodeInternals.get(nodeId));
-  const sourceNode = useRef<Node | undefined>(nodes.find((n) => n.id === nodeId));
+  const sourceNode = useRef<Node | undefined>(nodeInternals.get(nodeId));
 
   if (
     !sourceNode.current ||

src/components/Nodes/wrapNode.tsx

@@ -56,7 +56,7 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
       unselectNodesAndEdges,
       unsetNodesSelection,
       updateNodePosition,
-      updateNodeDimensions,
+      //  updateNodeDimensions,
     } = useStore(selector, shallow);
     const nodeElement = useRef<HTMLDivElement>(null);
 
@@ -201,12 +201,6 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
       [node, onNodeDoubleClick]
     );
 
-    useEffect(() => {
-      if (nodeElement.current && (!isHidden || !isInitialized)) {
-        updateNodeDimensions([{ id, nodeElement: nodeElement.current, forceUpdate: true }]);
-      }
-    }, [id, isHidden, sourcePosition, targetPosition, type, isInitialized]);
-
     useEffect(() => {
       if (nodeElement.current) {
         const currNode = nodeElement.current;

src/components/NodesSelection/index.tsx

@@ -15,12 +15,14 @@ export interface NodesSelectionProps {
   onSelectionDragStop?: (event: MouseEvent, nodes: Node[]) => void;
   onSelectionContextMenu?: (event: MouseEvent, nodes: Node[]) => void;
 }
-
+// @TODO: work with nodeInternals instead of converting it to an array
 const selector = (s: ReactFlowState) => ({
   transform: s.transform,
   selectedNodesBbox: s.selectedNodesBbox,
   selectionActive: s.selectionActive,
-  selectedNodes: s.nodes.filter((n) => n.selected),
+  selectedNodes: Array.from(s.nodeInternals)
+    .filter(([_, n]) => n.selected)
+    .map(([_, n]) => n),
   snapToGrid: s.snapToGrid,
   snapGrid: s.snapGrid,
   updateNodePosition: s.updateNodePosition,

src/components/SelectionListener/index.tsx

@@ -8,8 +8,11 @@ interface SelectionListenerProps {
   onSelectionChange: OnSelectionChangeFunc;
 }
 
+// @TODO: work with nodeInternals instead of converting it to an array
 const selectedElementsSelector = (s: ReactFlowState) => ({
-  selectedNodes: s.nodes.filter((n) => n.selected),
+  selectedNodes: Array.from(s.nodeInternals)
+    .filter(([_, n]) => n.selected)
+    .map(([_, node]) => node),
   selectedEdges: s.edges.filter((e) => e.selected),
 });