Files

4.2 KiB

Ribbon-UI + modulare Bars — Plan

Nutzer-Vision (2026-07-05, mit OCS/AutoCAD-Ribbon als Referenz). Ziel: klare, einheitliche Werkzeug-/Eigenschaften-Darstellung; Werkzeug-Sidebar entfällt.

Zielbild

  • Ribbon-Oberleiste mit Tabs: 2D · 3D · BIM · Ansichten. Jeder Tab zeigt gruppierte Werkzeug-/Aktions-Icons (wie OCS Draw/Model/Insert/Annotate/View).
    • 2D: Zeichnen (Select/Linie/Polylinie/Rechteck/Kreis/Bogen/Text) · Ändern (Move/Copy/Mirror/Offset/Trim/Join/Boolean).
    • 3D: Volumen/Boolean (vorhandene 3D-Aktionen), Kamera-Presets.
    • BIM: Wand/Fenster/Tür/Treppe/Decke/Raum (die Bauteile).
    • Ansichten: Geschoss/Schnitt/Ansicht-Wechsel, Zoom/Einpassen, Render-Modi.
  • Werkzeug-Sidebar entfällt → rechtes Panel (Attribute) bekommt volle Höhe.
  • Objektinfo unter die Attribute mergen (Wandstil-Definition etc. zusammen).
  • XYZ-Referenzpunkt-Box oben rechts bleibt (vom Nutzer ausdrücklich gewünscht).
  • Eigenschaften-Grid im OCS-Stil bereits erledigt (00733d8): Sektion- Balken, Zeilentrenner, füllende linksbündige Wertfelder (.attr-*).

Architektur — DATENGETRIEBEN (ermöglicht modulare Custom-Bar)

Kern: EINE Registry beschreibt alle Ribbon-Elemente; Ribbon-Tabs UND eine benutzerdefinierte Custom-Bar sind bloß zwei Ansichten über dieselbe Registry.

RibbonItem =
  | { kind: "tool"; id: ToolId }                 // aktiviert ein Werkzeug (onSelectTool)
  | { kind: "command"; name: string }            // startet einen Engine-Befehl (engine.start)
  | { kind: "action"; id: string; run: () => void } // freie App-Aktion (Zoom, Render-Modus …)

RibbonGroup = { titleKey: string; items: RibbonItem[] }
RibbonTab   = { id: "2d"|"3d"|"bim"|"views"; labelKey: string; groups: RibbonGroup[] }
RIBBON: RibbonTab[]
  • Icons: ToolIcon (vorhanden) für tool-Items; für command/action eine kleine Icon-Map (SVG) analog ToolsPanel.
  • Aktivierung: toolonSelectTool(id) · commandengine.start(name) · actionrun(). Aktiv-Highlight über activeTool bzw. laufenden Befehl.
  • Custom-Bar (modular): der Nutzer wählt beliebige RibbonItems in eine persistierte Liste (viewSlice/Projekt); eine CustomBar-Komponente rendert genau diese. Gleiche Item-Typen, gleiche Aktivierung — kein Sonderweg.

Phasen

  1. Gerüst + 2D/BIM-Tab (9d6e86d). RibbonBar unter der TopBar (additiv). Datengetriebene Registry (src/ui/ribbon/ribbonItems.ts), 2D-Tab (Zeichnen + Ändern) und BIM-Tab (Bauteile) gefüllt, Tab-State lokal, Modify-Icons ergänzt.
  2. TopBar → „Ansichten"-Tab gemergt (85011cb, Nutzer-Entscheid „voll mergen"). Die Ansichts-/Zoom-/Darstellungs-Cluster der TopBar (View-Grid + Kamera, Ebenen-/Zeichnungs-Kombis, Detailgrad, Massstab/Zoom, Darstellungsart) sind als ViewRibbonTab (in TopBar.tsx) in den „Ansichten"-Tab gewandert; App reicht sie als viewsContent-Node an RibbonBar (wie das Layout-Menü). Die Tab-Reiter sitzen in der TopBar-Zeile (RibbonTabs, in TopBar gerendert; Tab-State in App), der Ribbon-Inhalt (RibbonBar) folgt darunter → nur ZWEI Bänder. Die TopBar ist eine schmale Leiste (Höhe 40px): Marke/ Ressourcen · Tabs · Datei/Export/Einstellungen · Fensterknöpfe. Die Text-/ Font-Formatierung (TextGroup) liegt im eigenen „Text"-Tab (Reihenfolge 2D·3D·BIM·Text·Ansichten; RibbonBar.tabContent trägt „text" + „views").
    • Offen (visuell iterieren): ob Zoom/Massstab zusätzlich als Dauer-Anzeige (Statusleiste) sichtbar sein soll; Default-Tab (aktuell 2D); 3D-Tab noch leer (Kamera-Presets/3D-Aktionen füllen).
  3. Sidebar raus (ToolsPanel aus Default-Layout) + rechtes Panel volle Höhe; Objektinfo unter Attribute mergen.
  4. Modulare Custom-Bar: Item-Picker + persistierte Custom-Bar-Ansicht.

Hinweise / Randbedingungen

  • Additiv bauen: bestehende Kommandozeile + Nummern-Shortcuts + ToolsPanel bleiben funktionsfähig, bis Phase 3 die Sidebar bewusst entfernt.
  • Werkzeug-Kopplung Tool↔Befehl existiert bereits (TOOL_COMMAND) — Ribbon nutzt denselben onSelectTool/engine.start-Pfad (EIN Pfad, keine Duplikate).
  • Empfehlung: Phase 1+ in fokussierter Session mit visueller Iteration im Tauri.