Add node prototype

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}

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;

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

styles/globals.css

@@ -63,4 +63,10 @@
 
   .flow {
   }
+
+  .generic-node {
+    @apply flex items-center justify-center
+    w-[150px] h-auto bg-white
+    rounded-sm;
+  }
 }