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

feat: click-drag drawing, layer tree, settings modal, UI improvements

Browse Source 
- interaction: click-drag drawing for 2-point tools (line, rect, circle, dimension, leader)
- interaction: preview rendering during drag with setPreviewElement
- interaction: handleDrawDown only sets phase=drawing on first point
- CanvasArea: sync activeLayerId to LayerManager
- CanvasArea: callback refresh useEffect prevents stale closures
- App.tsx: functional setElements updates for handleElementCreated/Deleted/Modified
- LayerPanel: tree structure with sub-layers (onReorder, onAddSubLayer)
- TreeView: drag-and-drop reordering support
- RightSidebar: onReorder, onAddSubLayer, onUpdateElement props
- PropertiesPanel: onUpdateElement prop
- SettingsModal: personal/password/language/theme/users/plugins/AI tabs
- styles.css: extensive UI styling additions
- types: updated RightSidebarProps, CanvasAreaProps, LayerPanelProps
This commit is contained in:
Leopoldadmin
2026-06-27 14:12:37 +02:00
parent 39422a4348
commit 4303076ce4
17 changed files with 929 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/PropertiesPanel.tsx
+13 -13
View File
@@ -3,11 +3,11 @@ import type { PropertiesPanelProps } from '../types/ui.types';
const PropertiesPanel: React.FC<PropertiesPanelProps> = ({ selectedElement, layers, onUpdateProperty }) => {
const el = selectedElement;
const x = el ? el.x.toFixed(3) + ' m' : '0.000 m';
const y = el ? el.y.toFixed(3) + ' m' : '0.000 m';
const w = el ? el.width.toFixed(2) + ' m' : '0.50 m';
const h = el ? el.height.toFixed(2) + ' m' : '0.50 m';
const rot = el ? (el.properties.rotation ?? 0).toFixed(2) + '°' : '0.00°';
const x = el ? String(el.x) : '0';
const y = el ? String(el.y) : '0';
const w = el ? String(el.width) : '0.5';
const h = el ? String(el.height) : '0.5';
const rot = el ? String(el.properties.rotation ?? 0) : '0';
const color = (el?.properties.stroke as string) || '#3b82f6';
const blockName = el?.properties.blockId || 'Stuhl-Standard';
const desc = el?.properties.text as string || 'Standard-Konferenzstuhl 0.5×0.5m';
@@ -27,23 +27,23 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({ selectedElement, laye
<div className="panel-section-title"><span>Geometrie</span></div>
<div className="prop-row">
<span className="prop-label">Position X</span>
<input className="prop-input" type="text" value={x} aria-label="Position X" onChange={(e) => onUpdateProperty('x', e.target.value)} />
<input className="prop-input" type="text" value={x} aria-label="Position X" onChange={(e) => onUpdateProperty('x', parseFloat(e.target.value) || 0)} />
</div>
<div className="prop-row">
<span className="prop-label">Position Y</span>
<input className="prop-input" type="text" value={y} aria-label="Position Y" onChange={(e) => onUpdateProperty('y', e.target.value)} />
<input className="prop-input" type="text" value={y} aria-label="Position Y" onChange={(e) => onUpdateProperty('y', parseFloat(e.target.value) || 0)} />
</div>
<div className="prop-row">
<span className="prop-label">Breite</span>
<input className="prop-input" type="text" value={w} aria-label="Breite" onChange={(e) => onUpdateProperty('width', e.target.value)} />
<input className="prop-input" type="text" value={w} aria-label="Breite" onChange={(e) => onUpdateProperty('width', parseFloat(e.target.value) || 0)} />
</div>
<div className="prop-row">
<span className="prop-label">Tiefe</span>
<input className="prop-input" type="text" value={h} aria-label="Tiefe" onChange={(e) => onUpdateProperty('height', e.target.value)} />
<input className="prop-input" type="text" value={h} aria-label="Tiefe" onChange={(e) => onUpdateProperty('height', parseFloat(e.target.value) || 0)} />
</div>
<div className="prop-row">
<span className="prop-label">Drehung</span>
<input className="prop-input" type="text" value={rot} aria-label="Drehung" onChange={(e) => onUpdateProperty('rotation', e.target.value)} />
<input className="prop-input" type="text" value={rot} aria-label="Drehung" onChange={(e) => onUpdateProperty('rotation', parseFloat(e.target.value) || 0)} />
</div>
</div>
@@ -59,7 +59,7 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({ selectedElement, laye
</div>
<div className="prop-row">
<span className="prop-label">Linientyp</span>
<select className="prop-select" aria-label="Linientyp" onChange={(e) => onUpdateProperty('lineType', e.target.value)}>
<select className="prop-select" aria-label="Linientyp" value={el?.properties.lineType || 'solid'} onChange={(e) => onUpdateProperty('lineType', e.target.value)}>
<option>Solid (durchgehend)</option>
<option>Dashed (gestrichelt)</option>
<option>Dotted (gepunktet)</option>
@@ -68,7 +68,7 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({ selectedElement, laye
</div>
<div className="prop-row">
<span className="prop-label">Stärke</span>
<select className="prop-select" aria-label="Linienstärke" onChange={(e) => onUpdateProperty('strokeWidth', e.target.value)}>
<select className="prop-select" aria-label="Linienstärke" value={String(el?.properties.strokeWidth ?? '0.18')} onChange={(e) => onUpdateProperty('strokeWidth', e.target.value)}>
<option>0.18 mm · Normal</option>
<option>0.25 mm · Dick</option>
<option>0.35 mm · Extra</option>
@@ -77,7 +77,7 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({ selectedElement, laye
</div>
<div className="prop-row">
<span className="prop-label">Layer</span>
<select className="prop-select" aria-label="Layer zuweisen" onChange={(e) => onUpdateProperty('layerId', e.target.value)}>
<select className="prop-select" aria-label="Layer zuweisen" value={el?.layerId || ''} onChange={(e) => onUpdateProperty('layerId', e.target.value)}>
{layers.length > 0 ? layers.map((l) => (
<option key={l.id} value={l.id}>{l.name}</option>
)) : (