Projekt-Settings-Dialog + Library Phase A + Material-Merger
- Project-Settings-Dialog (Voreinstellungen Geschoss/Schnitt + Material-Editor) ueber Zahnrad-Icon in Oberleiste; Defaults werden in schnitte.pick_schnitt + GeschossManager als Vorgabe genommen, pro-Element-Werte unangetastet - Dossier-Library Phase A (lokal, read-only): rhino/library.py + LibraryBrowser Satellite; Seed-Manifest unter ~/Library/Application Support/Dossier/library/ - Material-Merger: _get_all_materials(doc) merged builtin _MATERIAL_LIBRARY mit Projekt-Settings-Materialien (inkl. Library-Imports); Wand-Erstellung, Sub-Layer-Anlage + Elemente-Material-Dropdown ziehen jetzt aus dem Merge Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,288 @@
|
||||
import { useState } from 'react'
|
||||
import Icon from './Icon'
|
||||
import { openLibrary } from '../lib/rhinoBridge'
|
||||
|
||||
/* Inline Field + Tab helpers fuer kompaktes Layout im Satellite. */
|
||||
function Field({ label, hint, children, style }) {
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 3,
|
||||
padding: '5px 0', ...style }}>
|
||||
<span style={{ fontSize: 10, color: 'var(--text-secondary)',
|
||||
fontWeight: 500, letterSpacing: 0.2 }}>{label}</span>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>{children}</div>
|
||||
{hint && (
|
||||
<span style={{ fontSize: 9, color: 'var(--text-muted)', lineHeight: 1.4 }}>
|
||||
{hint}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function TabBar({ tabs, active, onChange }) {
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex', gap: 0,
|
||||
borderBottom: '1px solid var(--border)',
|
||||
paddingLeft: 4,
|
||||
}}>
|
||||
{tabs.map(t => (
|
||||
<button key={t.key}
|
||||
onClick={() => onChange(t.key)}
|
||||
style={{
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
borderBottom: active === t.key ? '2px solid var(--accent)' : '2px solid transparent',
|
||||
padding: '8px 14px',
|
||||
fontSize: 11, fontWeight: active === t.key ? 600 : 500,
|
||||
color: active === t.key ? 'var(--text-primary)' : 'var(--text-muted)',
|
||||
cursor: 'pointer',
|
||||
marginBottom: -1,
|
||||
}}>
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function MaterialRow({ mat, hatchPatterns, onChange, onDelete, builtin }) {
|
||||
return (
|
||||
<div style={{
|
||||
display: 'grid', gridTemplateColumns: '14px 1fr 90px 60px 18px',
|
||||
alignItems: 'center', gap: 6,
|
||||
padding: '4px 8px',
|
||||
borderBottom: '1px solid var(--border-light)',
|
||||
background: builtin ? 'var(--bg-section)' : 'transparent',
|
||||
}}>
|
||||
<input type="color" value={mat.color || '#888888'}
|
||||
onChange={(ev) => onChange({ ...mat, color: ev.target.value })}
|
||||
title="Farbe"
|
||||
style={{ width: 14, height: 14, padding: 0, border: 'none',
|
||||
background: 'transparent', cursor: 'pointer' }} />
|
||||
<input type="text" value={mat.name || ''}
|
||||
onChange={(ev) => onChange({ ...mat, name: ev.target.value })}
|
||||
disabled={builtin}
|
||||
placeholder="Name"
|
||||
style={{ flex: 1, fontSize: 11, minWidth: 0,
|
||||
opacity: builtin ? 0.7 : 1 }} />
|
||||
<select value={mat.hatch || 'Solid'}
|
||||
onChange={(ev) => onChange({ ...mat, hatch: ev.target.value })}
|
||||
style={{ fontSize: 11, minWidth: 0 }}>
|
||||
{(hatchPatterns || []).map(h => (
|
||||
<option key={h} value={h}>{h}</option>
|
||||
))}
|
||||
</select>
|
||||
<input type="number" step="0.1" min="0.1"
|
||||
value={mat.scale ?? 1.0}
|
||||
onChange={(ev) => onChange({ ...mat, scale: parseFloat(ev.target.value) || 1.0 })}
|
||||
title="Hatch-Skalierung"
|
||||
style={{ fontSize: 11, textAlign: 'right' }} />
|
||||
{mat.source === 'library' ? (
|
||||
<span style={{ fontSize: 9, color: 'var(--accent-light)' }}
|
||||
title="Aus Dossier-Library">L</span>
|
||||
) : builtin || mat.source === 'builtin' ? (
|
||||
<span style={{ fontSize: 9, color: 'var(--text-muted)' }}
|
||||
title="Eingebaut">B</span>
|
||||
) : (
|
||||
<button onClick={onDelete} title="Loeschen"
|
||||
style={{ background: 'transparent', border: 'none',
|
||||
padding: 0, cursor: 'pointer',
|
||||
color: 'var(--text-muted)' }}>
|
||||
<Icon name="close" size={12} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function ProjectSettingsDialog({
|
||||
initial, onSave, onClose, embedded = false,
|
||||
}) {
|
||||
const [tab, setTab] = useState('defaults')
|
||||
const [draft, setDraft] = useState(() => ({
|
||||
defaults: { ...(initial.defaults || {}) },
|
||||
materials: [...(initial.materials || [])],
|
||||
}))
|
||||
const builtin = initial.builtinMaterials || []
|
||||
const hatchPatterns = initial.hatchPatterns || ['Solid']
|
||||
|
||||
const setDefault = (k, v) =>
|
||||
setDraft(d => ({ ...d, defaults: { ...d.defaults, [k]: v } }))
|
||||
|
||||
const setMat = (i, newMat) => setDraft(d => ({
|
||||
...d, materials: d.materials.map((m, idx) => idx === i ? newMat : m),
|
||||
}))
|
||||
const delMat = (i) => setDraft(d => ({
|
||||
...d, materials: d.materials.filter((_, idx) => idx !== i),
|
||||
}))
|
||||
const addMat = () => setDraft(d => ({
|
||||
...d,
|
||||
materials: [...d.materials, {
|
||||
name: 'Neues Material', color: '#aaaaaa',
|
||||
hatch: 'Solid', scale: 1.0,
|
||||
// source/libraryId vorbereitet fuer kommendes Library-Feature:
|
||||
// 'local' = manuell erstellt, 'library' = aus Cloud-Repo, libraryId
|
||||
// referenziert dann das Library-Item per UUID.
|
||||
source: 'local', libraryId: null,
|
||||
}],
|
||||
}))
|
||||
|
||||
const wrapperStyle = embedded ? {
|
||||
width: '100%', height: '100%',
|
||||
background: 'var(--bg-dialog)',
|
||||
display: 'flex', flexDirection: 'column',
|
||||
overflow: 'hidden',
|
||||
fontFamily: 'var(--font)', color: 'var(--text-primary)', fontSize: 11,
|
||||
} : {
|
||||
position: 'absolute', inset: 0, zIndex: 150,
|
||||
background: 'var(--bg-overlay)',
|
||||
display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
|
||||
paddingTop: 40,
|
||||
}
|
||||
return (
|
||||
<div style={wrapperStyle}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', flex: 1,
|
||||
minHeight: 0, overflow: 'hidden' }}>
|
||||
{/* Header */}
|
||||
<div style={{
|
||||
display: 'flex', alignItems: 'center', gap: 6,
|
||||
padding: '10px 12px',
|
||||
borderBottom: '1px solid var(--border)',
|
||||
}}>
|
||||
<Icon name="tune" size={14}
|
||||
style={{ color: 'var(--text-secondary)', flexShrink: 0 }} />
|
||||
<span style={{ flex: 1, fontWeight: 600, fontSize: 11 }}>
|
||||
Projekt-Einstellungen
|
||||
</span>
|
||||
<button onClick={onClose}
|
||||
style={{ color: 'var(--text-muted)', fontSize: 16,
|
||||
padding: '0 4px', lineHeight: 1 }}>×</button>
|
||||
</div>
|
||||
|
||||
<TabBar tabs={[
|
||||
{ key: 'defaults', label: 'Voreinstellungen' },
|
||||
{ key: 'materials', label: 'Materialien' },
|
||||
]} active={tab} onChange={setTab} />
|
||||
|
||||
{/* Body */}
|
||||
<div style={{ flex: 1, minHeight: 0, overflowY: 'auto',
|
||||
padding: '8px 14px' }}>
|
||||
{tab === 'defaults' && (
|
||||
<>
|
||||
<div style={{ fontSize: 9, color: 'var(--text-muted)',
|
||||
padding: '4px 0 8px', lineHeight: 1.5 }}>
|
||||
Diese Werte werden beim Erstellen neuer Elemente als
|
||||
Voreinstellung genommen. Pro-Element editierte Werte
|
||||
bleiben davon unberuehrt.
|
||||
</div>
|
||||
<Field label="STANDARD-GESCHOSSHÖHE (m)"
|
||||
hint="Vorgabe fuer neue Geschosse — pro Geschoss ueberschreibbar">
|
||||
<input type="number" step="0.05" min="1.0" max="10"
|
||||
value={draft.defaults.geschossHoehe ?? 3.0}
|
||||
onChange={(ev) => setDefault('geschossHoehe', parseFloat(ev.target.value) || 3.0)}
|
||||
style={{ flex: 1, textAlign: 'right' }} />
|
||||
</Field>
|
||||
<Field label="STANDARD-SCHNITTHÖHE (m)"
|
||||
hint="Höhe der horizontalen Schnitt-Plane über OKFF eines Geschosses">
|
||||
<input type="number" step="0.05" min="0.1" max="3"
|
||||
value={draft.defaults.schnitthoehe ?? 1.0}
|
||||
onChange={(ev) => setDefault('schnitthoehe', parseFloat(ev.target.value) || 1.0)}
|
||||
style={{ flex: 1, textAlign: 'right' }} />
|
||||
</Field>
|
||||
<div style={{ height: 1, background: 'var(--border-light)',
|
||||
margin: '8px 0' }} />
|
||||
<Field label="STANDARD-SCHNITT-TIEFE HINTEN (m)"
|
||||
hint="Default-Tiefe für neue Schnitte/Ansichten — wie weit hinter der Schnittlinie sichtbar">
|
||||
<input type="number" step="0.5" min="0.5"
|
||||
value={draft.defaults.schnittDepthBack ?? 8.0}
|
||||
onChange={(ev) => setDefault('schnittDepthBack', parseFloat(ev.target.value) || 8.0)}
|
||||
style={{ flex: 1, textAlign: 'right' }} />
|
||||
</Field>
|
||||
<div style={{ display: 'flex', gap: 6 }}>
|
||||
<Field label="HÖHE UNTEN (m)" style={{ flex: 1 }}>
|
||||
<input type="number" step="0.1"
|
||||
value={draft.defaults.schnittHeightMin ?? -1.0}
|
||||
onChange={(ev) => setDefault('schnittHeightMin', parseFloat(ev.target.value))}
|
||||
style={{ flex: 1, textAlign: 'right' }} />
|
||||
</Field>
|
||||
<Field label="HÖHE OBEN (m)" style={{ flex: 1 }}>
|
||||
<input type="number" step="0.1"
|
||||
value={draft.defaults.schnittHeightMax ?? 12.0}
|
||||
onChange={(ev) => setDefault('schnittHeightMax', parseFloat(ev.target.value))}
|
||||
style={{ flex: 1, textAlign: 'right' }} />
|
||||
</Field>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{tab === 'materials' && (
|
||||
<>
|
||||
<div style={{ fontSize: 9, color: 'var(--text-muted)',
|
||||
padding: '4px 0 8px', lineHeight: 1.5 }}>
|
||||
Eingebaute Materialien (B) koennen nicht umbenannt werden,
|
||||
aber Farbe + Hatch sind anpassbar. Eigene Materialien
|
||||
koennen frei angelegt werden.
|
||||
</div>
|
||||
{/* Built-in materials (read-only name) */}
|
||||
{builtin.map((m, i) => (
|
||||
<MaterialRow key={'b_' + m.name}
|
||||
mat={m}
|
||||
builtin
|
||||
hatchPatterns={hatchPatterns}
|
||||
onChange={() => {/* read-only fuer Phase 1 */}} />
|
||||
))}
|
||||
{/* User materials */}
|
||||
{draft.materials.map((m, i) => (
|
||||
<MaterialRow key={'u_' + i}
|
||||
mat={m}
|
||||
hatchPatterns={hatchPatterns}
|
||||
onChange={(nm) => setMat(i, nm)}
|
||||
onDelete={() => delMat(i)} />
|
||||
))}
|
||||
<div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
|
||||
<button onClick={addMat}
|
||||
style={{
|
||||
padding: '4px 10px', fontSize: 11,
|
||||
background: 'var(--bg-input)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: 999, cursor: 'pointer',
|
||||
color: 'var(--text-primary)',
|
||||
display: 'inline-flex', alignItems: 'center', gap: 4,
|
||||
}}>
|
||||
<Icon name="add" size={12} /> Material hinzufuegen
|
||||
</button>
|
||||
<button onClick={openLibrary}
|
||||
title="Material aus Dossier-Library importieren"
|
||||
style={{
|
||||
padding: '4px 10px', fontSize: 11,
|
||||
background: 'transparent',
|
||||
border: '1px solid var(--accent)',
|
||||
borderRadius: 999, cursor: 'pointer',
|
||||
color: 'var(--accent)',
|
||||
display: 'inline-flex', alignItems: 'center', gap: 4,
|
||||
}}>
|
||||
<Icon name="inventory_2" size={12} /> Library oeffnen
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div style={{
|
||||
display: 'flex', alignItems: 'center', gap: 6,
|
||||
padding: '8px 12px',
|
||||
borderTop: '1px solid var(--border)',
|
||||
background: 'var(--bg-section)',
|
||||
}}>
|
||||
<div style={{ flex: 1 }} />
|
||||
<button className="btn-text" onClick={onClose}>Abbrechen</button>
|
||||
<button className="btn-contained" onClick={() => onSave(draft)}>
|
||||
Übernehmen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user