diff options
| author | Sam Nystrom <sam@samnystrom.dev> | 2024-03-08 08:09:18 +0000 |
|---|---|---|
| committer | Sam Nystrom <sam@samnystrom.dev> | 2024-03-09 02:05:58 -0500 |
| commit | 9fb6fa12590609a4cd25d2e212166c61e1c23580 (patch) | |
| tree | 94f494fb4a0a841a8d17b3215227b7a7d77a3685 /src/NodeEditor.tsx | |
| parent | 5d06d2359e8ad50f7a61ecd1787a0ad558329964 (diff) | |
Add basic toolbar
Diffstat (limited to 'src/NodeEditor.tsx')
| -rw-r--r-- | src/NodeEditor.tsx | 12 |
1 files changed, 10 insertions, 2 deletions
diff --git a/src/NodeEditor.tsx b/src/NodeEditor.tsx index 0340a49..17e7c27 100644 --- a/src/NodeEditor.tsx +++ b/src/NodeEditor.tsx @@ -3,7 +3,7 @@ import { signal, computed, batch, useSignal, useComputed, Signal } from '@preact import { nodeRegistry } from './nodes'; import { SocketHandlers, SocketHandler, NodeInfo } from './node.tsx'; import { InputSocket } from './dataflow.ts'; -import { AddNodeMenu } from './AddNodeMenu.tsx'; +import { Toolbar } from './Toolbar.tsx'; import styles from './NodeEditor.module.css'; export const nodeFactory = () => { @@ -221,9 +221,16 @@ export const NodeEditor = () => { scale.value *= 1 + delta; }); + const onNodeAdded = (node: NodeInfo) => { + nodes.value = nodes.value.concat(instantiateNode(100, 100, node)); + }; + return ( <> - <AddNodeMenu nodes={nodeRegistry} onClick={node => nodes.value = nodes.value.concat(instantiateNode(100, 100, node))} /> + <header> + <Toolbar nodes={nodeRegistry} onNodeAdded={onNodeAdded} /> + </header> + <main> <svg width="100vw" height="100vh" ref={svgRef} onMouseDown={onBgMouseDown} onWheel={onBgWheel}> <pattern id="bg-grid-major" @@ -251,6 +258,7 @@ export const NodeEditor = () => { </SocketHandlers.Provider> </g> </svg> + </main> </> ); };
\ No newline at end of file |