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,325 @@
|
||||
import React, { useEffect, useState, useMemo } from 'react'
|
||||
import { invoke } from '@tauri-apps/api/core'
|
||||
import { open as openDialog, save as saveDialog } from '@tauri-apps/plugin-dialog'
|
||||
|
||||
// Transitive Dependency-Aufloesung: gibt Set aller Module zurueck, die
|
||||
// aktiviert sein muessen, wenn `selected` aktiviert sind.
|
||||
function resolveDeps(selected, allModules) {
|
||||
const byId = Object.fromEntries(allModules.map(m => [m.id, m]))
|
||||
const out = new Set(selected)
|
||||
let changed = true
|
||||
while (changed) {
|
||||
changed = false
|
||||
for (const id of [...out]) {
|
||||
const m = byId[id]
|
||||
if (!m) continue
|
||||
for (const dep of (m.dependsOn || [])) {
|
||||
if (!out.has(dep)) { out.add(dep); changed = true }
|
||||
}
|
||||
}
|
||||
}
|
||||
return out
|
||||
}
|
||||
|
||||
// Modul-IDs, die aktuell aktiv sind WEIL eine andere Auswahl sie braucht.
|
||||
function lockedBy(selected, allModules) {
|
||||
const byId = Object.fromEntries(allModules.map(m => [m.id, m]))
|
||||
const locked = new Set()
|
||||
for (const id of selected) {
|
||||
const m = byId[id]
|
||||
if (!m) continue
|
||||
for (const dep of (m.dependsOn || [])) {
|
||||
if (selected.has(dep) || selected.has(id)) locked.add(dep)
|
||||
}
|
||||
}
|
||||
return locked
|
||||
}
|
||||
|
||||
function formatRelative(iso) {
|
||||
if (!iso) return ''
|
||||
try {
|
||||
const d = new Date(iso)
|
||||
const now = new Date()
|
||||
const diff = (now - d) / 1000
|
||||
if (diff < 60) return 'vor wenigen Sek.'
|
||||
if (diff < 3600) return `vor ${Math.floor(diff/60)} Min.`
|
||||
if (diff < 86400) return `vor ${Math.floor(diff/3600)} h`
|
||||
if (diff < 86400 * 7) return `vor ${Math.floor(diff/86400)} Tagen`
|
||||
return d.toLocaleDateString('de-CH')
|
||||
} catch { return '' }
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
const [recent, setRecent] = useState([])
|
||||
const [modules, setModules] = useState([])
|
||||
const [dialog, setDialog] = useState(null) // null | { mode: 'new'|'edit', project? }
|
||||
const [settingsOpen, setSettingsOpen] = useState(false)
|
||||
const [busy, setBusy] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
invoke('list_recent').then(setRecent).catch(console.error)
|
||||
invoke('read_modules_manifest').then(setModules).catch(console.error)
|
||||
}, [])
|
||||
|
||||
const refresh = () => invoke('list_recent').then(setRecent).catch(console.error)
|
||||
|
||||
const openProject = async (proj) => {
|
||||
if (busy) return
|
||||
setBusy(true)
|
||||
try {
|
||||
await invoke('open_rhino', { path3dm: proj.path })
|
||||
const next = recent.map(p =>
|
||||
p.path === proj.path ? { ...p, lastOpened: new Date().toISOString() } : p
|
||||
)
|
||||
await invoke('save_recent', { projects: next })
|
||||
setRecent(next)
|
||||
} catch (ex) {
|
||||
alert(`Rhino-Start fehlgeschlagen: ${ex}`)
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
const editProject = (proj) => {
|
||||
setDialog({ mode: 'edit', project: proj })
|
||||
}
|
||||
|
||||
const saveProject = async ({ name, path, modules: mods }) => {
|
||||
if (!path) { alert('Bitte eine .3dm-Datei auswaehlen.'); return }
|
||||
if (!name.trim()) { alert('Bitte einen Projekt-Namen angeben.'); return }
|
||||
try {
|
||||
await invoke('write_project_config', { path3dm: path, name: name.trim(), modules: mods })
|
||||
const others = recent.filter(p => p.path !== path)
|
||||
const next = [{ name: name.trim(), path, modules: mods,
|
||||
lastOpened: new Date().toISOString() }, ...others]
|
||||
await invoke('save_recent', { projects: next })
|
||||
setRecent(next)
|
||||
setDialog(null)
|
||||
} catch (ex) {
|
||||
alert(`Speichern fehlgeschlagen: ${ex}`)
|
||||
}
|
||||
}
|
||||
|
||||
const removeProject = async (proj) => {
|
||||
const next = recent.filter(p => p.path !== proj.path)
|
||||
await invoke('save_recent', { projects: next })
|
||||
setRecent(next)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="app">
|
||||
<div className="topbar">
|
||||
<span className="brand">DOSSIER</span>
|
||||
<span className="version">0.1.0</span>
|
||||
<div className="spacer" />
|
||||
<button onClick={() => setDialog({ mode: 'new' })}>Neues Projekt</button>
|
||||
<button onClick={() => setSettingsOpen(true)} title="Einstellungen"
|
||||
style={{ padding: '6px 10px' }}>⚙</button>
|
||||
</div>
|
||||
|
||||
<div className="main">
|
||||
<h2 className="section-title">Kuerzlich geoeffnet</h2>
|
||||
{recent.length === 0 ? (
|
||||
<div className="empty">
|
||||
Noch keine Projekte. Klick „Neues Projekt" zum Starten.
|
||||
</div>
|
||||
) : (
|
||||
<div className="project-list">
|
||||
{recent.map(p => (
|
||||
<div key={p.path} className="project-card"
|
||||
onDoubleClick={() => openProject(p)}>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div className="name">{p.name}</div>
|
||||
<div className="path">{p.path}</div>
|
||||
</div>
|
||||
<div className="meta">
|
||||
{p.modules?.length || 0} Module · {formatRelative(p.lastOpened)}
|
||||
</div>
|
||||
<button onClick={() => editProject(p)}>Bearbeiten</button>
|
||||
<button className="primary" disabled={busy}
|
||||
onClick={() => openProject(p)}>
|
||||
Öffnen
|
||||
</button>
|
||||
<button onClick={() => removeProject(p)} title="Aus Liste entfernen">×</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{dialog && (
|
||||
<ProjectDialog
|
||||
mode={dialog.mode}
|
||||
project={dialog.project}
|
||||
modules={modules}
|
||||
onCancel={() => setDialog(null)}
|
||||
onSave={saveProject}
|
||||
/>
|
||||
)}
|
||||
{settingsOpen && (
|
||||
<SettingsDialog onClose={() => setSettingsOpen(false)} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function SettingsDialog({ onClose }) {
|
||||
const [rhinoApp, setRhinoApp] = useState('')
|
||||
const [loaded, setLoaded] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
invoke('read_settings')
|
||||
.then(s => { setRhinoApp(s.rhinoApp || 'Rhinoceros 8'); setLoaded(true) })
|
||||
.catch(() => { setRhinoApp('Rhinoceros 8'); setLoaded(true) })
|
||||
}, [])
|
||||
|
||||
const pickRhino = async () => {
|
||||
// .app-Bundles sind technisch Ordner, macOS behandelt sie aber im File-Picker
|
||||
// als auswaehlbare Pakete, wenn der Extension-Filter "app" gesetzt ist.
|
||||
// directory:true wuerde stattdessen reinnavigieren — falsch.
|
||||
const sel = await openDialog({
|
||||
title: 'Rhino-App waehlen',
|
||||
filters: [{ name: 'Anwendung', extensions: ['app'] }],
|
||||
defaultPath: '/Applications',
|
||||
})
|
||||
if (typeof sel === 'string') setRhinoApp(sel)
|
||||
}
|
||||
|
||||
const useDefault = () => setRhinoApp('Rhinoceros 8')
|
||||
|
||||
const save = async () => {
|
||||
try {
|
||||
await invoke('save_settings', { settings: { rhinoApp: rhinoApp.trim() || 'Rhinoceros 8' } })
|
||||
onClose()
|
||||
} catch (ex) {
|
||||
alert(`Speichern fehlgeschlagen: ${ex}`)
|
||||
}
|
||||
}
|
||||
|
||||
if (!loaded) return null
|
||||
|
||||
return (
|
||||
<div className="dialog-bg" onClick={(e) => { if (e.target === e.currentTarget) onClose() }}>
|
||||
<div className="dialog" style={{ width: 520 }}>
|
||||
<header>Einstellungen</header>
|
||||
<div className="body">
|
||||
<div className="row">
|
||||
<label>Rhino-Anwendung</label>
|
||||
<div className="file-picker">
|
||||
<input type="text" value={rhinoApp}
|
||||
onChange={e => setRhinoApp(e.target.value)}
|
||||
placeholder="Rhinoceros 8" />
|
||||
<button onClick={pickRhino}>Waehlen…</button>
|
||||
</div>
|
||||
<div style={{ fontSize: 11, color: 'var(--text-muted)', lineHeight: 1.5 }}>
|
||||
App-Name (in /Applications gesucht) oder absoluter Pfad zur .app.
|
||||
Beispiele:<br />
|
||||
<code style={{ fontFamily: 'var(--mono)' }}>Rhinoceros 8</code> · <code style={{ fontFamily: 'var(--mono)' }}>/Applications/Rhino 8.app</code> · <code style={{ fontFamily: 'var(--mono)' }}>/Applications/Rhino 8 WIP.app</code>
|
||||
<button onClick={useDefault} style={{ display: 'block', marginTop: 8, fontSize: 11 }}>
|
||||
Standard verwenden
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<button onClick={onClose}>Abbrechen</button>
|
||||
<button className="primary" onClick={save}>Speichern</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ProjectDialog({ mode, project, modules, onCancel, onSave }) {
|
||||
const [name, setName] = useState(project?.name || '')
|
||||
const [path, setPath] = useState(project?.path || '')
|
||||
const [picked, setPicked] = useState(new Set(project?.modules || ['ebenen', 'oberleiste']))
|
||||
|
||||
const effective = useMemo(() => resolveDeps(picked, modules), [picked, modules])
|
||||
const locked = useMemo(() => {
|
||||
// Module, die aktiv sind, aber NICHT direkt gewaehlt — also nur als Dep
|
||||
const out = new Set()
|
||||
for (const id of effective) {
|
||||
if (!picked.has(id)) out.add(id)
|
||||
}
|
||||
return out
|
||||
}, [picked, effective, modules])
|
||||
|
||||
const toggle = (id) => {
|
||||
if (locked.has(id)) return // nicht direkt abwaehlbar
|
||||
setPicked(prev => {
|
||||
const next = new Set(prev)
|
||||
if (next.has(id)) next.delete(id); else next.add(id)
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
const pickFile = async () => {
|
||||
const sel = mode === 'new'
|
||||
? await openDialog({
|
||||
title: '3dm-Datei auswaehlen',
|
||||
filters: [{ name: 'Rhino', extensions: ['3dm'] }],
|
||||
})
|
||||
: await openDialog({
|
||||
title: '3dm-Datei auswaehlen',
|
||||
filters: [{ name: 'Rhino', extensions: ['3dm'] }],
|
||||
})
|
||||
if (typeof sel === 'string') setPath(sel)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="dialog-bg" onClick={(e) => { if (e.target === e.currentTarget) onCancel() }}>
|
||||
<div className="dialog">
|
||||
<header>{mode === 'new' ? 'Neues Projekt' : 'Projekt bearbeiten'}</header>
|
||||
<div className="body">
|
||||
<div className="row">
|
||||
<label>Projekt-Name</label>
|
||||
<input type="text" value={name} onChange={e => setName(e.target.value)}
|
||||
placeholder="z.B. Wohnhaus Brunner" autoFocus />
|
||||
</div>
|
||||
<div className="row">
|
||||
<label>3dm-Datei</label>
|
||||
<div className="file-picker">
|
||||
<input type="text" value={path} readOnly
|
||||
placeholder="Pfad zur 3dm-Datei" />
|
||||
<button onClick={pickFile}>Waehlen…</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<label>Module ({[...effective].length} aktiv)</label>
|
||||
<div className="module-grid">
|
||||
{modules.map(m => {
|
||||
const isActive = effective.has(m.id)
|
||||
const isLocked = locked.has(m.id)
|
||||
return (
|
||||
<div
|
||||
key={m.id}
|
||||
className={`module-row ${isActive ? 'active' : ''} ${isLocked ? 'locked' : ''}`}
|
||||
onClick={() => toggle(m.id)}
|
||||
title={isLocked ? 'Wird von einem anderen Modul gebraucht' : ''}
|
||||
>
|
||||
<div className="check">{isActive ? (isLocked ? '🔒' : '✓') : ''}</div>
|
||||
<div className="info">
|
||||
<div className="name">{m.name}</div>
|
||||
<div className="desc">{m.description}</div>
|
||||
{(m.dependsOn || []).length > 0 && (
|
||||
<div className="dep">braucht: {m.dependsOn.join(', ')}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<button onClick={onCancel}>Abbrechen</button>
|
||||
<button className="primary"
|
||||
onClick={() => onSave({ name, path, modules: [...effective] })}>
|
||||
Speichern
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import React from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import App from './App.jsx'
|
||||
import './styles.css'
|
||||
|
||||
createRoot(document.getElementById('root')).render(<App />)
|
||||
@@ -0,0 +1,231 @@
|
||||
:root {
|
||||
--bg-base: #1c1c1e;
|
||||
--bg-panel: #2a2a2c;
|
||||
--bg-elev: #34343a;
|
||||
--border: #3a3a3e;
|
||||
--text: #eaeaea;
|
||||
--text-muted: #8a8a8e;
|
||||
--accent: #5a9e5a;
|
||||
--accent-hover: #6cb56c;
|
||||
--danger: #c87050;
|
||||
--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
|
||||
--mono: 'DM Mono', 'Menlo', monospace;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html, body, #root {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
background: var(--bg-base);
|
||||
color: var(--text);
|
||||
font-family: var(--font);
|
||||
font-size: 13px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
background: var(--bg-elev);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 6px 12px;
|
||||
cursor: pointer;
|
||||
transition: background 0.1s ease;
|
||||
}
|
||||
button:hover:not(:disabled) { background: #404048; }
|
||||
button:disabled { opacity: 0.4; cursor: not-allowed; }
|
||||
button.primary {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: white;
|
||||
}
|
||||
button.primary:hover:not(:disabled) { background: var(--accent-hover); }
|
||||
|
||||
input[type="text"] {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
background: var(--bg-base);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 6px 10px;
|
||||
outline: none;
|
||||
}
|
||||
input[type="text"]:focus { border-color: var(--accent); }
|
||||
|
||||
.app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 14px 20px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-panel);
|
||||
}
|
||||
.topbar .brand {
|
||||
font-family: var(--mono);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.topbar .version {
|
||||
font-family: var(--mono);
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
opacity: 0.6;
|
||||
}
|
||||
.topbar .spacer { flex: 1; }
|
||||
|
||||
.main { flex: 1; overflow-y: auto; padding: 20px; }
|
||||
|
||||
.section-title {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
.project-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.project-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 14px;
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.1s ease;
|
||||
}
|
||||
.project-card:hover { border-color: #555; }
|
||||
.project-card .name {
|
||||
font-weight: 500;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.project-card .path {
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.project-card .meta {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.module-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
.module-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.module-row.locked { opacity: 0.7; cursor: default; }
|
||||
.module-row .check {
|
||||
flex-shrink: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 4px;
|
||||
border: 1.5px solid var(--border);
|
||||
background: var(--bg-base);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
color: white;
|
||||
}
|
||||
.module-row.active .check { background: var(--accent); border-color: var(--accent); }
|
||||
.module-row.locked .check { background: #555; border-color: #555; }
|
||||
.module-row .info { flex: 1; min-width: 0; }
|
||||
.module-row .info .name { font-weight: 500; margin-bottom: 2px; }
|
||||
.module-row .info .desc { font-size: 11px; color: var(--text-muted); line-height: 1.4; }
|
||||
.module-row .info .dep {
|
||||
font-family: var(--mono);
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.dialog-bg {
|
||||
position: fixed; inset: 0;
|
||||
background: rgba(0,0,0,0.6);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
z-index: 10;
|
||||
}
|
||||
.dialog {
|
||||
width: 600px; max-width: 90vw;
|
||||
max-height: 90vh;
|
||||
background: var(--bg-base);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.dialog header {
|
||||
padding: 14px 18px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-weight: 500;
|
||||
}
|
||||
.dialog .body {
|
||||
padding: 18px;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
.dialog .row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.dialog .row label {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.dialog footer {
|
||||
padding: 12px 18px;
|
||||
border-top: 1px solid var(--border);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
.file-picker {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.file-picker input { flex: 1; font-family: var(--mono); font-size: 11px; }
|
||||
Reference in New Issue
Block a user