Leopoldadmin/web-cad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: delete function, sidebar collapse, layer drag&drop, library tree

Browse Source 
- Delete: trash button in PropertiesPanel + existing Delete key support
- Left sidebar: desktop collapse toggle button
- Right sidebar: desktop collapse toggle + SVG icon size fix (replaced emoji)
- Layer panel: drag&drop enabled (reorder, move to layers, sub-layers)
- Library tree: BlockLibrary added to left sidebar
- App.tsx: handleReorderLayer, handleAddSubLayer, handleUpdateElement
- styles.css: collapse + drag&drop visual indicators
This commit is contained in:
Leopoldadmin
2026-06-29 10:44:53 +02:00
parent 6b0b637636
commit ba978cd13c
7 changed files with 222 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/RightSidebar.tsx
+9 -2
View File
@@ -24,12 +24,19 @@ const RightSidebar: React.FC<RightSidebarProps> = ({
onBlockCategoryChange, onBlockSearch, onDragBlock,
kiMessages, kiSuggestions, onKISend, onKISuggestionClick, kiLoading, onUpdateElement,
onCollapse,
collapsed,
onToggleCollapse,
}) => {
return (
<aside className={`rightbar${className ? ' ' + className : ''}`} aria-label="Eigenschaften-Panels">
<aside className={`rightbar${className ? ' ' + className : ''}${collapsed ? ' rightbar-collapsed' : ''}`} aria-label="Eigenschaften-Panels">
<button className="rightbar-close" aria-label="Rechte Leiste schließen" onClick={onCollapse}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
</button>
{onToggleCollapse && (
<button className="rightbar-collapse-toggle" aria-label="Rechte Leiste ein-/ausklappen" onClick={onToggleCollapse} title="Rechte Leiste ein-/ausklappen">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
</button>
)}
<div className="rightbar-tabs" role="tablist">
{tabs.map((tab) => (
<button
@@ -49,7 +56,7 @@ const RightSidebar: React.FC<RightSidebarProps> = ({
<div className="rightbar-content">
<div className={`rightbar-panel${activePanel === 'tool' ? ' active' : ''}`} data-panel-content="tool">
{activePanel === 'tool' && <PropertiesPanel selectedElement={selectedElement} layers={layers} onUpdateProperty={(key, value) => {
{activePanel === 'tool' && <PropertiesPanel selectedElement={selectedElement} layers={layers} onDelete={selectedElement && onElementsDeleted ? () => onElementsDeleted([selectedElement.id]) : undefined} onUpdateProperty={(key, value) => {
if (!selectedElement || !onUpdateElement) return;
const updated = { ...selectedElement };
if (key === 'x' || key === 'y' || key === 'width' || key === 'height') {