View-Toggle 2x4: TOP/ISO/PERSP/Cam + N/O/S/W mit Norden-Rotation

User-Vorschlag: Architektur-konformes View-Layout — 3D-Views oben, 4 Gebaeudeansichten unten. Plus Norden-Rotation als Doc-Setting damit bei rotierten Projekten (swissBUILDINGS, Sonnenberechnungen) die richtigen Wandansichten gepickt werden. Backend (rhino/kamera.py): - get_north_angle/set_north_angle — doc.Strings["dossier_north_angle"] (Grad im Uhrzeigersinn von +Y, default 0°) - _scene_target_and_diag(doc) — gemeinsamer Helper fuer Szenen-Center + Diagonal-Distanz - set_cardinal_view(vp, 'N'|'O'|'S'|'W'): rotiert Kamera-Position via Norden-Vektor. Parallel-Projektion, Camera-Z = Target-Z (echte Elevation), Up-Vektor +Z. - set_top_view(vp): Plan-Ansicht mit Norden = Up-Vektor (Plan rotiert visuell wenn Norden != +Y) - _set_iso(vp, octant): Octant-Richtung jetzt aus north+east-Vektoren konstruiert → ISO rotiert mit Norden mit - Bridge-Handler SET_NORTH_ANGLE + state.northAngle, notify Oberleiste Backend (oberleiste.py): - SET_VIEW erweitert: Top → kamera.set_top_view, N/O/S/W → kamera.set_cardinal_view, Iso → kamera._set_iso. Front/Right/etc bleibt als Legacy direkt-Rhino-Call. - State liefert northAngle Frontend (OberleisteApp): - VIEWS_ROW1: TOP/ISO/PERSP + Kamera-Settings-Button (Icons only) - VIEWS_ROW2: N/O/S/W als DM-Mono-Buchstaben - 2x4-Grid, VIEW_W=140 (konsistent mit Massstab-Pills), CELL_W=35 - matchView nur fuer Top/Iso/Perspective; Cardinals haben keinen Active-State (Viewport-Name ist nicht zuverlaessig erkennbar) Frontend (KameraApp): - Plan-Norden Section mit Number-Input (Grad, 0.5°-Step) + Reset-Button - Hinweis-Text dass Wirkung auf TOP/ISO/N/O/S/W geht Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-21 00:04:44 +02:00
parent 2252ffd2f9
commit 205c626a5a
5 changed files with 306 additions and 99 deletions
@@ -4,6 +4,7 @@ import {
  onMessage, notifyReady,
  setKameraViewport, setKameraProjection, setKameraIso,
  kameraZoomExtents, saveKameraPreset, applyKameraPreset, deleteKameraPreset,
+  setKameraNorthAngle,
 } from './lib/rhinoBridge'

 const labelXs = {
@@ -76,11 +77,13 @@ export default function KameraApp() {
  const [vp, setVp] = useState(null)
  const [presets, setPresets] = useState([])
  const [presetName, setPresetName] = useState('')
+  const [northAngle, setNorthAngleState] = useState(0)

  useEffect(() => {
    onMessage('STATE', (s) => {
      setVp(s.viewport || null)
      setPresets(s.presets || [])
+      if (typeof s.northAngle === 'number') setNorthAngleState(s.northAngle)
    })
    notifyReady()
  }, [])
@@ -142,6 +145,38 @@ export default function KameraApp() {
        </div>
      </div>

+      {/* Plan-Norden — Rotations-Winkel im Uhrzeigersinn von +Y */}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+        <span style={labelXs}>Plan-Norden (Rotation von +Y, im Uhrzeigersinn)</span>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <input
+            type="number" min={0} max={360} step={0.5}
+            value={northAngle.toFixed(1)}
+            onChange={(e) => {
+              const a = parseFloat(e.target.value)
+              if (!isNaN(a)) {
+                setNorthAngleState(a)
+                setKameraNorthAngle(a)
+              }
+            }}
+            style={{ flex: 1, fontSize: 12, padding: '4px 8px',
+                      fontFamily: 'DM Mono, monospace' }}
+          />
+          <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>°</span>
+          <button
+            onClick={() => { setNorthAngleState(0); setKameraNorthAngle(0) }}
+            className="btn-outlined"
+            style={{ padding: '4px 10px', fontSize: 10 }}
+            title="Norden zurueck auf +Y (0°)"
+          >Reset</button>
+        </div>
+        <span style={{ fontSize: 10, color: 'var(--text-muted)', lineHeight: 1.4 }}>
+          Norden = +Y bei 0°. Bei rotierten Projekten (z.B. swissBUILDINGS in
+          LV95-Orientierung oder Sonnenberechnungen) hier den Plan-Norden in
+          Grad eintragen. Wirkt auf TOP, ISO und N/O/S/W-Ansichten.
+        </span>
+      </div>
+
      {/* Iso-Quick-Picker */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        <span style={labelXs}>Isometrie (Standard, true-iso 35°/45°)</span>
@@ -22,12 +22,19 @@ const PRESETS = [
  { 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: 'Iso',         icon: 'view_in_ar',     label: 'Iso' },
-  { value: 'Perspective', icon: '3d_rotation',    label: 'Persp' },
+// Reihe 1: 3D-Ansichten (Top, Iso, Persp) + Kamera-Button
+// Reihe 2: 4 Gebaeudeansichten (Norden/Osten/Sueden/Westen) — Buchstaben
+//          als Symbol, rotieren mit dossier_north_angle.
+const VIEWS_ROW1 = [
+  { value: 'Top',         icon: 'crop_landscape', kind: 'icon' },
+  { value: 'Iso',         icon: 'view_in_ar',     kind: 'icon' },
+  { value: 'Perspective', icon: '3d_rotation',    kind: 'icon' },
+]
+const VIEWS_ROW2 = [
+  { value: 'N', label: 'N', kind: 'letter' },
+  { value: 'O', label: 'O', kind: 'letter' },
+  { value: 'S', label: 'S', kind: 'letter' },
+  { value: 'W', label: 'W', kind: 'letter' },
 ]

 function fmtScale(s) {
@@ -307,6 +314,7 @@ export default function OberleisteApp() {
    massePresets: [], masseActiveId: null,
    textSettings: { font: 'Helvetica', size: 0.20, bold: false, italic: false },
    textFonts: [],
+    northAngle: 0,
  })
  const [appliedScale, setAppliedScale] = useState(null)
  const appliedScaleRef = useRef(null)
@@ -365,20 +373,19 @@ export default function OberleisteApp() {
    if (appliedScale && appliedScale > 0) setMassstab(appliedScale)
  }

-  // Aktuelles View-Match. Orthogonale Standard-Views matchen via viewName.
-  // 'Iso' und 'Perspective' werden via parallel-Flag unterschieden — die
-  // Rhino-Viewport-Namen sind beide oft "Perspective".
+  // Aktuelles View-Match. Top/Persp/Iso werden via parallel-Flag und
+  // viewName unterschieden. N/O/S/W: kein zuverlaessiges View-Match
+  // ueber den Viewport-Namen (wir setzen die Camera direkt) — daher
+  // kein Active-State fuer Cardinals.
  const matchView = (v) => {
    const name = (state.viewName || '').toLowerCase()
-    const ortho = ['top', 'front', 'right', 'bottom', 'left', 'back']
+    if (v === 'Top') return name === 'top'
+    if (v === 'Perspective') return state.parallel === false
    if (v === 'Iso') {
-      // Parallel-Projektion + kein orthogonaler Standardname → Iso
+      const ortho = ['top', 'front', 'right', 'bottom', 'left', 'back']
      return state.parallel === true && !ortho.includes(name)
    }
-    if (v === 'Perspective') {
-      return state.parallel === false
-    }
-    return name === v.toLowerCase()
+    return false
  }

  // (Command-Bar wurde entfernt — Rhinos eigene Command-Line wird benutzt.)
@@ -435,52 +442,88 @@ export default function OberleisteApp() {
        <Icon name="settings" size={14} />
      </button>
      <div style={sep} />
-      {/* ====== VIEW (Top/Front/Right/Iso/Persp + Kamera) ======
-          Segmented-Pill-Gruppe analog Vectorworks. Active = accent fill. */}
-      <div style={{ display: 'inline-flex', flexShrink: 0 }}>
-        {VIEWS.map((v, idx) => {
-          const isFirst = idx === 0
-          const isLast = idx === VIEWS.length - 1
-          const isActive = matchView(v.value)
-          return (
-            <button
-              key={v.value}
-              onClick={() => setView(v.value)}
-              title={`Ansicht ${v.label}`}
-              onMouseEnter={(e) => {
-                if (isActive) return
-                e.currentTarget.style.background = 'var(--bg-item-hover)'
-                e.currentTarget.style.color = 'var(--accent-light)'
-              }}
-              onMouseLeave={(e) => {
-                if (isActive) return
-                e.currentTarget.style.background = 'var(--bg-input)'
-                e.currentTarget.style.color = 'var(--text-primary)'
-              }}
-              style={{
-                height: BAR_H, padding: '0 10px',
-                background: isActive ? 'var(--accent)' : 'var(--bg-input)',
-                color: isActive ? 'var(--bg-panel)' : 'var(--text-primary)',
-                border: '1px solid var(--border)',
-                borderLeft: isFirst ? '1px solid var(--border)' : 'none',
-                borderTopLeftRadius: isFirst ? 999 : 0,
-                borderBottomLeftRadius: isFirst ? 999 : 0,
-                borderTopRightRadius: isLast ? 999 : 0,
-                borderBottomRightRadius: isLast ? 999 : 0,
-                display: 'inline-flex', alignItems: 'center', gap: 4,
-                fontSize: 10, fontWeight: isActive ? 600 : 500,
-                cursor: 'pointer', flexShrink: 0,
-                transition: 'background 0.15s, color 0.15s',
-              }}
-            >
-              <Icon name={v.icon} size={13} />
-              <span>{v.label}</span>
-            </button>
-          )
-        })}
-      </div>
-      <BarButton icon="videocam" onClick={() => openKameraPanel()}
-                  title="Kamera-Einstellungen (Position, Target, Linse, Presets)" />
+      {/* ====== VIEW 2x4 Grid ======
+          Reihe 1: TOP / ISO / PERSP / 📷 (Kamera-Settings)
+          Reihe 2: N / O / S / W (rotieren mit dossier_north_angle)
+      */}
+      {(() => {
+        const VIEW_W = 140  // konsistent mit Massstab-Pills
+        const CELL_W = Math.floor(VIEW_W / 4)
+        const cellStyle = (isActive, isFirst) => ({
+          height: BAR_H, width: CELL_W,
+          background: isActive ? 'var(--accent)' : 'var(--bg-input)',
+          color: isActive ? 'var(--bg-panel)' : 'var(--text-primary)',
+          border: 'none',
+          borderLeft: isFirst ? 'none' : '1px solid var(--border)',
+          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+          gap: 4, fontWeight: isActive ? 600 : 500,
+          cursor: 'pointer', flexShrink: 0, padding: 0,
+          transition: 'background 0.15s, color 0.15s',
+        })
+        const hoverIn = (isActive) => (e) => {
+          if (isActive) return
+          e.currentTarget.style.background = 'var(--bg-item-hover)'
+          e.currentTarget.style.color = 'var(--accent-light)'
+        }
+        const hoverOut = (isActive) => (e) => {
+          if (isActive) return
+          e.currentTarget.style.background = 'var(--bg-input)'
+          e.currentTarget.style.color = 'var(--text-primary)'
+        }
+        // Reihe 1: 3 View-Icons + Kamera-Settings
+        const row1 = [
+          ...VIEWS_ROW1,
+          { value: '__camera__', icon: 'videocam', kind: 'icon' },
+        ]
+        return (
+          <div style={{
+            display: 'flex', flexDirection: 'column', gap: 4, flexShrink: 0,
+          }}>
+            {/* Reihe 1 */}
+            <div style={{
+              display: 'inline-flex', width: VIEW_W,
+              border: '1px solid var(--border)', borderRadius: 999,
+              overflow: 'hidden', flexShrink: 0,
+            }}>
+              {row1.map((v, idx) => {
+                const isActive = v.value !== '__camera__' && matchView(v.value)
+                const label = v.value === '__camera__' ? 'Kamera-Einstellungen'
+                  : `Ansicht ${v.value}`
+                return (
+                  <button key={v.value}
+                    onClick={() => v.value === '__camera__'
+                      ? openKameraPanel() : setView(v.value)}
+                    title={label}
+                    onMouseEnter={hoverIn(isActive)}
+                    onMouseLeave={hoverOut(isActive)}
+                    style={cellStyle(isActive, idx === 0)}>
+                    <Icon name={v.icon} size={13} />
+                  </button>
+                )
+              })}
+            </div>
+            {/* Reihe 2: N/O/S/W als Buchstaben */}
+            <div style={{
+              display: 'inline-flex', width: VIEW_W,
+              border: '1px solid var(--border)', borderRadius: 999,
+              overflow: 'hidden', flexShrink: 0,
+            }}>
+              {VIEWS_ROW2.map((v, idx) => (
+                <button key={v.value}
+                  onClick={() => setView(v.value)}
+                  title={`Ansicht aus ${v.value} (Norden = ${(state.northAngle || 0).toFixed(0)}°)`}
+                  onMouseEnter={hoverIn(false)}
+                  onMouseLeave={hoverOut(false)}
+                  style={cellStyle(false, idx === 0)}>
+                  <span style={{
+                    fontFamily: 'DM Mono, monospace', fontSize: 11, fontWeight: 600,
+                  }}>{v.label}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+        )
+      })()}

      <div style={sep} />

@@ -191,6 +191,7 @@ export function kameraZoomExtents()      { send('ZOOM_EXTENTS', {}) }
 export function saveKameraPreset(name)   { send('SAVE_PRESET', { name }) }
 export function applyKameraPreset(id)    { send('APPLY_PRESET', { id }) }
 export function deleteKameraPreset(id)   { send('DELETE_PRESET', { id }) }
+export function setKameraNorthAngle(angle) { send('SET_NORTH_ANGLE', { angle: Number(angle) || 0 }) }
 // Ebenenkombinationen (gehosted in Oberleiste, gleicher Store wie EBENEN)
 export function pickLayerCombination(name)   { send('PICK_LAYER_COMBINATION',   { name: name || null }) }
 export function saveLayerCombination(name)   { send('SAVE_LAYER_COMBINATION',   { name }) }