Nodes selection store, linking and unlinking nodes

src/App.tsx

@@ -1,7 +1,8 @@
-import React, { createContext, useState } from 'react';
+import React, { createContext, useEffectEvent, useState } from 'react';
 import { Layout, theme, Breadcrumb } from 'antd';
 import Graph, { GraphModel } from './components/Graph';
 import type { BreadcrumbItemType } from 'antd/es/breadcrumb/Breadcrumb';
+import { useKeysdownStore } from './stores/ArrayStore';
 
 const { Content } = Layout;
 
@@ -10,6 +11,20 @@ const App: React.FC = () => {
     token: { colorBgContainer, borderRadiusLG },
   } = theme.useToken();
   const [graphLevel, setGraphLevel] = useState<BreadcrumbItemType[]>([])
+  const addKey = useKeysdownStore(state => state.add);
+  const removeKey = useKeysdownStore(state => state.remove);
+  const onKeydown = useEffectEvent((key: string) => {
+    addKey(key);    
+  });
+  const onKeyUp = useEffectEvent((key: string) => {
+    removeKey(key);
+  })
+  document.addEventListener('keydown', (ev) => {    
+    onKeydown(ev.key)
+  });
+  document.addEventListener('keyup', (ev) =>  {
+    onKeyUp(ev.key);
+  })
 
   return (
     <Layout>