106 lines
3.1 KiB
JavaScript
106 lines
3.1 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { useDrag } from 'react-dnd';
|
|
import Block from './Block';
|
|
import Connection from './Connection';
|
|
|
|
const Toolbar = ({ onAddBlock }) => {
|
|
//состояние для активной вкладки
|
|
const [activeTab, setActiveTab] = useState('logical');
|
|
|
|
const blockCategories = {
|
|
logical: [
|
|
{ type: 'AND', label: 'AND' },
|
|
{ type: 'OR', label: 'OR' },
|
|
{ type: 'NOT', label: 'NOT' },
|
|
{ type: 'XOR', label: 'XOR' } ],
|
|
arithmetic: [
|
|
{ type: 'ADD', label: 'ADD' },
|
|
{ type: 'SUB', label: 'SUB' },
|
|
{ type: 'MUL', label: 'MUL' },
|
|
{ type: 'DIV', label: 'DIV' } ],
|
|
timers: [
|
|
{ type: 'TON', label: 'TON' },
|
|
{ type: 'TOF', label: 'TOF' },
|
|
{ type: 'TP', label: 'TP' } ],
|
|
counters: [
|
|
{ type: 'CTU', label: 'CTU' },
|
|
{ type: 'CTD', label: 'CTD' },
|
|
{ type: 'CTUD', label: 'CTUD' } ],
|
|
comparisons: [
|
|
{ type: 'GT', label: 'GT' },
|
|
{ type: 'LT', label: 'LT' },
|
|
{ type: 'EQ', label: 'EQ' } ],
|
|
other: [
|
|
{ type: 'SR', label: 'SR' },
|
|
{ type: 'RS', label: 'RS' },
|
|
{ type: 'MOVE', label: 'MOVE' } ],
|
|
customized: []
|
|
};
|
|
|
|
const activeBlocks = blockCategories[activeTab] || [];
|
|
|
|
return (
|
|
<div className = "toolbar">
|
|
<h4 style = {{ marginTop: '3px', marginBottom: '15px' }}>Блоки</h4>
|
|
|
|
<div className="toolbarElements">
|
|
{/*//Вкладки*/}
|
|
<div className = "tabButtons">
|
|
{Object.keys (blockCategories).map((tab) => (
|
|
<button
|
|
key = {tab}
|
|
className = {activeTab === tab ? 'activeTab' : ''}
|
|
data-row = { tab === 'customized' || tab === 'other' || tab === 'comparisons' ? '2' : '1' }
|
|
onClick = { () => setActiveTab(tab) }
|
|
title = {
|
|
tab === 'logical' ? 'Логические' :
|
|
tab === 'arithmetic' ? 'Арифметические' :
|
|
tab === 'timers' ? 'Таймеры' :
|
|
tab === 'counters' ? 'Счётчики' :
|
|
tab === 'comparisons' ? 'Сравнения' :
|
|
tab === 'other' ? 'Другие' :
|
|
'Пользовательские'
|
|
}
|
|
> {
|
|
tab === 'logical' ? 'Логические' :
|
|
tab === 'arithmetic' ? 'Арифметические' :
|
|
tab === 'timers' ? 'Таймеры' :
|
|
tab === 'counters' ? 'Счётчики' :
|
|
tab === 'comparisons' ? 'Сравнения' :
|
|
tab === 'other' ? 'Другие' :
|
|
'Пользовательские'
|
|
} </button>
|
|
))}
|
|
</div>
|
|
|
|
{/*Блоки*/}
|
|
<div className = "toolbarBlocks">
|
|
{activeBlocks.map((block) => (
|
|
<DraggableBlock key = {block.type} block = {block} onAddBlock = {onAddBlock} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const DraggableBlock = ({ block, onAddBlock }) => {
|
|
const [{ isDragging }, drag] = useDrag(() => ({
|
|
type: 'block',
|
|
item: block,
|
|
end: (item, monitor) => {
|
|
if (monitor.didDrop()) {}
|
|
},
|
|
collect: (monitor) => ({ //состояние
|
|
isDragging: monitor.isDragging(),
|
|
}),
|
|
}));
|
|
|
|
return (
|
|
<div ref={drag} style={{ opacity: isDragging ? 0.7 : 1 }}>
|
|
<Block type={block.type} label={block.label} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Toolbar; |