popUp logic implemneted

space_flow/src/App.tsx

@@ -1,10 +1,13 @@
 import Flow from "./flow";
 import "./App.css";
+import PopUpProvider from "./context/popUpContext";
 function App() {
   return (
+    <PopUpProvider>
       <div className="w-screen h-screen">
         <Flow></Flow>
       </div>
+    </PopUpProvider>
   );
 }
 

space_flow/src/CustomNodes/PromptNode/index.tsx

@@ -1,10 +1,13 @@
 import { Handle, Position } from "reactflow";
+import { useContext } from "react";
+import { PopUpContext } from "../../context/popUpContext";
+
 
 export default function PromptNode({ data }) {
-    console.log(data)
+  const {openPopUp} = useContext(PopUpContext)
   return (
     <div
-      onClick={()=>data.onClick()}
+      onClick={()=>openPopUp(<div className="absolute top-1/2 left-1/2">teste</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>

space_flow/src/components/sidebar.tsx

@@ -9,7 +9,7 @@ export function Sidebar(){
     }
 
     return(
-    <div className="h-full w-48 bg-slate-200 absolute z-10 flex flex-col">
+    <div className="h-full w-48 bg-slate-200 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/context/popUpContext.tsx

@@ -0,0 +1,32 @@
+import { createContext } from "react";
+import React, { useState } from 'react';
+
+export const PopUpContext = createContext({
+    openPopUp: (popUpElement: JSX.Element) => {},
+    closePopUp: () => {}
+});
+
+interface PopUpProviderProps {
+  children: React.ReactNode;
+}
+
+const PopUpProvider = ({ children }: PopUpProviderProps) => {
+  const [popUpElement, setPopUpElement] = useState<JSX.Element | null>(null);
+
+  const openPopUp = (element: JSX.Element) => {
+    setPopUpElement(element);
+  };
+
+  const closePopUp = () => {
+    setPopUpElement(null);
+  };
+
+  return (
+    <PopUpContext.Provider value={{ openPopUp, closePopUp }}>
+      {children}
+      {popUpElement}
+    </PopUpContext.Provider>
+  );
+};
+
+export default PopUpProvider;

space_flow/src/flow/index.tsx

@@ -21,9 +21,6 @@ export default function Flow(){
     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 [reactFlowInstance,setReactFlowInstance] = useState(null)
     const onConnect = useCallback((params)=>setEdges((eds)=>addEdge(params,eds)),[])
     const onDragOver = useCallback((event) => {
@@ -36,9 +33,7 @@ export default function Flow(){
         
             const reactflowBounds = reactFlowWrapper.current.getBoundingClientRect();
             const type = event.dataTransfer.getData('application/reactflow');
-            let json = JSON.parse(event.dataTransfer.getData('json'))
+            let data = 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;
@@ -59,10 +54,10 @@ export default function Flow(){
 
     return (
         //need parent component with width and height
-        <div className='w-full h-full'>
+        <div className='w-full h-full flex flex-row'>
             <ReactFlowProvider>
             <Sidebar/>
-            <div className='w-full h-full' ref={reactFlowWrapper}>
+            <div className='w-screen h-full' ref={reactFlowWrapper}>
             <ReactFlow 
             nodes={nodes}
             edges={edges}