feat: added drag and drop menu for adding new nodes to flow

added a sidebar that supports drag and dropping new nodes from the sidebar into the flow editor.
also added a new package (neodrag) for easy draggable behavior outside the reactFlow editor.

ref: N25B-114

src/visualProgrammingUI/VisProgUI.tsx

@@ -8,6 +8,7 @@ import {
     Background,
     Controls,
     ReactFlow,
+    ReactFlowProvider,
     useNodesState,
     useEdgesState,
     reconnectEdge,
@@ -23,6 +24,8 @@ import {
     PhaseNode
 } from "./components/NodeDefinitions.tsx";
 
+import { Sidebar } from './components/DragDropSidebar.tsx';
+
 const nodeTypes = {
     start: StartNode,
     end: EndNode,
@@ -59,7 +62,7 @@ const defaultEdgeOptions = {
     },
 };
 
-const VisualProgrammingUI = ()=>  {
+const VisProgUI = ()=>  {
     const edgeReconnectSuccessful = useRef(true);
     const [nodes, , onNodesChange] = useNodesState(initialNodes);
     const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
@@ -89,27 +92,41 @@ const VisualProgrammingUI = ()=>  {
     }, [setEdges]);
 
     return (
-        <div style={{outlineStyle: 'solid', borderRadius: '10pt' ,marginInline: 'auto',width: '60vw', height: '60vh' }}>
-            <ReactFlow
-                nodes={nodes}
-                edges={edges}
-                defaultEdgeOptions={defaultEdgeOptions}
-                onNodesChange={onNodesChange}
-                onEdgesChange={onEdgesChange}
-                nodeTypes={nodeTypes}
-                snapToGrid
-                onReconnect={onReconnect}
-                onReconnectStart={onReconnectStart}
-                onReconnectEnd={onReconnectEnd}
-                onConnect={onConnect}
-                fitView
-                proOptions={{hideAttribution: true }}
-            >
-                <Controls />
-                <Background />
-            </ReactFlow>
+        <div style={{marginInline: 'auto',display: 'flex',justifySelf: 'center', padding:'10px', alignItems: 'center', width: '80vw', height: '60vh'}}>
+            <div style={{outlineStyle: 'solid', borderRadius: '10pt', marginInline: '1em',width: '70%', height:'100%' }}>
+                <ReactFlow
+                    nodes={nodes}
+                    edges={edges}
+                    defaultEdgeOptions={defaultEdgeOptions}
+                    onNodesChange={onNodesChange}
+                    onEdgesChange={onEdgesChange}
+                    nodeTypes={nodeTypes}
+                    snapToGrid
+                    onReconnect={onReconnect}
+                    onReconnectStart={onReconnectStart}
+                    onReconnectEnd={onReconnectEnd}
+                    onConnect={onConnect}
+                    fitView
+                    proOptions={{hideAttribution: true }}
+                >
+                    <Controls />
+                    <Background />
+                </ReactFlow>
+            </div>
+            <div style={{width: '20%', height: '100%'}}>
+                <Sidebar />
+            </div>
         </div>
+
     );
 };
 
-export default VisualProgrammingUI
+function VisualProgrammingUI(){
+    return (
+        <ReactFlowProvider>
+            <VisProgUI />
+        </ReactFlowProvider>
+    );
+}
+
+export default VisualProgrammingUI;