diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/NodeEditor.tsx | 67 |
1 files changed, 34 insertions, 33 deletions
diff --git a/src/components/NodeEditor.tsx b/src/components/NodeEditor.tsx index 758fb76..4cb7011 100644 --- a/src/components/NodeEditor.tsx +++ b/src/components/NodeEditor.tsx @@ -87,7 +87,7 @@ const NodeEditor = ({ project }: NodeEditorProps) => { const filter = pb.filter('project.id = {:id}', { id: project.id }); const projectNodes = await pb.collection('nodes').getFullList({ filter }); const projectLinks = await pb.collection('links').getFullList({ filter }); - const instances = projectNodes.map(node => instantiateNode(node.id, node.x, node.y, node.name)); + const instances = projectNodes.map(node => instantiateNode(node.id, node.x, node.y, nodeRegistry[node.type])); nodes.value = nodes.value.concat(instances); })(); }, []); @@ -237,14 +237,13 @@ const NodeEditor = ({ project }: NodeEditorProps) => { scale.value *= 1 + delta; }), []); - const addNode = useCallback(async (name: string, info: NodeInfo<any, any>) => { - const node = await pb.collection('nodes').create({ x: 100, y: 100, type: name, project: projectId, collapsed: false }); - alert(JSON.stringify(node)); + const addNode = useCallback(async (type: string, info: NodeInfo<any, any>) => { + const node = await pb.collection('nodes').create({ x: 100, y: 100, type, project: project.id, collapsed: false }); nodes.value = nodes.value.concat(instantiateNode(node.id, node.x, node.y, info)); }, []); return ( - <div class="__NodeEditor"> + <> <Toolbar title={project.name}> <ButtonMenu label="Add"> {Object.entries(nodeRegistry).map(([name, node]) => ( @@ -252,34 +251,36 @@ const NodeEditor = ({ project }: NodeEditorProps) => { ))} </ButtonMenu> </Toolbar> - <svg width="100vw" height="100vh" ref={svgRef} onMouseDown={onBgMouseDown} onWheel={onBgWheel}> - <pattern - id="bg-grid-major" - patternUnits="userSpaceOnUse" - x={offsetX} y={offsetY} - width={120 * scale.value} height={120 * scale.value} - > - <pattern id="bg-grid-minor" patternUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"> - <circle cx="2" cy="2" r="1" fill="var(--surface)" /> - </pattern> - <g transform={`scale(${scale})`}> - <rect fill="url(#bg-grid-minor)" x="0" y="0" width="100%" height="100%" /> - <circle cx="2" cy="2" r="2" fill="var(--surface)" /> - </g> - </pattern> - <rect fill="url(#bg-grid-major)" x="0" y="0" width="100%" height="100%" /> - <g transform={`translate(${offsetX},${offsetY}) scale(${scale})`}> - {allLinks.value.map(({fromX, fromY, toX, toY}) => ( - <Link fromX={fromX} fromY={fromY} toX={toX} toY={toY} /> - ))} - <SocketHandlers.Provider value={socketHandlers}> - {nodes.value.map(node => ( - <node.component id={node.id} x={node.x} y={node.y} inputs={node.inputs} /> - ))} - </SocketHandlers.Provider> - </g> - </svg> - </div> + <main> + <svg class="__NodeEditor" width="100vw" height="100vh" ref={svgRef} onMouseDown={onBgMouseDown} onWheel={onBgWheel}> + <pattern + id="bg-grid-major" + patternUnits="userSpaceOnUse" + x={offsetX} y={offsetY} + width={120 * scale.value} height={120 * scale.value} + > + <pattern id="bg-grid-minor" patternUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"> + <circle cx="2" cy="2" r="1" fill="color-mix(in srgb, var(--overlay) 25%, var(--surface))" /> + </pattern> + <g transform={`scale(${scale})`}> + <rect fill="url(#bg-grid-minor)" x="0" y="0" width="100%" height="100%" /> + <circle cx="2" cy="2" r="2" fill="color-mix(in srgb, var(--overlay) 25%, var(--surface))" /> + </g> + </pattern> + <rect fill="url(#bg-grid-major)" x="0" y="0" width="100%" height="100%" /> + <g transform={`translate(${offsetX},${offsetY}) scale(${scale})`}> + {allLinks.value.map(({fromX, fromY, toX, toY}) => ( + <Link fromX={fromX} fromY={fromY} toX={toX} toY={toY} /> + ))} + <SocketHandlers.Provider value={socketHandlers}> + {nodes.value.map(node => ( + <node.component id={node.id} x={node.x} y={node.y} inputs={node.inputs} /> + ))} + </SocketHandlers.Provider> + </g> + </svg> + </main> + </> ); }; |