Compare commits
No commits in common. "main" and "nodeDev" have entirely different histories.
|
|
@ -1,3 +0,0 @@
|
||||||
const BoardSettings = () => {};
|
|
||||||
|
|
||||||
export default BoardSettings;
|
|
||||||
|
|
@ -1,13 +1,11 @@
|
||||||
import Editor from "@monaco-editor/react";
|
import Editor from "@monaco-editor/react";
|
||||||
import example from "./example.cpp";
|
|
||||||
|
|
||||||
const CodeEditor = () => {
|
const CodeEditor = () => {
|
||||||
return (
|
return (
|
||||||
<Editor
|
<Editor
|
||||||
height="100vh" // тут фигня, у меня кусок белый остается, высоты ему не хватает
|
height="90vh"
|
||||||
defaultLanguage="cpp"
|
defaultLanguage="cpp"
|
||||||
theme="vs-dark"
|
defaultValue="// some comment"
|
||||||
defaultValue={example.value}
|
|
||||||
options={{
|
options={{
|
||||||
minimap: {
|
minimap: {
|
||||||
enabled: false,
|
enabled: false,
|
||||||
|
|
|
||||||
|
|
@ -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;
|
|
||||||
|
|
@ -5,25 +5,10 @@ import ReactFlow, {
|
||||||
Controls,
|
Controls,
|
||||||
ReactFlowInstance,
|
ReactFlowInstance,
|
||||||
} from "react-flow-renderer";
|
} from "react-flow-renderer";
|
||||||
|
|
||||||
import useStore from "../../lib/FlowEditor/FlowEditorStore";
|
import useStore from "../../lib/FlowEditor/FlowEditorStore";
|
||||||
|
import { GenericNode } from "./nodes/Node";
|
||||||
|
|
||||||
import LedNode from "./nodes/IO/LedNode";
|
const nodeTypes = { generic: GenericNode };
|
||||||
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 Flow = () => {
|
||||||
const [reactFlowInstance, setReactFlowInstance] =
|
const [reactFlowInstance, setReactFlowInstance] =
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
import { VscArrowLeft, VscArrowRight } from "react-icons/vsc";
|
import { VscArrowLeft, VscArrowRight } from "react-icons/vsc";
|
||||||
import useStore from "../../lib/FlowEditor/FlowEditorStore";
|
import useStore from "../../lib/FlowEditor/FlowEditorStore";
|
||||||
import { LedNodeComponent, SensorNodeComponent } from "./nodes/IO/IO";
|
import { GenericNodeComponent } from "./nodes/Node";
|
||||||
import { DelayNodeComponent, MathNodeComponent , StartNodeComponent, FinishNodeComponent } from "./nodes/Logic/Logic";
|
|
||||||
|
|
||||||
const Panel = () => {
|
const Panel = () => {
|
||||||
const { panelClosed, togglePanelState } = useStore();
|
const { panelClosed, togglePanelState } = useStore();
|
||||||
|
|
@ -23,16 +22,9 @@ const Panel = () => {
|
||||||
>
|
>
|
||||||
<PanelButton />
|
<PanelButton />
|
||||||
{!panelClosed && (
|
{!panelClosed && (
|
||||||
<div className="flex flex-col">
|
<>
|
||||||
<SensorNodeComponent />
|
<GenericNodeComponent />
|
||||||
<LedNodeComponent />
|
</>
|
||||||
|
|
||||||
<MathNodeComponent />
|
|
||||||
<DelayNodeComponent />
|
|
||||||
|
|
||||||
<StartNodeComponent />
|
|
||||||
<FinishNodeComponent />
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</aside>
|
</aside>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -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 };
|
|
||||||
|
|
@ -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;
|
|
||||||
|
|
@ -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;
|
|
||||||
|
|
@ -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;
|
|
||||||
|
|
@ -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;
|
|
||||||
|
|
@ -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,
|
|
||||||
};
|
|
||||||
|
|
@ -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;
|
|
||||||
|
|
@ -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;
|
|
||||||
|
|
@ -33,8 +33,8 @@ const GenericNode = (props: GenericNodeProps) => {
|
||||||
const GenericNodeComponent = () => {
|
const GenericNodeComponent = () => {
|
||||||
return (
|
return (
|
||||||
<Draggable data={{ type: "generic" }}>
|
<Draggable data={{ type: "generic" }}>
|
||||||
<div className="node-component ">
|
<div className="node-component bg-red-700">
|
||||||
<div className="node-component-handle bg-red-700" />
|
<div className="node-component-handle" />
|
||||||
Тест
|
Тест
|
||||||
</div>
|
</div>
|
||||||
</Draggable>
|
</Draggable>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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,
|
|
||||||
};
|
|
||||||
|
|
@ -1,6 +1,12 @@
|
||||||
import { Node } from "react-flow-renderer";
|
import { Node } from "react-flow-renderer";
|
||||||
|
|
||||||
const initialNodes: Node[] = [
|
const initialNodes: Node[] = [
|
||||||
|
{
|
||||||
|
id: "1",
|
||||||
|
type: "generic",
|
||||||
|
data: { label: "Старт" },
|
||||||
|
position: { x: 0, y: 0 },
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export default initialNodes;
|
export default initialNodes;
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
"theme_color": "#ffffff",
|
"theme_color": "#ffffff",
|
||||||
"background_color": "#004740",
|
"background_color": "#004740",
|
||||||
"display": "fullscreen",
|
"display": "fullscreen",
|
||||||
"orientation": "landscape",
|
"orientation": "portrait",
|
||||||
"scope": "/",
|
"scope": "/",
|
||||||
"start_url": "/",
|
"start_url": "/",
|
||||||
"icons": [
|
"icons": [
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
.sidebar-icon {
|
.sidebar-icon {
|
||||||
@apply relative flex items-center justify-center
|
@apply relative flex items-center justify-center
|
||||||
h-14 w-14 my-2 mx-auto
|
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
|
hover:bg-green-900 hover:text-primary
|
||||||
rounded-3xl
|
rounded-3xl
|
||||||
hover:rounded-xl
|
hover:rounded-xl
|
||||||
|
|
@ -57,49 +57,27 @@
|
||||||
.flow-panel-button {
|
.flow-panel-button {
|
||||||
@apply absolute flex items-center justify-center
|
@apply absolute flex items-center justify-center
|
||||||
w-10 h-10 mt-4 -right-12
|
w-10 h-10 mt-4 -right-12
|
||||||
bg-grayPrimary text-secondary
|
bg-gray-800 text-secondary
|
||||||
rounded-xl cursor-pointer;
|
rounded-xl cursor-pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.node-layout {
|
.flow {
|
||||||
@apply flex flex-col items-center
|
|
||||||
rounded-lg
|
|
||||||
w-[150px] h-fit bg-grayPrimary
|
|
||||||
p-[4px];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.node-handle-big {
|
.generic-node {
|
||||||
@apply w-[150px] h-[20px];
|
@apply flex flex-row items-center justify-center
|
||||||
}
|
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 {
|
.node-component {
|
||||||
@apply relative flex flex-row h-fit rounded-md
|
@apply relative flex flex-row h-fit rounded-md
|
||||||
bg-grayPrimary
|
bg-gray-600
|
||||||
pr-2 my-1 mx-2
|
pr-2 my-2 py-1 mx-2
|
||||||
text-white align-middle;
|
text-white align-middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.node-component-handle {
|
.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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,13 +7,11 @@ module.exports = {
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
colors: {
|
colors: {
|
||||||
primary: "#39ff14",
|
primary: "#39ff14", //39ff14
|
||||||
secondary: "#008a00",
|
secondary: "#008a00", //78b856
|
||||||
sidebar: "#333333",
|
sidebar: "#333333",
|
||||||
panel: "#252526",
|
panel: "#252526",
|
||||||
content: "#1e1e1e",
|
content: "#1e1e1e",
|
||||||
grayPrimary: "#4f4f4f",
|
|
||||||
graySecondary: "#202020",
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue