import React from 'react'; import type { LayerPanelProps } from '../types/ui.types'; import type { CADLayer, CADElement } from '../types/cad.types'; import type { TreeNode } from '../types/ui.types'; import TreeView from './TreeView'; const elementTypeLabels: Record = { line: 'Linie', rect: 'Rechteck', circle: 'Kreis', arc: 'Bogen', polyline: 'Polylinie', polygon: 'Polygon', text: 'Text', dimension: 'Bemassung', leader: 'Hinweislinie', revcloud: 'Revisionswolke', hatch: 'Schraffur', chair: 'Stuhl', 'seating-row': 'Reihe', 'seating-block': 'Block', table: 'Tisch', stage: 'Buhne', 'seating-template': 'Vorlage', }; const layerIcon = ( ); const elementIcons: Record = { line: , rect: , circle: , arc: , polyline: , polygon: , text: , dimension: , leader: , revcloud: , hatch: , chair: , 'seating-row': , 'seating-block': , table: , stage: , 'seating-template': , }; const defaultIcon = ; const LayerPanel: React.FC = ({ layers, elements = [], activeLayerId, onSelectLayer, onAddLayer, onToggleLayer, onDeleteLayer, onRenameLayer, onDuplicateLayer, onToggleLock, onReorder, onAddSubLayer, onElementsDeleted, onToggleElementVisible, }) => { const buildTree = (parentId: string | null): TreeNode[] => { return layers .filter((l) => l.parentId === parentId) .sort((a, b) => a.sortOrder - b.sortOrder) .map((l) => { const layerElements = elements.filter((e) => e.layerId === l.id); const elementNodes: TreeNode[] = layerElements.map((e) => ({ id: e.id, name: elementTypeLabels[e.type] || e.type, icon: elementIcons[e.type] || defaultIcon, expanded: false, active: false, children: [], })); const subLayerNodes = buildTree(l.id); return { id: l.id, name: l.name, icon: layerIcon, expanded: false, active: l.id === activeLayerId, children: [...subLayerNodes, ...elementNodes], count: layerElements.length > 0 ? layerElements.length : undefined, } as TreeNode; }); }; const tree = buildTree(null); const handleAddSubLayer = (parentId: string) => { if (onAddSubLayer) { onAddSubLayer(parentId); } }; return (
Ebenen
{tree.length === 0 ? (
Keine Ebenen vorhanden
) : ( node.icon} renderActions={(node) => { const layer = layers.find((l) => l.id === node.id); if (layer) { return (
); } const element = elements.find((el) => el.id === node.id); if (element) { const isVisible = element.properties?.visible !== false; return (
); } return null; }} /> )}
); }; export default LayerPanel;