diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index ac09f0f..f0ea0ab 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -331,6 +331,20 @@ const CADEditor: React.FC = ({ projectId, token, onNavigateBack } }, [layers, blocks, groups, bgConfig, syncHistory, drawingId, token, collab, activeLayerId]); + const handleToggleElementVisible = useCallback((id: string) => { + setElements((prev) => prev.map((e) => { + if (e.id === id) { + const newEl = { ...e, properties: { ...e.properties, visible: e.properties?.visible === false ? true : false } }; + if (token) { + setSavedStatus("Speichert…"); + updateElement(token, newEl.id, newEl).then(() => setSavedStatus("gespeichert")).catch(() => setSavedStatus("Fehler")); + } + return newEl; + } + return e; + })); + }, [token]); + const handleElementsDeleted = useCallback((ids: string[]) => { setElements((prev) => { const newElements = prev.filter((e) => !ids.includes(e.id)); @@ -980,6 +994,8 @@ const CADEditor: React.FC = ({ projectId, token, onNavigateBack onRenameLayer={handleRenameLayer} onDuplicateLayer={handleDuplicateLayer} onToggleLock={handleToggleLock} + onElementsDeleted={handleElementsDeleted} + onToggleElementVisible={handleToggleElementVisible} elements={elements} onRenameBlock={handleRenameBlock} onDuplicateBlock={handleDuplicateBlock} diff --git a/frontend/src/canvas/RenderEngine.ts b/frontend/src/canvas/RenderEngine.ts index 0a03892..2a841c1 100644 --- a/frontend/src/canvas/RenderEngine.ts +++ b/frontend/src/canvas/RenderEngine.ts @@ -151,7 +151,7 @@ export class RenderEngine { const layers = this.layerManager.getLayers(); for (const layer of layers) { if (!layer.visible) continue; - const els = visibleElements.filter(e => e.layerId === layer.id); + const els = visibleElements.filter(e => e.layerId === layer.id && e.properties?.visible !== false); for (const el of els) { this.drawElement(el, layer); } diff --git a/frontend/src/components/LayerPanel.tsx b/frontend/src/components/LayerPanel.tsx index 1275333..93c7e62 100644 --- a/frontend/src/components/LayerPanel.tsx +++ b/frontend/src/components/LayerPanel.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +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'; @@ -67,6 +67,8 @@ const LayerPanel: React.FC = ({ onToggleLock, onReorder, onAddSubLayer, + onElementsDeleted, + onToggleElementVisible, }) => { const buildTree = (parentId: string | null): TreeNode[] => { return layers @@ -87,7 +89,7 @@ const LayerPanel: React.FC = ({ id: l.id, name: l.name, icon: layerIcon, - expanded: true, + expanded: false, active: l.id === activeLayerId, children: [...subLayerNodes, ...elementNodes], count: layerElements.length > 0 ? layerElements.length : undefined, @@ -132,46 +134,70 @@ const LayerPanel: React.FC = ({ renderIcon={(node) => node.icon} renderActions={(node) => { const layer = layers.find((l) => l.id === node.id); - if (!layer) return null; - return ( -
- - - - - -
- ); + if (layer) { + return ( +
+ + + + + +
+ ); + } + const element = elements.find((el) => el.id === node.id); + if (element) { + const isVisible = element.properties?.visible !== false; + return ( +
+ + +
+ ); + } + return null; }} /> )} diff --git a/frontend/src/components/RightSidebar.tsx b/frontend/src/components/RightSidebar.tsx index c335294..9126604 100644 --- a/frontend/src/components/RightSidebar.tsx +++ b/frontend/src/components/RightSidebar.tsx @@ -17,6 +17,7 @@ const RightSidebar: React.FC = ({ activeLayerId, onSelectLayer, onAddLayer, onToggleLayer, onDeleteLayer, onRenameLayer, onDuplicateLayer, onToggleLock, onReorder, onAddSubLayer, + onElementsDeleted, onToggleElementVisible, elements, onRenameBlock, onDuplicateBlock, onDeleteBlock, onSvgImport, onSaveGroupAsBlock, onBlockCategoryChange, onBlockSearch, onDragBlock, @@ -57,7 +58,7 @@ const RightSidebar: React.FC = ({ }} />}
- {activePanel === 'layer' && {})} onAddLayer={onAddLayer ?? (() => {})} onToggleLayer={onToggleLayer ?? (() => {})} onDeleteLayer={onDeleteLayer} onRenameLayer={onRenameLayer} onDuplicateLayer={onDuplicateLayer} onToggleLock={onToggleLock} onReorder={onReorder} onAddSubLayer={onAddSubLayer} />} + {activePanel === 'layer' && {})} onAddLayer={onAddLayer ?? (() => {})} onToggleLayer={onToggleLayer ?? (() => {})} onDeleteLayer={onDeleteLayer} onRenameLayer={onRenameLayer} onDuplicateLayer={onDuplicateLayer} onToggleLock={onToggleLock} onReorder={onReorder} onAddSubLayer={onAddSubLayer} />}
{activePanel === 'library' && {})} onSearch={onBlockSearch ?? (() => {})} onDragBlock={onDragBlock ?? (() => {})} onRenameBlock={onRenameBlock} onDuplicateBlock={onDuplicateBlock} onDeleteBlock={onDeleteBlock} onSvgImport={onSvgImport} onSaveGroupAsBlock={onSaveGroupAsBlock} />} diff --git a/frontend/src/types/ui.types.ts b/frontend/src/types/ui.types.ts index a948bdb..01727f0 100644 --- a/frontend/src/types/ui.types.ts +++ b/frontend/src/types/ui.types.ts @@ -138,6 +138,8 @@ export interface RightSidebarProps { onUpdateLayerLineType?: (id: string, lineType: 'solid' | 'dashed' | 'dotted') => void; onUpdateLayerTransparency?: (id: string, transparency: number) => void; onAddSubLayer?: (parentId: string) => void; + onElementsDeleted?: (ids: string[]) => void; + onToggleElementVisible?: (id: string) => void; onRenameBlock?: (id: string, name: string) => void; onDuplicateBlock?: (id: string) => void; onDeleteBlock?: (id: string) => void; @@ -176,6 +178,8 @@ export interface LayerPanelProps { onUpdateLayerLineType?: (id: string, lineType: 'solid' | 'dashed' | 'dotted') => void; onUpdateLayerTransparency?: (id: string, transparency: number) => void; onAddSubLayer?: (parentId: string) => void; + onElementsDeleted?: (ids: string[]) => void; + onToggleElementVisible?: (id: string) => void; } export interface BlockLibraryProps {