popup not working yet need to resolve bug
This commit is contained in:
anovazzi1
parent
7f1685e767
commit
34121f8580
7 changed files with 150 additions and 27 deletions
65
space_flow/package-lock.json
generated
65
space_flow/package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"strict": false,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"module": "esnext",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue