38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
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; |