karim
85f09390bc
Swisstopo Ortho
- AddPictureFrame statt Mesh+Material — Rhinos eigener Picture-Pfad mit
embedBitmap=True + selfIllumination=True macht die Textur in allen
Display-Modi sichtbar (Wireframe / Shaded / Rendered / Raytraced)
- asMesh=False (Brep-Variante) — asMesh=True ist auf Mac Rhino 8 broken
(alle Pictures landen am gleichen Punkt unabhaengig von der Plane)
- Per-Tile Sub-Ebenen unter 80_swisstopo (z.B. 80_swisstopo/2763-1254_Ortho)
via dossier_ebenen JSON registriert → erscheinen im Dossier-Ebenen-Manager
mit eigener Visibility
- target_layer_idx wird vor AddPictureFrame als Active-Layer gesetzt,
Picture landet direkt auf richtigem Sub-Layer (Move-danach broeselte
das Material)
- Regex-Fix in _parse_swisstopo_tile_bbox: Separator zwischen den beiden
Coords MUSS Hyphen sein, sonst matcht es faelschlich auf `_YEAR_EAST_`
Patterns wie `_2025_2763_`
Oberleiste
- DOSSIER. Logo (Krungthep + Petrol-Punkt) + Launcher-Version
(via __LAUNCHER_VERSION__ Vite-Define aus launcher/package.json)
- Overrides + Kombi vertikal gestapelt, gleiche Label-Spalte + Dropdown-
Breite → Dropdowns auf gleicher X-Linie
- View-Icons neu zugeordnet:
Top=view_quilt (Raster), Front=north (Pfeil), Persp=view_in_ar (3D)
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
476 lines
18 KiB
React
476 lines
18 KiB
React
import { useState, useEffect, useRef } from 'react'
|
|
import Icon from './components/Icon'
|
|
import {
|
|
onMessage, notifyReady,
|
|
requestMassstab, setMassstab,
|
|
zoomExtents, zoomSelection, setShowLineweights,
|
|
setMassstabDpi, detectMassstabDpi,
|
|
setView, setDisplayMode,
|
|
toggleOverrides, setOverridesPreset, openOverridesPanel,
|
|
pickLayerCombination, saveLayerCombination,
|
|
deleteLayerCombination, openLayerCombinationsDialog,
|
|
openDossierSettings,
|
|
} from './lib/rhinoBridge'
|
|
|
|
const PRESETS = [
|
|
{ value: 1, label: '1:1' }, { value: 5, label: '1:5' },
|
|
{ value: 10, label: '1:10' }, { value: 20, label: '1:20' },
|
|
{ value: 25, label: '1:25' }, { value: 50, label: '1:50' },
|
|
{ value: 100, label: '1:100' }, { value: 200, label: '1:200' },
|
|
{ value: 500, label: '1:500' }, { value: 1000, label: '1:1000' },
|
|
]
|
|
|
|
const VIEWS = [
|
|
{ value: 'Top', icon: 'view_quilt', label: 'Top' },
|
|
{ value: 'Front', icon: 'north', label: 'Front' },
|
|
{ value: 'Right', icon: 'east', label: 'Right' },
|
|
{ value: 'Perspective', icon: 'view_in_ar', label: 'Persp' },
|
|
]
|
|
|
|
function fmtScale(s) {
|
|
if (s == null) return '—'
|
|
if (s >= 1) return '1:' + (s >= 10 ? s.toFixed(0) : s.toFixed(1))
|
|
return (1 / s).toFixed(2) + ':1'
|
|
}
|
|
|
|
function snapToPreset(s, tol = 0.03) {
|
|
if (s == null) return null
|
|
for (const p of PRESETS) {
|
|
if (Math.abs(s - p.value) / p.value <= tol) return p.value
|
|
}
|
|
return null
|
|
}
|
|
|
|
function parseScale(input) {
|
|
if (!input) return null
|
|
const s = String(input).trim()
|
|
for (const sep of [':', '=', '/']) {
|
|
if (s.includes(sep)) {
|
|
const [a, b] = s.split(sep, 2)
|
|
const pa = parseFloat(a), pb = parseFloat(b)
|
|
if (pa > 0 && pb > 0) return pb / pa
|
|
return null
|
|
}
|
|
}
|
|
const n = parseFloat(s)
|
|
return n > 0 ? n : null
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Material-UI-Style: alle Pills auf einheitliche Hoehe (PILL_H)
|
|
// nutzt globale Klassen aus index.css fuer Look (border-radius, colors)
|
|
|
|
const PILL_H = 20 // Einheits-Hoehe fuer alle Bar-Elemente
|
|
|
|
const sep = {
|
|
width: 1, height: 18,
|
|
background: 'var(--border)', flexShrink: 0,
|
|
margin: '0 2px',
|
|
}
|
|
const groupLabel = {
|
|
fontSize: 9, color: 'var(--text-muted)', textTransform: 'uppercase',
|
|
letterSpacing: '0.08em', fontWeight: 600,
|
|
alignSelf: 'center', whiteSpace: 'nowrap',
|
|
padding: '0 4px',
|
|
}
|
|
const pillSelect = {
|
|
height: PILL_H, lineHeight: PILL_H + 'px',
|
|
padding: '0 20px 0 10px', boxSizing: 'border-box',
|
|
fontSize: 10,
|
|
}
|
|
const pillInput = {
|
|
height: PILL_H, lineHeight: PILL_H + 'px',
|
|
padding: '0 8px', boxSizing: 'border-box',
|
|
borderRadius: 999,
|
|
fontSize: 10,
|
|
}
|
|
const pillChip = {
|
|
height: PILL_H, lineHeight: PILL_H + 'px',
|
|
padding: '0 8px', boxSizing: 'border-box',
|
|
display: 'inline-flex', alignItems: 'center',
|
|
fontSize: 9,
|
|
}
|
|
const pillIconBtn = {
|
|
width: PILL_H, height: PILL_H,
|
|
borderRadius: '50%', boxSizing: 'border-box',
|
|
}
|
|
|
|
// Tonal button helper (filled when active, outlined when not)
|
|
function ToolButton({ active, onClick, icon, label, title, disabled }) {
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
className={active ? 'btn-contained' : 'btn-outlined'}
|
|
style={{ height: PILL_H, padding: '0 8px', boxSizing: 'border-box',
|
|
fontSize: 9,
|
|
opacity: disabled ? 0.4 : 1,
|
|
cursor: disabled ? 'not-allowed' : 'pointer' }}
|
|
title={title}
|
|
>
|
|
{icon && <Icon name={icon} size={12} />}
|
|
{label && <span style={{ fontSize: 9 }}>{label}</span>}
|
|
</button>
|
|
)
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
export default function OberleisteApp() {
|
|
const [state, setState] = useState({
|
|
viewName: null, parallel: false, scale: null,
|
|
pixelWidth: null, pixelHeight: null, unitSystem: '?',
|
|
dpi: 96, dpiSource: 'default',
|
|
showLineweights: false,
|
|
viewMode: null, displayMode: null, displayModes: [],
|
|
ortho: false, gridSnap: false, osnap: false,
|
|
overridesEnabled: false, overridesCount: 0,
|
|
cmdPrompt: '', cmdOptions: [],
|
|
overridesActivePreset: null, overridesPresets: [],
|
|
layerCombinations: [], layerCombinationActive: null,
|
|
})
|
|
const [appliedScale, setAppliedScale] = useState(null)
|
|
const appliedScaleRef = useRef(null)
|
|
const [draft, setDraft] = useState('')
|
|
const [customMode, setCustomMode] = useState(false) // Dropdown -> Custom-Input switch
|
|
const customInputRef = useRef(null)
|
|
|
|
useEffect(() => {
|
|
onMessage('STATE', (s) => {
|
|
setState((prev) => ({ ...prev, ...s }))
|
|
// Dropdown spiegelt EXAKT den Backend-appliedScale fuer den aktuellen
|
|
// Viewport. Kein Live-Skala-Fallback — das Dropdown ist statisch und
|
|
// pro Viewport gebunden. Backend gibt null zurueck wenn der aktive
|
|
// Viewport noch keinen gesetzten Massstab hat → Dropdown zeigt "1:?".
|
|
const next = (typeof s?.appliedScale === 'number' && s.appliedScale > 0)
|
|
? s.appliedScale
|
|
: null
|
|
if (next !== appliedScaleRef.current) {
|
|
setAppliedScale(next)
|
|
appliedScaleRef.current = next
|
|
}
|
|
})
|
|
notifyReady()
|
|
setTimeout(() => requestMassstab(), 50)
|
|
}, [])
|
|
|
|
const isPerspective = state.parallel === false
|
|
const scaleVal = state.scale
|
|
const dropdownValue = appliedScale != null ? String(appliedScale) : '__none__'
|
|
|
|
const applyDropdown = (val) => {
|
|
if (val === '__none__') return
|
|
if (val === '__custom__') {
|
|
setDraft(appliedScale ? `1:${appliedScale}` : '')
|
|
setCustomMode(true)
|
|
// Nach dem Render: Focus + Selektion fuer schnelles Eintippen.
|
|
setTimeout(() => {
|
|
customInputRef.current?.focus()
|
|
customInputRef.current?.select()
|
|
}, 0)
|
|
return
|
|
}
|
|
const r = parseFloat(val)
|
|
if (r > 0) { setAppliedScale(r); appliedScaleRef.current = r; setMassstab(r) }
|
|
}
|
|
const applyDraft = () => {
|
|
const r = parseScale(draft)
|
|
if (r != null) {
|
|
setAppliedScale(r); appliedScaleRef.current = r; setMassstab(r)
|
|
}
|
|
setDraft('')
|
|
setCustomMode(false)
|
|
}
|
|
const cancelDraft = () => { setDraft(''); setCustomMode(false) }
|
|
const apply100 = () => {
|
|
if (appliedScale && appliedScale > 0) setMassstab(appliedScale)
|
|
}
|
|
|
|
// Aktuelles View-Match (manche User haben "Top" / "Right" als view name)
|
|
const matchView = (v) => {
|
|
if (!state.viewName) return false
|
|
return state.viewName === v || state.viewName.toLowerCase() === v.toLowerCase()
|
|
}
|
|
|
|
// (Command-Bar wurde entfernt — Rhinos eigene Command-Line wird benutzt.)
|
|
|
|
return (
|
|
<div style={{
|
|
width: '100%', height: '100%',
|
|
display: 'flex', flexDirection: 'column',
|
|
fontFamily: 'var(--font)', color: 'var(--text-primary)',
|
|
background: 'var(--bg-panel)',
|
|
borderBottom: '1px solid var(--border)',
|
|
boxSizing: 'border-box',
|
|
overflow: 'hidden',
|
|
}}>
|
|
{/* === Toolbar (View, Display, Massstab, Snap, Overrides) === */}
|
|
<div style={{
|
|
display: 'flex', alignItems: 'center', gap: 8,
|
|
padding: '4px 12px 8px',
|
|
overflowX: 'auto', overflowY: 'hidden',
|
|
flexShrink: 0,
|
|
}}>
|
|
{/* Logo: DOSSIER. (Petrol-Punkt) + Launcher-Version */}
|
|
<div
|
|
style={{
|
|
display: 'flex', alignItems: 'baseline', gap: 8,
|
|
flexShrink: 0, userSelect: 'none',
|
|
}}
|
|
title={`Dossier ${__LAUNCHER_VERSION__} (Plugin ${__APP_VERSION__}) — Teil von OpenStudio`}
|
|
>
|
|
<span style={{
|
|
fontFamily: "Krungthep, 'Archivo Black', sans-serif",
|
|
fontSize: 18,
|
|
letterSpacing: '-0.02em',
|
|
color: 'var(--text-primary)',
|
|
lineHeight: 1,
|
|
}}>
|
|
DOSSIER<span style={{ color: 'var(--accent)' }}>.</span>
|
|
</span>
|
|
<span style={{
|
|
fontFamily: 'DM Mono, monospace',
|
|
fontSize: 9,
|
|
letterSpacing: '0.14em',
|
|
color: 'var(--text-muted)',
|
|
textTransform: 'uppercase',
|
|
}}>
|
|
v{__LAUNCHER_VERSION__}
|
|
</span>
|
|
</div>
|
|
<button
|
|
onClick={() => openDossierSettings()}
|
|
title="Dossier-Einstellungen"
|
|
style={{
|
|
background: 'transparent', border: 'none', padding: '2px 4px',
|
|
cursor: 'pointer', color: 'var(--text-muted)',
|
|
display: 'flex', alignItems: 'center', flexShrink: 0,
|
|
}}
|
|
onMouseEnter={(e) => e.currentTarget.style.color = 'var(--text-primary)'}
|
|
onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-muted)'}
|
|
>
|
|
<Icon name="settings" size={14} />
|
|
</button>
|
|
<div style={sep} />
|
|
{/* ====== GRUPPE: VIEW ====== */}
|
|
<span style={groupLabel}>View</span>
|
|
{VIEWS.map(v => (
|
|
<ToolButton
|
|
key={v.value}
|
|
onClick={() => setView(v.value)}
|
|
active={matchView(v.value)}
|
|
icon={v.icon}
|
|
label={v.label}
|
|
title={`Ansicht ${v.label}`}
|
|
/>
|
|
))}
|
|
|
|
<div style={sep} />
|
|
|
|
{/* ====== GRUPPE: DISPLAY-MODE ====== */}
|
|
<span style={groupLabel}>Display</span>
|
|
<select
|
|
value={state.displayMode || ''}
|
|
onChange={(e) => setDisplayMode(e.target.value)}
|
|
style={pillSelect}
|
|
title="Display-Mode (Wireframe / Shaded / Rendered / etc.)"
|
|
>
|
|
{!state.displayMode && <option value="">—</option>}
|
|
{(state.displayModes || []).map(dm => (
|
|
<option key={dm.id} value={dm.name}>{dm.name}</option>
|
|
))}
|
|
</select>
|
|
|
|
<div style={sep} />
|
|
|
|
{/* ====== GRUPPE: MASSSTAB ====== */}
|
|
<span style={groupLabel}>Massstab</span>
|
|
<span
|
|
className={isPerspective ? 'chip' : 'chip chip-accent'}
|
|
style={{
|
|
...pillChip,
|
|
minWidth: 56, justifyContent: 'center',
|
|
fontFamily: 'DM Mono, monospace', fontSize: 11, fontWeight: 600,
|
|
}}
|
|
title="Live-Zoom"
|
|
>
|
|
{/* Live-Zoom des Viewports — immer sichtbar bei Parallelprojektion,
|
|
unabhaengig davon ob ein Massstab im Dropdown gepinnt ist oder
|
|
nicht. Nur in Perspective ist die Anzeige nicht sinnvoll. */}
|
|
{isPerspective ? '—' : fmtScale(scaleVal)}
|
|
</span>
|
|
{customMode ? (
|
|
<input
|
|
ref={customInputRef}
|
|
disabled={isPerspective}
|
|
type="text" placeholder="1:N"
|
|
value={draft}
|
|
onChange={(e) => setDraft(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') applyDraft()
|
|
else if (e.key === 'Escape') cancelDraft()
|
|
}}
|
|
onBlur={applyDraft}
|
|
style={{ ...pillInput, width: 92 }}
|
|
title="Massstab eingeben (Enter = uebernehmen, Esc = abbrechen)"
|
|
/>
|
|
) : (
|
|
<select
|
|
disabled={isPerspective}
|
|
value={dropdownValue}
|
|
onChange={(e) => applyDropdown(e.target.value)}
|
|
style={{ ...pillSelect, width: 92 }}
|
|
>
|
|
<option value="__none__">—</option>
|
|
{PRESETS.map(p => (
|
|
<option key={p.value} value={String(p.value)}>{p.label}</option>
|
|
))}
|
|
{appliedScale != null && !PRESETS.some(p => p.value === appliedScale) && (
|
|
<option value={String(appliedScale)}>1:{appliedScale}</option>
|
|
)}
|
|
<option value="__custom__">Eigener…</option>
|
|
</select>
|
|
)}
|
|
<ToolButton
|
|
onClick={apply100}
|
|
disabled={isPerspective || !appliedScale}
|
|
label="100%"
|
|
title={appliedScale ? `Zoom auf eingestellten Massstab snappen (1:${appliedScale >= 10 ? Math.round(appliedScale) : appliedScale})` : 'Erst einen Massstab wählen'}
|
|
/>
|
|
<button className="btn-icon" onClick={zoomExtents}
|
|
style={pillIconBtn}
|
|
title="Auf gesamten Inhalt zoomen">
|
|
<Icon name="fit_screen" size={14} />
|
|
</button>
|
|
<button className="btn-icon" onClick={zoomSelection}
|
|
style={pillIconBtn}
|
|
title="Auf Selektion zoomen">
|
|
<Icon name="center_focus_strong" size={14} />
|
|
</button>
|
|
<ToolButton
|
|
onClick={() => setShowLineweights(!state.showLineweights)}
|
|
active={state.showLineweights}
|
|
label={state.showLineweights ? 'Print' : 'Edit'}
|
|
title={state.showLineweights ? 'Print-View aktiv — klick zum Ausschalten' : 'Strichstärken anzeigen (Print-View)'}
|
|
icon={state.showLineweights ? 'print' : 'edit'}
|
|
/>
|
|
|
|
<div style={sep} />
|
|
|
|
{/* Snap-Toggles (Ortho/Grid/OSnap) sind in Rhinos eigener Footer-Bar
|
|
schon vorhanden — hier rausgenommen um Doppelung zu vermeiden. */}
|
|
|
|
{/* ====== STACK: Overrides + Kombi uebereinander ======
|
|
Beide Zeilen haben identisches Spalten-Layout (Label-Spalte fix,
|
|
Dropdown gleich breit), damit Dropdowns vertikal aligned sind. */}
|
|
{(() => {
|
|
const STACK_LABEL_W = 60 // gleich breit fuer beide Zeilen
|
|
const STACK_DROPDOWN_W = 150
|
|
const stackLabel = { ...groupLabel, width: STACK_LABEL_W,
|
|
padding: 0, textAlign: 'left' }
|
|
return (
|
|
<div style={{
|
|
display: 'flex', flexDirection: 'column', gap: 4,
|
|
flexShrink: 0,
|
|
}}>
|
|
{/* Overrides */}
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
|
<span style={stackLabel}>Overrides</span>
|
|
<ToolButton
|
|
onClick={() => toggleOverrides(!state.overridesEnabled)}
|
|
active={state.overridesEnabled}
|
|
icon="auto_fix_high"
|
|
label={state.overridesEnabled ? 'AN' : 'AUS'}
|
|
title={state.overridesEnabled
|
|
? `Grafische Overrides aktiv — klick zum Ausschalten`
|
|
: `Grafische Overrides ausgeschaltet`}
|
|
/>
|
|
<select
|
|
value={state.overridesActivePreset || '__none__'}
|
|
onChange={(e) => {
|
|
const v = e.target.value
|
|
if (v === '__configure__') { openOverridesPanel(); return }
|
|
setOverridesPreset(v === '__none__' ? null : v)
|
|
}}
|
|
style={{ ...pillSelect, width: STACK_DROPDOWN_W }}
|
|
title={state.overridesActivePreset
|
|
? `Aktives Preset: ${state.overridesActivePreset} (${state.overridesCount} Regeln)`
|
|
: `Kein Preset aktiv (${state.overridesCount} Regeln, frei editiert)`}
|
|
>
|
|
<option value="__none__">{state.overridesCount > 0 ? `— (${state.overridesCount} Regeln)` : '—'}</option>
|
|
{(state.overridesPresets || []).map(name => (
|
|
<option key={name} value={name}>{name}</option>
|
|
))}
|
|
<option disabled>──────────</option>
|
|
<option value="__configure__">Konfigurieren…</option>
|
|
</select>
|
|
<ToolButton
|
|
onClick={openOverridesPanel}
|
|
icon="settings"
|
|
title="Overrides-Regel-Editor öffnen"
|
|
/>
|
|
</div>
|
|
{/* Kombi */}
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
|
<span style={stackLabel}>Kombi</span>
|
|
<ToolButton
|
|
onClick={() => {
|
|
const suggested = state.layerCombinationActive
|
|
|| `Kombi ${(state.layerCombinations || []).length + 1}`
|
|
const name = (window.prompt('Name für Ebenenkombination:', suggested) || '').trim()
|
|
if (!name) return
|
|
if ((state.layerCombinations || []).includes(name) &&
|
|
!window.confirm(`"${name}" überschreiben?`)) return
|
|
saveLayerCombination(name)
|
|
}}
|
|
icon="add"
|
|
title="Aktuelle Sichtbarkeit als neue Kombination speichern"
|
|
/>
|
|
<select
|
|
value={state.layerCombinationActive || '__none__'}
|
|
onChange={(e) => {
|
|
const v = e.target.value
|
|
if (v === '__configure__') { openLayerCombinationsDialog(); return }
|
|
if (v === '__delete__') {
|
|
if (state.layerCombinationActive &&
|
|
window.confirm(`Kombination "${state.layerCombinationActive}" löschen?`))
|
|
deleteLayerCombination(state.layerCombinationActive)
|
|
return
|
|
}
|
|
pickLayerCombination(v === '__none__' ? null : v)
|
|
}}
|
|
style={{ ...pillSelect, width: STACK_DROPDOWN_W }}
|
|
title={state.layerCombinationActive
|
|
? `Aktive Kombi: ${state.layerCombinationActive}`
|
|
: 'Keine Kombination — manuelle Sichtbarkeit'}
|
|
>
|
|
<option value="__none__">— Eigene —</option>
|
|
{(state.layerCombinations || []).map(name => (
|
|
<option key={name} value={name}>{name}</option>
|
|
))}
|
|
{state.layerCombinationActive && (
|
|
<>
|
|
<option disabled>──────────</option>
|
|
<option value="__delete__">🗑 Aktuelle löschen</option>
|
|
</>
|
|
)}
|
|
<option disabled>──────────</option>
|
|
<option value="__configure__">Bearbeiten…</option>
|
|
</select>
|
|
<ToolButton
|
|
onClick={openLayerCombinationsDialog}
|
|
icon="edit"
|
|
title="Ebenenkombinationen bearbeiten"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
})()}
|
|
|
|
{/* Spacer am rechten Rand */}
|
|
<div style={{ flex: 1 }} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|