Leopoldadmin
1801 lines
72 KiB
TypeScript
1801 lines
72 KiB
TypeScript
import React, { useState, useCallback, useMemo, useEffect, useRef } from 'react';
|
||
import type {
|
||
Theme, RibbonTab, ViewMode, RightPanel, DrawerTab,
|
||
CursorPos, CommandHistoryEntry, KIMessage, KISuggestion,
|
||
} from './types/ui.types';
|
||
import type { CADElement, CADLayer, BlockDefinition, ImageElement } from './types/cad.types';
|
||
import { BlockService } from './services/blockService';
|
||
import { SeatingService } from './services/seatingService';
|
||
import type { ToolState } from './interaction';
|
||
import { GroupManager, type ElementGroup } from './tools/modification/GroupTool';
|
||
import Topbar from './components/Topbar';
|
||
import RibbonBar from './components/RibbonBar';
|
||
import LeftSidebar from './components/LeftSidebar';
|
||
import CanvasArea from './components/CanvasArea';
|
||
import RightSidebar from './components/RightSidebar';
|
||
import CommandLine from './components/CommandLine';
|
||
import StatusBar from './components/StatusBar';
|
||
import MobileDrawers from './components/MobileDrawers';
|
||
import BackgroundImport from './components/BackgroundImport';
|
||
import HistoryPanel from './components/HistoryPanel';
|
||
import SettingsModal from './components/SettingsModal';
|
||
import InlineTextEditor from './components/InlineTextEditor';
|
||
import { BackgroundService, type BackgroundConfig } from './services/backgroundService';
|
||
import { HistoryManager, type CADStateSnapshot, type HistoryEntry } from './history';
|
||
import { getCommandRegistry } from './services/commandRegistry';
|
||
import { importFile, type ImportResult } from './services/importService';
|
||
import { exportProject, downloadBlob, type ExportFormat } from './services/exportService';
|
||
import type { ProjectData } from './types/cad.types';
|
||
import { loadProjectDataTyped, createElementTyped, updateElement, deleteElement as apiDeleteElement, createLayerTyped, updateLayer, deleteLayer as apiDeleteLayer, createBlockTyped, updateBlock, deleteBlock as apiDeleteBlock, aiChat, getSetting, setSetting } from './services/api';
|
||
import { useYjsBinding } from './crdt';
|
||
import { registerBuiltinPlugins, pluginRegistry } from './plugins';
|
||
import type { PluginContext } from './plugins';
|
||
import type { UnitType } from './utils/format';
|
||
import './styles.css';
|
||
import './styles/auth.css';
|
||
import { useAuth } from './contexts/AuthContext';
|
||
import { Login } from './pages/Login';
|
||
import { Register } from './pages/Register';
|
||
import { Dashboard } from './pages/Dashboard';
|
||
|
||
// ─── Initial State ──────────────────────────────────────────
|
||
// Data is loaded from the backend on mount — start with empty state.
|
||
const initialLayers: CADLayer[] = [];
|
||
const initialBlocks: BlockDefinition[] = [];
|
||
|
||
const initialCommandHistory: CommandHistoryEntry[] = [
|
||
{ prefix: '·', text: 'Bereit', type: 'info' },
|
||
];
|
||
|
||
const initialKIMessages: KIMessage[] = [
|
||
{ id: 'ki-1', role: 'assistant', content: 'Hallo! Ich bin der KI Copilot. Wie kann ich helfen?' },
|
||
];
|
||
|
||
const initialKISuggestions: KISuggestion[] = [
|
||
{ id: 'sug-1', label: 'Bestuhlung automatisch generieren' },
|
||
{ id: 'sug-2', label: 'Maße analysieren' },
|
||
{ id: 'sug-3', label: 'Flächen berechnen' },
|
||
];
|
||
|
||
// ─── CAD Editor Component ───────────────────────────────
|
||
interface CADEditorProps {
|
||
projectId: string;
|
||
token: string;
|
||
onNavigateBack: () => void;
|
||
}
|
||
|
||
const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack }) => {
|
||
// Theme
|
||
const [theme, setTheme] = useState<Theme>('dark');
|
||
|
||
// Auth user for collaboration
|
||
const { user } = useAuth();
|
||
|
||
// Yjs collaboration binding
|
||
const collab = useYjsBinding({
|
||
docName: `project-${projectId}`,
|
||
userId: user?.id || 'anonymous',
|
||
userName: user?.name || 'Gast',
|
||
userColor: '#3498db',
|
||
enabled: true,
|
||
token: token || undefined,
|
||
});
|
||
|
||
// Project
|
||
const [projectName, setProjectName] = useState('Unbenannt');
|
||
const [savedStatus, setSavedStatus] = useState('Lädt…');
|
||
const [drawingId, setDrawingId] = useState<string | null>(null);
|
||
|
||
// Ribbon
|
||
const [activeRibbonTab, setActiveRibbonTab] = useState<RibbonTab>('start');
|
||
|
||
// Tools
|
||
const [activeTool, setActiveTool] = useState('select');
|
||
|
||
// Canvas / View
|
||
const [viewMode, setViewMode] = useState<ViewMode>('2d');
|
||
const [cursorPos, setCursorPos] = useState<CursorPos>({ x: 0, y: 0 });
|
||
const [gridEnabled, setGridEnabled] = useState(true);
|
||
const [orthoEnabled, setOrthoEnabled] = useState(false);
|
||
const [snapEnabled, setSnapEnabled] = useState(true);
|
||
const [polarEnabled, setPolarEnabled] = useState(false);
|
||
|
||
// Units
|
||
const [unit, setUnit] = useState<UnitType>('mm');
|
||
const [gridSize, setGridSize] = useState<number>(20);
|
||
const [scaleFactor, setScaleFactor] = useState<number>(1);
|
||
|
||
// Canvas appearance
|
||
const [canvasBgColor, setCanvasBgColor] = useState<string>('#1e1e2e');
|
||
const [gridColor, setGridColor] = useState<string>('#3a3a4a');
|
||
const [rulerEnabled, setRulerEnabled] = useState<boolean>(true);
|
||
|
||
// Right sidebar
|
||
const [activeRightPanel, setActiveRightPanel] = useState<RightPanel>('tool');
|
||
const [selectedElement, setSelectedElement] = useState<CADElement | null>(null);
|
||
const [selectedElementIds, setSelectedElementIds] = useState<string[]>([]);
|
||
const [layers, setLayers] = useState<CADLayer[]>(initialLayers);
|
||
const [activeLayerId, setActiveLayerId] = useState<string>('layer-0');
|
||
const [blocks, setBlocks] = useState<BlockDefinition[]>(initialBlocks);
|
||
const [blockCategory, setBlockCategory] = useState('Alle');
|
||
const [selectedTemplate, setSelectedTemplate] = useState<string | null>(null);
|
||
|
||
// Command line
|
||
const [commandHistory, setCommandHistory] = useState<CommandHistoryEntry[]>(initialCommandHistory);
|
||
|
||
// KI Copilot
|
||
const [kiMessages, setKIMessages] = useState<KIMessage[]>(initialKIMessages);
|
||
const [kiSuggestions] = useState<KISuggestion[]>(initialKISuggestions);
|
||
const [kiLoading, setKiLoading] = useState(false);
|
||
|
||
// Plugin system
|
||
const createPluginContext = useCallback((): PluginContext => ({
|
||
addElement: (el) => setElements((prev) => [...prev, el]),
|
||
removeElement: (id) => setElements((prev) => prev.filter((e) => e.id !== id)),
|
||
updateElement: (id, props) => setElements((prev) => prev.map((e) => (e.id === id ? { ...e, ...props } : e))),
|
||
getElements: () => elementsRef.current,
|
||
getLayers: () => layersRef.current,
|
||
getActiveLayerId: () => activeLayerIdRef.current,
|
||
showToast: (msg) => setCommandHistory((prev) => [...prev, { prefix: '·', text: msg, type: 'info' }]),
|
||
log: (msg) => setCommandHistory((prev) => [...prev, { prefix: '·', text: `[Plugin] ${msg}`, type: 'info' }]),
|
||
}), []);
|
||
|
||
useEffect(() => {
|
||
pluginRegistry.setContext(createPluginContext());
|
||
registerBuiltinPlugins();
|
||
pluginRegistry.initDefaults();
|
||
}, [createPluginContext]);
|
||
|
||
// Status bar – only count self as online when actually connected
|
||
const onlineCount = collab.status === 'connected' ? collab.cursors.length : 0;
|
||
|
||
// Mobile drawers
|
||
const [mobileLeftOpen, setMobileLeftOpen] = useState(false);
|
||
const [mobileRightOpen, setMobileRightOpen] = useState(false);
|
||
// Desktop sidebar collapse
|
||
const [leftSidebarCollapsed, setLeftSidebarCollapsed] = useState(false);
|
||
const [leftbarWidth, setLeftbarWidth] = useState(200);
|
||
const [rightbarWidth, setRightbarWidth] = useState(300);
|
||
const [rightSidebarCollapsed, setRightSidebarCollapsed] = useState(false);
|
||
const [settingsOpen, setSettingsOpen] = useState(false);
|
||
const [activeDrawerTab, setActiveDrawerTab] = useState<DrawerTab>('tool');
|
||
|
||
// Background
|
||
const [bgImportOpen, setBgImportOpen] = useState(false);
|
||
const [bgConfig, setBgConfig] = useState<BackgroundConfig | null>(null);
|
||
const bgServiceRef = React.useRef<BackgroundService>(new BackgroundService());
|
||
|
||
// Cleanup BackgroundService on unmount
|
||
useEffect(() => {
|
||
return () => {
|
||
bgServiceRef.current.dispose();
|
||
};
|
||
}, []);
|
||
|
||
// History panel
|
||
const [historyPanelOpen, setHistoryPanelOpen] = useState(false);
|
||
|
||
// Export format selector (cross-browser replacement for nwsave)
|
||
const [exportFormatOpen, setExportFormatOpen] = useState(false);
|
||
|
||
// Zoom command state — triggers zoom actions in CanvasArea via useEffect
|
||
const [zoomCommand, setZoomCommand] = useState<'in' | 'out' | 'fit' | '100' | null>(null);
|
||
|
||
// Elements + undo/redo (HistoryManager)
|
||
const [elements, setElements] = useState<CADElement[]>([]);
|
||
const historyManagerRef = React.useRef<HistoryManager>(new HistoryManager());
|
||
const [historyEntries, setHistoryEntries] = useState<HistoryEntry[]>([]);
|
||
const [toolState, setToolState] = useState<ToolState | null>(null);
|
||
|
||
const seatingServiceRef = useRef<SeatingService>(new SeatingService());
|
||
const seatCount = useMemo(() => {
|
||
return seatingServiceRef.current.countSeats(elements).total;
|
||
}, [elements]);
|
||
|
||
// Groups
|
||
const groupManagerRef = React.useRef(new GroupManager());
|
||
const [groups, setGroups] = useState<ElementGroup[]>([]);
|
||
|
||
// Issue #8: Refs for PluginContext to avoid stale closures.
|
||
// These refs are updated on every render so PluginContext getters always return current state.
|
||
const elementsRef = useRef(elements);
|
||
elementsRef.current = elements;
|
||
const layersRef = useRef(layers);
|
||
layersRef.current = layers;
|
||
const blocksRef = useRef(blocks);
|
||
blocksRef.current = blocks;
|
||
const groupsRef = useRef(groups);
|
||
groupsRef.current = groups;
|
||
const bgConfigRef = useRef(bgConfig);
|
||
bgConfigRef.current = bgConfig;
|
||
const activeLayerIdRef = useRef(activeLayerId);
|
||
activeLayerIdRef.current = activeLayerId;
|
||
const selectedElementIdsRef = useRef(selectedElementIds);
|
||
selectedElementIdsRef.current = selectedElementIds;
|
||
|
||
// Clipboard (for copy/paste)
|
||
const clipboardRef = React.useRef<CADElement[] | null>(null);
|
||
|
||
// ─── Handlers ───────────────────────────────────────────
|
||
const handleThemeToggle = useCallback(() => {
|
||
setTheme((prev) => (prev === 'dark' ? 'light' : 'dark'));
|
||
}, []);
|
||
|
||
const syncHistory = useCallback(() => {
|
||
setHistoryEntries(historyManagerRef.current.getHistory());
|
||
}, []);
|
||
|
||
const restoreSnapshot = useCallback((snap: CADStateSnapshot) => {
|
||
setElements(snap.elements);
|
||
setLayers(snap.layers);
|
||
setBlocks(snap.blocks);
|
||
setGroups(snap.groups);
|
||
setBgConfig(snap.bgConfig);
|
||
}, []);
|
||
|
||
const handleUndo = useCallback(() => {
|
||
const snap = historyManagerRef.current.undo();
|
||
if (snap) {
|
||
restoreSnapshot(snap);
|
||
syncHistory();
|
||
// Sync restored state to Yjs CRDT to prevent collab overwrite
|
||
if (collab.status === 'connected') {
|
||
for (const el of snap.elements) collab.setElement(el);
|
||
for (const layer of snap.layers) collab.setLayer(layer);
|
||
for (const block of snap.blocks) collab.setBlock(block);
|
||
}
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: 'Rückgängig: letzte Aktion', type: 'info' }]);
|
||
}
|
||
}, [restoreSnapshot, syncHistory, collab]);
|
||
|
||
const handleRedo = useCallback(() => {
|
||
const snap = historyManagerRef.current.redo();
|
||
if (snap) {
|
||
restoreSnapshot(snap);
|
||
syncHistory();
|
||
// Sync restored state to Yjs CRDT to prevent collab overwrite
|
||
if (collab.status === 'connected') {
|
||
for (const el of snap.elements) collab.setElement(el);
|
||
for (const layer of snap.layers) collab.setLayer(layer);
|
||
for (const block of snap.blocks) collab.setBlock(block);
|
||
}
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: 'Wiederherstellen: letzte Aktion', type: 'info' }]);
|
||
}
|
||
}, [restoreSnapshot, syncHistory, collab]);
|
||
|
||
const pushHistorySnapshot = useCallback((label: string) => {
|
||
historyManagerRef.current.pushSnapshot({
|
||
elements,
|
||
layers,
|
||
blocks,
|
||
groups,
|
||
bgConfig,
|
||
}, label);
|
||
syncHistory();
|
||
}, [elements, layers, blocks, groups, bgConfig, syncHistory]);
|
||
|
||
// Initialize HistoryManager with initial state on mount
|
||
const historyInitRef = React.useRef(false);
|
||
React.useEffect(() => {
|
||
if (historyInitRef.current) return;
|
||
historyInitRef.current = true;
|
||
historyManagerRef.current.initialize({
|
||
elements: [],
|
||
layers: initialLayers,
|
||
blocks: initialBlocks,
|
||
groups: [],
|
||
bgConfig: null,
|
||
});
|
||
syncHistory();
|
||
}, [syncHistory]);
|
||
|
||
// Load project data from backend on mount
|
||
const [dataLoaded, setDataLoaded] = useState(false);
|
||
React.useEffect(() => {
|
||
if (!projectId || !token) return;
|
||
let cancelled = false;
|
||
(async () => {
|
||
try {
|
||
setSavedStatus('Lädt…');
|
||
const data = await loadProjectDataTyped(token, projectId);
|
||
if (cancelled) return;
|
||
setProjectName(data.project.name);
|
||
setDrawingId(data.drawing?.id || null);
|
||
if (data.elements.length > 0) setElements(data.elements);
|
||
if (data.layers.length > 0) setLayers(data.layers);
|
||
if (data.blocks.length > 0) setBlocks(data.blocks);
|
||
// Ensure activeLayerId matches a real layer
|
||
if (data.layers.length > 0) {
|
||
const hasActiveLayer = data.layers.some(l => l.id === 'layer-0');
|
||
if (!hasActiveLayer) {
|
||
setActiveLayerId(data.layers[0].id);
|
||
}
|
||
}
|
||
// Create default layer if backend has none
|
||
if (data.layers.length === 0 && data.drawing) {
|
||
const defaultLayer: CADLayer = {
|
||
id: 'layer-0',
|
||
name: 'Layer 0',
|
||
visible: true,
|
||
locked: false,
|
||
color: '#ffffff',
|
||
lineType: 'solid',
|
||
transparency: 0,
|
||
sortOrder: 0,
|
||
parentId: null,
|
||
};
|
||
createLayerTyped(token, data.drawing.id, defaultLayer).catch(() => {});
|
||
setLayers([defaultLayer]);
|
||
setActiveLayerId('layer-0');
|
||
}
|
||
setSavedStatus('gespeichert');
|
||
setDataLoaded(true);
|
||
// Re-initialize HistoryManager with loaded project state so undo does not jump back to empty initial state
|
||
historyManagerRef.current.initialize({
|
||
elements: data.elements,
|
||
layers: data.layers.length > 0 ? data.layers : initialLayers,
|
||
blocks: data.blocks,
|
||
groups: [],
|
||
bgConfig: null,
|
||
});
|
||
syncHistory();
|
||
// Push initial data to Yjs CRDT after load
|
||
// Issue #7: Only push to CRDT if backend data actually has content.
|
||
// Pushing empty arrays would wipe existing CRDT data from other connected clients.
|
||
const bgConfigs = bgConfig ? [bgConfig] : [];
|
||
const hasContent = data.elements.length > 0 || data.layers.length > 0 || data.blocks.length > 0 || groups.length > 0 || bgConfigs.length > 0;
|
||
if (collab.status === 'connected' && hasContent) {
|
||
collab.loadFromState({
|
||
elements: data.elements,
|
||
layers: data.layers,
|
||
blocks: data.blocks,
|
||
groups,
|
||
bgConfigs,
|
||
});
|
||
}
|
||
} catch (err) {
|
||
// Ignore race condition errors from React StrictMode double-render
|
||
if (cancelled) return;
|
||
if (err instanceof Error && err.message.includes('Superseded')) return;
|
||
console.error('Failed to load project:', err);
|
||
setSavedStatus('Fehler beim Laden');
|
||
}
|
||
})();
|
||
return () => { cancelled = true; };
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [projectId, token]);
|
||
|
||
// Load unit settings from backend on mount
|
||
React.useEffect(() => {
|
||
if (!token) return;
|
||
let cancelled = false;
|
||
(async () => {
|
||
try {
|
||
const [unitSetting, gridSetting, scaleSetting] = await Promise.all([
|
||
getSetting(token, 'cad.unit').catch(() => null),
|
||
getSetting(token, 'cad.gridSize').catch(() => null),
|
||
getSetting(token, 'cad.scaleFactor').catch(() => null),
|
||
]);
|
||
if (cancelled) return;
|
||
if (unitSetting && (unitSetting.value === 'mm' || unitSetting.value === 'cm' || unitSetting.value === 'm')) {
|
||
setUnit(unitSetting.value as UnitType);
|
||
}
|
||
if (gridSetting) {
|
||
const gs = parseFloat(gridSetting.value);
|
||
if (!isNaN(gs) && gs > 0) setGridSize(gs);
|
||
}
|
||
if (scaleSetting) {
|
||
const sf = parseFloat(scaleSetting.value);
|
||
if (!isNaN(sf) && sf > 0) setScaleFactor(sf);
|
||
}
|
||
} catch {
|
||
// Settings not yet stored — use defaults
|
||
}
|
||
})();
|
||
return () => { cancelled = true; };
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [token]);
|
||
|
||
// Save unit settings to backend when they change
|
||
const handleUnitChange = useCallback((newUnit: UnitType) => {
|
||
setUnit(newUnit);
|
||
if (token) setSetting(token, 'cad.unit', newUnit).catch(() => {});
|
||
}, [token]);
|
||
|
||
const handleGridSizeChange = useCallback((newSize: number) => {
|
||
setGridSize(newSize);
|
||
if (token) setSetting(token, 'cad.gridSize', String(newSize)).catch(() => {});
|
||
}, [token]);
|
||
|
||
const handleScaleFactorChange = useCallback((newFactor: number) => {
|
||
setScaleFactor(newFactor);
|
||
if (token) setSetting(token, 'cad.scaleFactor', String(newFactor)).catch(() => {});
|
||
}, [token]);
|
||
|
||
// Sync remote → local: when Yjs data changes from other users, update local state
|
||
React.useEffect(() => {
|
||
if (collab.status !== 'connected') return;
|
||
// Skip if collab data is empty (not yet loaded)
|
||
if (collab.elements.length === 0 && collab.layers.length === 0 && collab.blocks.length === 0) return;
|
||
|
||
// Only update local state if remote data differs AND local is not ahead of remote
|
||
// (prevents race condition where local element is overwritten by stale Yjs sync)
|
||
// Merge: update local elements with remote version when properties differ, add remote-only elements
|
||
const localIds = new Set(elements.map(e => e.id));
|
||
const remoteIds = new Set(collab.elements.map(e => e.id));
|
||
const remoteMap = new Map(collab.elements.map(e => [e.id, e]));
|
||
let changed = false;
|
||
const merged = elements.map(el => {
|
||
const remote = remoteMap.get(el.id);
|
||
if (remote && JSON.stringify(remote) !== JSON.stringify(el)) {
|
||
changed = true;
|
||
return remote;
|
||
}
|
||
return el;
|
||
});
|
||
// Add remote-only elements
|
||
collab.elements.forEach(el => {
|
||
if (!localIds.has(el.id)) {
|
||
changed = true;
|
||
merged.push(el);
|
||
}
|
||
});
|
||
if (changed) {
|
||
setElements(merged);
|
||
}
|
||
|
||
// Merge layers: local-first, update changed from remote, append remote-only
|
||
if (collab.layers.length > 0) {
|
||
const localLayerMap = new Map(layers.map(l => [l.id, l]));
|
||
const remoteLayerMap = new Map(collab.layers.map(l => [l.id, l]));
|
||
const mergedLayers = layers.map(ll => {
|
||
const remote = remoteLayerMap.get(ll.id);
|
||
return remote ? (JSON.stringify(remote) !== JSON.stringify(ll) ? remote : ll) : ll;
|
||
});
|
||
collab.layers.forEach(rl => {
|
||
if (!localLayerMap.has(rl.id)) mergedLayers.push(rl);
|
||
});
|
||
if (mergedLayers.length !== layers.length || mergedLayers.some((ml, i) => ml !== layers[i])) {
|
||
setLayers(mergedLayers);
|
||
}
|
||
// Ensure activeLayerId matches a real layer after collab merge
|
||
const hasActiveInMerged = mergedLayers.some(l => l.id === activeLayerId);
|
||
if (!hasActiveInMerged && mergedLayers.length > 0) {
|
||
setActiveLayerId(mergedLayers[0].id);
|
||
}
|
||
}
|
||
|
||
// Merge blocks: local-first, update changed from remote, append remote-only
|
||
if (collab.blocks.length > 0) {
|
||
const localBlockMap = new Map(blocks.map(b => [b.id, b]));
|
||
const remoteBlockMap = new Map(collab.blocks.map(b => [b.id, b]));
|
||
const mergedBlocks = blocks.map(lb => {
|
||
const remote = remoteBlockMap.get(lb.id);
|
||
return remote ? (JSON.stringify(remote) !== JSON.stringify(lb) ? remote : lb) : lb;
|
||
});
|
||
collab.blocks.forEach(rb => {
|
||
if (!localBlockMap.has(rb.id)) mergedBlocks.push(rb);
|
||
});
|
||
if (mergedBlocks.length !== blocks.length || mergedBlocks.some((mb, i) => mb !== blocks[i])) {
|
||
setBlocks(mergedBlocks);
|
||
}
|
||
}
|
||
|
||
// Sync groups from remote → local
|
||
if (collab.groups.length > 0) {
|
||
const sameGroups = collab.groups.length === groups.length &&
|
||
collab.groups.every((g, i) => g.id === groups[i]?.id);
|
||
if (!sameGroups) setGroups(collab.groups);
|
||
}
|
||
|
||
// Sync bgConfig from remote → local
|
||
if (collab.bgConfigs.length > 0) {
|
||
const remoteBg = collab.bgConfigs[0];
|
||
if (!bgConfig || remoteBg.src !== bgConfig.src || remoteBg.scale !== bgConfig.scale ||
|
||
remoteBg.offsetX !== bgConfig.offsetX || remoteBg.offsetY !== bgConfig.offsetY ||
|
||
remoteBg.visible !== bgConfig.visible || remoteBg.opacity !== bgConfig.opacity) {
|
||
setBgConfig(remoteBg);
|
||
}
|
||
}
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [collab.elements, collab.layers, collab.blocks, collab.groups, collab.bgConfigs, collab.status]);
|
||
|
||
// Sync local → remote: push local groups to Yjs when groups change
|
||
React.useEffect(() => {
|
||
if (collab.status !== 'connected') return;
|
||
for (const group of groups) {
|
||
collab.setGroup(group);
|
||
}
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [groups, collab.status]);
|
||
|
||
// Sync local → remote: push local bgConfig to Yjs when bgConfig changes
|
||
React.useEffect(() => {
|
||
if (collab.status !== 'connected') return;
|
||
if (bgConfig) {
|
||
collab.setBgConfig(bgConfig.name || 'default', bgConfig);
|
||
}
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [bgConfig, collab.status]);
|
||
|
||
// Sync local → remote: push local layers to Yjs when layers change
|
||
React.useEffect(() => {
|
||
if (collab.status !== 'connected') return;
|
||
for (const layer of layers) collab.setLayer(layer);
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [layers, collab.status]);
|
||
|
||
// Sync local → remote: push local blocks to Yjs when blocks change
|
||
React.useEffect(() => {
|
||
if (collab.status !== 'connected') return;
|
||
for (const block of blocks) collab.setBlock(block);
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [blocks, collab.status]);
|
||
|
||
const handleElementCreated = useCallback((el: CADElement) => {
|
||
const elWithLayer = el.layerId ? el : { ...el, layerId: activeLayerId };
|
||
setElements((prev) => {
|
||
const newElements = [...prev, elWithLayer];
|
||
historyManagerRef.current.pushSnapshot({
|
||
elements: newElements, layers, blocks, groups, bgConfig,
|
||
}, 'Element erstellt');
|
||
return newElements;
|
||
});
|
||
syncHistory();
|
||
// Push to Yjs CRDT for real-time sync
|
||
collab.setElement(elWithLayer);
|
||
// Save to backend
|
||
if (drawingId && token) {
|
||
setSavedStatus('Speichert…');
|
||
createElementTyped(token, drawingId, elWithLayer).then(() => {
|
||
setSavedStatus('gespeichert');
|
||
}).catch((err) => {
|
||
console.error('Failed to save element:', err);
|
||
setSavedStatus('Fehler beim Speichern');
|
||
});
|
||
}
|
||
}, [layers, blocks, groups, bgConfig, syncHistory, drawingId, token, collab, activeLayerId]);
|
||
|
||
const handleToggleElementVisible = useCallback((id: string) => {
|
||
const target = elements.find(e => e.id === id);
|
||
if (!target) return;
|
||
const updatedEl: CADElement = { ...target, properties: { ...target.properties, visible: target.properties?.visible === false ? true : false } };
|
||
setElements((prev) => prev.map((e) => e.id === id ? updatedEl : e));
|
||
// Call API outside the state updater
|
||
if (token) {
|
||
setSavedStatus('Speichert…');
|
||
updateElement(token, updatedEl.id, updatedEl).then(() => setSavedStatus('gespeichert')).catch((err) => {
|
||
console.error('Failed to toggle element visibility:', err);
|
||
setSavedStatus('Fehler beim Speichern');
|
||
});
|
||
}
|
||
}, [elements, token]);
|
||
|
||
const handleElementsDeleted = useCallback((ids: string[]) => {
|
||
setElements((prev) => {
|
||
const newElements = prev.filter((e) => !ids.includes(e.id));
|
||
historyManagerRef.current.pushSnapshot({
|
||
elements: newElements, layers, blocks, groups, bgConfig,
|
||
}, `${ids.length} Element(e) gelöscht`);
|
||
return newElements;
|
||
});
|
||
syncHistory();
|
||
// Push deletions to Yjs CRDT for real-time sync
|
||
ids.forEach(id => collab.deleteElement(id));
|
||
// Delete from backend
|
||
if (token) {
|
||
setSavedStatus('Speichert…');
|
||
Promise.all(ids.map(id => apiDeleteElement(token, id))).then(() => {
|
||
setSavedStatus('gespeichert');
|
||
}).catch((err) => {
|
||
console.error('Failed to delete elements:', err);
|
||
setSavedStatus('Fehler beim Speichern');
|
||
});
|
||
}
|
||
}, [layers, blocks, groups, bgConfig, syncHistory, token, collab]);
|
||
|
||
const handleElementsModified = useCallback((modified: CADElement[]) => {
|
||
setElements((prev) => {
|
||
const newElements = prev.map((e) => {
|
||
const found = modified.find((m) => m.id === e.id);
|
||
return found ?? e;
|
||
});
|
||
historyManagerRef.current.pushSnapshot({
|
||
elements: newElements, layers, blocks, groups, bgConfig,
|
||
}, `${modified.length} Element(e) geändert`);
|
||
return newElements;
|
||
});
|
||
syncHistory();
|
||
// Push modifications to Yjs CRDT for real-time sync
|
||
modified.forEach(el => collab.setElement(el));
|
||
// Update in backend
|
||
if (token) {
|
||
setSavedStatus('Speichert…');
|
||
Promise.all(modified.map(el => updateElement(token, el.id, el))).then(() => {
|
||
setSavedStatus('gespeichert');
|
||
}).catch((err) => {
|
||
console.error('Failed to update elements:', err);
|
||
setSavedStatus('Fehler beim Speichern');
|
||
});
|
||
}
|
||
}, [layers, blocks, groups, bgConfig, syncHistory, token, collab]);
|
||
|
||
const lastCursorUpdateRef = useRef(0);
|
||
const handleCursorMoved = useCallback((x: number, y: number) => {
|
||
const now = performance.now();
|
||
if (now - lastCursorUpdateRef.current < 33) return; // throttle to ~30fps
|
||
lastCursorUpdateRef.current = now;
|
||
setCursorPos({ x, y });
|
||
collab.setCursor(x, y);
|
||
}, [collab]);
|
||
|
||
const handleToolStateChanged = useCallback((state: ToolState) => {
|
||
setToolState(state);
|
||
}, []);
|
||
|
||
// Inline text editor state
|
||
const [editingTextElement, setEditingTextElement] = useState<CADElement | null>(null);
|
||
|
||
const handleTextEdit = useCallback((el: CADElement) => {
|
||
setEditingTextElement(el);
|
||
}, []);
|
||
|
||
const handleTextEditorSubmit = useCallback((text: string) => {
|
||
if (editingTextElement && text.trim() !== '') {
|
||
const updatedEl = { ...editingTextElement, properties: { ...editingTextElement.properties, text } };
|
||
setElements((prev) => prev.map((e) =>
|
||
e.id === editingTextElement.id ? updatedEl : e
|
||
));
|
||
// Push to Yjs CRDT for real-time sync
|
||
collab.setElement(updatedEl);
|
||
// Update in backend
|
||
if (token) {
|
||
setSavedStatus('Speichert…');
|
||
updateElement(token, updatedEl.id, updatedEl).then(() => {
|
||
setSavedStatus('gespeichert');
|
||
}).catch((err) => {
|
||
console.error('Failed to save text edit:', err);
|
||
setSavedStatus('Fehler beim Speichern');
|
||
});
|
||
}
|
||
}
|
||
setEditingTextElement(null);
|
||
}, [editingTextElement, collab, token]);
|
||
|
||
const handleTextEditorCancel = useCallback(() => {
|
||
setEditingTextElement(null);
|
||
}, []);
|
||
|
||
const handleCommandTrigger = useCallback((msg: string) => {
|
||
// Route group/ungroup actions from keyboard shortcuts
|
||
if (msg === 'group') {
|
||
const gm = groupManagerRef.current;
|
||
const ids = selectedElementIdsRef.current;
|
||
if (ids.length < 2) {
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: 'Gruppieren: Mindestens 2 Elemente auswählen', type: 'info' }]);
|
||
return;
|
||
}
|
||
const group = gm.createGroup(ids);
|
||
setGroups(gm.getGroups());
|
||
collab.setGroup(group);
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: `Gruppe erstellt: ${group.name} (${ids.length} Elemente)`, type: 'info' }]);
|
||
return;
|
||
}
|
||
if (msg === 'ungroup') {
|
||
const gm = groupManagerRef.current;
|
||
const allGroups = gm.getGroups();
|
||
if (allGroups.length === 0) {
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: 'Degruppieren: Keine Gruppe vorhanden', type: 'info' }]);
|
||
return;
|
||
}
|
||
const selIds = selectedElementIdsRef.current;
|
||
let targetGroup = allGroups.find(g => g.elementIds.some(id => selIds.includes(id)));
|
||
if (!targetGroup) targetGroup = allGroups[allGroups.length - 1];
|
||
gm.ungroup(targetGroup.id);
|
||
setGroups(gm.getGroups());
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: `Gruppe aufgelöst: ${targetGroup.name}`, type: 'info' }]);
|
||
return;
|
||
}
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: msg, type: 'info' }]);
|
||
}, [collab]);
|
||
|
||
// Block management handlers
|
||
const handleRenameBlock = useCallback((id: string, name: string) => {
|
||
setBlocks((prev) => prev.map((b) => b.id === id ? { ...b, name } : b));
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: `Block umbenannt: ${name}`, type: 'info' }]);
|
||
// Persist rename to backend
|
||
if (token) {
|
||
updateBlock(token, id, { name }).catch((err) => {
|
||
console.error('Failed to save block rename:', err);
|
||
});
|
||
}
|
||
}, [token]);
|
||
|
||
const handleDuplicateBlock = useCallback((id: string) => {
|
||
setBlocks((prev) => {
|
||
const block = prev.find((b) => b.id === id);
|
||
if (!block) return prev;
|
||
const newId = `blk-${Date.now()}`;
|
||
const copy: BlockDefinition = {
|
||
...block,
|
||
id: newId,
|
||
name: `${block.name} (Kopie)`,
|
||
elements: block.elements.map((el) => ({ ...el, id: `${el.id}_copy_${Date.now()}` })),
|
||
};
|
||
// Persist duplicate to backend
|
||
if (drawingId && token) {
|
||
createBlockTyped(token, drawingId, copy).catch((err) => {
|
||
console.error('Failed to save duplicated block:', err);
|
||
});
|
||
}
|
||
return [...prev, copy];
|
||
});
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: 'Block dupliziert', type: 'info' }]);
|
||
}, [drawingId, token]);
|
||
|
||
const handleDeleteBlock = useCallback((id: string) => {
|
||
setBlocks((prev) => prev.filter((b) => b.id !== id));
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: 'Block gelöscht', type: 'info' }]);
|
||
// Delete from backend
|
||
if (token) {
|
||
apiDeleteBlock(token, id).catch((err) => {
|
||
console.error('Failed to delete block:', err);
|
||
});
|
||
}
|
||
}, [token]);
|
||
|
||
const handleSvgImport = useCallback((svg: string, name: string, category: string) => {
|
||
const svc = new BlockService();
|
||
const block = svc.importSVG(svg, name, category);
|
||
setBlocks((prev) => [...prev, block]);
|
||
// Push to Yjs CRDT for real-time sync
|
||
collab.setBlock(block);
|
||
// Persist to backend
|
||
if (drawingId && token) {
|
||
setSavedStatus('Speichert…');
|
||
createBlockTyped(token, drawingId, block)
|
||
.then(() => setSavedStatus('gespeichert'))
|
||
.catch((err) => {
|
||
console.error('Failed to save imported SVG block:', err);
|
||
setSavedStatus('Fehler beim Speichern');
|
||
});
|
||
}
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: `SVG importiert: ${name}`, type: 'info' }]);
|
||
}, [collab, drawingId, token]);
|
||
|
||
const handleSaveGroupAsBlock = useCallback((name: string) => {
|
||
const selectedIds = selectedElementIdsRef.current;
|
||
const selectedEls = selectedIds.length > 0
|
||
? elementsRef.current.filter(e => selectedIds.includes(e.id))
|
||
: (selectedElement ? [selectedElement] : []);
|
||
if (selectedEls.length === 0) {
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: 'Keine Elemente ausgewählt', type: 'info' }]);
|
||
return;
|
||
}
|
||
setBlocks((prev) => {
|
||
const newId = `blk_grp_${Date.now()}`;
|
||
const block: BlockDefinition = {
|
||
id: newId,
|
||
name,
|
||
description: 'Aus Auswahl erstellt',
|
||
category: 'Custom',
|
||
elements: selectedEls.map(el => ({ ...el, id: `el_${Date.now()}_${Math.random().toString(36).slice(2, 7)}` })),
|
||
};
|
||
// Push to Yjs CRDT for real-time sync
|
||
collab.setBlock(block);
|
||
// Persist to backend
|
||
if (drawingId && token) {
|
||
createBlockTyped(token, drawingId, block).catch((err) => {
|
||
console.error('Failed to save group block:', err);
|
||
});
|
||
}
|
||
return [...prev, block];
|
||
});
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: `Block erstellt: ${name} (${selectedEls.length} Elemente)`, type: 'info' }]);
|
||
}, [selectedElement, collab, drawingId, token]);
|
||
|
||
const handleBlockCategoryChange = useCallback((cat: string) => {
|
||
setBlockCategory(cat);
|
||
}, []);
|
||
|
||
const handleTemplateSelect = useCallback((templateName: string | null) => {
|
||
setSelectedTemplate(templateName);
|
||
if (templateName) {
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: `Vorlage gewählt: ${templateName} – Klicken zum Platzieren`, type: 'info' }]);
|
||
}
|
||
}, []);
|
||
|
||
const handleBlockSearch = useCallback((query: string) => {
|
||
// BlockLibrary handles search filtering locally — this callback is for
|
||
// any App-level side effects of block search (e.g. logging, analytics).
|
||
if (query.trim()) {
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: `Block-Suche: ${query}`, type: 'info' }]);
|
||
}
|
||
}, []);
|
||
|
||
const handleDragBlock = useCallback((blockId: string) => {
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: `Block gezogen: ${blockId}`, type: 'info' }]);
|
||
}, []);
|
||
|
||
const handleBlockDrop = useCallback((blockId: string, x: number, y: number) => {
|
||
const svc = new BlockService();
|
||
blocks.forEach(b => svc.addBlock(b));
|
||
const instance = svc.createInstance(blockId, x, y, activeLayerId);
|
||
if (instance) {
|
||
setElements((prev) => [...prev, instance]);
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: `Block platziert: ${blockId} bei (${x.toFixed(2)}, ${y.toFixed(2)})`, type: 'info' }]);
|
||
// Push to Yjs CRDT for real-time sync
|
||
if (collab.status === 'connected') {
|
||
collab.setElement(instance);
|
||
}
|
||
// Save to backend
|
||
if (drawingId && token) {
|
||
setSavedStatus('Speichert…');
|
||
createElementTyped(token, drawingId, instance).then(() => {
|
||
setSavedStatus('gespeichert');
|
||
}).catch((err) => {
|
||
console.error('Failed to save block instance:', err);
|
||
setSavedStatus('Fehler beim Speichern');
|
||
});
|
||
}
|
||
}
|
||
}, [blocks, activeLayerId, collab, drawingId, token]);
|
||
|
||
const handleSelectionChange = useCallback((selectedIds: string[]) => {
|
||
setSelectedElementIds(selectedIds);
|
||
if (selectedIds.length === 1) {
|
||
const el = elements.find(e => e.id === selectedIds[0]);
|
||
setSelectedElement(el ?? null);
|
||
} else if (selectedIds.length === 0) {
|
||
setSelectedElement(null);
|
||
} else {
|
||
// Multiple elements selected — keep the first one as a representative for the properties panel
|
||
const el = elements.find(e => e.id === selectedIds[0]);
|
||
setSelectedElement(el ?? null);
|
||
}
|
||
}, [elements]);
|
||
|
||
const handleImport = useCallback(async (file: File) => {
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: `Importiere ${file.name}...`, type: 'info' }]);
|
||
const result = await importFile(file);
|
||
if (result.success) {
|
||
setElements((prev) => [...prev, ...result.elements]);
|
||
// Push imported elements to Yjs and backend
|
||
for (const el of result.elements) {
|
||
collab.setElement(el);
|
||
}
|
||
if (drawingId && token) {
|
||
setSavedStatus('Speichert…');
|
||
Promise.all(result.elements.map(el => createElementTyped(token, drawingId, el)))
|
||
.then(() => setSavedStatus('gespeichert'))
|
||
.catch((err) => {
|
||
console.error('Failed to save imported elements:', err);
|
||
setSavedStatus('Fehler beim Speichern');
|
||
});
|
||
}
|
||
if (result.layers && result.layers.length > 0) {
|
||
const existingIds = new Set(layers.map(l => l.id));
|
||
const newLayers = result.layers.filter(l => !existingIds.has(l.id));
|
||
setLayers((prev) => [...prev, ...newLayers]);
|
||
// Push imported layers to Yjs and backend
|
||
for (const layer of newLayers) {
|
||
collab.setLayer(layer);
|
||
}
|
||
if (drawingId && token) {
|
||
Promise.all(newLayers.map(l => createLayerTyped(token, drawingId, l)))
|
||
.catch((err) => console.error('Failed to save imported layers:', err));
|
||
}
|
||
}
|
||
if (result.blocks && result.blocks.length > 0) {
|
||
setBlocks((prev) => [...prev, ...result.blocks!]);
|
||
// Push imported blocks to Yjs and backend
|
||
for (const block of result.blocks) {
|
||
collab.setBlock(block);
|
||
}
|
||
if (drawingId && token) {
|
||
Promise.all(result.blocks.map(b => createBlockTyped(token, drawingId, b)))
|
||
.catch((err) => console.error('Failed to save imported blocks:', err));
|
||
}
|
||
}
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: `Importiert: ${result.elements.length} Elemente aus ${file.name}`, type: 'info' }]);
|
||
if (result.warnings.length > 0) {
|
||
result.warnings.forEach(w => setCommandHistory((prev) => [...prev, { prefix: '·', text: w, type: 'info' }]));
|
||
}
|
||
} else {
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: `Import fehlgeschlagen: ${result.error || 'Unbekannter Fehler'}`, type: 'info' }]);
|
||
}
|
||
}, [drawingId, token, collab, layers]);
|
||
|
||
const handleExport = useCallback(async (format: ExportFormat) => {
|
||
const projectData: ProjectData = {
|
||
version: '1.0',
|
||
name: projectName,
|
||
layers,
|
||
elements,
|
||
blocks,
|
||
};
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: `Exportiere als ${format.toUpperCase()}...`, type: 'info' }]);
|
||
const result = await exportProject(projectData, { format });
|
||
if (result.success && result.blob) {
|
||
downloadBlob(result.blob, result.filename);
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: `Exportiert: ${result.filename}`, type: 'info' }]);
|
||
} else {
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: `Export fehlgeschlagen: ${result.error || 'Unbekannter Fehler'}`, type: 'info' }]);
|
||
}
|
||
}, [layers, elements, blocks]);
|
||
|
||
const handleRibbonAction = useCallback((action: string) => {
|
||
setCommandHistory((prev) => [...prev, { prefix: '›', text: action, type: 'command' }]);
|
||
|
||
// ─── File actions ───
|
||
if (action === 'new') {
|
||
onNavigateBack();
|
||
return;
|
||
}
|
||
if (action === 'open') {
|
||
onNavigateBack();
|
||
return;
|
||
}
|
||
if (action === 'save') {
|
||
setSavedStatus('Gespeichert');
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: 'Projekt gespeichert', type: 'info' }]);
|
||
// Save elements to backend if drawingId exists
|
||
if (drawingId && token) {
|
||
elements.forEach((el) => {
|
||
updateElement(token, el.id, el).catch(() => {});
|
||
});
|
||
}
|
||
return;
|
||
}
|
||
if (action === 'import') {
|
||
const input = document.createElement('input');
|
||
input.type = 'file';
|
||
input.accept = '.dxf,.svg,.json';
|
||
input.onchange = () => {
|
||
if (input.files && input.files[0]) {
|
||
handleImport(input.files[0]);
|
||
}
|
||
};
|
||
input.click();
|
||
return;
|
||
}
|
||
if (action === 'export') {
|
||
setExportFormatOpen(true);
|
||
return;
|
||
}
|
||
|
||
// ─── Edit actions ───
|
||
if (action === 'undo') { handleUndo(); return; }
|
||
if (action === 'redo') { handleRedo(); return; }
|
||
if (action === 'copy') {
|
||
const ids = selectedElementIdsRef.current;
|
||
const selected = ids.length > 0 ? elements.filter(e => ids.includes(e.id)) : [];
|
||
const clip = selected.length > 0 ? selected : elements.slice(0, 1);
|
||
clipboardRef.current = clip;
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: `${clip.length} Element(e) kopiert`, type: 'info' }]);
|
||
return;
|
||
}
|
||
if (action === 'paste') {
|
||
if (clipboardRef.current && clipboardRef.current.length > 0) {
|
||
const offset = 20;
|
||
const pasted = clipboardRef.current.map((el, i) => ({
|
||
...el,
|
||
id: `el-${Date.now()}-${i}`,
|
||
x: (el.x ?? 0) + offset,
|
||
y: (el.y ?? 0) + offset,
|
||
}));
|
||
setElements((prev) => [...prev, ...pasted]);
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: `${pasted.length} Element(e) eingefügt`, type: 'info' }]);
|
||
// Push pasted elements to Yjs CRDT and backend
|
||
for (const el of pasted) {
|
||
collab.setElement(el);
|
||
}
|
||
if (drawingId && token) {
|
||
setSavedStatus('Speichert…');
|
||
Promise.all(pasted.map(el => createElementTyped(token, drawingId, el))).then(() => {
|
||
setSavedStatus('gespeichert');
|
||
}).catch((err) => {
|
||
console.error('Failed to save pasted elements:', err);
|
||
setSavedStatus('Fehler beim Speichern');
|
||
});
|
||
}
|
||
} else {
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: 'Zwischenablage leer', type: 'info' }]);
|
||
}
|
||
return;
|
||
}
|
||
|
||
// ─── Group/Ungroup actions ───
|
||
if (action === 'group') {
|
||
const gm = groupManagerRef.current;
|
||
const ids = selectedElementIdsRef.current;
|
||
if (ids.length < 2) {
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: 'Gruppieren: Mindestens 2 Elemente auswählen', type: 'info' }]);
|
||
return;
|
||
}
|
||
const group = gm.createGroup(ids);
|
||
const newGroups = gm.getGroups();
|
||
setGroups(newGroups);
|
||
collab.setGroup(group);
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: `Gruppe erstellt: ${group.name} (${ids.length} Elemente)`, type: 'info' }]);
|
||
return;
|
||
}
|
||
if (action === 'ungroup') {
|
||
const gm = groupManagerRef.current;
|
||
const allGroups = gm.getGroups();
|
||
if (allGroups.length === 0) {
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: 'Degruppieren: Keine Gruppe vorhanden', type: 'info' }]);
|
||
return;
|
||
}
|
||
// Find the group that contains any selected element
|
||
const selIds = selectedElementIdsRef.current;
|
||
let targetGroup = allGroups.find(g => g.elementIds.some(id => selIds.includes(id)));
|
||
if (!targetGroup) targetGroup = allGroups[allGroups.length - 1];
|
||
gm.ungroup(targetGroup.id);
|
||
setGroups(gm.getGroups());
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: `Gruppe aufgelöst: ${targetGroup.name}`, type: 'info' }]);
|
||
return;
|
||
}
|
||
|
||
// ─── Insert actions (set active tool) ───
|
||
if (action === 'insert-line') { setActiveTool('line'); setCommandHistory((prev) => [...prev, { prefix: '·', text: 'Linie-Werkzeug aktiv', type: 'info' }]); return; }
|
||
if (action === 'insert-rect') { setActiveTool('rect'); setCommandHistory((prev) => [...prev, { prefix: '·', text: 'Rechteck-Werkzeug aktiv', type: 'info' }]); return; }
|
||
if (action === 'insert-circle') { setActiveTool('circle'); setCommandHistory((prev) => [...prev, { prefix: '·', text: 'Kreis-Werkzeug aktiv', type: 'info' }]); return; }
|
||
if (action === 'insert-text') { setActiveTool('text'); setCommandHistory((prev) => [...prev, { prefix: '·', text: 'Text-Werkzeug aktiv', type: 'info' }]); return; }
|
||
if (action === 'insert-freehand') { setActiveTool('polyline'); setCommandHistory((prev) => [...prev, { prefix: '·', text: 'Freihand-Werkzeug aktiv', type: 'info' }]); return; }
|
||
if (action === 'insert-image') {
|
||
const input = document.createElement('input');
|
||
input.type = 'file';
|
||
input.accept = 'image/*';
|
||
input.onchange = () => {
|
||
if (input.files && input.files[0]) {
|
||
const reader = new FileReader();
|
||
reader.onload = () => {
|
||
const imgEl: ImageElement = {
|
||
id: `el-${Date.now()}`,
|
||
type: 'image',
|
||
layerId: activeLayerId,
|
||
x: 0, y: 0,
|
||
width: 200,
|
||
height: 200,
|
||
properties: { src: reader.result as string },
|
||
};
|
||
setElements((prev) => [...prev, imgEl]);
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: 'Bild eingefügt', type: 'info' }]);
|
||
// Push image element to Yjs CRDT for real-time sync
|
||
collab.setElement(imgEl);
|
||
// Save to backend
|
||
if (drawingId && token) {
|
||
setSavedStatus('Speichert…');
|
||
createElementTyped(token, drawingId, imgEl).then(() => {
|
||
setSavedStatus('gespeichert');
|
||
}).catch((err) => {
|
||
console.error('Failed to save image element:', err);
|
||
setSavedStatus('Fehler beim Speichern');
|
||
});
|
||
}
|
||
};
|
||
reader.readAsDataURL(input.files[0]);
|
||
}
|
||
};
|
||
input.click();
|
||
return;
|
||
}
|
||
|
||
// ─── Format actions ───
|
||
if (action.startsWith('format-')) {
|
||
const formatType = action.replace('format-', '');
|
||
const selectedIds = selectedElementIdsRef.current;
|
||
const selected = selectedIds.length > 0
|
||
? elements.filter(e => selectedIds.includes(e.id))
|
||
: (selectedElement ? [selectedElement] : []);
|
||
if (selected.length === 0) {
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: 'Format: Keine Elemente ausgewählt', type: 'info' }]);
|
||
return;
|
||
}
|
||
const modified = selected.map(el => {
|
||
const props = { ...el.properties };
|
||
switch (formatType) {
|
||
case 'stroke-width':
|
||
props.strokeWidth = (props.strokeWidth ?? 1) + 0.5;
|
||
break;
|
||
case 'stroke-color':
|
||
props.stroke = props.stroke === '#ff0000' ? '#00ff00' : '#ff0000';
|
||
break;
|
||
case 'fill-color':
|
||
props.fill = props.fill === '#ff0000' ? '#00ff00' : '#ff0000';
|
||
break;
|
||
case 'stroke-style':
|
||
props.lineType = props.lineType === 'solid' ? 'dashed' : 'solid';
|
||
break;
|
||
case 'align-left':
|
||
return { ...el, x: selected.reduce((min, s) => Math.min(min, s.x), Infinity) };
|
||
case 'align-center':
|
||
const cx = selected.reduce((sum, s) => sum + s.x, 0) / selected.length;
|
||
return { ...el, x: cx };
|
||
case 'align-right':
|
||
return { ...el, x: selected.reduce((max, s) => Math.max(max, s.x), -Infinity) };
|
||
default:
|
||
return el;
|
||
}
|
||
return { ...el, properties: props };
|
||
});
|
||
handleElementsModified(modified);
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: `Format: ${formatType} auf ${modified.length} Element(e) angewendet`, type: 'info' }]);
|
||
return;
|
||
}
|
||
|
||
// ─── View actions ───
|
||
if (action === 'zoom-fit') {
|
||
setZoomCommand('fit');
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: 'Zoom: an Ansicht angepasst', type: 'info' }]);
|
||
return;
|
||
}
|
||
if (action === 'zoom-100') {
|
||
setZoomCommand('100');
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: 'Zoom: 100%', type: 'info' }]);
|
||
return;
|
||
}
|
||
if (action === 'grid') {
|
||
setGridEnabled((p) => !p);
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: `Grid ${gridEnabled ? 'aus' : 'ein'}`, type: 'info' }]);
|
||
return;
|
||
}
|
||
if (action === 'layer') { setActiveRightPanel('layer'); setCommandHistory((prev) => [...prev, { prefix: '·', text: 'Layer-Manager geöffnet', type: 'info' }]); return; }
|
||
|
||
// ─── Tools actions ───
|
||
if (action === 'measure') { setActiveTool('dimension'); setCommandHistory((prev) => [...prev, { prefix: '·', text: 'Messwerkzeug aktiv', type: 'info' }]); return; }
|
||
if (action === 'history') { setHistoryPanelOpen((prev) => !prev); return; }
|
||
|
||
// ─── Background ───
|
||
if (action === 'background-import') { setBgImportOpen(true); return; }
|
||
|
||
// ─── KI actions ───
|
||
if (action === 'ki') { setActiveRightPanel('ki'); setCommandHistory((prev) => [...prev, { prefix: '·', text: 'KI Copilot geöffnet', type: 'info' }]); return; }
|
||
if (action === 'ki-draw') { setActiveRightPanel('ki'); setCommandHistory((prev) => [...prev, { prefix: '·', text: 'KI Zeichnen: Beschreibung eingeben', type: 'info' }]); return; }
|
||
if (action === 'ki-analyze') { setActiveRightPanel('ki'); setCommandHistory((prev) => [...prev, { prefix: '·', text: 'KI Analyse gestartet', type: 'info' }]); return; }
|
||
}, [handleUndo, handleRedo, handleElementsModified, handleImport, handleExport, onNavigateBack, drawingId, token, elements, activeLayerId, gridEnabled, collab, selectedElement]);
|
||
|
||
const handleToolChange = useCallback((tool: string) => {
|
||
setActiveTool(tool);
|
||
setMobileLeftOpen(false);
|
||
}, []);
|
||
|
||
const handleViewChange = useCallback((mode: ViewMode) => {
|
||
setViewMode(mode);
|
||
}, []);
|
||
|
||
const handleToggleGrid = useCallback(() => setGridEnabled((p) => !p), []);
|
||
const handleToggleOrtho = useCallback(() => setOrthoEnabled((p) => !p), []);
|
||
const handleToggleSnap = useCallback(() => setSnapEnabled((p) => !p), []);
|
||
const handleTogglePolar = useCallback(() => setPolarEnabled((p) => !p), []);
|
||
|
||
// Layer handlers
|
||
const handleSelectLayer = useCallback((id: string) => setActiveLayerId(id), []);
|
||
|
||
const handleSelectElement = useCallback((id: string) => {
|
||
setSelectedElementIds([id]);
|
||
const el = elements.find(e => e.id === id);
|
||
setSelectedElement(el ?? null);
|
||
}, [elements]);
|
||
const handleAddLayer = useCallback(() => {
|
||
setLayers((prev) => {
|
||
const newId = `layer-${Date.now()}`;
|
||
const newLayer: CADLayer = {
|
||
id: newId, name: `Layer ${prev.length + 1}`, visible: true, locked: false,
|
||
color: '#ffffff', lineType: 'solid', transparency: 0,
|
||
sortOrder: prev.length, parentId: null,
|
||
};
|
||
// Save to backend
|
||
if (drawingId && token) {
|
||
createLayerTyped(token, drawingId, newLayer).catch((err) => {
|
||
console.error('Failed to save layer:', err);
|
||
});
|
||
}
|
||
return [...prev, newLayer];
|
||
});
|
||
}, [drawingId, token]);
|
||
const handleToggleLayer = useCallback((id: string) => {
|
||
setLayers((prev) => {
|
||
const updated = prev.map((l) => l.id === id ? { ...l, visible: !l.visible } : l);
|
||
const changed = updated.find((l) => l.id === id);
|
||
if (changed) {
|
||
collab.setLayer(changed);
|
||
if (token) {
|
||
updateLayer(token, id, { visible: changed.visible }).catch((err) => {
|
||
console.error('Failed to save layer visibility:', err);
|
||
});
|
||
}
|
||
}
|
||
return updated;
|
||
});
|
||
}, [token, collab]);
|
||
const handleDeleteLayer = useCallback((id: string) => {
|
||
setLayers((prev) => prev.filter((l) => l.id !== id));
|
||
// Delete from backend
|
||
if (token) {
|
||
apiDeleteLayer(token, id).catch((err) => {
|
||
console.error('Failed to delete layer:', err);
|
||
});
|
||
}
|
||
}, [token]);
|
||
const handleRenameLayer = useCallback((id: string, name: string) => {
|
||
setLayers((prev) => {
|
||
const updated = prev.map((l) => l.id === id ? { ...l, name } : l);
|
||
const changed = updated.find((l) => l.id === id);
|
||
if (changed) {
|
||
collab.setLayer(changed);
|
||
if (token) {
|
||
updateLayer(token, id, { name }).catch((err) => {
|
||
console.error('Failed to save layer rename:', err);
|
||
});
|
||
}
|
||
}
|
||
return updated;
|
||
});
|
||
}, [token, collab]);
|
||
const handleDuplicateLayer = useCallback((id: string) => {
|
||
setLayers((prev) => {
|
||
const layer = prev.find((l) => l.id === id);
|
||
if (!layer) return prev;
|
||
const newId = `layer-${Date.now()}`;
|
||
const copy: CADLayer = { ...layer, id: newId, name: `${layer.name} (Kopie)`, sortOrder: prev.length };
|
||
collab.setLayer(copy);
|
||
if (drawingId && token) {
|
||
createLayerTyped(token, drawingId, copy).catch((err) => {
|
||
console.error('Failed to save duplicated layer:', err);
|
||
});
|
||
}
|
||
return [...prev, copy];
|
||
});
|
||
}, [drawingId, token, collab]);
|
||
const handleToggleLock = useCallback((id: string) => {
|
||
setLayers((prev) => {
|
||
const updated = prev.map((l) => l.id === id ? { ...l, locked: !l.locked } : l);
|
||
const changed = updated.find((l) => l.id === id);
|
||
if (changed) {
|
||
collab.setLayer(changed);
|
||
if (token) {
|
||
updateLayer(token, id, { locked: changed.locked }).catch((err) => {
|
||
console.error('Failed to save layer lock state:', err);
|
||
});
|
||
}
|
||
}
|
||
return updated;
|
||
});
|
||
}, [token, collab]);
|
||
const handleUpdateLayerColor = useCallback((id: string, color: string) => {
|
||
setLayers((prev) => {
|
||
const updated = prev.map((l) => l.id === id ? { ...l, color } : l);
|
||
const changed = updated.find((l) => l.id === id);
|
||
if (changed) {
|
||
collab.setLayer(changed);
|
||
if (token) {
|
||
updateLayer(token, id, { color }).catch((err) => {
|
||
console.error('Failed to save layer color:', err);
|
||
});
|
||
}
|
||
}
|
||
return updated;
|
||
});
|
||
}, [token, collab]);
|
||
const handleUpdateLayerLineType = useCallback((id: string, lineType: 'solid' | 'dashed' | 'dotted') => {
|
||
setLayers((prev) => {
|
||
const updated = prev.map((l) => l.id === id ? { ...l, lineType } : l);
|
||
const changed = updated.find((l) => l.id === id);
|
||
if (changed) {
|
||
collab.setLayer(changed);
|
||
if (token) {
|
||
updateLayer(token, id, { lineType }).catch((err) => {
|
||
console.error('Failed to save layer line type:', err);
|
||
});
|
||
}
|
||
}
|
||
return updated;
|
||
});
|
||
}, [token, collab]);
|
||
const handleUpdateLayerTransparency = useCallback((id: string, transparency: number) => {
|
||
setLayers((prev) => {
|
||
const updated = prev.map((l) => l.id === id ? { ...l, transparency } : l);
|
||
const changed = updated.find((l) => l.id === id);
|
||
if (changed) {
|
||
collab.setLayer(changed);
|
||
if (token) {
|
||
updateLayer(token, id, { transparency }).catch((err) => {
|
||
console.error('Failed to save layer transparency:', err);
|
||
});
|
||
}
|
||
}
|
||
return updated;
|
||
});
|
||
}, [token, collab]);
|
||
|
||
const handleZoomIn = useCallback(() => {
|
||
setZoomCommand('in');
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: 'Zoom: vergrößert', type: 'info' }]);
|
||
}, []);
|
||
const handleZoomOut = useCallback(() => {
|
||
setZoomCommand('out');
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: 'Zoom: verkleinert', type: 'info' }]);
|
||
}, []);
|
||
const handleZoomFit = useCallback(() => {
|
||
setZoomCommand('fit');
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: 'Zoom: an Ansicht angepasst', type: 'info' }]);
|
||
}, []);
|
||
|
||
// Layer reorder (drag & drop)
|
||
const handleReorderLayer = useCallback((draggedId: string, targetId: string, position: 'before' | 'after' | 'inside') => {
|
||
setLayers((prev) => {
|
||
const dragged = prev.find((l) => l.id === draggedId);
|
||
if (!dragged) return prev;
|
||
|
||
if (position === 'inside') {
|
||
// Make dragged a child of target
|
||
const updated = prev.map((l) =>
|
||
l.id === draggedId ? { ...l, parentId: targetId } : l
|
||
);
|
||
return updated;
|
||
}
|
||
|
||
// before/after: reorder at same level
|
||
const target = prev.find((l) => l.id === targetId);
|
||
if (!target) return prev;
|
||
|
||
const parentId = target.parentId;
|
||
const siblings = prev
|
||
.filter((l) => l.parentId === parentId && l.id !== draggedId)
|
||
.sort((a, b) => a.sortOrder - b.sortOrder);
|
||
|
||
const targetIdx = siblings.findIndex((l) => l.id === targetId);
|
||
const insertIdx = position === 'before' ? targetIdx : targetIdx + 1;
|
||
|
||
siblings.splice(insertIdx, 0, { ...dragged, parentId });
|
||
|
||
// Reassign sortOrder
|
||
const reordered = siblings.map((l, i) => ({ ...l, sortOrder: i }));
|
||
|
||
// Merge back: non-siblings keep original, siblings get reordered
|
||
const nonSiblings = prev.filter((l) => l.parentId !== parentId || l.id === draggedId);
|
||
const result = [...nonSiblings.filter((l) => l.id !== draggedId), ...reordered];
|
||
return result;
|
||
});
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: 'Ebene verschoben', type: 'info' }]);
|
||
}, []);
|
||
|
||
// Add sub-layer
|
||
const handleAddSubLayer = useCallback((parentId: string) => {
|
||
setLayers((prev) => {
|
||
const parent = prev.find((l) => l.id === parentId);
|
||
if (!parent) return prev;
|
||
const newId = `layer-${Date.now()}`;
|
||
const siblings = prev.filter((l) => l.parentId === parentId);
|
||
const newLayer: CADLayer = {
|
||
id: newId, name: `Teilebene ${siblings.length + 1}`, visible: true, locked: false,
|
||
color: parent.color, lineType: 'solid', transparency: 0,
|
||
sortOrder: siblings.length, parentId,
|
||
};
|
||
if (drawingId && token) {
|
||
createLayerTyped(token, drawingId, newLayer).catch((err) => {
|
||
console.error('Failed to save sub-layer:', err);
|
||
});
|
||
}
|
||
return [...prev, newLayer];
|
||
});
|
||
}, [drawingId, token]);
|
||
|
||
// Update single element (from properties panel)
|
||
const handleUpdateElement = useCallback((updated: CADElement) => {
|
||
setElements((prev) => {
|
||
const newElements = prev.map((e) => (e.id === updated.id ? updated : e));
|
||
historyManagerRef.current.pushSnapshot({
|
||
elements: newElements, layers, blocks, groups, bgConfig,
|
||
}, 'Element geändert');
|
||
return newElements;
|
||
});
|
||
syncHistory();
|
||
collab.setElement(updated);
|
||
if (token) {
|
||
setSavedStatus('Speichert…');
|
||
updateElement(token, updated.id, updated).then(() => {
|
||
setSavedStatus('gespeichert');
|
||
}).catch((err) => {
|
||
console.error('Failed to update element:', err);
|
||
setSavedStatus('Fehler beim Speichern');
|
||
});
|
||
}
|
||
setSelectedElement(updated);
|
||
}, [layers, blocks, groups, bgConfig, syncHistory, token, collab]);
|
||
|
||
const handleBgApply = useCallback((config: BackgroundConfig, _image: HTMLImageElement | null) => {
|
||
setBgConfig(config);
|
||
setBgImportOpen(false);
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: `Hintergrund geladen: ${config.name} (${config.width}×${config.height}px, Maßstab: ${config.scale.toFixed(3)} px/mm)`, type: 'info' }]);
|
||
}, []);
|
||
|
||
const handleCommand = useCallback((cmd: string) => {
|
||
const upper = cmd.trim().toUpperCase();
|
||
setCommandHistory((prev) => [...prev, { prefix: '›', text: cmd, type: 'command' }]);
|
||
|
||
const registry = getCommandRegistry();
|
||
|
||
if (upper === 'UNDO' || upper === 'U') {
|
||
handleUndo();
|
||
return;
|
||
}
|
||
if (upper === 'REDO') {
|
||
handleRedo();
|
||
return;
|
||
}
|
||
|
||
// Group command: create group from currently selected elements
|
||
if (upper === 'GROUP' || upper === 'GRP') {
|
||
const gm = groupManagerRef.current;
|
||
const ids = selectedElementIdsRef.current;
|
||
if (ids.length < 2) {
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: 'Gruppe: Mindestens 2 Elemente auswählen', type: 'info' }]);
|
||
return;
|
||
}
|
||
const group = gm.createGroup(ids);
|
||
const newGroups = gm.getGroups();
|
||
setGroups(newGroups);
|
||
// Sync group to Yjs CRDT for real-time collaboration
|
||
collab.setGroup(group);
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: `Gruppe erstellt: ${group.name} (${ids.length} Elemente)`, type: 'info' }]);
|
||
return;
|
||
}
|
||
|
||
// Ungroup command
|
||
if (upper === 'UNG' || upper === 'UNGROUP') {
|
||
const gm = groupManagerRef.current;
|
||
const allGroups = gm.getGroups();
|
||
if (allGroups.length > 0) {
|
||
gm.ungroup(allGroups[allGroups.length - 1].id);
|
||
setGroups(gm.getGroups());
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: 'Gruppe aufgelöst', type: 'info' }]);
|
||
}
|
||
return;
|
||
}
|
||
|
||
// Import command — trigger file dialog
|
||
if (upper === 'IMPORT' || upper === 'IMP' || upper === 'I') {
|
||
handleRibbonAction('import');
|
||
return;
|
||
}
|
||
// Export command — trigger export dialog
|
||
if (upper === 'EXPORT' || upper === 'EXP' || upper === 'EX') {
|
||
handleRibbonAction('export');
|
||
return;
|
||
}
|
||
|
||
const tool = registry.getToolId(upper);
|
||
if (tool) {
|
||
setActiveTool(tool);
|
||
setMobileLeftOpen(false);
|
||
const label = registry.getLabel(upper) ?? `Werkzeug: ${tool}`;
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: label, type: 'info' }]);
|
||
} else {
|
||
// Check plugin commands
|
||
const pluginCmds = pluginRegistry.getCommandExtensions();
|
||
const parts = cmd.trim().split(/\s+/);
|
||
const cmdName = parts[0].toUpperCase();
|
||
const pluginCmd = pluginCmds.find((c) => c.name.toUpperCase() === cmdName);
|
||
if (pluginCmd) {
|
||
pluginCmd.execute(parts.slice(1), createPluginContext());
|
||
} else {
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: `Unbekannter Befehl: ${cmd}`, type: 'info' }]);
|
||
}
|
||
}
|
||
}, [handleUndo, handleRedo, handleRibbonAction, collab, createPluginContext]);
|
||
|
||
const handleKISend = useCallback(async (text: string) => {
|
||
const userMsg: KIMessage = { id: `ki-${Date.now()}`, role: 'user', content: text };
|
||
const pendingId = `ki-${Date.now() + 1}`;
|
||
const pendingMsg: KIMessage = { id: pendingId, role: 'assistant', content: '…' };
|
||
setKIMessages((prev) => [...prev, userMsg, pendingMsg]);
|
||
setKiLoading(true);
|
||
|
||
try {
|
||
// Build CAD context
|
||
const elementTypeSummary: Record<string, number> = {};
|
||
for (const el of elements) {
|
||
elementTypeSummary[el.type] = (elementTypeSummary[el.type] || 0) + 1;
|
||
}
|
||
const context = {
|
||
projectName,
|
||
elementCount: elements.length,
|
||
layerCount: layers.length,
|
||
elementTypeSummary,
|
||
};
|
||
|
||
// Build message history (last 10 messages)
|
||
const history = kiMessages.slice(-10).map((m) => ({
|
||
role: m.role,
|
||
content: typeof m.content === 'string' ? m.content : String(m.content),
|
||
}));
|
||
history.push({ role: 'user', content: text });
|
||
|
||
const result = await aiChat(token, history, context);
|
||
|
||
setKIMessages((prev) =>
|
||
prev.map((m) =>
|
||
m.id === pendingId
|
||
? { ...m, content: result.content }
|
||
: m
|
||
)
|
||
);
|
||
} catch (err: any) {
|
||
setKIMessages((prev) =>
|
||
prev.map((m) =>
|
||
m.id === pendingId
|
||
? { ...m, content: `Fehler: ${err.message || 'KI-Anfrage fehlgeschlagen'}` }
|
||
: m
|
||
)
|
||
);
|
||
} finally {
|
||
setKiLoading(false);
|
||
}
|
||
}, [token, projectName, elements, layers, kiMessages]);
|
||
|
||
const handleSuggestionClick = useCallback((suggestion: KISuggestion) => {
|
||
handleKISend(suggestion.label);
|
||
}, [handleKISend]);
|
||
|
||
const activeLayerName = layers.find((l) => l.id === activeLayerId)?.name ?? '—';
|
||
|
||
// ─── Render ─────────────────────────────────────────────
|
||
return (
|
||
<div className={`app ${theme}`} data-theme={theme}>
|
||
<Topbar
|
||
projectName={projectName}
|
||
savedStatus={savedStatus}
|
||
onUndo={handleUndo}
|
||
onRedo={handleRedo}
|
||
onThemeToggle={handleThemeToggle}
|
||
theme={theme}
|
||
onOpenSettings={() => setSettingsOpen(true)}
|
||
onOpenLeftDrawer={() => setMobileLeftOpen(true)}
|
||
onOpenRightDrawer={() => setMobileRightOpen(true)}
|
||
unit={unit}
|
||
onUnitChange={handleUnitChange}
|
||
onNavigateBack={onNavigateBack}
|
||
/>
|
||
<RibbonBar
|
||
activeTab={activeRibbonTab}
|
||
onTabChange={setActiveRibbonTab}
|
||
onAction={handleRibbonAction}
|
||
canvasBgColor={canvasBgColor}
|
||
gridColor={gridColor}
|
||
rulerEnabled={rulerEnabled}
|
||
onCanvasBgColorChange={setCanvasBgColor}
|
||
onGridColorChange={setGridColor}
|
||
onToggleRuler={() => setRulerEnabled((p) => !p)}
|
||
/>
|
||
<div className={`app-body${leftSidebarCollapsed ? ' left-collapsed' : ''}${rightSidebarCollapsed ? ' right-collapsed' : ''}`}>
|
||
<LeftSidebar
|
||
activeTool={activeTool}
|
||
onToolChange={handleToolChange}
|
||
selectedTemplate={selectedTemplate}
|
||
onTemplateSelect={handleTemplateSelect}
|
||
className={mobileLeftOpen ? 'open' : ''}
|
||
onCollapse={() => { setMobileLeftOpen(false); setLeftSidebarCollapsed(true); }}
|
||
collapsed={leftSidebarCollapsed}
|
||
onToggleCollapse={() => setLeftSidebarCollapsed((p) => !p)}
|
||
blocks={blocks}
|
||
onDragBlock={handleDragBlock}
|
||
onBlockCategoryChange={handleBlockCategoryChange}
|
||
onBlockSearch={handleBlockSearch}
|
||
onRenameBlock={handleRenameBlock}
|
||
onDuplicateBlock={handleDuplicateBlock}
|
||
onDeleteBlock={handleDeleteBlock}
|
||
onSvgImport={handleSvgImport}
|
||
onSaveGroupAsBlock={handleSaveGroupAsBlock}
|
||
onGroup={() => handleRibbonAction('group')}
|
||
onUngroup={() => handleRibbonAction('ungroup')}
|
||
leftbarWidth={leftbarWidth}
|
||
onWidthChange={setLeftbarWidth}
|
||
/>
|
||
<CanvasArea
|
||
cursorPos={cursorPos}
|
||
viewMode={viewMode}
|
||
onViewChange={handleViewChange}
|
||
gridEnabled={gridEnabled}
|
||
orthoEnabled={orthoEnabled}
|
||
snapEnabled={snapEnabled}
|
||
polarEnabled={polarEnabled}
|
||
activeTool={activeTool}
|
||
elements={elements}
|
||
layers={layers}
|
||
onElementCreated={handleElementCreated}
|
||
onElementsDeleted={handleElementsDeleted}
|
||
onElementsModified={handleElementsModified}
|
||
onCursorMoved={handleCursorMoved}
|
||
onToolStateChanged={handleToolStateChanged}
|
||
onToggleGrid={handleToggleGrid}
|
||
onToggleOrtho={handleToggleOrtho}
|
||
onToggleSnap={handleToggleSnap}
|
||
onZoomIn={handleZoomIn}
|
||
onZoomOut={handleZoomOut}
|
||
onZoomFit={handleZoomFit}
|
||
zoomCommand={zoomCommand}
|
||
onTextEdit={handleTextEdit}
|
||
onCommandTrigger={handleCommandTrigger}
|
||
blocks={blocks}
|
||
onBlockDrop={handleBlockDrop}
|
||
onSelectionChange={handleSelectionChange}
|
||
externalSelectionIds={selectedElementIds}
|
||
selectedTemplate={selectedTemplate}
|
||
bgConfig={bgConfig}
|
||
remoteCursors={collab.cursors}
|
||
groups={groups}
|
||
unit={unit}
|
||
gridSize={gridSize}
|
||
scaleFactor={scaleFactor}
|
||
canvasBgColor={canvasBgColor}
|
||
gridColor={gridColor}
|
||
rulerEnabled={rulerEnabled}
|
||
/>
|
||
<RightSidebar
|
||
activePanel={activeRightPanel}
|
||
onPanelChange={setActiveRightPanel}
|
||
selectedElement={selectedElement}
|
||
layers={layers}
|
||
blocks={blocks}
|
||
activeLayerId={activeLayerId}
|
||
onSelectLayer={handleSelectLayer}
|
||
onAddLayer={handleAddLayer}
|
||
onToggleLayer={handleToggleLayer}
|
||
onDeleteLayer={handleDeleteLayer}
|
||
onRenameLayer={handleRenameLayer}
|
||
onDuplicateLayer={handleDuplicateLayer}
|
||
onToggleLock={handleToggleLock}
|
||
onElementsDeleted={handleElementsDeleted}
|
||
onToggleElementVisible={handleToggleElementVisible}
|
||
elements={elements}
|
||
onRenameBlock={handleRenameBlock}
|
||
onDuplicateBlock={handleDuplicateBlock}
|
||
onDeleteBlock={handleDeleteBlock}
|
||
onSvgImport={handleSvgImport}
|
||
onSaveGroupAsBlock={handleSaveGroupAsBlock}
|
||
onBlockCategoryChange={handleBlockCategoryChange}
|
||
onBlockSearch={handleBlockSearch}
|
||
onDragBlock={handleDragBlock}
|
||
kiMessages={kiMessages}
|
||
kiSuggestions={kiSuggestions}
|
||
onKISend={handleKISend}
|
||
onKISuggestionClick={handleSuggestionClick}
|
||
kiLoading={kiLoading}
|
||
className={mobileRightOpen ? 'open' : ''}
|
||
onCollapse={() => { setMobileRightOpen(false); setRightSidebarCollapsed(true); }}
|
||
collapsed={rightSidebarCollapsed}
|
||
onToggleCollapse={() => setRightSidebarCollapsed((p) => !p)}
|
||
rightbarWidth={rightbarWidth}
|
||
onWidthChange={setRightbarWidth}
|
||
onReorder={handleReorderLayer}
|
||
onAddSubLayer={handleAddSubLayer}
|
||
onUpdateElement={handleUpdateElement}
|
||
selectedElementIds={selectedElementIds}
|
||
groups={groups}
|
||
onSelectElement={handleSelectElement}
|
||
token={token}
|
||
unit={unit}
|
||
scaleFactor={scaleFactor}
|
||
/>
|
||
</div>
|
||
<CommandLine
|
||
history={commandHistory}
|
||
onCommand={handleCommand}
|
||
/>
|
||
<StatusBar
|
||
snapEnabled={snapEnabled}
|
||
orthoEnabled={orthoEnabled}
|
||
polarEnabled={polarEnabled}
|
||
gridEnabled={gridEnabled}
|
||
cursorX={cursorPos.x}
|
||
cursorY={cursorPos.y}
|
||
activeLayer={activeLayerName}
|
||
activeTool={activeTool}
|
||
onlineCount={onlineCount}
|
||
onToggleSnap={handleToggleSnap}
|
||
onToggleOrtho={handleToggleOrtho}
|
||
onTogglePolar={handleTogglePolar}
|
||
onToggleGrid={handleToggleGrid}
|
||
seatCount={seatCount}
|
||
unit={unit}
|
||
scaleFactor={scaleFactor}
|
||
onUnitChange={handleUnitChange}
|
||
/>
|
||
<MobileDrawers
|
||
leftOpen={mobileLeftOpen}
|
||
rightOpen={mobileRightOpen}
|
||
activeRightTab={activeDrawerTab}
|
||
onCloseLeft={() => setMobileLeftOpen(false)}
|
||
onCloseRight={() => setMobileRightOpen(false)}
|
||
onRightTabChange={setActiveDrawerTab}
|
||
/>
|
||
<SettingsModal
|
||
open={settingsOpen}
|
||
onClose={() => setSettingsOpen(false)}
|
||
unit={unit}
|
||
gridSize={gridSize}
|
||
scaleFactor={scaleFactor}
|
||
onUnitChange={handleUnitChange}
|
||
onGridSizeChange={handleGridSizeChange}
|
||
onScaleFactorChange={handleScaleFactorChange}
|
||
/>
|
||
<BackgroundImport
|
||
open={bgImportOpen}
|
||
onClose={() => setBgImportOpen(false)}
|
||
onApply={handleBgApply}
|
||
backgroundService={bgServiceRef.current}
|
||
/>
|
||
{historyPanelOpen && (
|
||
<HistoryPanel
|
||
entries={historyEntries}
|
||
onJumpTo={(entryId: string) => {
|
||
const snap = historyManagerRef.current.jumpTo(entryId);
|
||
if (snap) {
|
||
restoreSnapshot(snap);
|
||
syncHistory();
|
||
setCommandHistory((prev) => [...prev, { prefix: '·', text: `Historie: zu „${snap.label}“ gesprungen`, type: 'info' }]);
|
||
}
|
||
}}
|
||
onClose={() => setHistoryPanelOpen(false)}
|
||
/>
|
||
)}
|
||
{exportFormatOpen && (
|
||
<div className="export-format-overlay" onClick={() => setExportFormatOpen(false)}>
|
||
<div className="export-format-modal" onClick={(e) => e.stopPropagation()}>
|
||
<h3>Export als…</h3>
|
||
<div className="export-format-buttons">
|
||
{(['dxf', 'svg', 'pdf', 'png', 'json'] as ExportFormat[]).map(fmt => (
|
||
<button
|
||
key={fmt}
|
||
className="export-format-btn"
|
||
onClick={() => {
|
||
setExportFormatOpen(false);
|
||
handleExport(fmt);
|
||
}}
|
||
>
|
||
{fmt.toUpperCase()}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<button className="export-format-cancel" onClick={() => setExportFormatOpen(false)}>Abbrechen</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
{editingTextElement && (
|
||
<InlineTextEditor
|
||
initialText={editingTextElement.properties?.text ?? ''}
|
||
onSubmit={handleTextEditorSubmit}
|
||
onCancel={handleTextEditorCancel}
|
||
/>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
// ─── App Wrapper (Auth Gate) ───────────────────────────
|
||
const App: React.FC = () => {
|
||
const { user, token } = useAuth();
|
||
const [authView, setAuthView] = useState<'login' | 'register'>('login');
|
||
const [openedProjectId, setOpenedProjectId] = useState<string | null>(null);
|
||
|
||
// Not authenticated → show Login or Register
|
||
if (!user || !token) {
|
||
return authView === 'login'
|
||
? <Login onSwitchToRegister={() => setAuthView('register')} />
|
||
: <Register onSwitchToLogin={() => setAuthView('login')} />;
|
||
}
|
||
|
||
// Authenticated but no project opened → show Dashboard
|
||
if (!openedProjectId) {
|
||
return <Dashboard onOpenProject={(id) => setOpenedProjectId(id)} />;
|
||
}
|
||
|
||
// Authenticated + project opened → show CAD Editor
|
||
return <CADEditor projectId={openedProjectId} token={token} onNavigateBack={() => setOpenedProjectId(null)} />;
|
||
};
|
||
|
||
export default App;
|