From 21450c0d99eccfa1f666f0c4d10af18e263b6d6d Mon Sep 17 00:00:00 2001
From: Klotske <ilya@mokhov.vg>
Date: Thu, 14 Jul 2022 20:01:46 +0000
Subject: [PATCH] Add node prototype

---
 components/FlowEditor/Flow.tsx       |  4 ++++
 components/FlowEditor/nodes/Node.tsx | 33 ++++++++++++++++++++++++++++
 lib/FlowEditor/nodes.ts              |  2 +-
 styles/globals.css                   |  6 +++++
 4 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 components/FlowEditor/nodes/Node.tsx

diff --git a/components/FlowEditor/Flow.tsx b/components/FlowEditor/Flow.tsx
index 56d3a0c..3a4fa7e 100644
--- a/components/FlowEditor/Flow.tsx
+++ b/components/FlowEditor/Flow.tsx
@@ -6,6 +6,9 @@ import ReactFlow, {
   ReactFlowInstance,
 } from "react-flow-renderer";
 import useStore from "../../lib/FlowEditor/FlowEditorStore";
+import GenericNode from "./nodes/Node";
+
+const nodeTypes = { generic: GenericNode };
 
 const Flow = () => {
   const [reactFlowInstance, setReactFlowInstance] =
@@ -24,6 +27,7 @@ const Flow = () => {
       <ReactFlow
         nodes={nodes}
         edges={edges}
+        nodeTypes={nodeTypes}
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
         onConnect={onConnect}
diff --git a/components/FlowEditor/nodes/Node.tsx b/components/FlowEditor/nodes/Node.tsx
new file mode 100644
index 0000000..86300f5
--- /dev/null
+++ b/components/FlowEditor/nodes/Node.tsx
@@ -0,0 +1,33 @@
+import styles from "./Node.module.css";
+import { Handle, Position } from "react-flow-renderer";
+
+type GenericNodeProps = {};
+
+const GenericNode = (props: GenericNodeProps) => {
+  return (
+    // Базовый класс generic-node - прописана ширина и положение, цвет текста и фона
+
+    // Nandle - ручка для коннекта. Можно задать оформление при помощи className, тип (target / source) и позицию
+
+    // Label - подпись ноды. Можно стилизовать
+
+    // Select - DropDown меню, можно стилизовать. Стоит класс nodrag для предотвращения залипания
+
+    <div className="generic-node">
+      <Handle className="" type="target" position={Position.Top} />
+
+      <div className="generic-node-content">
+        <label htmlFor="select">Выбери своего покемона: </label>
+        <select className="nodrag">
+          <option>Гена</option>
+          <option>Чайка</option>
+          <option>Бульбазавр</option>
+        </select>
+      </div>
+
+      <Handle className="" type="source" position={Position.Bottom} />
+    </div>
+  );
+};
+
+export default GenericNode;
diff --git a/lib/FlowEditor/nodes.ts b/lib/FlowEditor/nodes.ts
index 557c0ef..2b8f436 100644
--- a/lib/FlowEditor/nodes.ts
+++ b/lib/FlowEditor/nodes.ts
@@ -3,7 +3,7 @@ import { Node } from "react-flow-renderer";
 const initialNodes: Node[] = [
   {
     id: "1",
-    type: "input",
+    type: "generic",
     data: { label: "Старт" },
     position: { x: 0, y: 0 },
   },
diff --git a/styles/globals.css b/styles/globals.css
index 1af1574..a410046 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -63,4 +63,10 @@
 
   .flow {
   }
+
+  .generic-node {
+    @apply flex items-center justify-center
+    w-[150px] h-auto bg-white
+    rounded-sm;
+  }
 }