diff --git a/space_flow/package-lock.json b/space_flow/package-lock.json index 091affaf5..b974cc791 100644 --- a/space_flow/package-lock.json +++ b/space_flow/package-lock.json @@ -8,6 +8,7 @@ "name": "space_flow", "version": "0.1.0", "dependencies": { + "@floating-ui/react": "^0.19.1", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -2199,6 +2200,45 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@floating-ui/core": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.0.tgz", + "integrity": "sha512-GHUXPEhMEmTpnpIfesFA2KAoMJPb1SPQw964tToQwt+BbGXdhqTCWT1rOb0VURGylsxsYxiGMnseJ3IlclVpVA==" + }, + "node_modules/@floating-ui/dom": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.0.tgz", + "integrity": "sha512-QXzg57o1cjLz3cGETzKXjI3kx1xyS49DW9l7kV2jw2c8Yftd434t2hllX0sVGn2Q8MtcW/4pNm8bfE1/4n6mng==", + "dependencies": { + "@floating-ui/core": "^1.2.0" + } + }, + "node_modules/@floating-ui/react": { + "version": "0.19.1", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.19.1.tgz", + "integrity": "sha512-h7hr53rLp+VVvWvbu0dOBvGsLeeZwn1DTLIllIaLYjGWw20YhAgEqegHU+nc7BJ30ttxq4Sq6hqARm0ne6chXQ==", + "dependencies": { + "@floating-ui/react-dom": "^1.2.2", + "aria-hidden": "^1.1.3", + "tabbable": "^6.0.1" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/react-dom": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-1.2.2.tgz", + "integrity": "sha512-DbmFBLwFrZhtXgCI2ra7wXYT8L2BN4/4AMQKyu05qzsVji51tXOfF36VE2gpMB6nhJGHa85PdEg75FB4+vnLFQ==", + "dependencies": { + "@floating-ui/dom": "^1.1.1" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.8", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz", @@ -4843,6 +4883,26 @@ "sprintf-js": "~1.0.2" } }, + "node_modules/aria-hidden": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.2.tgz", + "integrity": "sha512-6y/ogyDTk/7YAe91T3E2PR1ALVKyM2QbTio5HwM+N1Q6CMlCKhvClyIjkckBswa0f2xJhjsfzIGa1yVSe1UMVA==", + "dependencies": { + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0", + "react": "^16.9.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/aria-query": { "version": "5.1.3", "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz", @@ -15749,6 +15809,11 @@ "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==" }, + "node_modules/tabbable": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.0.1.tgz", + "integrity": "sha512-SYJSIgeyXW7EuX1ytdneO5e8jip42oHWg9xl/o3oTYhmXusZVgiA+VlPvjIN+kHii9v90AmzTZEBcsEvuAY+TA==" + }, "node_modules/tailwindcss": { "version": "3.2.6", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.6.tgz", diff --git a/space_flow/package.json b/space_flow/package.json index ab88c1ac1..cb6ad1c9b 100644 --- a/space_flow/package.json +++ b/space_flow/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "@floating-ui/react": "^0.19.1", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", diff --git a/space_flow/src/App.tsx b/space_flow/src/App.tsx index 094c5ffe3..d502173f7 100644 --- a/space_flow/src/App.tsx +++ b/space_flow/src/App.tsx @@ -1,11 +1,9 @@ import Flow from "./flow"; import "./App.css"; -import { Sidebar } from "./components/sidebar"; function App() { return (
- - +
); } diff --git a/space_flow/src/CustomNodes/PromptNode/index.tsx b/space_flow/src/CustomNodes/PromptNode/index.tsx index cfa614a93..361633004 100644 --- a/space_flow/src/CustomNodes/PromptNode/index.tsx +++ b/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( -
- - -
{data.template}
- -
- ) -} \ No newline at end of file +export default function PromptNode({ data }) { + console.log(data) + return ( +
data.onClick()} + className="prompt-Node relative bg-white h-16 w-40 border rounded-sm solid border-black flex flex-col justify-center" + > + + +
+ {" "} + {data.template} +
+ +
+ ); +} diff --git a/space_flow/src/components/sidebar.tsx b/space_flow/src/components/sidebar.tsx index 73e4445b2..26bdd8e32 100644 --- a/space_flow/src/components/sidebar.tsx +++ b/space_flow/src/components/sidebar.tsx @@ -1,5 +1,16 @@ +import { prompt } from "../data_assets/prompt"; + export function Sidebar(){ + + function onDragStart(event:React.DragEvent,nodeType){ + event.dataTransfer.setData('application/reactflow',nodeType) + event.dataTransfer.effectAllowed = 'move' + event.dataTransfer.setData('json',JSON.stringify(prompt)); + } + return( -
ablue blue
+
+
onDragStart(event,'promptNode')}> prompt Node
+
) } \ No newline at end of file diff --git a/space_flow/src/flow/index.tsx b/space_flow/src/flow/index.tsx index c13a84945..e7a412d28 100644 --- a/space_flow/src/flow/index.tsx +++ b/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>([{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>([]) + 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
+ + +
+
+
) } \ No newline at end of file diff --git a/space_flow/tsconfig.json b/space_flow/tsconfig.json index 41929ff7c..3a05105de 100644 --- a/space_flow/tsconfig.json +++ b/space_flow/tsconfig.json @@ -10,7 +10,7 @@ "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, - "strict": true, + "strict": false, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "module": "esnext",