popup not working yet need to resolve bug

space_flow/src/App.tsx

@@ -1,11 +1,9 @@
 import Flow from "./flow";
 import "./App.css";
-import { Sidebar } from "./components/sidebar";
 function App() {
   return (
     <div className="w-screen h-screen">
-      <Sidebar/>
-      <Flow></Flow> 
+      <Flow></Flow>
     </div>
   );
 }

space_flow/src/CustomNodes/PromptNode/index.tsx

@@ -1,15 +1,22 @@
-import { Handle, Position } from 'reactflow';
+import { Handle, Position } from "reactflow";
 
-
-export default function PromptNode({data}){
-    console.log(data.template)
-    return(
-        <div 
-        className='prompt-Node relative bg-white h-16 w-40 border rounded-sm solid border-black flex flex-col justify-center'>
-            <Handle type='target' position={Position.Left}></Handle>
-            <label className='absolute text-sm -top-3 left-1 bg-white w-14 text-center'> Prompt</label>
-            <div className='w-full h-10 truncate bg-slate-50 text-xs'> {data.template}</div>
-            <Handle type='source' position={Position.Right}></Handle>
-        </div>
-    )
-}
+export default function PromptNode({ data }) {
+    console.log(data)
+  return (
+    <div
+      onClick={()=>data.onClick()}
+      className="prompt-Node relative bg-white h-16 w-40 border rounded-sm solid border-black flex flex-col justify-center"
+    >
+      <Handle type="target" position={Position.Left}></Handle>
+      <label className="absolute cursor-grab text-sm -top-3 left-1 bg-white w-14 text-center">
+        {" "}
+        Prompt
+      </label>
+      <div className="w-full h-10 truncate bg-slate-50 text-xs">
+        {" "}
+        {data.template}
+      </div>
+      <Handle type="source" position={Position.Right}></Handle>
+    </div>
+  );
+}

space_flow/src/components/sidebar.tsx

@@ -1,5 +1,16 @@
+import { prompt } from "../data_assets/prompt";
+
 export function Sidebar(){
+
+    function onDragStart(event:React.DragEvent<any>,nodeType){
+        event.dataTransfer.setData('application/reactflow',nodeType)
+        event.dataTransfer.effectAllowed = 'move'
+        event.dataTransfer.setData('json',JSON.stringify(prompt));
+    }
+
     return(
-    <div className="h-full w-48 bg-black absolute z-10" > ablue blue </div>
+    <div className="h-full w-48 bg-slate-200 absolute z-10 flex flex-col">
+        <div className="w-full text-center border border-black cursor-grab" onDragStart={(event)=>onDragStart(event,'promptNode')}> prompt Node</div>
+    </div>
     )
 }

space_flow/src/flow/index.tsx

@@ -1,44 +1,85 @@
 import 'reactflow/dist/style.css';
-import { useState, useCallback } from 'react';
-import ReactFlow, { addEdge, applyEdgeChanges, applyNodeChanges, Background, Controls, Position } from 'reactflow';
+import { useState, useCallback, useRef } from 'react';
+import ReactFlow, { addEdge, applyEdgeChanges, applyNodeChanges, Background, Controls, Position, useNodesState, useEdgesState, ReactFlowProvider } from 'reactflow';
 import type { Node, Edge } from 'reactflow';
 import TextUpdaterNode from '../CustomNodes/inputTextFolder';
 import '../CustomNodes/inputTextFolder/inputText.css'
 import PromptNode from '../CustomNodes/PromptNode';
 import { prompt } from '../data_assets/prompt';
+import { Sidebar } from '../components/sidebar';
     // outside component to avoid render trigger
     const nodeTypes = {textUpdater:TextUpdaterNode, promptNode:PromptNode}
 
     const rfStyle={
         backgroundCOlor:"#B8CEFF"
     }
+    let id = 0;
+    const getId = () => `dndnode_${id++}`;
 
 export default function Flow(){
     
-
-    const [nodes,setNodes] =  useState<Array<Node>>([{id:'1', position:{x:0,y:0}, data:{label:"node"},style:{color:"blue", width:100, height:40},sourcePosition:Position.Left,targetPosition:Position.Right},
-    {id:'2',data:{label:"world"},position:{x:100,y:100}}, {id:'4',data:prompt,position:{x:50,y:120},type:"promptNode"}])
-    const [edges,setEdges] = useState<Array<Edge>>([])
+    const reactFlowWrapper = useRef(null)
+    const [nodes,setNodes,onNodesChange] =  useNodesState([])
+    const [edges,setEdges, onEdgesChange] = useEdgesState([])
     //allow iteractive with the react flow
-    const onNodesChange = useCallback( (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),[] );
-    const onEdgesChange = useCallback( (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),[] );
+    // const onNodesChange = useCallback( (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),[] );
+    // const onEdgesChange = useCallback( (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),[] );
+    const [reactFlowInstance,setReactFlowInstance] = useState(null)
     const onConnect = useCallback((params)=>setEdges((eds)=>addEdge(params,eds)),[])
+    const onDragOver = useCallback((event) => {
+        event.preventDefault();
+        event.dataTransfer.dropEffect = 'move';
+      }, []);
+    const onDrop = useCallback(
+        (event)=>{
+            event.preventDefault();
+        
+            const reactflowBounds = reactFlowWrapper.current.getBoundingClientRect();
+            const type = event.dataTransfer.getData('application/reactflow');
+            let json = JSON.parse(event.dataTransfer.getData('json'))
+            const data = {...json}
+            data.onClick = console.log("clicked")
+            // check if the dropped element is valid
+            if (typeof type === 'undefined' || !type) {
+              return;
+            }
+
+            const position = reactFlowInstance.project({x:event.clientX-reactflowBounds.top, y:event.clientY - reactflowBounds.top})
+            const newNode = {
+                id:getId(),
+                type,
+                position,
+                data
+            }
+            setNodes((nds)=>nds.concat(newNode))
+
+
+
+        },[reactFlowInstance])
 
     return (
         //need parent component with width and height
         <div className='w-full h-full'>
+            <ReactFlowProvider>
+            <Sidebar/>
+            <div className='w-full h-full' ref={reactFlowWrapper}>
             <ReactFlow 
             nodes={nodes}
             edges={edges}
             onNodesChange={onNodesChange}
             onEdgesChange={onEdgesChange}
             onConnect = {onConnect}
+            onInit={setReactFlowInstance}
             nodeTypes={nodeTypes}
+            onDragOver={onDragOver}
+            onDrop={onDrop}
             fitView
             >
                 <Background/>
                     <Controls></Controls>
             </ReactFlow>
+            </div>
+            </ReactFlowProvider>
         </div>
     )
 }