From 4b962e81d645fb8b9eda6148c26110cac22f9dff Mon Sep 17 00:00:00 2001
From: Jason Zhu <jasonzhuyq@outlook.com>
Date: Mon, 29 May 2023 21:57:28 +1000
Subject: [PATCH] Guides -> Custom Nodes -> Adding the Node Type

---
 src/App.tsx                          | 23 +++++++++-----
 src/components/TextUpdaterNode.tsx   | 45 +++++++++++++++++-----------
 src/components/text-updater-node.css | 13 ++++++++
 3 files changed, 55 insertions(+), 26 deletions(-)
 create mode 100644 src/components/text-updater-node.css

diff --git a/src/App.tsx b/src/App.tsx
index 14339ec..2c7da60 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -10,27 +10,31 @@ import ReactFlow, {
   NodeChange,
   EdgeChange,
   Connection,
+  NodeTypes,
 } from 'reactflow';
 
+import TextUpdaterNode from './components/TextUpdaterNode';
+
 // we have to import the React Flow styles for it to work
 import 'reactflow/dist/style.css';
 
+const rfStyle = {
+  backgroundColor: '#B8CEFF',
+};
+
 const initialEdges: Edge[] = [];
 
 const initialNodes: Node[] = [
   {
-    id: '1',
-    data: { label: 'Hello' },
+    id: 'node-1',
+    type: 'textUpdater',
     position: { x: 0, y: 0 },
-    type: 'input',
-  },
-  {
-    id: '2',
-    data: { label: 'World!' },
-    position: { x: 100, y: 100 },
+    data: { value: 123 },
   },
 ];
 
+const nodeTypes: NodeTypes = { textUpdater: TextUpdaterNode };
+
 const Flow = () => {
   const [nodes, setNodes] = useState(initialNodes);
   const [edges, setEdges] = useState(initialEdges);
@@ -60,6 +64,9 @@ const Flow = () => {
         edges={edges}
         onEdgesChange={onEdgesChange}
         onConnect={onConnect}
+        nodeTypes={nodeTypes}
+        fitView
+        style={rfStyle}
       >
         <Background />
         <Controls />
diff --git a/src/components/TextUpdaterNode.tsx b/src/components/TextUpdaterNode.tsx
index bb58b76..fe27cd9 100644
--- a/src/components/TextUpdaterNode.tsx
+++ b/src/components/TextUpdaterNode.tsx
@@ -1,32 +1,41 @@
 import { useCallback } from 'react';
 import { Handle, Position } from 'reactflow';
 
+import './text-updater-node.css';
+
 const handleStyle = { left: 10 };
 
-const TextUpdaterNode = ({ data }) => {
+const TextUpdaterNode = ({ data, isConnectable }) => {
   const onChange = useCallback(evt => {
     console.log(evt.target.value);
   }, []);
 
   return (
-    <>
-      <Handle type={'target'} position={Position.Top} />
-      <div>
-        <label htmlFor={'text'}>Text:</label>
-        <input
-          id={'text'}
-          name={'text'}
-          onChange={onChange}
-          className={'nodrag'}
-        />
-      </div>
-      <Handle type={'source'} position={Position.Bottom} id={'a'} />
+    <div className={'text-updater-node'}>
       <Handle
-        type={'source'}
-        position={Position.Bottom}
-        id={'b'}
-        style={handleStyle}
+        type={'target'}
+        position={Position.Top}
+        isConnectable={isConnectable}
       />
-    </>
+      <div>
+        <label htmlFor="text">Text:</label>
+        <input id="text" name="text" onChange={onChange} className="nodrag" />
+      </div>
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        id="a"
+        style={handleStyle}
+        isConnectable={isConnectable}
+      />
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        id="b"
+        isConnectable={isConnectable}
+      />
+    </div>
   );
 };
+
+export default TextUpdaterNode;
diff --git a/src/components/text-updater-node.css b/src/components/text-updater-node.css
new file mode 100644
index 0000000..404e749
--- /dev/null
+++ b/src/components/text-updater-node.css
@@ -0,0 +1,13 @@
+.text-updater-node {
+    height: 50px;
+    border: 1px solid #eee;
+    padding: 5px;
+    border-radius: 5px;
+    background: white;
+}
+
+.text-updater-node label {
+    display: block;
+    color: #777;
+    font-size: 12px;
+}