77 lines
2.2 KiB
JavaScript
77 lines
2.2 KiB
JavaScript
import React, {memo} from 'react';
|
|
|
|
export const ToolbarBlock = memo(({ block, onDragStart, scale = 1 }) => {
|
|
const inputCount = block.inputs.length
|
|
const outputCount = block.outputs.length
|
|
let countForHeight = Math.max(inputCount, outputCount, 2)
|
|
let blockHeight = (50 + (countForHeight - 1) * 34) / scale
|
|
let blockWidth = 60 / scale
|
|
if (['input', 'output', 'const', 'switch_type'].includes(block.type)) {
|
|
countForHeight = Math.max(inputCount, outputCount)
|
|
blockHeight = (40 + (countForHeight - 1) * 34) / scale
|
|
blockWidth = blockHeight * 2
|
|
}
|
|
block.widthPrew = blockWidth
|
|
block.heightPrew = blockHeight
|
|
|
|
function getCoords(count) {
|
|
const coords = []
|
|
if (count === 1)
|
|
coords.push(50)
|
|
else if (count < countForHeight) {
|
|
const step = blockHeight / (count + 1)
|
|
for (let i = 0; i < count; i++) {
|
|
const y = (i + 1) * step
|
|
coords.push((y / blockHeight) * 100)
|
|
}
|
|
}
|
|
else {
|
|
const step = (blockHeight - (50 / scale)) / (count - 1)
|
|
for (let i = 0; i < count; i++) {
|
|
const y = 25 / scale + i * step
|
|
coords.push((y / blockHeight) * 100)
|
|
}
|
|
}
|
|
return coords
|
|
}
|
|
|
|
const inputsCoords = getCoords(inputCount)
|
|
const outputsCoords = getCoords(outputCount)
|
|
|
|
return (
|
|
<div
|
|
className = "toolbar-block"
|
|
draggable
|
|
onDragStart = {(e) => onDragStart(e, block)}
|
|
style = {{
|
|
width: `${blockWidth}px`,
|
|
height: `${blockHeight}px`
|
|
}}
|
|
>
|
|
<div className = "preview-title" style = {{ fontSize: `${13 / scale}px` }}>{block.label}</div>
|
|
{inputsCoords.map((coord, ind) => (
|
|
<div key = {`t-in-${ind}`}
|
|
className = "preview-port"
|
|
style = {{
|
|
top: `${coord}%`,
|
|
left: 0,
|
|
backgroundColor: '#1717D8',
|
|
transform: 'translate(-50%, -50%)'
|
|
}}
|
|
/>
|
|
))}
|
|
|
|
{outputsCoords.map((coord, ind) => (
|
|
<div key = {`t-out-${ind}`}
|
|
className = "preview-port"
|
|
style = {{
|
|
top: `${coord}%`,
|
|
right: 0,
|
|
backgroundColor: '#D8000A',
|
|
transform: 'translate(50%, -50%)'
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}) |