- updated version;

src/components/FlowBuilder/index.js

@@ -1,19 +1,26 @@
 import React, { useEffect, useState } from 'react';
 import {
     ReactFlow,
-    Background,
-    useNodesState,
-    useEdgesState,
-    addEdge,
-    getIncomers,
-    getOutgoers,
-    getConnectedEdges,
+    Background
 } from '@xyflow/react';
 import { isEmpty } from 'ramda';
 
 import '@xyflow/react/dist/style.css';
 
-const FlowBuilder = ({ initialForm = 0, finalForm = 0, forms = [], updateFn }) => {
+// store
+import { useStore, storeSet } from '../../store';
+
+// nodes
+import NodeInitialForm from './components/NodeInitialForm';
+import NodeIntermediateForm from './components/NodeIntermediateForm';
+
+const nodeTypes = {
+    initialForm: NodeInitialForm,
+    intermediateForm: NodeIntermediateForm
+};
+
+const FlowBuilder = ({ initialForm = 0, finalForm = 0 }) => {
+    const forms = useStore().main.flowForms();
     const [nodes, setNodes] = useState([]);
     const [edges, setEdges] = useState([]);
 
@@ -35,22 +42,23 @@ const FlowBuilder = ({ initialForm = 0, finalForm = 0, forms = [], updateFn }) =
                 if (o.id === initialForm) {
                     obj = {
                         id: String(o.id),
-                        type: 'input',
-                        data: { label: o.label },
+                        type: 'initialForm',
+                        data: { label: o.label, id: o.id },
                         position: { x: 0, y: 0 },
                     }
                 } else if (o.id === finalForm) {
                     obj = {
                         id: String(o.id),
                         type: 'output',
-                        data: { label: o.label },
+                        data: { label: o.label, id: o.id },
                         position: { x: 0, y: 300 },
                     }
                 } else {
                     const x = coordinates.splice(0, 1);
                     obj = {
                         id: String(o.id),
-                        data: { label: o.label },
+                        type: 'intermediateForm',
+                        data: { label: o.label, id: o.id },
                         position: { x, y: 150 },
                     }
                 }
@@ -60,14 +68,14 @@ const FlowBuilder = ({ initialForm = 0, finalForm = 0, forms = [], updateFn }) =
             let edges = [];
             forms.map(o => {
                 if (o.id !== initialForm && o.id !== finalForm) {
-                    edges.push({ id: `${initialForm}->${o.id}`, source: String(initialForm), target: String(o.id) });
-                    edges.push({ id: `${o.id}->${finalForm}`, source: String(o.id), target: String(finalForm) });
+                    edges.push({ id: `${initialForm}->${o.id}`, source: String(initialForm), target: String(o.id), type: 'smoothstep' });
+                    edges.push({ id: `${o.id}->${finalForm}`, source: String(o.id), target: String(finalForm), type: 'smoothstep' });
                 }
             });
 
             setNodes(initialNodes);
             setEdges(edges);
-            updateFn(edges);
+            storeSet.main.flowEdges(edges);
         } else {
             setNodes([]);
             setEdges([]);
@@ -76,13 +84,14 @@ const FlowBuilder = ({ initialForm = 0, finalForm = 0, forms = [], updateFn }) =
 
     return (
         !isEmpty(nodes) && !isEmpty(edges)
-            ? <div className="reactFlow__wrapper">
+            ? <div className="flowBuilder__wrapper">
                 <ReactFlow
                     nodes={nodes}
                     edges={edges}
                     nodesDraggable={false}
                     nodesConnectable={false}
                     fitView
+                    nodeTypes={nodeTypes}
                     attributionPosition="top-right"
                 >
                     <Background variant="dots" gap={12} size={1}/>