Sync

components/BoardSettings/BoardSettings.tsx

@@ -0,0 +1,3 @@
+const BoardSettings = () => {};
+
+export default BoardSettings;

components/CodeEditor/CodeEditor.tsx

@@ -1,11 +1,13 @@
 import Editor from "@monaco-editor/react";
+import example from "./example.cpp";
 
 const CodeEditor = () => {
   return (
     <Editor
-      height="90vh"
+      height="100vh" // тут фигня, у меня кусок белый остается, высоты ему не хватает
       defaultLanguage="cpp"
-      defaultValue="// some comment"
+      theme="vs-dark"
+      defaultValue={example.value}
       options={{
         minimap: {
           enabled: false,

components/CodeEditor/example.cpp.ts

@@ -0,0 +1,17 @@
+const example = {
+  value: `void setup() {
+  pinMode(D0, OUTPUT);
+}
+  
+void loop() {
+  digitalWrite(D0, HIGH);
+
+  delay(1000);
+
+  digitalWrite(D0, LOW);
+
+  delay(2000);
+}`,
+};
+
+export default example;

components/FlowEditor/Flow.tsx

@@ -5,10 +5,25 @@ import ReactFlow, {
   Controls,
   ReactFlowInstance,
 } from "react-flow-renderer";
-import useStore from "../../lib/FlowEditor/FlowEditorStore";
-import { GenericNode } from "./nodes/Node";
 
-const nodeTypes = { generic: GenericNode };
+import useStore from "../../lib/FlowEditor/FlowEditorStore";
+
+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 = () => {
   const [reactFlowInstance, setReactFlowInstance] =

components/FlowEditor/Panel.tsx

@@ -1,6 +1,7 @@
 import { VscArrowLeft, VscArrowRight } from "react-icons/vsc";
 import useStore from "../../lib/FlowEditor/FlowEditorStore";
-import { GenericNodeComponent } from "./nodes/Node";
+import { LedNodeComponent, SensorNodeComponent } from "./nodes/IO/IO";
+import { DelayNodeComponent, MathNodeComponent , StartNodeComponent, FinishNodeComponent } from "./nodes/Logic/Logic";
 
 const Panel = () => {
   const { panelClosed, togglePanelState } = useStore();
@@ -22,9 +23,16 @@ const Panel = () => {
     >
       <PanelButton />
       {!panelClosed && (
-        <>
+        <div className="flex flex-col">
-          <GenericNodeComponent />
+          <SensorNodeComponent />
-        </>
+          <LedNodeComponent />
+
+          <MathNodeComponent />
+          <DelayNodeComponent />
+
+          <StartNodeComponent />
+          <FinishNodeComponent />
+        </div>
       )}
     </aside>
   );

components/FlowEditor/nodes/IO/IO.tsx

@@ -0,0 +1,27 @@
+import Draggable from "../../../DragNDrop/Draggable";
+
+const groupColor = "bg-red-700";
+
+const SensorNodeComponent = () => {
+  return (
+    <Draggable data={{ type: "sensor" }}>
+      <div className="node-component">
+        <div className={`node-component-handle ${groupColor}`} />
+        Сенсор
+      </div>
+    </Draggable>
+  );
+};
+
+const LedNodeComponent = () => {
+  return (
+    <Draggable data={{ type: "led" }}>
+      <div className="node-component">
+        <div className={`node-component-handle ${groupColor}`} />
+        Светодиод
+      </div>
+    </Draggable>
+  );
+};
+
+export { SensorNodeComponent, LedNodeComponent };

components/FlowEditor/nodes/IO/LedNode.tsx

@@ -0,0 +1,40 @@
+import { Handle, Position } from "react-flow-renderer";
+import {
+  bottomBigStyle,
+  bottomSmallStyle,
+  topBigStyle,
+  topDoubleRightStyle,
+} from "../styles";
+
+type LedNodeProps = {};
+
+const LedNode = (props: LedNodeProps) => {
+  return (
+    <div className="led-node node-layout">
+      <Handle
+        style={topDoubleRightStyle}
+        type="target"
+        position={Position.Top}
+      />
+
+      <div className="node-header">
+        <span className="node-title">Светодиод</span>
+      </div>
+
+      <div className="node-content">
+        <select className="node-content-select nodrag">
+          <option>Включить</option>
+          <option>Выключить</option>
+        </select>
+      </div>
+
+      <Handle
+        style={bottomSmallStyle}
+        type="source"
+        position={Position.Bottom}
+      />
+    </div>
+  );
+};
+
+export default LedNode;

components/FlowEditor/nodes/IO/SensorNode.tsx

@@ -0,0 +1,38 @@
+import { Handle, Position } from "react-flow-renderer";
+import {
+  bottomBigStyle,
+  bottomSmallStyle,
+  topBigStyle,
+  topDoubleRightStyle,
+} from "../styles";
+
+type SensorNodeProps = {};
+
+const SensorNode = (props: SensorNodeProps) => {
+  return (
+    <div className="sensor-node node-layout">
+      <Handle
+        style={topDoubleRightStyle}
+        type="target"
+        position={Position.Top}
+      />
+      <div className="node-header">
+        <span className="node-title">Сенсор</span>
+      </div>
+      <div className="node-content">
+        <select className="node-content-select nodrag">
+          <option>Температура</option>
+          <option>Освещенность</option>
+        </select>
+      </div>
+
+      <Handle
+        style={bottomSmallStyle}
+        type="source"
+        position={Position.Bottom}
+      />
+    </div>
+  );
+};
+
+export default SensorNode;

components/FlowEditor/nodes/Logic/DelayNode.tsx

@@ -0,0 +1,38 @@
+import { Handle, Position } from "react-flow-renderer";
+import {
+  bottomBigStyle,
+  bottomSmallStyle,
+  topBigStyle,
+  topDoubleRightStyle,
+} from "../styles";
+
+type DelayNodeProps = {};
+
+const DelayNode = (props: DelayNodeProps) => {
+  return (
+    <div className="delay-node node-layout">
+      <Handle
+        style={topDoubleRightStyle}
+        type="target"
+        position={Position.Top}
+      />
+      <div className="node-header">
+        <span className="node-title">Задержка</span>
+      </div>
+      <div className="node-content">
+        <select className="node-content-select nodrag">
+          <option>1 c</option>
+          <option>2 c</option>
+        </select>
+      </div>
+
+      <Handle
+        style={bottomSmallStyle}
+        type="source"
+        position={Position.Bottom}
+      />
+    </div>
+  );
+};
+
+export default DelayNode;

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

@@ -0,0 +1,54 @@
+import Draggable from "../../../DragNDrop/Draggable";
+
+const groupColor = "bg-blue-800";
+
+const DelayNodeComponent = () => {
+  return (
+    <Draggable data={{ type: "delay" }}>
+      <div className="node-component">
+        <div className={`node-component-handle ${groupColor}`} />
+        Задержка
+      </div>
+    </Draggable>
+  );
+};
+
+const MathNodeComponent = () => {
+  return (
+    <Draggable data={{ type: "math" }}>
+      <div className="node-component">
+        <div className={`node-component-handle ${groupColor}`} />
+        Математика
+      </div>
+    </Draggable>
+  );
+};
+
+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/MathNode.tsx

@@ -0,0 +1,51 @@
+import { Handle, Position } from "react-flow-renderer";
+import {
+  bottomBigStyle,
+  bottomSmallStyle,
+  topDoubleLeftStyle,
+  topDoubleRightStyle,
+} from "../styles";
+
+type MathNodeProps = {};
+
+const MathNode = (props: MathNodeProps) => {
+  return (
+    <div className="math-node node-layout">
+      <Handle
+        style={topDoubleLeftStyle}
+        id="in-a"
+        type="target"
+        position={Position.Top}
+      />
+      <Handle
+        style={topDoubleRightStyle}
+        id="in-b"
+        type="target"
+        position={Position.Top}
+      />
+
+      <div className="node-header">
+        <span className="node-title">Математика</span>
+      </div>
+
+      <div className="node-content">
+        <select className="node-content-select nodrag">
+          <option>+</option>
+          <option>-</option>
+          <option>*</option>
+          <option>/</option>
+          <option>√</option>
+          <option>**</option>
+        </select>
+      </div>
+
+      <Handle
+        style={bottomSmallStyle}
+        type="source"
+        position={Position.Bottom}
+      />
+    </div>
+  );
+};
+
+export default MathNode;

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;

components/FlowEditor/nodes/Node.tsx

@@ -33,8 +33,8 @@ const GenericNode = (props: GenericNodeProps) => {
 const GenericNodeComponent = () => {
   return (
     <Draggable data={{ type: "generic" }}>
-      <div className="node-component bg-red-700">
+      <div className="node-component ">
-        <div className="node-component-handle" />
+        <div className="node-component-handle bg-red-700" />
         Тест
       </div>
     </Draggable>

components/FlowEditor/nodes/basic/InputNode.tsx

@@ -1,39 +0,0 @@
-import styles from "./Node.module.css";
-import { Handle, Position } from "react-flow-renderer";
-
-type InputNodeProps = {};
-
-const InputNode = (props: InputNodeProps) => {
-  return (
-    // Базовый класс generic-node - прописана ширина и положение, цвет текста и фона
-
-    // Nandle - ручка для коннекта. Можно задать оформление при помощи className, тип (target / source) и позицию
-
-    // Label - подпись ноды. Можно стилизовать
-
-    // Select - DropDown меню, можно стилизовать. Стоит класс nodrag для предотвращения залипания
-
-    <div className="Input-node">
-      <Handle className="" type="target" position={Position.Top} />
-
-      <div className="generic-node-content">
-
-        <select className="nodrag">
-          <option>датчик газа</option>
-          <option>датчик температуры</option>
-          <option>датчик освещенности</option>
-          <option>логи</option>
-        </select>
-        <select className="nodrag">
-          <option>получить полный отчет</option>
-          <option>получить значение</option>
-        </select>
-
-      </div>
-
-      <Handle className="" type="source" position={Position.Bottom} />
-    </div>
-  );
-};
-
-export default InputNode;

components/FlowEditor/nodes/basic/MathNode.tsx

@@ -1,38 +0,0 @@
-import styles from "./Node.module.css";
-import { Handle, Position } from "react-flow-renderer";
-
-type MathNodeProps = {};
-
-const MathNode = (props: MathNodeProps) => {
-  return (
-    // Базовый класс generic-node - прописана ширина и положение, цвет текста и фона
-
-    // Nandle - ручка для коннекта. Можно задать оформление при помощи className, тип (target / source) и позицию
-
-    // Label - подпись ноды. Можно стилизовать
-
-    // Select - DropDown меню, можно стилизовать. Стоит класс nodrag для предотвращения залипания
-
-    <div className="math-node">
-      <Handle className="" type="target" position={Position.Top} />
-
-      <div className="generic-node-content">
-
-        <input> первое число</input>
-        <select className="nodrag">
-          <option>+</option>
-          <option>-</option>
-          <option>*</option>
-          <option>/</option>
-          <option>корень из</option>
-          <option>возвести в степень</option>
-        </select>
-        <input> второе число</input>
-      </div>
-
-      <Handle className="" type="source" position={Position.Bottom} />
-    </div>
-  );
-};
-
-export default MathNode;

components/FlowEditor/nodes/basic/OutputNode.tsx

@@ -1,33 +0,0 @@
-import styles from "./Node.module.css";
-import { Handle, Position } from "react-flow-renderer";
-
-type OutputNodeProps = {};
-
-const OutputNode = (props: OutputNodeProps) => {
-  return (
-    // Базовый класс generic-node - прописана ширина и положение, цвет текста и фона
-
-    // Nandle - ручка для коннекта. Можно задать оформление при помощи className, тип (target / source) и позицию
-
-    // Label - подпись ноды. Можно стилизовать
-
-    // Select - DropDown меню, можно стилизовать. Стоит класс nodrag для предотвращения залипания
-
-    <div className="output-node">
-      <Handle className="" type="target" position={Position.Top} />
-
-      <div className="generic-node-content">
-
-      <label htmlFor="select">Выбери своего покемона: </label>
-        <select className="nodrag">
-          <option>Включить</option>
-          <option>Выключить</option>
-        </select>
-      </div>
-
-      <Handle className="" type="source" position={Position.Bottom} />
-    </div>
-  );
-};
-
-export default OutputNode;

components/FlowEditor/nodes/basic/TimerNode.tsx

@@ -1,31 +0,0 @@
-import styles from "./Node.module.css";
-import { Handle, Position } from "react-flow-renderer";
-
-type TimerNodeProps = {};
-
-const TimerNode = (props: TimerNodeProps) => {
-  return (
-    // Базовый класс generic-node - прописана ширина и положение, цвет текста и фона
-
-    // Nandle - ручка для коннекта. Можно задать оформление при помощи className, тип (target / source) и позицию
-
-    // Label - подпись ноды. Можно стилизовать
-
-    // Select - DropDown меню, можно стилизовать. Стоит класс nodrag для предотвращения залипания
-
-    <div className="timer-node">
-      <Handle className="" type="target" position={Position.Top} />
-
-      <div className="generic-node-content">
-
-      <label htmlFor="input">Время задержки: </label>
-        <input> Время задержки</input>
-
-      </div>
-
-      <Handle className="" type="source" position={Position.Bottom} />
-    </div>
-  );
-};
-
-export default TimerNode;

components/FlowEditor/nodes/styles.ts

@@ -0,0 +1,80 @@
+const topDoubleLeftStyle = {
+  width: "20px",
+  height: "15px",
+  border: "none",
+  borderTopLeftRadius: "10px",
+  borderTopRightRadius: "10px",
+  borderBottomLeftRadius: "0px",
+  borderBottomRightRadius: "0px",
+  top: "-15px",
+  left: "20px",
+  background: "#6f6f6f",
+};
+
+const topDoubleRightStyle = {
+  width: "20px",
+  height: "15px",
+  border: "none",
+  borderTopLeftRadius: "10px",
+  borderTopRightRadius: "10px",
+  borderBottomLeftRadius: "0px",
+  borderBottomRightRadius: "0px",
+  top: "-15px",
+  background: "#6f6f6f",
+};
+
+const topBigStyle = {
+  width: "100%",
+  height: "10px",
+  border: "none",
+  borderTopLeftRadius: "10px",
+  borderTopRightRadius: "10px",
+  borderBottomLeftRadius: "0px",
+  borderBottomRightRadius: "0px",
+  top: "-10px",
+  background: "#6f6f6f",
+};
+
+const bottomBigStyle = {
+  width: "100%",
+  height: "10px",
+  border: "none",
+  borderTopLeftRadius: "0px",
+  borderTopRightRadius: "0px",
+  borderBottomLeftRadius: "10px",
+  borderBottomRightRadius: "10px",
+  bottom: "-10px",
+  background: "#6f6f6f",
+};
+
+const topSmallStyle = {
+  width: "20px",
+  height: "15px",
+  border: "none",
+  borderTopLeftRadius: "10px",
+  borderTopRightRadius: "10px",
+  borderBottomLeftRadius: "0px",
+  borderBottomRightRadius: "0px",
+  top: "-15px",
+  background: "#6f6f6f",
+};
+
+const bottomSmallStyle = {
+  width: "20px",
+  height: "15px",
+  border: "none",
+  borderTopLeftRadius: "0px",
+  borderTopRightRadius: "0px",
+  borderBottomLeftRadius: "10px",
+  borderBottomRightRadius: "10px",
+  bottom: "-15px",
+  background: "#6f6f6f",
+};
+
+export {
+  topBigStyle,
+  bottomBigStyle,
+  topDoubleLeftStyle,
+  topDoubleRightStyle,
+  bottomSmallStyle,
+};

lib/FlowEditor/nodes.ts

@@ -1,12 +1,6 @@
 import { Node } from "react-flow-renderer";
 
 const initialNodes: Node[] = [
-  {
-    id: "1",
-    type: "generic",
-    data: { label: "Старт" },
-    position: { x: 0, y: 0 },
-  },
 ];
 
 export default initialNodes;

public/manifest.json

@@ -4,7 +4,7 @@
   "theme_color": "#ffffff",
   "background_color": "#004740",
   "display": "fullscreen",
-  "orientation": "portrait",
+  "orientation": "landscape",
   "scope": "/",
   "start_url": "/",
   "icons": [

styles/globals.css

@@ -14,7 +14,7 @@
   .sidebar-icon {
     @apply relative flex items-center justify-center
                     h-14 w-14 my-2 mx-auto
-                    shadow-lg bg-gray-800 text-secondary
+                    shadow-lg bg-graySecondary text-secondary
                     hover:bg-green-900 hover:text-primary
                     rounded-3xl
                     hover:rounded-xl
@@ -57,27 +57,49 @@
   .flow-panel-button {
     @apply absolute flex items-center justify-center
     w-10 h-10 mt-4 -right-12
-    bg-gray-800 text-secondary
+    bg-grayPrimary text-secondary
     rounded-xl cursor-pointer;
   }
 
-  .flow {
+  .node-layout {
+    @apply flex flex-col items-center
+    rounded-lg
+    w-[150px] h-fit bg-grayPrimary
+    p-[4px];
   }
 
-  .generic-node {
+  .node-handle-big {
-    @apply flex flex-row items-center justify-center
+    @apply w-[150px] h-[20px];
-    w-[150px] h-auto bg-white
+  }
-    rounded-sm;
+
+  .node-header {
+    @apply flex flex-row w-full h-[20px] justify-between items-center
+    mb-1 px-[4px]
+    border-b border-b-gray-500;
+  }
+
+  .node-title {
+    @apply text-white text-xs font-bold;
+  }
+
+  .node-content {
+    @apply flex flex-col w-full h-fit
+    mb-[4px];
+  }
+
+  .node-content-select {
+    @apply bg-grayPrimary border border-gray-900 text-sm rounded-lg
+    text-white;
   }
 
   .node-component {
     @apply relative flex flex-row h-fit rounded-md
-    bg-gray-600
+    bg-grayPrimary
-    pr-2 my-2 py-1 mx-2
+    pr-2 my-1 mx-2
     text-white align-middle;
   }
 
   .node-component-handle {
-    @apply left-0 w-[12px] h-full mr-2 rounded-tl-md rounded-bl-md;
+    @apply left-0 w-[12px] h-[30px] mr-2 rounded-tl-md rounded-bl-md;
   }
 }

tailwind.config.js

@@ -7,11 +7,13 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        primary: "#39ff14", //39ff14
+        primary: "#39ff14", 
-        secondary: "#008a00", //78b856
+        secondary: "#008a00", 
         sidebar: "#333333",
         panel: "#252526",
         content: "#1e1e1e",
+        grayPrimary: "#4f4f4f",
+        graySecondary: "#202020",
       }
     },
   },