karim
059cbf8d4d
Schnitt-Feature V1+V2: - Neues rhino/schnitte.py mit Pick-Workflow, Activation (Clipping-Planes + Parallel-View), 2D-Plan-Symbol auf 18_Schnittlinien-Sublayer - Doppelklick auf Symbol aktiviert den Schnitt - Schnitt-Settings (cutAtLine/Tiefe/Höhen/Blickrichtung) im GeschossSettingsDialog - View-Snapshot + Restore beim Wechsel Schnitt → Geschoss - Symbol-Cleanup bei Delete via normalem Ebenen-Menü Terrain als Volumen: - swisstopo.volumize_terrain_object: Skirt + Bottom-Cap auf Mesh/Brep damit Clipping-Planes gefuellte Querschnitte erzeugen - UI im SwisstopoApp mit Nachbearbeitung-Section + Tiefen-Eingabe Geschoss-Add mit Dialog: - + im GeschossManager oeffnet 3-Optionen-Picker (Geschoss/Schnitt/Zeichnung) - Geschoss-Dialog mit Anker-Dropdown, Position über/unter, Auto-Name, Höhen-Prefill aus Anker Fix: _send_state fallback — Element gilt als selektiert wenn Source ODER Volume in der Selection ist (robust gegen Layer-Visibility wenn Referenz- linien-Layer im aktuellen Mode versteckt ist) Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
590 lines
23 KiB
React
590 lines
23 KiB
React
import { useState } from 'react'
|
|
import Icon from './Icon'
|
|
import ContextMenu from './ContextMenu'
|
|
import { BarCombo, BarButton } from './BarControls'
|
|
import { openGeschossSettings, openGeschossDialog, createSchnitt } from '../lib/rhinoBridge'
|
|
|
|
function GeschossBadge({ name }) {
|
|
return <span className="chip chip-info">{name}</span>
|
|
}
|
|
|
|
function ZeichnungsebeneRow({
|
|
z, active, mode, onClick, onContextMenu,
|
|
onToggleVisible, onToggleLock, onToggleClipping, onDelete,
|
|
}) {
|
|
const isGeschoss = !!z.isGeschoss
|
|
const isSchnitt = z.type === 'schnitt'
|
|
// Schnitt vs Ansicht: cutAtLine!=false = Schnitt (mit Front-Cut), sonst Ansicht
|
|
const schnittIcon = (z.cutAtLine === false) ? 'visibility' : 'content_cut'
|
|
const schnittLabel = (z.cutAtLine === false) ? 'Ansicht' : 'Schnitt'
|
|
// Eye-Logik: die aktive Z ist IMMER sichtbar (Backend forciert das), also
|
|
// zeigen wir ihr Auge immer als "an" — ohne Ruecksicht aufs visible-Flag.
|
|
// Nicht-aktive: in 'all_force' ist visible-Flag ueberschrieben (alle an),
|
|
// in 'active' ueberschrieben (alle aus) — Auge dimmt. Sonst (Ausgewaehlte/
|
|
// grey) reflektiert es das Flag direkt.
|
|
let eyeIcon, eyeOn, eyeOpacity, eyeTitle
|
|
if (active) {
|
|
eyeIcon = 'visibility'
|
|
eyeOn = true
|
|
eyeOpacity = 1
|
|
eyeTitle = z.visible !== false
|
|
? 'Sichtbar (aktive Zeichnungsebene)'
|
|
: 'Normalerweise ausgeblendet — wird gezeigt weil aktiv'
|
|
} else if (mode === 'all_force') {
|
|
eyeIcon = 'visibility'
|
|
eyeOn = true
|
|
eyeOpacity = 0.35
|
|
eyeTitle = 'Im „Alle anzeigen"-Mode immer sichtbar — Klick wechselt in „Ausgewählte"'
|
|
} else if (mode === 'active') {
|
|
eyeIcon = z.visible !== false ? 'visibility' : 'visibility_off'
|
|
eyeOn = false
|
|
eyeOpacity = 0.35
|
|
eyeTitle = 'Im „Nur aktive"-Mode ausgeblendet — Klick wechselt in „Ausgewählte"'
|
|
} else {
|
|
eyeIcon = z.visible !== false ? 'visibility' : 'visibility_off'
|
|
eyeOn = z.visible !== false
|
|
eyeOpacity = 1
|
|
eyeTitle = z.visible !== false ? 'Ausblenden' : 'Einblenden'
|
|
}
|
|
return (
|
|
<div
|
|
onClick={onClick}
|
|
onContextMenu={onContextMenu}
|
|
style={{
|
|
display: 'flex', alignItems: 'center', gap: 4,
|
|
padding: '1px 12px 1px 0',
|
|
margin: 0,
|
|
background: active ? 'var(--active-dim)' : 'var(--bg-item)',
|
|
borderRadius: active ? 999 : 0,
|
|
borderBottom: active ? '1px solid transparent' : '1px solid var(--border-light)',
|
|
cursor: 'pointer',
|
|
userSelect: 'none',
|
|
minHeight: 24,
|
|
}}
|
|
>
|
|
{/* Spacer-Slot — spiegelt den Chevron-Slot bei Ebenen-Rows wider
|
|
damit die Eye-Icons beider Panels untereinander stehen. */}
|
|
<span style={{ width: 12, flexShrink: 0 }} />
|
|
<button
|
|
className={`btn-icon-sm ${eyeOn ? 'is-on' : ''}`}
|
|
onClick={(ev) => { ev.stopPropagation(); onToggleVisible() }}
|
|
title={eyeTitle}
|
|
style={{ opacity: eyeOpacity, width: 16, height: 16 }}
|
|
><Icon name={eyeIcon} size={12} /></button>
|
|
|
|
<span style={{
|
|
fontWeight: 500,
|
|
fontSize: 11,
|
|
color: active ? 'var(--active-light)' : 'var(--text-label)',
|
|
flex: 1, minWidth: 0,
|
|
overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
|
|
lineHeight: 1.2,
|
|
}}>{z.name}</span>
|
|
|
|
{isGeschoss && (
|
|
<span style={{ fontSize: 10, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}>
|
|
+{(z.okff ?? 0).toFixed(2)}
|
|
</span>
|
|
)}
|
|
|
|
{isGeschoss && <GeschossBadge name={z.name} />}
|
|
|
|
{isSchnitt && (
|
|
<span title={schnittLabel}
|
|
style={{
|
|
display: 'inline-flex', alignItems: 'center', gap: 3,
|
|
fontSize: 10, color: 'var(--text-muted)',
|
|
fontFamily: 'var(--font-mono)',
|
|
}}>
|
|
<Icon name={schnittIcon} size={11}
|
|
style={{ color: active ? 'var(--accent)' : 'var(--text-muted)' }} />
|
|
</span>
|
|
)}
|
|
|
|
{isGeschoss ? (
|
|
<button
|
|
className={`btn-icon-xs ${z.hasClipping ? 'is-on' : ''}`}
|
|
onClick={(ev) => { ev.stopPropagation(); onToggleClipping() }}
|
|
title={z.hasClipping
|
|
? 'Clipping Plane ausschalten'
|
|
: 'Clipping Plane einschalten (Schnitt auf Schnitthöhe)'}
|
|
style={{ color: z.hasClipping ? 'var(--accent)' : undefined, width: 14, height: 14 }}
|
|
><Icon name="content_cut" size={11} /></button>
|
|
) : (
|
|
<span style={{ width: 14, flexShrink: 0 }} />
|
|
)}
|
|
|
|
<button
|
|
className="btn-icon-xs"
|
|
onClick={(ev) => { ev.stopPropagation(); onToggleLock() }}
|
|
title={z.locked ? 'Entsperren' : 'Sperren'}
|
|
style={{ color: z.locked ? 'var(--warn)' : undefined, width: 14, height: 14 }}
|
|
><Icon name={z.locked ? 'lock' : 'lock_open'} size={11} /></button>
|
|
|
|
<button
|
|
className="btn-icon-xs"
|
|
onClick={(ev) => { ev.stopPropagation(); onDelete() }}
|
|
title="Löschen"
|
|
style={{ width: 14, height: 14 }}
|
|
><Icon name="close" size={11} /></button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const MODES = [
|
|
{ value: 'all_force', label: 'Alle anzeigen' },
|
|
{ value: 'all', label: 'Ausgewählte' },
|
|
{ value: 'active', label: 'Nur aktive' },
|
|
{ value: 'grey', label: 'Andere grau' },
|
|
{ value: 'grey_locked', label: 'Andere grau & gesperrt' },
|
|
]
|
|
|
|
export default function GeschossManager({
|
|
zeichnungsebenen, activeId, onActiveChange, onChange, recalcOkff,
|
|
mode, onModeChange,
|
|
}) {
|
|
const [ctxMenu, setCtxMenu] = useState(null) // { x, y, id }
|
|
const [addMenu, setAddMenu] = useState(null) // { x, y } — Picker beim +
|
|
const [geschossDialog, setGeschossDialog] = useState(null) // { x, y, pos:'above'|'below', name, hoehe, schnitthoehe, anchorId }
|
|
|
|
const sorted = [...zeichnungsebenen].reverse()
|
|
|
|
const addZeichnung = () => {
|
|
const nonGeschossCount = zeichnungsebenen.filter(
|
|
z => !z.isGeschoss && z.type !== "schnitt").length
|
|
const newZ = {
|
|
id: `z_${Date.now()}`,
|
|
name: `Zeichnung ${nonGeschossCount + 1}`,
|
|
isGeschoss: false,
|
|
visible: true,
|
|
}
|
|
onChange([...zeichnungsebenen, newZ])
|
|
}
|
|
|
|
// Vorgeschlagener Geschossname relativ zum Anker. Logik:
|
|
// EG + above → 1OG, EG + below → UG
|
|
// <N>OG + above → <N+1>OG, <N>OG + below → wenn N=1 dann EG, sonst <N-1>OG
|
|
// <N>UG + above → wenn N=1 dann EG, sonst <N-1>UG; <N>UG + below → <N+1>UG
|
|
// sonst: 'Neu'
|
|
const suggestGeschossName = (anchor, pos) => {
|
|
const nm = ((anchor?.name) || '').trim().toUpperCase()
|
|
const ogMatch = nm.match(/^(\d*)OG$/)
|
|
const ugMatch = nm.match(/^(\d*)UG$/)
|
|
if (nm === 'EG') return pos === 'above' ? '1OG' : 'UG'
|
|
if (ogMatch) {
|
|
const n = parseInt(ogMatch[1] || '1', 10)
|
|
if (pos === 'above') return `${n + 1}OG`
|
|
return n <= 1 ? 'EG' : `${n - 1}OG`
|
|
}
|
|
if (ugMatch) {
|
|
const n = parseInt(ugMatch[1] || '1', 10)
|
|
if (pos === 'below') return `${n + 1}UG`
|
|
return n <= 1 ? 'EG' : `${n - 1}UG`
|
|
}
|
|
return 'Neu'
|
|
}
|
|
|
|
// Project-Default-Hoehe: erst aktives Geschoss, dann erstes Geschoss in
|
|
// der Liste, dann hartcodiert 3.0. So uebernimmt jeder neue Eintrag den
|
|
// "typischen" Wert des Projekts ohne dass der User irgendwo setzen muss.
|
|
const defaultGeschossHoehe = () => {
|
|
const act = zeichnungsebenen.find(z => z.id === activeId)
|
|
if (act?.isGeschoss && act.hoehe != null) return act.hoehe
|
|
const first = zeichnungsebenen.find(z => z.isGeschoss && z.hoehe != null)
|
|
return first?.hoehe ?? 3.0
|
|
}
|
|
const defaultSchnitthoehe = () => {
|
|
const act = zeichnungsebenen.find(z => z.id === activeId)
|
|
if (act?.isGeschoss && act.schnitthoehe != null) return act.schnitthoehe
|
|
const first = zeichnungsebenen.find(z => z.isGeschoss && z.schnitthoehe != null)
|
|
return first?.schnitthoehe ?? 1.0
|
|
}
|
|
|
|
const openGeschossPrompt = (ev) => {
|
|
// Anker = aktives Geschoss (oder erstes Geschoss in der Liste). Falls
|
|
// gar keins da: einfach default-Werte ohne Anker.
|
|
const anchor = zeichnungsebenen.find(z => z.id === activeId && z.isGeschoss)
|
|
|| zeichnungsebenen.find(z => z.isGeschoss)
|
|
|| null
|
|
const pos = 'above'
|
|
const rect = ev?.currentTarget?.getBoundingClientRect()
|
|
setGeschossDialog({
|
|
x: rect ? rect.right - 240 : 200,
|
|
y: rect ? rect.bottom + 4 : 100,
|
|
pos,
|
|
name: suggestGeschossName(anchor, pos),
|
|
hoehe: defaultGeschossHoehe().toFixed(2),
|
|
schnitthoehe: defaultSchnitthoehe().toFixed(2),
|
|
anchorId: anchor?.id || null,
|
|
})
|
|
}
|
|
|
|
const confirmGeschoss = () => {
|
|
if (!geschossDialog) return
|
|
const { pos, name, hoehe, schnitthoehe, anchorId } = geschossDialog
|
|
const h = parseFloat(String(hoehe).replace(',', '.'))
|
|
const sh = parseFloat(String(schnitthoehe).replace(',', '.'))
|
|
const newZ = {
|
|
id: `z_${Date.now()}`,
|
|
name: (name || 'Neu').trim(),
|
|
isGeschoss: true,
|
|
hoehe: isFinite(h) && h > 0 ? h : 3.0,
|
|
schnitthoehe: isFinite(sh) && sh > 0 ? sh : 1.0,
|
|
visible: true,
|
|
}
|
|
// Insertion-Index: anchor finden, dann +1 (above) oder vorne ein (below).
|
|
// Array-Reihenfolge = bottom-up (recalcOkff stacks von index 0 aufwaerts),
|
|
// also "above" = nach anchor, "below" = vor anchor.
|
|
let nextList
|
|
if (anchorId) {
|
|
const idx = zeichnungsebenen.findIndex(z => z.id === anchorId)
|
|
if (idx >= 0) {
|
|
const insertAt = pos === 'above' ? idx + 1 : idx
|
|
nextList = [
|
|
...zeichnungsebenen.slice(0, insertAt),
|
|
newZ,
|
|
...zeichnungsebenen.slice(insertAt),
|
|
]
|
|
} else {
|
|
nextList = [...zeichnungsebenen, newZ]
|
|
}
|
|
} else {
|
|
nextList = [...zeichnungsebenen, newZ]
|
|
}
|
|
onChange(nextList)
|
|
setGeschossDialog(null)
|
|
}
|
|
|
|
const updateGeschossDialog = (patch) => {
|
|
if (!geschossDialog) return
|
|
const next = { ...geschossDialog, ...patch }
|
|
// Wenn pos ODER anchorId sich aendert: Name + Hoehen neu vorschlagen,
|
|
// aber nur wenn der User die jeweiligen Felder nicht schon manuell
|
|
// ueberschrieben hat (heuristisch: aktueller Wert === alter Vorschlag).
|
|
const posChanged = patch.pos && patch.pos !== geschossDialog.pos
|
|
const anchorChanged = patch.anchorId && patch.anchorId !== geschossDialog.anchorId
|
|
if (posChanged || anchorChanged) {
|
|
const oldAnchor = zeichnungsebenen.find(z => z.id === geschossDialog.anchorId)
|
|
const newAnchor = zeichnungsebenen.find(z => z.id === (patch.anchorId || geschossDialog.anchorId))
|
|
const oldSuggestedName = suggestGeschossName(oldAnchor, geschossDialog.pos)
|
|
if (geschossDialog.name === oldSuggestedName) {
|
|
next.name = suggestGeschossName(newAnchor, next.pos)
|
|
}
|
|
// Bei Anchor-Wechsel: Hoehe/Schnitthoehe auch nachziehen wenn unveraendert
|
|
if (anchorChanged && newAnchor?.isGeschoss) {
|
|
const oldHoeheStr = (oldAnchor?.hoehe ?? 3.0).toFixed(2)
|
|
const oldShStr = (oldAnchor?.schnitthoehe ?? 1.0).toFixed(2)
|
|
if (geschossDialog.hoehe === oldHoeheStr && newAnchor.hoehe != null) {
|
|
next.hoehe = newAnchor.hoehe.toFixed(2)
|
|
}
|
|
if (geschossDialog.schnitthoehe === oldShStr && newAnchor.schnitthoehe != null) {
|
|
next.schnitthoehe = newAnchor.schnitthoehe.toFixed(2)
|
|
}
|
|
}
|
|
}
|
|
setGeschossDialog(next)
|
|
}
|
|
|
|
const addSchnitt = () => createSchnitt() // triggert interaktiven Pick + Auto-Activate
|
|
|
|
const openAddMenu = (ev) => {
|
|
if (!ev) { addZeichnung(); return } // Fallback ohne Event-Position
|
|
const rect = ev.currentTarget.getBoundingClientRect()
|
|
setAddMenu({ x: rect.right - 180, y: rect.bottom + 4 })
|
|
}
|
|
|
|
// ContextMenu Items — onClick kriegt KEIN Event. Daher fuer Geschoss
|
|
// einen kleinen Trick: ContextMenu schliesst, dann oeffnen wir den
|
|
// Dialog mit einer kuenstlichen Position (rechts vom Panel).
|
|
const addMenuItems = [
|
|
{ label: 'Geschoss', icon: 'layers',
|
|
onClick: () => openGeschossPrompt({
|
|
currentTarget: { getBoundingClientRect: () =>
|
|
({ right: addMenu?.x + 180, bottom: addMenu?.y + 20 }) } }) },
|
|
{ label: 'Schnitt / Ansicht', icon: 'content_cut', onClick: addSchnitt },
|
|
{ divider: true },
|
|
{ label: 'Zeichnung', icon: 'edit_note', onClick: addZeichnung },
|
|
]
|
|
|
|
const toggleVisible = (id) => {
|
|
onChange(zeichnungsebenen.map(z => z.id === id ? { ...z, visible: !(z.visible !== false) } : z))
|
|
// In "active" / "all_force" greift visible-Flag nicht — wer aufs Auge
|
|
// klickt will offensichtlich Sichtbarkeit kontrollieren, also direkt
|
|
// in den "Ausgewählte"-Mode wechseln damit die Aktion wirkt.
|
|
if (mode === 'active' || mode === 'all_force') onModeChange('all')
|
|
}
|
|
|
|
const toggleLock = (id) => {
|
|
onChange(zeichnungsebenen.map(z => z.id === id ? { ...z, locked: !z.locked } : z))
|
|
}
|
|
|
|
const toggleClipping = (id) => {
|
|
onChange(zeichnungsebenen.map(z => z.id === id ? { ...z, hasClipping: !z.hasClipping } : z))
|
|
}
|
|
|
|
const duplicate = (id) => {
|
|
const src = zeichnungsebenen.find(z => z.id === id)
|
|
if (!src) return
|
|
const clone = {
|
|
...src,
|
|
id: `z_${Date.now()}`,
|
|
name: `${src.name} Kopie`,
|
|
}
|
|
// Direkt nach dem Original einfuegen
|
|
const idx = zeichnungsebenen.findIndex(z => z.id === id)
|
|
const next = [...zeichnungsebenen]
|
|
next.splice(idx + 1, 0, clone)
|
|
onChange(next)
|
|
}
|
|
|
|
const remove = (id) => {
|
|
if (zeichnungsebenen.length <= 1) return
|
|
const target = zeichnungsebenen.find(z => z.id === id)
|
|
if (!target) return
|
|
if (!window.confirm(`"${target.name}" wirklich löschen?`)) return
|
|
onChange(zeichnungsebenen.filter(z => z.id !== id))
|
|
if (activeId === id) {
|
|
const next = zeichnungsebenen.find(z => z.id !== id)
|
|
if (next) onActiveChange(next.id)
|
|
}
|
|
}
|
|
|
|
const openContextMenu = (ev, id) => {
|
|
ev.preventDefault(); ev.stopPropagation()
|
|
setCtxMenu({ x: ev.clientX, y: ev.clientY, id })
|
|
}
|
|
|
|
const ctxItems = (id) => {
|
|
const z = zeichnungsebenen.find(x => x.id === id)
|
|
if (!z) return []
|
|
return [
|
|
{ label: 'Einstellungen…', icon: 'settings', onClick: () => openGeschossSettings(z) },
|
|
{ divider: true },
|
|
{ label: 'Duplizieren', icon: 'content_copy', onClick: () => duplicate(id) },
|
|
{ divider: true },
|
|
{ label: 'Löschen', icon: 'delete', danger: true,
|
|
disabled: zeichnungsebenen.length <= 1,
|
|
onClick: () => remove(id) },
|
|
]
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div style={{
|
|
display: 'flex', flexDirection: 'column', gap: 4,
|
|
padding: '6px 14px',
|
|
background: 'var(--bg-section)',
|
|
borderBottom: '1px solid var(--border-light)',
|
|
}}>
|
|
<span className="label-xs">Sichtbarkeit</span>
|
|
<div style={{ display: 'flex', width: '100%' }}>
|
|
<BarCombo
|
|
stretch
|
|
icon="visibility"
|
|
value={mode}
|
|
onChange={onModeChange}
|
|
title="Sichtbarkeits-Modus"
|
|
onGear={() => openGeschossDialog(zeichnungsebenen)}
|
|
gearIcon="settings"
|
|
gearTitle="Einstellungen"
|
|
onSecond={openAddMenu}
|
|
secondIcon="add"
|
|
secondTitle="Hinzufuegen: Geschoss / Schnitt / Zeichnung"
|
|
>
|
|
{MODES.map(m => (
|
|
<option key={m.value} value={m.value}>{m.label}</option>
|
|
))}
|
|
</BarCombo>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Master-Row analog EbenenManager. Padding + Icon-Sizes identisch
|
|
damit beide Panels visuell kohaerent sind. Erste 12px-Spanne
|
|
spiegelt den Chevron-Slot der Ebenen-Daten-Rows wider. */}
|
|
<div style={{
|
|
display: 'flex', alignItems: 'center', gap: 4,
|
|
padding: '2px 12px 2px 0',
|
|
background: 'var(--bg-section)',
|
|
borderBottom: '1px solid var(--border-light)',
|
|
}}>
|
|
<span style={{ width: 12, flexShrink: 0 }} />
|
|
<button
|
|
className="btn-icon-xs"
|
|
onClick={() => {
|
|
const anyVisible = zeichnungsebenen.some(z => z.visible !== false)
|
|
onChange(zeichnungsebenen.map(z => ({ ...z, visible: !anyVisible })))
|
|
if (mode === 'active' || mode === 'all_force') onModeChange('all')
|
|
}}
|
|
title={zeichnungsebenen.every(z => z.visible !== false)
|
|
? 'Alle Zeichnungsebenen ausblenden'
|
|
: 'Alle Zeichnungsebenen einblenden'}
|
|
style={{ width: 16, height: 16,
|
|
opacity: (mode === 'active' || mode === 'all_force') ? 0.5 : 1 }}
|
|
>
|
|
<Icon
|
|
name={zeichnungsebenen.every(z => z.visible !== false) ? 'visibility' : 'visibility_off'}
|
|
size={11}
|
|
/>
|
|
</button>
|
|
<span style={{ flex: 1 }} />
|
|
<button
|
|
className="btn-icon-xs"
|
|
onClick={() => {
|
|
const anyLocked = zeichnungsebenen.some(z => z.locked === true)
|
|
onChange(zeichnungsebenen.map(z => ({ ...z, locked: !anyLocked })))
|
|
}}
|
|
title={zeichnungsebenen.every(z => z.locked === true)
|
|
? 'Alle Zeichnungsebenen entsperren'
|
|
: 'Alle Zeichnungsebenen sperren'}
|
|
style={{ width: 14, height: 14 }}
|
|
>
|
|
<Icon
|
|
name={zeichnungsebenen.every(z => z.locked === true) ? 'lock' : 'lock_open'}
|
|
size={11}
|
|
/>
|
|
</button>
|
|
<div style={{ width: 14 }} />
|
|
</div>
|
|
|
|
<div>
|
|
{sorted.map(z => (
|
|
<ZeichnungsebeneRow
|
|
key={z.id}
|
|
z={z}
|
|
active={z.id === activeId}
|
|
mode={mode}
|
|
onClick={() => onActiveChange(z.id)}
|
|
onContextMenu={(ev) => openContextMenu(ev, z.id)}
|
|
onToggleVisible={() => toggleVisible(z.id)}
|
|
onToggleLock={() => toggleLock(z.id)}
|
|
onToggleClipping={() => toggleClipping(z.id)}
|
|
onDelete={() => remove(z.id)}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{ctxMenu && (
|
|
<ContextMenu
|
|
x={ctxMenu.x} y={ctxMenu.y}
|
|
items={ctxItems(ctxMenu.id)}
|
|
onClose={() => setCtxMenu(null)}
|
|
/>
|
|
)}
|
|
{addMenu && (
|
|
<ContextMenu
|
|
x={addMenu.x} y={addMenu.y}
|
|
items={addMenuItems}
|
|
onClose={() => setAddMenu(null)}
|
|
/>
|
|
)}
|
|
{geschossDialog && (() => {
|
|
// Geschoss-Liste (top-down sortiert wie im Panel) fuer das Dropdown
|
|
const geschossOptions = [...zeichnungsebenen]
|
|
.filter(z => z.isGeschoss)
|
|
.reverse()
|
|
return (
|
|
<>
|
|
{/* Backdrop — Klick schliesst */}
|
|
<div onClick={() => setGeschossDialog(null)}
|
|
style={{ position: 'fixed', inset: 0, zIndex: 999,
|
|
background: 'transparent' }} />
|
|
<div style={{
|
|
position: 'fixed', zIndex: 1000,
|
|
left: Math.max(8, Math.min(geschossDialog.x, window.innerWidth - 260)),
|
|
top: Math.max(8, Math.min(geschossDialog.y, window.innerHeight - 220)),
|
|
width: 240,
|
|
background: 'var(--bg-dialog)', color: 'var(--text-primary)',
|
|
border: '1px solid var(--border)', borderRadius: 6,
|
|
boxShadow: '0 4px 16px rgba(0,0,0,0.3)',
|
|
padding: 10,
|
|
fontSize: 11, fontFamily: 'var(--font)',
|
|
display: 'flex', flexDirection: 'column', gap: 8,
|
|
}}
|
|
onClick={(ev) => ev.stopPropagation()}>
|
|
<div style={{ fontSize: 10, color: 'var(--text-muted)',
|
|
fontWeight: 600, letterSpacing: 0.4,
|
|
textTransform: 'uppercase' }}>
|
|
Neues Geschoss
|
|
</div>
|
|
|
|
{/* Position: Anker-Dropdown + Über/Unter-Toggle */}
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
|
|
<span style={{ fontSize: 9, color: 'var(--text-muted)' }}>
|
|
Position relativ zu
|
|
</span>
|
|
<div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
|
|
<select
|
|
value={geschossDialog.anchorId || ''}
|
|
onChange={(ev) => updateGeschossDialog({ anchorId: ev.target.value })}
|
|
disabled={geschossOptions.length === 0}
|
|
style={{ flex: 1, fontSize: 11, minWidth: 0 }}>
|
|
{geschossOptions.length === 0 && <option value="">— keins —</option>}
|
|
{geschossOptions.map(g => (
|
|
<option key={g.id} value={g.id}>{g.name}</option>
|
|
))}
|
|
</select>
|
|
<BarButton icon="arrow_upward"
|
|
active={geschossDialog.pos === 'above'}
|
|
onClick={() => updateGeschossDialog({ pos: 'above' })}
|
|
title="Über dem Anker einfügen" />
|
|
<BarButton icon="arrow_downward"
|
|
active={geschossDialog.pos === 'below'}
|
|
onClick={() => updateGeschossDialog({ pos: 'below' })}
|
|
title="Unter dem Anker einfügen" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Name */}
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
|
|
<span style={{ fontSize: 9, color: 'var(--text-muted)' }}>Name</span>
|
|
<input type="text" value={geschossDialog.name}
|
|
onChange={(ev) => updateGeschossDialog({ name: ev.target.value })}
|
|
autoFocus
|
|
onKeyDown={(ev) => {
|
|
if (ev.key === 'Enter') confirmGeschoss()
|
|
else if (ev.key === 'Escape') setGeschossDialog(null)
|
|
}}
|
|
style={{ width: '100%' }} />
|
|
</div>
|
|
|
|
{/* Hoehe + Schnitthoehe */}
|
|
<div style={{ display: 'flex', gap: 6 }}>
|
|
<div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 3 }}>
|
|
<span style={{ fontSize: 9, color: 'var(--text-muted)' }}>Höhe (m)</span>
|
|
<input type="text" value={geschossDialog.hoehe}
|
|
onChange={(ev) => updateGeschossDialog({ hoehe: ev.target.value })}
|
|
onKeyDown={(ev) => {
|
|
if (ev.key === 'Enter') confirmGeschoss()
|
|
else if (ev.key === 'Escape') setGeschossDialog(null)
|
|
}}
|
|
style={{ width: '100%', textAlign: 'right' }} />
|
|
</div>
|
|
<div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 3 }}>
|
|
<span style={{ fontSize: 9, color: 'var(--text-muted)' }}
|
|
title="Höhe der horizontalen Schnitt-Plane über OKFF">
|
|
Schnitt (m)
|
|
</span>
|
|
<input type="text" value={geschossDialog.schnitthoehe}
|
|
onChange={(ev) => updateGeschossDialog({ schnitthoehe: ev.target.value })}
|
|
onKeyDown={(ev) => {
|
|
if (ev.key === 'Enter') confirmGeschoss()
|
|
else if (ev.key === 'Escape') setGeschossDialog(null)
|
|
}}
|
|
style={{ width: '100%', textAlign: 'right' }} />
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 4, marginTop: 4 }}>
|
|
<button className="btn-text"
|
|
onClick={() => setGeschossDialog(null)}>Abbrechen</button>
|
|
<button className="btn-contained"
|
|
onClick={confirmGeschoss}>Hinzufügen</button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
})()}
|
|
</>
|
|
)
|
|
}
|