diff --git a/src/App.tsx b/src/App.tsx index 2c7da60..e5de084 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,16 +1,17 @@ -import { useState, useCallback } from 'react'; +import { useCallback, useState } from 'react'; import ReactFlow, { - Background, - Controls, + addEdge, applyEdgeChanges, applyNodeChanges, - addEdge, - Node, - Edge, - NodeChange, - EdgeChange, + Background, Connection, + Controls, + Edge, + EdgeChange, + Node, + NodeChange, NodeTypes, + Position, } from 'reactflow'; import TextUpdaterNode from './components/TextUpdaterNode'; @@ -22,7 +23,10 @@ const rfStyle = { backgroundColor: '#B8CEFF', }; -const initialEdges: Edge[] = []; +const initialEdges: Edge[] = [ + { id: 'edge-1', source: 'node-1', target: 'node-2', sourceHandle: 'a' }, + { id: 'edge-2', source: 'node-1', target: 'node-3', sourceHandle: 'b' }, +]; const initialNodes: Node[] = [ { @@ -31,6 +35,20 @@ const initialNodes: Node[] = [ position: { x: 0, y: 0 }, data: { value: 123 }, }, + { + id: 'node-2', + type: 'output', + targetPosition: Position.Top, + position: { x: 0, y: 200 }, + data: { label: 'node 2' }, + }, + { + id: 'node-3', + type: 'output', + targetPosition: Position.Top, + position: { x: 200, y: 200 }, + data: { label: 'node 3' }, + }, ]; const nodeTypes: NodeTypes = { textUpdater: TextUpdaterNode };