Klotske
/
Asteri-Vostok
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: Klotske:main
Branches Tags
Klotske:main
Klotske:nodeDev
Klotske:devui
Klotske:dev
..
compare: Klotske:nodeDev
Branches Tags
Klotske:main
Klotske:nodeDev
Klotske:devui
Klotske:dev

No commits in common. "main" and "nodeDev" have entirely different histories.
main ... nodeDev

23 changed files with 170 additions and 470 deletions
Show Stats Expand all files Collapse all files

3
components/BoardSettings/BoardSettings.tsx
View File

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

6
components/CodeEditor/CodeEditor.tsx
View File

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

17
components/CodeEditor/example.cpp.ts
View File

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

19
components/FlowEditor/Flow.tsx
View File

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

16
components/FlowEditor/Panel.tsx
View File

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

27
components/FlowEditor/nodes/IO/IO.tsx
View File

@ -1,27 +0,0 @@
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 };

40
components/FlowEditor/nodes/IO/LedNode.tsx
View File

@ -1,40 +0,0 @@
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;

38
components/FlowEditor/nodes/IO/SensorNode.tsx
View File

@ -1,38 +0,0 @@
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;

38
components/FlowEditor/nodes/Logic/DelayNode.tsx
View File

@ -1,38 +0,0 @@
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;

24
components/FlowEditor/nodes/Logic/FinishNode.tsx
View File

@ -1,24 +0,0 @@
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;

54
components/FlowEditor/nodes/Logic/Logic.tsx
View File

@ -1,54 +0,0 @@
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,
};

51
components/FlowEditor/nodes/Logic/MathNode.tsx
View File

@ -1,51 +0,0 @@
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;

26
components/FlowEditor/nodes/Logic/StartNode.tsx
View File

@ -1,26 +0,0 @@
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;

4
components/FlowEditor/nodes/Node.tsx
View File

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

39
components/FlowEditor/nodes/basic/InputNode.tsx 100644
View File

@ -0,0 +1,39 @@
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;

38
components/FlowEditor/nodes/basic/MathNode.tsx 100644
View File

@ -0,0 +1,38 @@
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;

33
components/FlowEditor/nodes/basic/OutputNode.tsx 100644
View File

@ -0,0 +1,33 @@
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;

31
components/FlowEditor/nodes/basic/TimerNode.tsx 100644
View File

@ -0,0 +1,31 @@
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;

80
components/FlowEditor/nodes/styles.ts
View File

@ -1,80 +0,0 @@
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,
};

6
lib/FlowEditor/nodes.ts
View File

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

2
public/manifest.json
View File

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

42
styles/globals.css
View File

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

6
tailwind.config.js
View File

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