Sync

Addexample and fix logic
Add landscape mode
2022-08-09 19:13:22 +00:00 · 2022-07-15 07:31:02 +00:00 · 2022-07-15 06:15:58 +00:00 · 2022-07-15 09:13:22 +03:00 · 2022-07-15 08:57:42 +03:00 · 2022-07-15 06:32:00 +03:00
23 changed files with 471 additions and 171 deletions
--- a/components/BoardSettings/BoardSettings.tsx
+++ b/components/BoardSettings/BoardSettings.tsx
@ -0,0 +1,3 @@
+const BoardSettings = () => {};
+
+export default BoardSettings;
--- a/components/CodeEditor/CodeEditor.tsx
+++ b/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,
--- a/components/CodeEditor/example.cpp.ts
+++ b/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;
--- a/components/FlowEditor/Flow.tsx
+++ b/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] =
--- a/components/FlowEditor/Panel.tsx
+++ b/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 && (
-        <>
-          <GenericNodeComponent />
-        </>
+        <div className="flex flex-col">
+          <SensorNodeComponent />
+          <LedNodeComponent />
+
+          <MathNodeComponent />
+          <DelayNodeComponent />
+
+          <StartNodeComponent />
+          <FinishNodeComponent />
+        </div>
      )}
    </aside>
  );
--- a/components/FlowEditor/nodes/IO/IO.tsx
+++ b/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 };
--- a/components/FlowEditor/nodes/IO/LedNode.tsx
+++ b/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;
--- a/components/FlowEditor/nodes/IO/SensorNode.tsx
+++ b/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;
--- a/components/FlowEditor/nodes/Logic/DelayNode.tsx
+++ b/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;
--- a/components/FlowEditor/nodes/Logic/FinishNode.tsx
+++ b/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;
--- a/components/FlowEditor/nodes/Logic/Logic.tsx
+++ b/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,
+};
--- a/components/FlowEditor/nodes/Logic/MathNode.tsx
+++ b/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;
--- a/components/FlowEditor/nodes/Logic/StartNode.tsx
+++ b/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;
--- a/components/FlowEditor/nodes/Node.tsx
+++ b/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-handle" />
+      <div className="node-component ">
+        <div className="node-component-handle bg-red-700" />
        Тест
      </div>
    </Draggable>
--- a/components/FlowEditor/nodes/basic/InputNode.tsx
+++ b/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;
--- a/components/FlowEditor/nodes/basic/MathNode.tsx
+++ b/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;
--- a/components/FlowEditor/nodes/basic/OutputNode.tsx
+++ b/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;
--- a/components/FlowEditor/nodes/basic/TimerNode.tsx
+++ b/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;
--- a/components/FlowEditor/nodes/styles.ts
+++ b/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,
+};
--- a/lib/FlowEditor/nodes.ts
+++ b/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;
--- a/public/manifest.json
+++ b/public/manifest.json
@ -4,7 +4,7 @@
  "theme_color": "#ffffff",
  "background_color": "#004740",
  "display": "fullscreen",
-  "orientation": "portrait",
+  "orientation": "landscape",
  "scope": "/",
  "start_url": "/",
  "icons": [
--- a/styles/globals.css
+++ b/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 {
-    @apply flex flex-row items-center justify-center
-    w-[150px] h-auto bg-white
-    rounded-sm;
+  .node-handle-big {
+    @apply w-[150px] h-[20px];
+  }
+
+  .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
-    pr-2 my-2 py-1 mx-2
+    bg-grayPrimary
+    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;
  }
 }
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -7,11 +7,13 @@ module.exports = {
  theme: {
    extend: {
      colors: {
-        primary: "#39ff14", //39ff14
-        secondary: "#008a00", //78b856
+        primary: "#39ff14", 
+        secondary: "#008a00", 
        sidebar: "#333333",
        panel: "#252526",
        content: "#1e1e1e",
+        grayPrimary: "#4f4f4f",
+        graySecondary: "#202020",
      }
    },
  },
Author	SHA1	Message	Date
Klotske	1b060c185b	Sync	2022-08-09 19:13:22 +00:00
Klotske	bfa07d0058	Addexample and fix logic	2022-07-15 07:31:02 +00:00
Klotske	789ebe1133	Add landscape mode	2022-07-15 06:15:58 +00:00
Alex	55117d01c2	NO NODES????	2022-07-15 09:13:22 +03:00
Alex	0a3f3a8357	Add theme code editor	2022-07-15 08:57:42 +03:00
Alex	453e708e3f	Add start/finish logic	2022-07-15 06:32:00 +03:00
Alex	61d46edf69	Grey color	2022-07-15 06:08:43 +03:00
Klotske	f5ddac1b57	Add selector styling	2022-07-15 02:25:13 +00:00
Klotske	d836164ea5	Update Handle style	2022-07-15 02:14:49 +00:00
Alex	3ac4493f4c	add blue color	2022-07-15 05:02:03 +03:00
Klotske	d6f9f9cdf7	Visual work on Flow	2022-07-15 01:38:21 +00:00