Initial commit — Dossier Rhino 8 Plugin
OpenStudio-Suite Architektur-Plugin fuer Rhino 8 (Mac): - Smart-Elemente: Wand, Decke, Dach (Pult/Sattel/Walm/Mansarde), Oeffnungen (Fenster/Tueren mit Rahmen + Sims + Glas + Fluegel), Treppen (gerade · L · Wendel mit Schrittmass-Validierung) - Live-Previews mit Step-Lines + Soll-Range-Clamping - Bidirektionale Selection-Sync zwischen Source-Linie und Volume - Geschoss-/Ebenen-Verwaltung mit OKFF-Persistenz - Layouts mit PDF-Export - Ausschnitte / Massstab / Override-Regeln - Petrol-Gruen Theme (Rapport-konform) Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,601 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import Icon from './components/Icon'
|
||||
import ContextMenu from './components/ContextMenu'
|
||||
import {
|
||||
onMessage, notifyReady,
|
||||
setOverridesEnabled, addRule, updateRule, deleteRule,
|
||||
reorderRules, duplicateRule, reapplyOverrides, clearOverrideRules,
|
||||
savePreset, loadPreset, deletePreset,
|
||||
} from './lib/rhinoBridge'
|
||||
|
||||
const COND_TYPES = [
|
||||
{ value: 'layer_name', label: 'Layer-Name' },
|
||||
{ value: 'user_string', label: 'UserString' },
|
||||
{ value: 'object_name', label: 'Objekt-Name' },
|
||||
]
|
||||
|
||||
const OPS = [
|
||||
{ value: 'equals', label: '=' },
|
||||
{ value: 'not_equals', label: '≠' },
|
||||
{ value: 'contains', label: 'enthält' },
|
||||
{ value: 'starts_with', label: 'beginnt mit' },
|
||||
{ value: 'ends_with', label: 'endet mit' },
|
||||
]
|
||||
|
||||
const labelXs = {
|
||||
fontSize: 9, color: 'var(--text-muted)',
|
||||
textTransform: 'uppercase', letterSpacing: '0.06em',
|
||||
fontWeight: 600,
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function ConditionLeaf({ cond, layers, onChange, onRemove, canRemove }) {
|
||||
const t = cond?.type || 'layer_name'
|
||||
const op = cond?.operator || 'equals'
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex', flexDirection: 'column', gap: 6,
|
||||
padding: 8,
|
||||
border: '1px solid var(--border-light)', borderRadius: 'var(--r-lg)',
|
||||
background: 'var(--bg-section)',
|
||||
}}>
|
||||
<div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
|
||||
<select
|
||||
value={t}
|
||||
onChange={(e) => onChange({ ...cond, type: e.target.value })}
|
||||
style={{ flex: 1, minWidth: 0 }}
|
||||
>
|
||||
{COND_TYPES.map(c => <option key={c.value} value={c.value}>{c.label}</option>)}
|
||||
</select>
|
||||
{canRemove && (
|
||||
<button onClick={onRemove} className="btn-icon-danger"
|
||||
title="Diese Bedingung entfernen">
|
||||
<Icon name="close" size={14} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{t === 'user_string' && (
|
||||
<input
|
||||
type="text" placeholder="Key"
|
||||
value={cond?.key || ''}
|
||||
onChange={(e) => onChange({ ...cond, key: e.target.value })}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
)}
|
||||
<div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
|
||||
<select
|
||||
value={op}
|
||||
onChange={(e) => onChange({ ...cond, operator: e.target.value })}
|
||||
style={{ flexShrink: 0 }}
|
||||
>
|
||||
{OPS.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
|
||||
</select>
|
||||
{t === 'layer_name' ? (
|
||||
<select
|
||||
value={cond?.value || ''}
|
||||
onChange={(e) => onChange({ ...cond, value: e.target.value })}
|
||||
style={{ flex: 1, minWidth: 0 }}
|
||||
>
|
||||
<option value="">—</option>
|
||||
{(layers || []).map(l => (
|
||||
<option key={l.fullPath} value={l.fullPath}>{l.fullPath}</option>
|
||||
))}
|
||||
</select>
|
||||
) : (
|
||||
<input
|
||||
type="text" placeholder="Wert"
|
||||
value={cond?.value || ''}
|
||||
onChange={(e) => onChange({ ...cond, value: e.target.value })}
|
||||
style={{ flex: 1, minWidth: 0 }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ConditionsEditor({ rule, layers, onChange }) {
|
||||
const conds = rule.conditions && rule.conditions.length > 0
|
||||
? rule.conditions
|
||||
: (rule.condition ? [rule.condition] : [{ type: 'layer_name', operator: 'equals', value: '' }])
|
||||
const logic = (rule.conditionsLogic || 'and').toLowerCase()
|
||||
|
||||
const update = (i, newCond) => {
|
||||
const next = conds.slice()
|
||||
next[i] = newCond
|
||||
onChange({ ...rule, conditions: next, condition: undefined })
|
||||
}
|
||||
const remove = (i) => {
|
||||
const next = conds.slice()
|
||||
next.splice(i, 1)
|
||||
onChange({ ...rule, conditions: next.length ? next : [{ type: 'layer_name', operator: 'equals', value: '' }], condition: undefined })
|
||||
}
|
||||
const add = () => {
|
||||
const next = conds.slice()
|
||||
next.push({ type: 'layer_name', operator: 'equals', value: '' })
|
||||
onChange({ ...rule, conditions: next, condition: undefined })
|
||||
}
|
||||
const setLogic = (l) => onChange({ ...rule, conditionsLogic: l })
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||
{conds.length > 1 && (
|
||||
<div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
|
||||
<span style={{ fontSize: 10, color: 'var(--text-muted)' }}>Logik:</span>
|
||||
<button
|
||||
onClick={() => setLogic('and')}
|
||||
className={logic === 'and' ? 'btn-contained' : 'btn-outlined'}
|
||||
title="Alle Bedingungen müssen zutreffen"
|
||||
>AND</button>
|
||||
<button
|
||||
onClick={() => setLogic('or')}
|
||||
className={logic === 'or' ? 'btn-contained' : 'btn-outlined'}
|
||||
title="Mindestens eine Bedingung muss zutreffen"
|
||||
>OR</button>
|
||||
</div>
|
||||
)}
|
||||
{conds.map((c, i) => (
|
||||
<ConditionLeaf
|
||||
key={i}
|
||||
cond={c}
|
||||
layers={layers}
|
||||
onChange={(nc) => update(i, nc)}
|
||||
onRemove={() => remove(i)}
|
||||
canRemove={conds.length > 1}
|
||||
/>
|
||||
))}
|
||||
<button onClick={add} className="btn-outlined" style={{ alignSelf: 'flex-start' }}
|
||||
title="Weitere Bedingung hinzufügen">
|
||||
<Icon name="add" size={14} />
|
||||
<span>Bedingung</span>
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ActionRow({ label, icon, active, onToggle, children }) {
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
||||
<label style={{
|
||||
display: 'flex', alignItems: 'center', gap: 8,
|
||||
cursor: 'pointer', userSelect: 'none',
|
||||
}}>
|
||||
<input type="checkbox" checked={active} onChange={onToggle}
|
||||
style={{ width: 'auto', height: 'auto', padding: 0 }} />
|
||||
<Icon name={icon} size={14} style={{ color: 'var(--text-muted)' }} />
|
||||
<span style={{ fontSize: 11, color: active ? 'var(--text-primary)' : 'var(--text-muted)' }}>
|
||||
{label}
|
||||
</span>
|
||||
</label>
|
||||
{active && (
|
||||
<div style={{ marginLeft: 26, display: 'flex', gap: 6, alignItems: 'center' }}>
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ActionsEditor({ actions, linetypes, hatchPatterns, onChange }) {
|
||||
const a = actions || {}
|
||||
const setProp = (key, val) => {
|
||||
const next = { ...a }
|
||||
if (val === '' || val === null || val === undefined) {
|
||||
delete next[key]
|
||||
} else {
|
||||
next[key] = val
|
||||
}
|
||||
onChange(next)
|
||||
}
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||||
<ActionRow
|
||||
label="Farbe" icon="palette"
|
||||
active={'color' in a}
|
||||
onToggle={(e) => setProp('color', e.target.checked ? (a.color || '#888888') : '')}
|
||||
>
|
||||
<input
|
||||
type="color"
|
||||
value={a.color || '#888888'}
|
||||
onChange={(e) => setProp('color', e.target.value)}
|
||||
style={{ width: 36, height: 26, padding: 2, flexShrink: 0 }}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={a.color || ''}
|
||||
placeholder="#rrggbb"
|
||||
onChange={(e) => setProp('color', e.target.value)}
|
||||
style={{ flex: 1, minWidth: 0 }}
|
||||
/>
|
||||
</ActionRow>
|
||||
|
||||
<ActionRow
|
||||
label="Strichstärke" icon="line_weight"
|
||||
active={'lineweight' in a}
|
||||
onToggle={(e) => setProp('lineweight', e.target.checked ? (a.lineweight ?? 0.25) : '')}
|
||||
>
|
||||
<input
|
||||
type="number" step={0.05} min={0}
|
||||
value={a.lineweight ?? ''}
|
||||
onChange={(e) => setProp('lineweight', parseFloat(e.target.value) || 0)}
|
||||
style={{ width: 80 }}
|
||||
/>
|
||||
<span style={{ fontSize: 10, color: 'var(--text-muted)' }}>mm</span>
|
||||
</ActionRow>
|
||||
|
||||
<ActionRow
|
||||
label="Linientyp" icon="more_horiz"
|
||||
active={'linetype' in a}
|
||||
onToggle={(e) => setProp('linetype', e.target.checked ? (a.linetype || 'Continuous') : '')}
|
||||
>
|
||||
<select
|
||||
value={a.linetype || ''}
|
||||
onChange={(e) => setProp('linetype', e.target.value)}
|
||||
style={{ flex: 1, minWidth: 0 }}
|
||||
>
|
||||
<option value="">—</option>
|
||||
{(linetypes || []).map(lt => <option key={lt} value={lt}>{lt}</option>)}
|
||||
</select>
|
||||
</ActionRow>
|
||||
|
||||
<ActionRow
|
||||
label="Schraffur" icon="grid_view"
|
||||
active={'hatchPattern' in a}
|
||||
onToggle={(e) => setProp('hatchPattern', e.target.checked ? (a.hatchPattern || 'Solid') : '')}
|
||||
>
|
||||
<select
|
||||
value={a.hatchPattern || ''}
|
||||
onChange={(e) => setProp('hatchPattern', e.target.value)}
|
||||
style={{ flex: 1, minWidth: 0 }}
|
||||
>
|
||||
<option value="">—</option>
|
||||
{(hatchPatterns || []).map(hp => <option key={hp} value={hp}>{hp}</option>)}
|
||||
</select>
|
||||
</ActionRow>
|
||||
|
||||
<ActionRow
|
||||
label="Schraffur-Skala" icon="aspect_ratio"
|
||||
active={'hatchScale' in a}
|
||||
onToggle={(e) => setProp('hatchScale', e.target.checked ? (a.hatchScale ?? 1.0) : '')}
|
||||
>
|
||||
<input
|
||||
type="number" step={0.1} min={0.001}
|
||||
value={a.hatchScale ?? ''}
|
||||
onChange={(e) => setProp('hatchScale', parseFloat(e.target.value) || 1.0)}
|
||||
style={{ width: 80 }}
|
||||
/>
|
||||
</ActionRow>
|
||||
|
||||
<div style={{ fontSize: 9, color: 'var(--text-muted)', fontStyle: 'italic', lineHeight: 1.4 }}>
|
||||
Hatch-Override modifiziert nur existierende Schraffuren. Curves ohne Hatch bleiben unverändert.
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function RuleCard({ rule, index, total, layers, linetypes, hatchPatterns, onPatch, onDelete, onDuplicate, onMoveUp, onMoveDown, onContextMenu }) {
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
const summarize = () => {
|
||||
const conds = (rule.conditions && rule.conditions.length > 0)
|
||||
? rule.conditions
|
||||
: (rule.condition ? [rule.condition] : [])
|
||||
const logic = (rule.conditionsLogic || 'and').toUpperCase()
|
||||
const a = rule.actions || {}
|
||||
const parts = []
|
||||
const condTexts = conds.map(c => {
|
||||
if (c.type === 'layer_name') return `Layer ${c.operator} "${c.value || '?'}"`
|
||||
if (c.type === 'user_string') return `${c.key || '?'} ${c.operator} "${c.value || '?'}"`
|
||||
if (c.type === 'object_name') return `Name ${c.operator} "${c.value || '?'}"`
|
||||
return ''
|
||||
}).filter(Boolean)
|
||||
if (condTexts.length === 1) parts.push(condTexts[0])
|
||||
else if (condTexts.length > 1) parts.push(condTexts.join(` ${logic} `))
|
||||
const acts = Object.keys(a)
|
||||
if (acts.length) parts.push('→ ' + acts.join(', '))
|
||||
return parts.join(' ')
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
onContextMenu={(ev) => { if (onContextMenu) { ev.preventDefault(); onContextMenu(ev) } }}
|
||||
style={{
|
||||
border: '1px solid var(--border)', borderRadius: 'var(--r-lg)',
|
||||
background: 'var(--bg-section)', padding: 8,
|
||||
marginBottom: 8,
|
||||
opacity: rule.enabled === false ? 0.5 : 1,
|
||||
}}>
|
||||
{/* Row 1: index + checkbox + name + edit-toggle */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
||||
<span className="chip" style={{ flexShrink: 0 }}>#{index + 1}</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={rule.enabled !== false}
|
||||
onChange={(e) => onPatch({ ...rule, enabled: e.target.checked })}
|
||||
title="Regel aktiv"
|
||||
style={{ flexShrink: 0, width: 'auto', height: 'auto', padding: 0 }}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={rule.name || ''}
|
||||
placeholder="Regel-Name"
|
||||
onChange={(e) => onPatch({ ...rule, name: e.target.value })}
|
||||
style={{ flex: 1, minWidth: 0 }}
|
||||
/>
|
||||
<button onClick={() => setOpen(!open)} className="btn-icon"
|
||||
title={open ? 'Einklappen' : 'Bearbeiten'}>
|
||||
<Icon name={open ? 'expand_less' : 'edit'} size={14} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{!open && (
|
||||
<div style={{ fontSize: 10, color: 'var(--text-muted)', marginTop: 6, marginLeft: 4,
|
||||
overflowWrap: 'break-word', wordBreak: 'break-word' }}>
|
||||
{summarize() || '(leer)'}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{open && (
|
||||
<>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 2, marginTop: 8 }}>
|
||||
<button onClick={() => onMoveUp()} disabled={index === 0}
|
||||
className="btn-icon-sm" title="Prio höher (nach oben)">
|
||||
<Icon name="arrow_upward" size={14} />
|
||||
</button>
|
||||
<button onClick={() => onMoveDown()} disabled={index === total - 1}
|
||||
className="btn-icon-sm" title="Prio tiefer (nach unten)">
|
||||
<Icon name="arrow_downward" size={14} />
|
||||
</button>
|
||||
<button onClick={() => onDuplicate()} className="btn-icon-sm" title="Duplizieren">
|
||||
<Icon name="content_copy" size={14} />
|
||||
</button>
|
||||
<div style={{ flex: 1 }} />
|
||||
<button onClick={() => { if (confirm(`Regel "${rule.name}" löschen?`)) onDelete() }}
|
||||
className="btn-icon-danger" title="Löschen">
|
||||
<Icon name="delete" size={14} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||||
<div>
|
||||
<div style={{ ...labelXs, marginBottom: 6 }}>Bedingungen</div>
|
||||
<ConditionsEditor rule={rule} layers={layers} onChange={onPatch} />
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ ...labelXs, marginBottom: 6 }}>Überschreibungen</div>
|
||||
<ActionsEditor
|
||||
actions={rule.actions}
|
||||
linetypes={linetypes}
|
||||
hatchPatterns={hatchPatterns}
|
||||
onChange={(a) => onPatch({ ...rule, actions: a })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export default function OverridesApp() {
|
||||
const [state, setState] = useState({
|
||||
enabled: false, rules: [], layers: [], linetypes: [], hatchPatterns: [], presets: [],
|
||||
activePreset: null,
|
||||
})
|
||||
const [selectedPreset, setSelectedPreset] = useState('')
|
||||
const [ctxMenu, setCtxMenu] = useState(null) // {x, y, ruleId}
|
||||
|
||||
useEffect(() => {
|
||||
onMessage('STATE', (s) => {
|
||||
setState((prev) => ({ ...prev, ...s }))
|
||||
// Dropdown synct sich auf das Backend-activePreset nur wenn der wert
|
||||
// gesetzt ist (z.B. nachdem Topbar eine Kombination geladen hat).
|
||||
// Wenn activePreset null wird (Rules wurden gerade editiert -> variant C),
|
||||
// BEHALTEN wir die lokale Auswahl — sonst weiss der Save-Button nicht
|
||||
// mehr in welche Kombination der User gerade editiert.
|
||||
if (s && s.activePreset) {
|
||||
setSelectedPreset(s.activePreset)
|
||||
}
|
||||
})
|
||||
notifyReady()
|
||||
}, [])
|
||||
|
||||
const onPatch = (rule) => updateRule(rule.id, rule)
|
||||
const onMove = (id, delta) => {
|
||||
const ids = state.rules.map(r => r.id)
|
||||
const i = ids.indexOf(id)
|
||||
const j = i + delta
|
||||
if (i < 0 || j < 0 || j >= ids.length) return
|
||||
const next = ids.slice()
|
||||
next.splice(j, 0, next.splice(i, 1)[0])
|
||||
reorderRules(next)
|
||||
}
|
||||
|
||||
// Kontextmenue fuer eine Regel — analog Ausschnitte/Ebenen.
|
||||
const ruleCtxItems = (ruleId) => {
|
||||
const rule = (state.rules || []).find(r => r.id === ruleId)
|
||||
if (!rule) return []
|
||||
const i = state.rules.findIndex(r => r.id === ruleId)
|
||||
const enabled = rule.enabled !== false
|
||||
return [
|
||||
{ label: enabled ? 'Deaktivieren' : 'Aktivieren',
|
||||
icon: enabled ? 'visibility_off' : 'visibility',
|
||||
onClick: () => updateRule(ruleId, { ...rule, enabled: !enabled }) },
|
||||
{ divider: true },
|
||||
{ label: 'Prio hoeher (nach oben)',
|
||||
icon: 'arrow_upward', disabled: i <= 0,
|
||||
onClick: () => onMove(ruleId, -1) },
|
||||
{ label: 'Prio tiefer (nach unten)',
|
||||
icon: 'arrow_downward', disabled: i >= state.rules.length - 1,
|
||||
onClick: () => onMove(ruleId, +1) },
|
||||
{ divider: true },
|
||||
{ label: 'Duplizieren',
|
||||
icon: 'content_copy',
|
||||
onClick: () => duplicateRule(ruleId) },
|
||||
{ divider: true },
|
||||
{ label: 'Loeschen',
|
||||
icon: 'delete', danger: true,
|
||||
onClick: () => {
|
||||
if (window.confirm(`Regel "${rule.name || '(ohne Name)'}" loeschen?`)) deleteRule(ruleId)
|
||||
} },
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
width: '100%', height: '100%',
|
||||
display: 'flex', flexDirection: 'column',
|
||||
padding: 10, gap: 10,
|
||||
fontFamily: 'var(--font)', color: 'var(--text-primary)',
|
||||
background: 'var(--bg-base)',
|
||||
boxSizing: 'border-box',
|
||||
}}>
|
||||
{/* Header — globaler Toggle + Refresh + FAB neue Regel */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
||||
<button
|
||||
onClick={() => setOverridesEnabled(!state.enabled)}
|
||||
className={state.enabled ? 'btn-contained' : 'btn-outlined'}
|
||||
style={{ flex: 1 }}
|
||||
title="Overrides global an/aus"
|
||||
>
|
||||
<Icon name={state.enabled ? 'visibility' : 'visibility_off'} size={14} />
|
||||
<span>{state.enabled ? 'Overrides AN' : 'Overrides AUS'}</span>
|
||||
</button>
|
||||
<button onClick={reapplyOverrides} className="btn-icon-tonal" title="Regeln neu anwenden">
|
||||
<Icon name="refresh" size={14} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => addRule({})}
|
||||
className="btn-add"
|
||||
title="Neue Regel oben einfügen (höchste Priorität)"
|
||||
>
|
||||
<Icon name="add" size={16} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Override-Kombinationen — Dropdown plus kontextabhaengiger Save. */}
|
||||
<div style={{
|
||||
display: 'flex', flexDirection: 'column', gap: 6,
|
||||
padding: 10,
|
||||
background: 'var(--bg-section)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: 'var(--r-lg)',
|
||||
}}>
|
||||
<span style={labelXs}>Override-Kombinationen</span>
|
||||
<select
|
||||
value={selectedPreset}
|
||||
onChange={(e) => {
|
||||
const v = e.target.value
|
||||
setSelectedPreset(v)
|
||||
if (v) {
|
||||
loadPreset(v, 'replace')
|
||||
} else {
|
||||
// "— neu / keine —" → Editor wirklich leeren, sonst bleiben
|
||||
// die Regeln der vorigen Kombination stehen und der User
|
||||
// baut versehentlich auf altem Stand weiter.
|
||||
clearOverrideRules()
|
||||
}
|
||||
}}
|
||||
style={{ width: '100%' }}
|
||||
title="Kombination zum Bearbeiten oeffnen"
|
||||
>
|
||||
<option value="">— neu / keine —</option>
|
||||
{(state.presets || []).map(p => (
|
||||
<option key={p.name} value={p.name}>
|
||||
{p.name} ({p.ruleCount})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<div style={{ display: 'flex', gap: 6 }}>
|
||||
<button
|
||||
onClick={() => {
|
||||
if (selectedPreset) { savePreset(selectedPreset); return }
|
||||
const existing = (state.presets || []).map(p => p.name)
|
||||
const def = `Kombination ${existing.length + 1}`
|
||||
const name = window.prompt('Name fuer neue Kombination:', def)
|
||||
if (!name || !name.trim()) return
|
||||
const t = name.trim()
|
||||
if (existing.includes(t) && !window.confirm(`Kombination "${t}" ueberschreiben?`)) return
|
||||
savePreset(t)
|
||||
setSelectedPreset(t)
|
||||
}}
|
||||
disabled={state.rules.length === 0}
|
||||
className="btn-outlined"
|
||||
style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}
|
||||
title={selectedPreset
|
||||
? `Aenderungen in "${selectedPreset}" speichern`
|
||||
: 'Aktuelle Regeln als neue Kombination speichern'}
|
||||
>
|
||||
<Icon name="save" size={14} />
|
||||
<span>{selectedPreset ? 'Speichern' : 'Als Kombination speichern…'}</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
if (!selectedPreset) return
|
||||
if (!window.confirm(`Kombination "${selectedPreset}" dauerhaft loeschen?`)) return
|
||||
deletePreset(selectedPreset)
|
||||
setSelectedPreset('')
|
||||
}}
|
||||
disabled={!selectedPreset}
|
||||
className="btn-icon-danger"
|
||||
title="Gewaehlte Kombination dauerhaft loeschen"
|
||||
>
|
||||
<Icon name="delete" size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ fontSize: 10, color: 'var(--text-muted)', fontStyle: 'italic', lineHeight: 1.4 }}>
|
||||
Regeln sind additiv. Bei Konflikt gewinnt die <b>oberste</b>.
|
||||
</div>
|
||||
|
||||
{/* Rule list */}
|
||||
<div style={{ flex: 1, overflowY: 'auto', overflowX: 'hidden', minHeight: 0 }}>
|
||||
{(state.rules || []).length === 0 && (
|
||||
<div style={{
|
||||
padding: '32px 16px', textAlign: 'center',
|
||||
color: 'var(--text-muted)', fontSize: 11,
|
||||
border: '1px dashed var(--border)',
|
||||
borderRadius: 'var(--r-lg)',
|
||||
background: 'var(--bg-section)',
|
||||
}}>
|
||||
<Icon name="auto_fix_high" size={32} style={{ color: 'var(--text-muted)', opacity: 0.5 }} />
|
||||
<div style={{ marginTop: 8 }}>Noch keine Regeln.</div>
|
||||
<div style={{ marginTop: 4, fontSize: 10 }}>
|
||||
Oben <Icon name="add" size={11} /> klicken um eine neue Regel zu erstellen.
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{(state.rules || []).map((r, i) => (
|
||||
<RuleCard
|
||||
key={r.id}
|
||||
rule={r}
|
||||
index={i}
|
||||
total={state.rules.length}
|
||||
layers={state.layers}
|
||||
linetypes={state.linetypes}
|
||||
hatchPatterns={state.hatchPatterns}
|
||||
onPatch={onPatch}
|
||||
onDelete={() => deleteRule(r.id)}
|
||||
onDuplicate={() => duplicateRule(r.id)}
|
||||
onMoveUp={() => onMove(r.id, -1)}
|
||||
onMoveDown={() => onMove(r.id, +1)}
|
||||
onContextMenu={(ev) => setCtxMenu({ x: ev.clientX, y: ev.clientY, ruleId: r.id })}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{ctxMenu && (
|
||||
<ContextMenu
|
||||
x={ctxMenu.x}
|
||||
y={ctxMenu.y}
|
||||
items={ruleCtxItems(ctxMenu.ruleId)}
|
||||
onClose={() => setCtxMenu(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user