Merge branch 'main' into v11

packages/core/src/components/Handle/index.tsx

@@ -14,17 +14,8 @@ const alwaysValid = () => true;
 export type HandleComponentProps = HandleProps & Omit<HTMLAttributes<HTMLDivElement>, 'id'>;
 
 const selector = (s: ReactFlowState) => ({
-  onConnectAction: s.onConnect,
-  onConnectStart: s.onConnectStart,
-  onConnectStop: s.onConnectStop,
-  onConnectEnd: s.onConnectEnd,
-  onClickConnectStart: s.onClickConnectStart,
-  onClickConnectStop: s.onClickConnectStop,
-  onClickConnectEnd: s.onClickConnectEnd,
-  connectionMode: s.connectionMode,
   connectionStartHandle: s.connectionStartHandle,
   connectOnClick: s.connectOnClick,
-  hasDefaultEdges: s.hasDefaultEdges,
 });
 
 const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
@@ -45,25 +36,13 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
   ) => {
     const store = useStoreApi();
     const nodeId = useContext(NodeIdContext) as string;
-    const {
-      onConnectAction,
-      onConnectStart,
-      onConnectStop,
-      onConnectEnd,
-      onClickConnectStart,
-      onClickConnectStop,
-      onClickConnectEnd,
-      connectionMode,
-      connectionStartHandle,
-      connectOnClick,
-      hasDefaultEdges,
-    } = useStore(selector, shallow);
+    const { connectionStartHandle, connectOnClick } = useStore(selector, shallow);
 
     const handleId = id || null;
     const isTarget = type === 'target';
 
     const onConnectExtended = (params: Connection) => {
-      const { defaultEdgeOptions } = store.getState();
+      const { defaultEdgeOptions, onConnect: onConnectAction, hasDefaultEdges } = store.getState();
 
       const edgeParams = {
         ...defaultEdgeOptions,
@@ -80,26 +59,22 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
 
     const onMouseDownHandler = (event: React.MouseEvent<HTMLDivElement>) => {
       if (event.button === 0) {
-        handleMouseDown(
+        handleMouseDown({
           event,
           handleId,
           nodeId,
-          store.setState,
-          onConnectExtended,
+          onConnect: onConnectExtended,
           isTarget,
+          getState: store.getState,
+          setState: store.setState,
           isValidConnection,
-          connectionMode,
-          undefined,
-          undefined,
-          onConnectStart,
-          onConnectStop,
-          onConnectEnd
-        );
+        });
       }
       onMouseDown?.(event);
     };
 
     const onClick = (event: React.MouseEvent) => {
+      const { onClickConnectStart, onClickConnectStop, onClickConnectEnd, connectionMode } = store.getState();
       if (!connectionStartHandle) {
         onClickConnectStart?.(event, { nodeId, handleId, handleType: type });
         store.setState({ connectionStartHandle: { nodeId, type, handleId } });
@@ -128,28 +103,26 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
       store.setState({ connectionStartHandle: null });
     };
 
-    const handleClasses = cc([
-      'react-flow__handle',
-      `react-flow__handle-${position}`,
-      'nodrag',
-      className,
-      {
-        source: !isTarget,
-        target: isTarget,
-        connectable: isConnectable,
-        connecting:
-          connectionStartHandle?.nodeId === nodeId &&
-          connectionStartHandle?.handleId === handleId &&
-          connectionStartHandle?.type === type,
-      },
-    ]);
-
     return (
       <div
         data-handleid={handleId}
         data-nodeid={nodeId}
         data-handlepos={position}
-        className={handleClasses}
+        className={cc([
+          'react-flow__handle',
+          `react-flow__handle-${position}`,
+          'nodrag',
+          className,
+          {
+            source: !isTarget,
+            target: isTarget,
+            connectable: isConnectable,
+            connecting:
+              connectionStartHandle?.nodeId === nodeId &&
+              connectionStartHandle?.handleId === handleId &&
+              connectionStartHandle?.type === type,
+          },
+        ])}
         onMouseDown={onMouseDownHandler}
         onClick={connectOnClick ? onClick : undefined}
         ref={ref}