From 7d0f700ef71e2b8029ae1f2b9d52cb28d3496029 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 10 Feb 2023 11:26:01 -0300
Subject: [PATCH] popUp logic implemneted

---
 space_flow/src/App.tsx                        |  9 ++++--
 .../src/CustomNodes/PromptNode/index.tsx      |  7 ++--
 space_flow/src/components/sidebar.tsx         |  2 +-
 space_flow/src/context/popUpContext.tsx       | 32 +++++++++++++++++++
 space_flow/src/flow/index.tsx                 | 11 ++-----
 5 files changed, 47 insertions(+), 14 deletions(-)
 create mode 100644 space_flow/src/context/popUpContext.tsx

diff --git a/space_flow/src/App.tsx b/space_flow/src/App.tsx
index d502173f7..2db14d63a 100644
--- a/space_flow/src/App.tsx
+++ b/space_flow/src/App.tsx
@@ -1,10 +1,13 @@
 import Flow from "./flow";
 import "./App.css";
+import PopUpProvider from "./context/popUpContext";
 function App() {
   return (
-    <div className="w-screen h-screen">
-      <Flow></Flow>
-    </div>
+    <PopUpProvider>
+      <div className="w-screen h-screen">
+        <Flow></Flow>
+      </div>
+    </PopUpProvider>
   );
 }
 
diff --git a/space_flow/src/CustomNodes/PromptNode/index.tsx b/space_flow/src/CustomNodes/PromptNode/index.tsx
index 361633004..ef25fa932 100644
--- a/space_flow/src/CustomNodes/PromptNode/index.tsx
+++ b/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>
diff --git a/space_flow/src/components/sidebar.tsx b/space_flow/src/components/sidebar.tsx
index 26bdd8e32..d7b9333c9 100644
--- a/space_flow/src/components/sidebar.tsx
+++ b/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>
     )
diff --git a/space_flow/src/context/popUpContext.tsx b/space_flow/src/context/popUpContext.tsx
new file mode 100644
index 000000000..506be2a38
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/space_flow/src/flow/index.tsx b/space_flow/src/flow/index.tsx
index e7a412d28..94a47db7b 100644
--- a/space_flow/src/flow/index.tsx
+++ b/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'))
-            const data = {...json}
-            data.onClick = console.log("clicked")
+            let data = JSON.parse(event.dataTransfer.getData('json'))
             // 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}