Add start/finish logic

components/FlowEditor/Flow.tsx

@@ -12,13 +12,17 @@ import LedNode from "./nodes/IO/LedNode";
 import SensorNode from "./nodes/IO/SensorNode";
 
 import DelayNode from "./nodes/Logic/DelayNode";
+import FinishNode from "./nodes/Logic/FinishNode";
 import MathNode from "./nodes/Logic/MathNode";
+import StartNode from "./nodes/Logic/StartNode";
 
 const nodeTypes = {
   led: LedNode,
   sensor: SensorNode,
   delay: DelayNode,
   math: MathNode,
+  finish: FinishNode,
+  start: StartNode,
 };
 
 const Flow = () => {

components/FlowEditor/Panel.tsx

@@ -1,7 +1,7 @@
 import { VscArrowLeft, VscArrowRight } from "react-icons/vsc";
 import useStore from "../../lib/FlowEditor/FlowEditorStore";
 import { LedNodeComponent, SensorNodeComponent } from "./nodes/IO/IO";
-import { DelayNodeComponent, MathNodeComponent } from "./nodes/Logic/Logic";
+import { DelayNodeComponent, MathNodeComponent , StartNodeComponent, FinishNodeComponent } from "./nodes/Logic/Logic";
 
 const Panel = () => {
   const { panelClosed, togglePanelState } = useStore();
@@ -29,6 +29,9 @@ const Panel = () => {
 
           <MathNodeComponent />
           <DelayNodeComponent />
+
+          <StartNodeComponent />
+          <FinishNodeComponent />
         </div>
       )}
     </aside>

components/FlowEditor/nodes/Logic/FinishNode.tsx

@@ -0,0 +1,24 @@
+import { Handle, Position } from "react-flow-renderer";
+import {
+    topDoubleRightStyle,
+} from "../styles";
+
+type FinishNodeProps = {};
+
+const FinishNode = (props: FinishNodeProps) => {
+  return (
+    <div className="finish-node node-layout">
+        <Handle
+            style={topDoubleRightStyle}
+            type="target"
+            position={Position.Top}
+        />
+      <div className="node-content">
+        <span className="node-title">Конец программы</span>
+      </div>
+
+    </div>
+  );
+};
+
+export default FinishNode;

components/FlowEditor/nodes/Logic/Logic.tsx

@@ -24,4 +24,26 @@ const MathNodeComponent = () => {
   );
 };
 
-export { DelayNodeComponent, MathNodeComponent };
+const FinishNodeComponent = () => {
+  return (
+    <Draggable data={{ type: "finish" }}>
+      <div className="node-component">
+        <div className={`node-component-handle ${groupColor}`} />
+        Конец программы
+      </div>
+    </Draggable>
+  );
+};
+
+const StartNodeComponent = () => {
+  return (
+    <Draggable data={{ type: "start" }}>
+      <div className="node-component">
+        <div className={`node-component-handle ${groupColor}`} />
+        Начало программы
+      </div>
+    </Draggable>
+  );
+};
+
+export { StartNodeComponent, FinishNodeComponent, DelayNodeComponent, MathNodeComponent };

components/FlowEditor/nodes/Logic/StartNode.tsx

@@ -0,0 +1,26 @@
+import { Handle, Position } from "react-flow-renderer";
+import {
+  bottomBigStyle,
+  bottomSmallStyle,
+} from "../styles";
+
+type StartNodeProps = {};
+
+const StartNode = (props: StartNodeProps) => {
+  return (
+    <div className="start-node node-layout">
+
+      <div className="node-content">
+        <span className="node-title">Начало программы</span>
+      </div>
+
+      <Handle
+        style={bottomSmallStyle}
+        type="source"
+        position={Position.Bottom}
+      />
+    </div>
+  );
+};
+
+export default StartNode;