Kamera-Panel + Iso-Button in der Oberleiste
Oberleiste: - View-Gruppe: Iso-Button neu zwischen Right und Persp - matchView: Iso = parallel ohne orthogonalen Standard-Namen, Perspektive = !parallel — beide via Projektions-Flag unterschieden (Rhino-Viewport-Name ist oft "Perspective" fuer beide) - Camera-Knopf (Icon: videocam) oeffnet das neue Kamera-Panel - SET_VIEW Backend: 'Iso' faelltt auf kamera._set_iso(vp, "NE") - OPEN_KAMERA_PANEL Handler Kamera-Panel (neu — rhino/kamera.py + src/KameraApp.jsx): - Viewport-Name + Projektions-Toggle (Persp/Parallel) - 4 Iso-Quick-Buttons (NW/NE/SE/SW) — true-iso 35°/45°, Kamera-Distanz auto aus Szenen-BBox - Vec3-Felder fuer Kamera-Position + Blick-Ziel (numerisch editierbar, m) - Distanz read-only - Brennweite (mm) bei Persp, Frustum-Breite (m) bei Parallel - Zoom-Extents-Button - Presets: speichern + anwenden + loeschen, persistiert in doc.Strings["dossier_kamera_presets"] (JSON) - Eto-Form-Satelliten-Fenster (420x600) via panel_base.open_satellite_window Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,284 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import Icon from './components/Icon'
|
||||
import {
|
||||
onMessage, notifyReady,
|
||||
setKameraViewport, setKameraProjection, setKameraIso,
|
||||
kameraZoomExtents, saveKameraPreset, applyKameraPreset, deleteKameraPreset,
|
||||
} from './lib/rhinoBridge'
|
||||
|
||||
const labelXs = {
|
||||
fontSize: 9, color: 'var(--text-muted)',
|
||||
textTransform: 'uppercase', letterSpacing: '0.06em',
|
||||
fontWeight: 600,
|
||||
}
|
||||
|
||||
function NumberField({ label, value, onCommit, suffix, step = 0.1 }) {
|
||||
const [draft, setDraft] = useState(value != null ? value.toFixed(3) : '')
|
||||
useEffect(() => {
|
||||
setDraft(value != null ? value.toFixed(3) : '')
|
||||
}, [value])
|
||||
const commit = () => {
|
||||
const n = parseFloat(draft)
|
||||
if (!isNaN(n)) onCommit(n)
|
||||
else setDraft(value != null ? value.toFixed(3) : '')
|
||||
}
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<span style={labelXs}>{label}</span>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
<input
|
||||
type="number"
|
||||
step={step}
|
||||
value={draft}
|
||||
onChange={(ev) => setDraft(ev.target.value)}
|
||||
onBlur={commit}
|
||||
onKeyDown={(ev) => {
|
||||
if (ev.key === 'Enter') commit()
|
||||
if (ev.key === 'Escape') setDraft(value != null ? value.toFixed(3) : '')
|
||||
}}
|
||||
style={{ flex: 1, fontSize: 11, padding: '4px 8px',
|
||||
fontFamily: 'var(--font-mono)' }}
|
||||
/>
|
||||
{suffix && (
|
||||
<span style={{ fontSize: 9, color: 'var(--text-muted)', minWidth: 18 }}>
|
||||
{suffix}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Vec3Field({ label, value, onCommit }) {
|
||||
const v = value || [0, 0, 0]
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
||||
<span style={labelXs}>{label}</span>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 4 }}>
|
||||
{['X', 'Y', 'Z'].map((axis, i) => (
|
||||
<NumberField
|
||||
key={axis}
|
||||
label={axis}
|
||||
value={v[i]}
|
||||
onCommit={(n) => {
|
||||
const next = [v[0], v[1], v[2]]
|
||||
next[i] = n
|
||||
onCommit(next)
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function KameraApp() {
|
||||
const [vp, setVp] = useState(null)
|
||||
const [presets, setPresets] = useState([])
|
||||
const [presetName, setPresetName] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
onMessage('STATE', (s) => {
|
||||
setVp(s.viewport || null)
|
||||
setPresets(s.presets || [])
|
||||
})
|
||||
notifyReady()
|
||||
}, [])
|
||||
|
||||
if (!vp) {
|
||||
return (
|
||||
<div style={{ padding: 14, color: 'var(--text-muted)', fontSize: 11 }}>
|
||||
Kein aktiver Viewport.
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const isPar = !!vp.parallel
|
||||
const updateLoc = (loc) => setKameraViewport({ loc })
|
||||
const updateTgt = (target) => setKameraViewport({ target })
|
||||
const updateLens = (lensMm) => setKameraViewport({ lensMm })
|
||||
const updateFW = (frustumW) => setKameraViewport({ frustumW })
|
||||
|
||||
const saveCurrent = () => {
|
||||
const n = (presetName || '').trim()
|
||||
if (!n) return
|
||||
saveKameraPreset(n)
|
||||
setPresetName('')
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
padding: 14,
|
||||
display: 'flex', flexDirection: 'column', gap: 16,
|
||||
fontFamily: 'var(--font)', color: 'var(--text-primary)',
|
||||
background: 'var(--bg-panel)', minHeight: '100vh',
|
||||
boxSizing: 'border-box',
|
||||
}}>
|
||||
{/* Header: Viewport-Name + Projektion-Toggle */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||
<span style={labelXs}>Viewport</span>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<span style={{ fontSize: 13, fontWeight: 600 }}>{vp.name || 'Unnamed'}</span>
|
||||
<div style={{ flex: 1 }} />
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
borderRadius: 999,
|
||||
border: '1px solid var(--border)',
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
<button
|
||||
onClick={() => setKameraProjection(false)}
|
||||
className={!isPar ? 'btn-contained' : 'btn-outlined'}
|
||||
style={{ padding: '4px 12px', fontSize: 10, border: 'none',
|
||||
borderRadius: 0 }}
|
||||
>Perspektive</button>
|
||||
<button
|
||||
onClick={() => setKameraProjection(true)}
|
||||
className={isPar ? 'btn-contained' : 'btn-outlined'}
|
||||
style={{ padding: '4px 12px', fontSize: 10, border: 'none',
|
||||
borderRadius: 0 }}
|
||||
>Parallel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Iso-Quick-Picker */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||
<span style={labelXs}>Isometrie (Standard, true-iso 35°/45°)</span>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 4 }}>
|
||||
{[
|
||||
{ v: 'NW', label: 'NW' },
|
||||
{ v: 'NE', label: 'NE' },
|
||||
{ v: 'SE', label: 'SE' },
|
||||
{ v: 'SW', label: 'SW' },
|
||||
].map(o => (
|
||||
<button
|
||||
key={o.v}
|
||||
onClick={() => setKameraIso(o.v)}
|
||||
className="btn-outlined"
|
||||
style={{ padding: '6px 0', fontSize: 11 }}
|
||||
title={`Isometrie aus ${o.label} (Kamera blickt Richtung Szene)`}
|
||||
>{o.label}</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Kamera-Position + Target */}
|
||||
<Vec3Field label="Kamera-Position (m)" value={vp.loc} onCommit={updateLoc} />
|
||||
<Vec3Field label="Blick-Ziel (m)" value={vp.target} onCommit={updateTgt} />
|
||||
|
||||
{/* Distance read-only */}
|
||||
<div style={{
|
||||
display: 'flex', alignItems: 'center', gap: 8,
|
||||
padding: '6px 10px',
|
||||
background: 'var(--bg-section)',
|
||||
borderRadius: 6,
|
||||
border: '1px solid var(--border-light)',
|
||||
}}>
|
||||
<span style={labelXs}>Distanz</span>
|
||||
<span style={{ fontSize: 11, fontFamily: 'var(--font-mono)',
|
||||
color: 'var(--text-secondary)' }}>
|
||||
{vp.distance != null ? vp.distance.toFixed(2) + ' m' : '—'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Linse / Frustum je nach Projektion */}
|
||||
{isPar ? (
|
||||
<NumberField
|
||||
label="Frustum-Breite (m)"
|
||||
value={vp.frustumW}
|
||||
onCommit={updateFW}
|
||||
suffix="m"
|
||||
step={0.5}
|
||||
/>
|
||||
) : (
|
||||
<NumberField
|
||||
label="Brennweite (mm, 35mm-Aequivalent)"
|
||||
value={vp.lensMm}
|
||||
onCommit={updateLens}
|
||||
suffix="mm"
|
||||
step={1}
|
||||
/>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={() => kameraZoomExtents()}
|
||||
className="btn-outlined"
|
||||
style={{ padding: '6px 12px', fontSize: 11 }}
|
||||
>
|
||||
<Icon name="zoom_out_map" size={13} />
|
||||
<span style={{ marginLeft: 6 }}>Zoom Extents</span>
|
||||
</button>
|
||||
|
||||
{/* Presets */}
|
||||
<div style={{
|
||||
display: 'flex', flexDirection: 'column', gap: 6,
|
||||
padding: 10, borderRadius: 6,
|
||||
background: 'var(--bg-section)',
|
||||
border: '1px solid var(--border-light)',
|
||||
}}>
|
||||
<span style={labelXs}>Presets</span>
|
||||
<div style={{ display: 'flex', gap: 4 }}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Name…"
|
||||
value={presetName}
|
||||
onChange={(ev) => setPresetName(ev.target.value)}
|
||||
onKeyDown={(ev) => { if (ev.key === 'Enter') saveCurrent() }}
|
||||
style={{ flex: 1, fontSize: 11, padding: '4px 8px' }}
|
||||
/>
|
||||
<button
|
||||
onClick={saveCurrent}
|
||||
disabled={!presetName.trim()}
|
||||
className="btn-contained"
|
||||
style={{ padding: '4px 12px', fontSize: 11 }}
|
||||
>Aktuelle speichern</button>
|
||||
</div>
|
||||
{presets.length === 0 ? (
|
||||
<span style={{ fontSize: 10, color: 'var(--text-muted)', fontStyle: 'italic' }}>
|
||||
Keine Presets gespeichert.
|
||||
</span>
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
{presets.map(p => (
|
||||
<div
|
||||
key={p.id}
|
||||
style={{
|
||||
display: 'flex', alignItems: 'center', gap: 6,
|
||||
padding: '4px 6px',
|
||||
borderRadius: 4,
|
||||
background: 'var(--bg-item)',
|
||||
border: '1px solid transparent',
|
||||
fontSize: 11,
|
||||
}}
|
||||
>
|
||||
<button
|
||||
onClick={() => applyKameraPreset(p.id)}
|
||||
className="btn-outlined"
|
||||
style={{ padding: '2px 8px', fontSize: 10 }}
|
||||
title="Anwenden"
|
||||
>
|
||||
<Icon name="play_arrow" size={11} />
|
||||
</button>
|
||||
<span style={{ flex: 1, minWidth: 0,
|
||||
overflow: 'hidden', textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap' }}>{p.name}</span>
|
||||
<span style={{ fontSize: 9, color: 'var(--text-muted)',
|
||||
fontFamily: 'var(--font-mono)' }}>
|
||||
{p.parallel ? 'Par' : 'Persp'}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => deleteKameraPreset(p.id)}
|
||||
className="btn-icon-xs"
|
||||
title="Loeschen"
|
||||
>
|
||||
<Icon name="close" size={11} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user