changed naming and streamlined connections

packages/react/src/store/index.ts

@@ -307,18 +307,25 @@ const createStore = ({
           options
         );
       },
-      cancelConnection: () =>
+      cancelConnection: () => {
+        const { connection } = get();
         set({
-          connectionStatus: null,
-          connectionStartHandle: null,
-          connectionEndHandle: null,
-        }),
+          connection: {
+            position: connection.position,
+            fromHandle: null,
+            toHandle: null,
+            isValid: null,
+          },
+        });
+      },
       updateConnection: (params) => {
-        const { connectionPosition } = get();
+        const { connection } = get();
 
         const currentConnection = {
-          ...params,
-          connectionPosition: params.connectionPosition ?? connectionPosition,
+          connection: {
+            ...params,
+            position: params.position ?? connection.position,
+          },
         };
 
         set(currentConnection);

packages/react/src/store/initialState.ts

@@ -76,8 +76,6 @@ const getInitialState = ({
     nodesSelectionActive: false,
     userSelectionActive: false,
     userSelectionRect: null,
-    connectionPosition: { x: 0, y: 0 },
-    connectionStatus: null,
     connectionMode: ConnectionMode.Strict,
     domNode: null,
     paneDragging: false,
@@ -103,8 +101,12 @@ const getInitialState = ({
 
     multiSelectionActive: false,
 
-    connectionStartHandle: null,
-    connectionEndHandle: null,
+    connection: {
+      fromHandle: null,
+      toHandle: null,
+      position: { x: 0, y: 0 },
+      isValid: null,
+    },
     connectionClickStartHandle: null,
     connectOnClick: true,