63 lines
2.2 KiB
JavaScript
63 lines
2.2 KiB
JavaScript
import React, { memo } from 'react';
|
||
import { Handle } from 'reactflow';
|
||
|
||
const NodeWrapper = memo(({ id, data, selected }) => {
|
||
return (
|
||
<div
|
||
style={{
|
||
...data.style,
|
||
position: 'relative',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
overflow: 'hidden', // Чтобы текст не выходил за границы
|
||
textOverflow: 'ellipsis', // Добавляем многоточие если текст не помещается
|
||
whiteSpace: 'nowrap', // Запрещаем перенос строк
|
||
padding: '0 8px', // Горизонтальный padding для текста
|
||
boxSizing: 'border-box' // Учитываем padding в общей ширине
|
||
}}
|
||
title={data.label} // Простой tooltip при наведении
|
||
>
|
||
{/* Хендл для входящих соединений */}
|
||
<Handle
|
||
type="target"
|
||
position="top"
|
||
style={{ visibility: 'hidden' }}
|
||
/>
|
||
|
||
{/* Обёртка для текста с ограничением ширины */}
|
||
<div style={{
|
||
maxWidth: '100%',
|
||
overflow: 'hidden',
|
||
textOverflow: 'ellipsis'
|
||
}}>
|
||
{data.label}
|
||
</div>
|
||
|
||
{data.hasChildren && (
|
||
<span style={{
|
||
position: 'absolute',
|
||
top: 5,
|
||
right: 5,
|
||
fontSize: '12px',
|
||
cursor: 'pointer',
|
||
background: '#fff',
|
||
padding: '2px 5px',
|
||
borderRadius: '3px',
|
||
border: '1px solid #aaa'
|
||
}}>
|
||
{data.collapsed ? '+' : '-'}
|
||
</span>
|
||
)}
|
||
|
||
{/* Хендл для исходящих соединений */}
|
||
<Handle
|
||
type="source"
|
||
position="bottom"
|
||
style={{ visibility: 'hidden' }}
|
||
/>
|
||
</div>
|
||
);
|
||
});
|
||
|
||
export default NodeWrapper; |