refactor(elements): render only visible elements

src/components/Handle/handler.ts

@@ -1,8 +1,6 @@
 import { MouseEvent as ReactMouseEvent } from 'react';
-import { GetState } from 'zustand';
 
 import { getHostForElement } from '../../utils';
-import { ReactFlowState } from '../../types';
 
 import {
   ElementId,
@@ -105,8 +103,7 @@ export function onMouseDown(
   onEdgeUpdateEnd?: (evt: MouseEvent) => void,
   onConnectStart?: OnConnectStartFunc,
   onConnectStop?: OnConnectStopFunc,
-  onConnectEnd?: OnConnectEndFunc,
-  getState?: GetState<ReactFlowState>
+  onConnectEnd?: OnConnectEndFunc
 ): void {
   const reactFlowNode = (event.target as Element).closest('.react-flow');
   // when react-flow is used inside a shadow root we can't use document
@@ -180,8 +177,7 @@ export function onMouseDown(
     onConnectStop?.(event);
 
     if (isValid) {
-      const nodes = getState?.().nodes;
-      onConnect?.(connection, nodes || []);
+      onConnect?.(connection);
     }
 
     onConnectEnd?.(event);

src/components/Handle/index.tsx

@@ -4,7 +4,7 @@ import shallow from 'zustand/shallow';
 
 import { useStore } from '../../store';
 import NodeIdContext from '../../contexts/NodeIdContext';
-import { HandleProps, Connection, ElementId, Position, Node, ReactFlowState } from '../../types';
+import { HandleProps, Connection, ElementId, Position, ReactFlowState } from '../../types';
 
 import { onMouseDown, SetSourceIdFunc, SetPosition } from './handler';
 
@@ -52,9 +52,9 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
     const isTarget = type === 'target';
 
     const onConnectExtended = useCallback(
-      (params: Connection, nodes: Node[]) => {
-        onConnectAction?.(params, nodes);
-        onConnect?.(params, nodes);
+      (params: Connection) => {
+        onConnectAction?.(params);
+        onConnect?.(params);
       },
       [onConnectAction, onConnect]
     );

src/components/Nodes/wrapNode.tsx

@@ -12,6 +12,7 @@ const selector = (s: ReactFlowState) => ({
   unsetNodesSelection: s.unsetNodesSelection,
   updateNodePosition: s.updateNodePosition,
   updateNodeDimensions: s.updateNodeDimensions,
+  unselectNodesAndEdges: s.unselectNodesAndEdges,
 });
 
 export default (NodeComponent: ComponentType<NodeComponentProps>) => {
@@ -48,10 +49,13 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
     resizeObserver,
     dragHandle,
   }: WrapNodeProps) => {
-    const { addSelectedElements, unsetNodesSelection, updateNodePosition, updateNodeDimensions } = useStore(
-      selector,
-      shallow
-    );
+    const {
+      addSelectedElements,
+      unselectNodesAndEdges,
+      unsetNodesSelection,
+      updateNodePosition,
+      updateNodeDimensions,
+    } = useStore(selector, shallow);
     const nodeElement = useRef<HTMLDivElement>(null);
 
     const node = useMemo(() => ({ id, type, position: { x: xPos, y: yPos }, data }), [id, type, xPos, yPos, data]);
@@ -142,8 +146,8 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
             addSelectedElements([node]);
           }
         } else if (!selectNodesOnDrag && !isSelected && isSelectable) {
+          unselectNodesAndEdges();
           unsetNodesSelection();
-          addSelectedElements([]);
         }
       },
       [node, isSelected, selectNodesOnDrag, isSelectable, onNodeDragStart]

src/components/SelectionListener/index.tsx

@@ -1,26 +1,26 @@
 import { useEffect } from 'react';
 import shallow from 'zustand/shallow';
 
-import { Elements, ReactFlowState } from '../../types';
+import { ReactFlowState, OnSelectionChangeFunc } from '../../types';
 import { useStore } from '../../store';
 
 interface SelectionListenerProps {
-  onSelectionChange: (elements: Elements | null) => void;
+  onSelectionChange: OnSelectionChangeFunc;
 }
 
-const selectedElementsSelector = (s: ReactFlowState) => [
-  ...s.nodes.filter((n) => n.isSelected),
-  ...s.edges.filter((e) => e.isSelected),
-];
+const selectedElementsSelector = (s: ReactFlowState) => ({
+  selectedNodes: s.nodes.filter((n) => n.isSelected),
+  selectedEdges: s.edges.filter((e) => e.isSelected),
+});
 
 // This is just a helper component for calling the onSelectionChange listener.
 
 export default ({ onSelectionChange }: SelectionListenerProps) => {
-  const selectedElements = useStore(selectedElementsSelector, shallow);
+  const { selectedNodes, selectedEdges } = useStore(selectedElementsSelector, shallow);
 
   useEffect(() => {
-    onSelectionChange(selectedElements);
-  }, [selectedElements]);
+    onSelectionChange({ nodes: selectedNodes, edges: selectedEdges });
+  }, [selectedNodes, selectedEdges]);
 
   return null;
 };