ef816cdcf4
- React 18 + TypeScript strict + AntV X6 2.x + AntD 5 + Zustand - Custom nodes: SiteNode, CrossDeviceNode, SpliceNode, DeviceNode, CardNode - 8-слойный автолейаут, порты (left/right), линии с цветами по статусу - Toolbar, дерево навигации, карточка объекта, таблица соединений - Контекстные меню, легенда, drag линий/нод, создание линий из портов - Моковые данные: 3 сайта, 10 устройств, 15 линий Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
64 lines
1.1 KiB
TypeScript
64 lines
1.1 KiB
TypeScript
import { PORT_RADIUS } from '../../../constants/sizes.ts';
|
|
|
|
export const portGroups = {
|
|
left: {
|
|
position: 'left',
|
|
attrs: {
|
|
circle: {
|
|
r: PORT_RADIUS,
|
|
magnet: true,
|
|
stroke: '#8c8c8c',
|
|
strokeWidth: 1,
|
|
fill: '#fff',
|
|
},
|
|
},
|
|
label: {
|
|
position: {
|
|
name: 'left',
|
|
args: { x: -8, y: 0 },
|
|
},
|
|
},
|
|
},
|
|
right: {
|
|
position: 'right',
|
|
attrs: {
|
|
circle: {
|
|
r: PORT_RADIUS,
|
|
magnet: true,
|
|
stroke: '#8c8c8c',
|
|
strokeWidth: 1,
|
|
fill: '#fff',
|
|
},
|
|
},
|
|
label: {
|
|
position: {
|
|
name: 'right',
|
|
args: { x: 8, y: 0 },
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
export function createPortItem(
|
|
portId: string,
|
|
side: 'left' | 'right',
|
|
label: string,
|
|
labelColor?: string,
|
|
) {
|
|
return {
|
|
id: portId,
|
|
group: side,
|
|
attrs: {
|
|
text: {
|
|
text: label,
|
|
fontSize: 8,
|
|
fill: labelColor || '#595959',
|
|
},
|
|
circle: {
|
|
fill: labelColor || '#fff',
|
|
stroke: labelColor || '#8c8c8c',
|
|
},
|
|
},
|
|
};
|
|
}
|