From 89b66be21584f16c62857046bda5f8cc3801cd1b Mon Sep 17 00:00:00 2001
From: Jason Zhu <jasonzhuyq@outlook.com>
Date: Mon, 29 May 2023 22:02:17 +1000
Subject: [PATCH] Guides -> Custom Nodes -> Using Multiple Handles

---
 src/App.tsx | 36 +++++++++++++++++++++++++++---------
 1 file changed, 27 insertions(+), 9 deletions(-)

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 };