refactor(handles): add connectionStart and connectionEnd handle to store, cleanup

examples/vite-app/src/examples/Validation/ConnectionStatus.tsx

@@ -6,15 +6,21 @@ import styles from './validation.module.css';
 const selector = (state: ReactFlowState) => ({
   connectionPosition: state.connectionPosition,
   connectionStatus: state.connectionStatus,
-  connectionNodeId: state.connectionNodeId,
-  connectionTargetNodeId: state.connectionTargetNodeId,
+  connectionStartNodeId: state.connectionStartHandle?.nodeId,
+  connectionStartHandleType: state.connectionStartHandle?.type,
+  connectionEndNodeId: state.connectionEndHandle?.nodeId,
+  connectionEndHandleType: state.connectionEndHandle?.type,
 });
 
 function ConnectionStatus() {
-  const { connectionPosition, connectionStatus, connectionNodeId, connectionTargetNodeId } = useStore(
-    selector,
-    shallow
-  );
+  const {
+    connectionPosition,
+    connectionStatus,
+    connectionStartNodeId,
+    connectionStartHandleType,
+    connectionEndNodeId,
+    connectionEndHandleType,
+  } = useStore(selector, shallow);
 
   if (!connectionPosition) {
     return null;
@@ -22,15 +28,17 @@ function ConnectionStatus() {
 
   return (
     <div className={styles.connectionstatus}>
-      {connectionNodeId ? (
+      {connectionStartNodeId ? (
         <>
           <div>
             <strong>connection info</strong>
           </div>
           <div>position: {JSON.stringify(connectionPosition)}</div>
-          <div>status: {JSON.stringify(connectionStatus)}</div>
-          <div>source node id: {JSON.stringify(connectionNodeId)}</div>
-          <div>target node id: {JSON.stringify(connectionTargetNodeId)}</div>
+          <div>status: {connectionStatus}</div>
+          <div>from node id: {connectionStartNodeId}</div>
+          <div>from handle type: {connectionStartHandleType}</div>
+          <div>to node id: {connectionEndNodeId}</div>
+          <div>to handle type: {connectionEndHandleType}</div>
         </>
       ) : (
         'no connection data'

examples/vite-app/src/examples/Validation/index.tsx

@@ -38,7 +38,7 @@ const CustomInput: FC<NodeProps> = () => (
 
 const CustomNode: FC<NodeProps> = ({ id }) => (
   <>
-    <Handle type="target" position={Position.Left} />
+    <Handle type="target" position={Position.Left} isConnectableStart={false} />
     <div>{id}</div>
     <Handle type="source" position={Position.Right} />
   </>