import React, { useState, useCallback } from 'react'; import type { LeftSidebarProps } from '../types/ui.types'; import { SEATING_TEMPLATES } from '../services/seatingService'; interface ToolDef { tool: string; title: string; label: string; kbd: string; svg: React.ReactNode; } const sectionAuswahlen: ToolDef[] = [ { tool: 'select', title: 'Auswählen (V)', label: 'Auswahl', kbd: 'V', svg: }, { tool: 'pan', title: 'Pan (P / Leertaste)', label: 'Pan', kbd: 'P', svg: }, { tool: 'measure', title: 'Messen', label: 'Messen', kbd: 'M', svg: }, ]; const sectionZeichnen: ToolDef[] = [ { tool: 'line', title: 'Linie (L)', label: 'Linie', kbd: 'L', svg: }, { tool: 'polyline', title: 'Polylinie (PL)', label: 'Polylinie', kbd: 'PL', svg: }, { tool: 'rect', title: 'Rechteck (REC)', label: 'Rechteck', kbd: 'REC', svg: }, { tool: 'circle', title: 'Kreis (C)', label: 'Kreis', kbd: 'C', svg: }, { tool: 'arc', title: 'Bogen (A)', label: 'Bogen', kbd: 'A', svg: }, { tool: 'polygon', title: 'Polygon (POL)', label: 'Polygon', kbd: 'POL', svg: }, { tool: 'chair', title: 'Stuhl (CH)', label: 'Stuhl', kbd: 'CH', svg: }, { tool: 'text', title: 'Text (T)', label: 'Text', kbd: 'T', svg: }, { tool: 'dimension', title: 'Bemaßung (DIM)', label: 'Bemaßung', kbd: 'DIM', svg: }, { tool: 'hatch', title: 'Schraffur (H)', label: 'Schraffur', kbd: 'H', svg: }, { tool: 'leader', title: 'Hinweislinie (LD)', label: 'Hinweis', kbd: 'LD', svg: }, { tool: 'revcloud', title: 'Revisionswolke (REV)', label: 'RevCloud', kbd: 'REV', svg: }, ]; const sectionBearbeiten: ToolDef[] = [ { tool: 'move', title: 'Verschieben (M)', label: 'Move', kbd: 'M', svg: }, { tool: 'copy', title: 'Kopieren (CO)', label: 'Copy', kbd: 'CO', svg: }, { tool: 'rotate', title: 'Rotieren (RO)', label: 'Rotate', kbd: 'RO', svg: }, { tool: 'scale', title: 'Skalieren (SC)', label: 'Scale', kbd: 'SC', svg: }, { tool: 'mirror', title: 'Spiegeln (MI)', label: 'Mirror', kbd: 'MI', svg: }, { tool: 'trim', title: 'Trimmen (TR)', label: 'Trim', kbd: 'TR', svg: }, { tool: 'extend', title: 'Verlängern (EX)', label: 'Extend', kbd: 'EX', svg: }, { tool: 'fillet', title: 'Verrunden (F)', label: 'Fillet', kbd: 'F', svg: }, { tool: 'offset', title: 'Versatz (O)', label: 'Offset', kbd: 'O', svg: }, { tool: 'delete', title: 'Löschen (E)', label: 'Löschen', kbd: 'E', svg: }, ]; const sectionBestuhlung: ToolDef[] = [ { tool: 'seating-row', title: 'Reihen-Bestuhlung', label: 'Reihe', kbd: 'R', svg: }, { tool: 'seating-block', title: 'Block-Bestuhlung', label: 'Block', kbd: 'B', svg: }, { tool: 'table', title: 'Tisch (TAB)', label: 'Tisch', kbd: 'TAB', svg: }, { tool: 'stage', title: 'Bühne', label: 'Bühne', kbd: 'S', svg: }, { tool: 'seating-template', title: 'Vorlagen', label: 'Vorlagen', kbd: 'TPL', svg: }, ]; const sections: Array<{ label: string; tools: ToolDef[] }> = [ { label: 'Auswählen / Anzeigen', tools: sectionAuswahlen }, { label: 'Zeichnen', tools: sectionZeichnen }, { label: 'Bearbeiten', tools: sectionBearbeiten }, { label: 'Bestuhlung', tools: sectionBestuhlung }, ]; const MIN_LEFTBAR_WIDTH = 140; const MAX_LEFTBAR_WIDTH = 400; const LeftSidebar: React.FC = ({ activeTool, onToolChange, selectedTemplate, onTemplateSelect, onCollapse, className, collapsed, onToggleCollapse, onGroup, onUngroup, leftbarWidth = 200, onWidthChange }) => { const [collapsedSections, setCollapsedSections] = useState>({}); const toggleSection = useCallback((label: string) => { setCollapsedSections((prev) => ({ ...prev, [label]: !prev[label] })); }, []); const handleResizeMouseDown = useCallback((e: React.MouseEvent) => { e.preventDefault(); e.stopPropagation(); const startClientX = e.clientX; const startWidth = leftbarWidth; const handleMouseMove = (ev: MouseEvent) => { const delta = ev.clientX - startClientX; const newWidth = Math.min(MAX_LEFTBAR_WIDTH, Math.max(MIN_LEFTBAR_WIDTH, startWidth + delta)); document.documentElement.style.setProperty('--leftbar-w', newWidth + 'px'); if (onWidthChange) { onWidthChange(newWidth); } }; const handleMouseUp = () => { document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('mouseup', handleMouseUp); document.body.style.cursor = ''; }; document.body.style.cursor = 'col-resize'; document.addEventListener('mousemove', handleMouseMove); document.addEventListener('mouseup', handleMouseUp); }, [leftbarWidth, onWidthChange]); const renderSectionLabel = (label: string, sectionKey: string) => (
toggleSection(sectionKey)} style={{ cursor: 'pointer', userSelect: 'none', display: 'flex', alignItems: 'center', gap: '4px' }} > {collapsedSections[sectionKey] ? '▶' : '▼'} {label}
); return ( ); }; export default LeftSidebar;