fix: layer IDs globally unique - use timestamp-based IDs instead of hardcoded layer-0/1/2/3/4

Root cause: layers.id is TEXT PRIMARY KEY (global unique across all drawings).
Hardcoded IDs layer-0..layer-4 collided when multiple projects tried to create
the same layer IDs. Second project got UNIQUE constraint failed on POST /layers.
Without layers, elements had dangling layer_id refs causing FOREIGN KEY errors.

Fix: makeInitialLayers() generates unique IDs: layer-{timestamp}-{index}.
activeLayerId initialized from first layer, not hardcoded.
activeLayerName uses activeLayerId variable, not hardcoded layer-0.
On project load with existing layers, activeLayerId set from first DB layer.
This commit is contained in:
2026-06-26 20:53:41 +02:00
parent 7ad0e11873
commit 39422a4348
+20 -10
View File
@@ -36,13 +36,18 @@ import { Register } from './pages/Register';
import { Dashboard } from './pages/Dashboard'; import { Dashboard } from './pages/Dashboard';
// ─── Mock Data ────────────────────────────────────────────── // ─── Mock Data ──────────────────────────────────────────────
const initialLayers: CADLayer[] = [ function makeInitialLayers(): CADLayer[] {
{ id: 'layer-0', name: 'Wände', visible: true, locked: false, color: '#e74c3c', lineType: 'solid', transparency: 0, sortOrder: 0, parentId: null }, const ts = Date.now();
{ id: 'layer-1', name: 'Türen', visible: true, locked: false, color: '#3498db', lineType: 'solid', transparency: 0, sortOrder: 1, parentId: null }, return [
{ id: 'layer-2', name: 'Bestuhlung', visible: true, locked: false, color: '#2ecc71', lineType: 'solid', transparency: 0, sortOrder: 2, parentId: null }, { id: `layer-${ts}-0`, name: 'Wände', visible: true, locked: false, color: '#e74c3c', lineType: 'solid', transparency: 0, sortOrder: 0, parentId: null },
{ id: 'layer-3', name: 'Bühne', visible: true, locked: false, color: '#f39c12', lineType: 'solid', transparency: 0, sortOrder: 3, parentId: null }, { id: `layer-${ts}-1`, name: 'Türen', visible: true, locked: false, color: '#3498db', lineType: 'solid', transparency: 0, sortOrder: 1, parentId: null },
{ id: 'layer-4', name: 'Hintergrund', visible: true, locked: true, color: '#95a5a6', lineType: 'dotted', transparency: 50, sortOrder: 4, parentId: null }, { id: `layer-${ts}-2`, name: 'Bestuhlung', visible: true, locked: false, color: '#2ecc71', lineType: 'solid', transparency: 0, sortOrder: 2, parentId: null },
]; { id: `layer-${ts}-3`, name: 'Bühne', visible: true, locked: false, color: '#f39c12', lineType: 'solid', transparency: 0, sortOrder: 3, parentId: null },
{ id: `layer-${ts}-4`, name: 'Hintergrund', visible: true, locked: true, color: '#95a5a6', lineType: 'dotted', transparency: 50, sortOrder: 4, parentId: null },
];
}
const initialLayers: CADLayer[] = makeInitialLayers();
const initialBlocks: BlockDefinition[] = createDefaultBlocks(); const initialBlocks: BlockDefinition[] = createDefaultBlocks();
@@ -110,7 +115,7 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
const [activeRightPanel, setActiveRightPanel] = useState<RightPanel>('tool'); const [activeRightPanel, setActiveRightPanel] = useState<RightPanel>('tool');
const [selectedElement, setSelectedElement] = useState<CADElement | null>(null); const [selectedElement, setSelectedElement] = useState<CADElement | null>(null);
const [layers, setLayers] = useState<CADLayer[]>(initialLayers); const [layers, setLayers] = useState<CADLayer[]>(initialLayers);
const [activeLayerId, setActiveLayerId] = useState<string>('layer-0'); const [activeLayerId, setActiveLayerId] = useState<string>(initialLayers[0].id);
const [blocks, setBlocks] = useState<BlockDefinition[]>(initialBlocks); const [blocks, setBlocks] = useState<BlockDefinition[]>(initialBlocks);
const [blockCategory, setBlockCategory] = useState('Alle'); const [blockCategory, setBlockCategory] = useState('Alle');
const [selectedTemplate, setSelectedTemplate] = useState<string | null>(null); const [selectedTemplate, setSelectedTemplate] = useState<string | null>(null);
@@ -252,9 +257,14 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
if (data.blocks.length > 0) setBlocks(data.blocks); if (data.blocks.length > 0) setBlocks(data.blocks);
// Save initial layers to backend if backend has none // Save initial layers to backend if backend has none
if (data.layers.length === 0 && data.drawing) { if (data.layers.length === 0 && data.drawing) {
for (const layer of initialLayers) { const freshLayers = makeInitialLayers();
setLayers(freshLayers);
setActiveLayerId(freshLayers[0].id);
for (const layer of freshLayers) {
createLayerTyped(token, data.drawing.id, layer).catch(() => {}); createLayerTyped(token, data.drawing.id, layer).catch(() => {});
} }
} else {
setActiveLayerId(data.layers[0]?.id ?? initialLayers[0].id);
} }
setSavedStatus('gespeichert'); setSavedStatus('gespeichert');
setDataLoaded(true); setDataLoaded(true);
@@ -911,7 +921,7 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
handleKISend(suggestion.label); handleKISend(suggestion.label);
}, [handleKISend]); }, [handleKISend]);
const activeLayerName = layers.find((l) => l.id === 'layer-0')?.name ?? '—'; const activeLayerName = layers.find((l) => l.id === activeLayerId)?.name ?? '—';
// ─── Render ───────────────────────────────────────────── // ─── Render ─────────────────────────────────────────────
return ( return (