refactor(onConnect): use onConnect handlers from store #2230

src/components/Handle/index.tsx

@@ -14,14 +14,6 @@ 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,
@@ -45,25 +37,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, hasDefaultEdges } = useStore(selector, shallow);
 
     const handleId = id || null;
     const isTarget = type === 'target';
 
     const onConnectExtended = (params: Connection) => {
-      const { defaultEdgeOptions } = store.getState();
+      const { defaultEdgeOptions, onConnect: onConnectAction } = store.getState();
 
       const edgeParams = {
         ...defaultEdgeOptions,
@@ -80,26 +60,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 } });