59 lines
1.8 KiB
JavaScript
59 lines
1.8 KiB
JavaScript
import React, {memo} from 'react';
|
|
|
|
const CENTER_X = 4;
|
|
const CENTER_Y = 0;
|
|
|
|
const ToolbarBlock = ({ type, label, inputCount, outputCount }) => {
|
|
|
|
const blockHeight = 50 + (Math.max(inputCount, outputCount, 2) - 1) * 34;
|
|
const blockWidth = blockHeight / 1.4;
|
|
|
|
const renderBlock = () => {
|
|
const textX = type === 'or' ? 32 : 24;
|
|
const outputsCoord = [];
|
|
const inputsCoord = [];
|
|
|
|
if (inputCount === 1)
|
|
inputsCoord.push(blockHeight / 2);
|
|
else {
|
|
const stepInput = (blockHeight - 50) / (inputCount - 1);
|
|
for (let i = 0; i < inputCount; i++)
|
|
inputsCoord.push(25 + i * stepInput);
|
|
}
|
|
|
|
if (outputCount === 1)
|
|
outputsCoord.push(blockHeight / 2);
|
|
else {
|
|
const stepOutput = (blockHeight - 50) / (outputCount - 1);
|
|
for (let i = 0; i < outputCount; i++)
|
|
outputsCoord.push(25 + i * stepOutput);
|
|
}
|
|
|
|
return(
|
|
<svg
|
|
width={blockWidth + 2 * CENTER_X}
|
|
height={blockHeight}
|
|
viewBox={`0 0 ${blockWidth + 2 * CENTER_X} ${blockHeight}`}
|
|
style={{
|
|
overflow: 'visible',
|
|
transform: `translate(${CENTER_X}px, ${CENTER_Y}px)`
|
|
}}
|
|
>
|
|
<rect width = {blockWidth} height = {blockHeight} fill = "lightgray" stroke = "black"/>
|
|
<text x = {textX} y = "20" textAnchor = "start" fontSize = "14" style = {{pointerEvents: 'none'}}>{label}</text>
|
|
|
|
{//
|
|
inputsCoord.map((coord, ind) => (
|
|
<circle key = {`in-${ind + 1}`} cx = "0" cy = {coord} r = "4" fill = '#1717D8'/>
|
|
))}
|
|
{outputsCoord.map((coord, ind) => (
|
|
<circle key = {`out-${ind + 1}`} cx = {blockWidth} cy = {coord} r = "4" fill = '#D8000A'/>
|
|
))}
|
|
</svg>
|
|
);
|
|
};
|
|
|
|
return(renderBlock());
|
|
};
|
|
|
|
export default memo(ToolbarBlock); |