Merge branch 'main' into middlewares

packages/react/src/components/ConnectionLine/index.tsx

@@ -69,7 +69,7 @@ const ConnectionLine = <NodeType extends Node = Node>({
   CustomComponent,
   isValid,
 }: ConnectionLineProps<NodeType>) => {
-  const { inProgress, from, fromNode, fromHandle, fromPosition, to, toNode, toHandle, toPosition } =
+  const { inProgress, from, fromNode, fromHandle, fromPosition, to, toNode, toHandle, toPosition, pointer } =
     useConnection<NodeType>();
 
   if (!inProgress) {
@@ -92,6 +92,7 @@ const ConnectionLine = <NodeType extends Node = Node>({
         connectionStatus={getConnectionStatus(isValid)}
         toNode={toNode}
         toHandle={toHandle}
+        pointer={pointer}
       />
     );
   }

packages/react/src/components/EdgeWrapper/index.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useRef, type KeyboardEvent, useCallback, JSX } from 'react';
+import { useState, useMemo, useRef, type KeyboardEvent, useCallback, JSX, memo } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
 import {
@@ -15,7 +15,7 @@ import { builtinEdgeTypes, nullPosition } from './utils';
 import { EdgeUpdateAnchors } from './EdgeUpdateAnchors';
 import type { Edge, EdgeWrapperProps } from '../../types';
 
-export function EdgeWrapper<EdgeType extends Edge = Edge>({
+function EdgeWrapper<EdgeType extends Edge = Edge>({
   id,
   edgesFocusable,
   edgesReconnectable,
@@ -263,3 +263,5 @@ export function EdgeWrapper<EdgeType extends Edge = Edge>({
     </svg>
   );
 }
+
+export default memo(EdgeWrapper) as typeof EdgeWrapper;

packages/react/src/components/NodeWrapper/index.tsx

@@ -1,4 +1,4 @@
-import { type MouseEvent, type KeyboardEvent } from 'react';
+import { type MouseEvent, type KeyboardEvent, memo } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
 import {
@@ -20,7 +20,7 @@ import { arrowKeyDiffs, builtinNodeTypes, getNodeInlineStyleDimensions } from '.
 import { useNodeObserver } from './useNodeObserver';
 import type { InternalNode, Node, NodeWrapperProps } from '../../types';
 
-export function NodeWrapper<NodeType extends Node>({
+function NodeWrapper<NodeType extends Node>({
   id,
   onClick,
   onMouseEnter,
@@ -249,3 +249,5 @@ export function NodeWrapper<NodeType extends Node>({
     </div>
   );
 }
+
+export default memo(NodeWrapper) as typeof NodeWrapper;

packages/react/src/components/StoreUpdater/index.tsx

@@ -69,7 +69,6 @@ const reactFlowFieldsToTrack = [
   'onBeforeDelete',
   'debug',
   'autoPanSpeed',
-  'paneClickDistance',
   'ariaLabelConfig',
 ] as const;
 
@@ -93,7 +92,6 @@ const selector = (s: ReactFlowState) => ({
   setNodeExtent: s.setNodeExtent,
   reset: s.reset,
   setDefaultNodesAndEdges: s.setDefaultNodesAndEdges,
-  setPaneClickDistance: s.setPaneClickDistance,
 });
 
 const initPrevValues = {
@@ -109,7 +107,6 @@ const initPrevValues = {
   elementsSelectable: true,
   noPanClassName: 'nopan',
   rfId: '1',
-  paneClickDistance: 0,
 };
 
 export function StoreUpdater<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
@@ -124,7 +121,6 @@ export function StoreUpdater<NodeType extends Node = Node, EdgeType extends Edge
     setNodeExtent,
     reset,
     setDefaultNodesAndEdges,
-    setPaneClickDistance,
   } = useStore(selector, shallow);
   const store = useStoreApi<NodeType, EdgeType>();
 
@@ -155,7 +151,6 @@ export function StoreUpdater<NodeType extends Node = Node, EdgeType extends Edge
         else if (fieldName === 'maxZoom') setMaxZoom(fieldValue as number);
         else if (fieldName === 'translateExtent') setTranslateExtent(fieldValue as CoordinateExtent);
         else if (fieldName === 'nodeExtent') setNodeExtent(fieldValue as CoordinateExtent);
-        else if (fieldName === 'paneClickDistance') setPaneClickDistance(fieldValue as number);
         else if (fieldName === 'ariaLabelConfig')
           store.setState({ ariaLabelConfig: mergeAriaLabelConfig(fieldValue as AriaLabelConfig) });
         // Renamed fields