refactor(flowrenderer): cleanup

src/additional-components/Background/index.tsx

@@ -22,7 +22,7 @@ const Background: FC<BackgroundProps> = ({
 }) => {
   const ref = useRef<SVGSVGElement>(null);
   const [patternId, setPatternId] = useState<string | null>(null);
-  const [x, y, scale] = useStore(transformSelector);
+  const [tX, tY, tScale] = useStore(transformSelector);
 
   useEffect(() => {
     // when there are multiple flows on a page we need to make sure that every background gets its own pattern.
@@ -31,18 +31,17 @@ const Background: FC<BackgroundProps> = ({
     setPatternId(`pattern-${index}`);
   }, []);
 
-  const bgClasses = cc(['react-flow__background', 'react-flow__container', className]);
+  const scaledGap = gap * tScale;
-  const scaledGap = gap * scale;
+  const xOffset = tX % scaledGap;
-  const xOffset = x % scaledGap;
+  const yOffset = tY % scaledGap;
-  const yOffset = y % scaledGap;
 
   const isLines = variant === BackgroundVariant.Lines;
   const bgColor = color ? color : defaultColors[variant];
-  const path = isLines ? createGridLinesPath(scaledGap, size, bgColor) : createGridDotsPath(size * scale, bgColor);
+  const path = isLines ? createGridLinesPath(scaledGap, size, bgColor) : createGridDotsPath(size * tScale, bgColor);
 
   return (
     <svg
-      className={bgClasses}
+      className={cc(['react-flow__background', 'react-flow__container', className])}
       style={{
         ...style,
         width: '100%',

src/container/EdgeRenderer/index.tsx

@@ -6,6 +6,8 @@ import { useStore } from '../../store';
 import ConnectionLine from '../../components/ConnectionLine/index';
 import MarkerDefinitions from './MarkerDefinitions';
 import { getEdgePositions, getHandle, getNodeData } from './utils';
+import useVisibleEdges from '../../hooks/useVisibleEdges';
+
 import {
   Position,
   Edge,
@@ -17,7 +19,6 @@ import {
   ReactFlowState,
   EdgeTypesWrapped,
 } from '../../types';
-import useVisibleEdges from '../../hooks/useVisibleEdges';
 
 interface EdgeRendererProps {
   edgeTypes: EdgeTypesWrapped;

src/container/FlowRenderer/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, memo, ReactNode, WheelEvent, MouseEvent } from 'react';
+import React, { memo, ReactNode, WheelEvent, MouseEvent } from 'react';
 import shallow from 'zustand/shallow';
 
 import { useStore, useStoreApi } from '../../store';
@@ -8,6 +8,7 @@ import { GraphViewProps } from '../GraphView';
 import ZoomPane from '../ZoomPane';
 import UserSelection from '../../components/UserSelection';
 import NodesSelection from '../../components/NodesSelection';
+
 import { ReactFlowState } from '../../types';
 
 interface FlowRendererProps
@@ -67,18 +68,14 @@ const FlowRenderer = ({
 
   useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode });
 
-  const onClick = useCallback(
+  const onClick = (event: MouseEvent) => {
-    (event: MouseEvent) => {
+    onPaneClick?.(event);
-      onPaneClick?.(event);
+    resetSelectedElements();
-      resetSelectedElements();
 
-      store.setState({ nodesSelectionActive: false });
+    store.setState({ nodesSelectionActive: false });
-    },
+  };
-    [onPaneClick]
+  const onContextMenu = (event: MouseEvent) => onPaneContextMenu?.(event);
-  );
+  const onWheel = (event: WheelEvent) => onPaneScroll?.(event);
-
-  const onContextMenu = useCallback((event: MouseEvent) => onPaneContextMenu?.(event), [onPaneContextMenu]);
-  const onWheel = useCallback((event: WheelEvent) => onPaneScroll?.(event), [onPaneScroll]);
 
   return (
     <ZoomPane

src/container/NodeRenderer/index.tsx

@@ -34,7 +34,6 @@ const selector = (s: ReactFlowState) => ({
   nodesConnectable: s.nodesConnectable,
   elementsSelectable: s.elementsSelectable,
   updateNodeDimensions: s.updateNodeDimensions,
-  nodeInternals: s.nodeInternals,
 });
 
 const NodeRenderer = (props: NodeRendererProps) => {

src/hooks/useVisibleNodes.ts

@@ -2,6 +2,7 @@ import { useCallback } from 'react';
 
 import { useStore } from '../store';
 import { getNodesInside } from '../utils/graph';
+
 import { ReactFlowState } from '../types';
 
 function useVisibleNodes(onlyRenderVisible: boolean) {
@@ -10,7 +11,7 @@ function useVisibleNodes(onlyRenderVisible: boolean) {
       (s: ReactFlowState) => {
         return onlyRenderVisible
           ? getNodesInside(s.nodeInternals, { x: 0, y: 0, width: s.width, height: s.height }, s.transform, true)
-          : Array.from(s.nodeInternals).map(([_, node]) => node);
+          : Array.from(s.nodeInternals.values());
       },
       [onlyRenderVisible]
     )