Kopfzeile der Zeichenflaeche: Dokument-Tabs statt Geschoss-Eigenschaften

Die alte Eigenschaften-Leiste (Geschosshoehe/Schnitthoehe/OKFF) weicht einer Tab-Leiste 'Zeichnungen': ein Tab je Geschoss-Grundriss, Klick wechselt die aktive Zeichnungsebene. Bindet an activeLevelId/setActiveLevelId — dieselbe Store-Quelle wie das Panel 'Zeichnungsebenen', beide bleiben synchron. Geschosshoehe/Schnitthoehe werden in den Geschoss-Einstellungen gepflegt. Der Drawing-Typ (kind: 'plan') und der switch beim Aktivieren lassen spaeter Schnitt-/Layout-Tabs zu, ohne die Leiste umzubauen.
2026-07-03 21:39:56 +02:00
parent f4e70902d0
commit 5fd0161bc7
5 changed files with 167 additions and 102 deletions
@@ -0,0 +1,90 @@
+// Dokument-Tabs „Zeichnungen/Blätter" — Kopfzeile über der Zeichenfläche.
+//
+// Ersetzt die frühere Kopfzeile mit Geschosshöhe/Schnitthöhe (diese Werte
+// werden jetzt ausschliesslich in den Geschoss-Einstellungen gepflegt, siehe
+// den Editor `editor.floorHeight`/`editor.cutHeight` in App.tsx). Ein Tab
+// entspricht heute immer dem Grundriss eines Geschosses; ein Klick aktiviert
+// dessen Zeichnungsebene über denselben State, den auch das Panel
+// „Zeichnungsebenen" (DrawingLevelsPanel) verwendet — beide bleiben so
+// zwangsläufig synchron.
+//
+// Der Typ `Drawing` ist bewusst schlank gehalten, damit künftige Arten
+// (Schnitt-Blatt, Layout) sich später einhängen können, ohne dass die
+// Tab-Leiste selbst umgebaut werden muss — siehe `activate()` unten.
+//
+// Bezeichner englisch, UI-Text/Kommentare deutsch (CONVENTIONS.md).
+
+import type { DrawingLevel } from "./model/types";
+import { t } from "./i18n";
+
+/** Art einer Dokument-Zeichnung. Heute nur der Grundriss eines Geschosses;
+ *  Platz für künftige Arten (z. B. "section", "layout") bleibt offen. */
+export type DrawingKind = "plan";
+
+/** Ein Tab der Dokument-Leiste — leichtgewichtiger Verweis auf die Quelle
+ *  (aktuell immer eine Zeichnungsebene vom Typ "floor"). */
+export interface Drawing {
+  id: string;
+  title: string;
+  kind: DrawingKind;
+  /** Geschoss/Zeichnungsebene, deren Grundriss dieser Tab zeigt. */
+  levelId: string;
+}
+
+/** Leitet die Dokument-Tabs aus den Geschossen des Projekts ab — ein Tab je
+ *  Geschoss. Schnitte/Ansichten und freie Zeichnungen bleiben vorerst aussen
+ *  vor (weiterhin nur über das Panel „Zeichnungsebenen" erreichbar). */
+export function deriveDrawings(levels: DrawingLevel[]): Drawing[] {
+  return levels
+    .filter((level): level is DrawingLevel & { kind: "floor" } => level.kind === "floor")
+    .map((level) => ({
+      id: level.id,
+      title: level.name,
+      kind: "plan",
+      levelId: level.id,
+    }));
+}
+
+export function DrawingTabs({
+  drawings,
+  activeLevelId,
+  onSelectLevel,
+}: {
+  drawings: Drawing[];
+  /** Aktuell aktive Zeichnungsebene (globaler App-State, siehe App.tsx). */
+  activeLevelId: string;
+  /** Setter derselben Zeichnungsebene — identisch mit dem, den das Panel
+   *  „Zeichnungsebenen" verwendet (kein paralleler State). */
+  onSelectLevel: (id: string) => void;
+}) {
+  if (drawings.length === 0) return null;
+
+  // Aktivierung nach Art dispatchen. Heute gibt es nur "plan" (→ Geschoss
+  // aktivieren); künftige Arten hängen hier ihr eigenes Ziel ein, ohne dass
+  // sich an der Tab-Leiste selbst etwas ändert.
+  const activate = (drawing: Drawing) => {
+    switch (drawing.kind) {
+      case "plan":
+        onSelectLevel(drawing.levelId);
+        break;
+    }
+  };
+
+  return (
+    <div className="drawing-tabs" role="tablist" aria-label={t("tabs.drawings")}>
+      {drawings.map((d) => (
+        <button
+          key={d.id}
+          type="button"
+          role="tab"
+          aria-selected={d.levelId === activeLevelId}
+          className={`drawing-tab${d.levelId === activeLevelId ? " active" : ""}`}
+          onClick={() => activate(d)}
+          title={d.title}
+        >
+          <span className="drawing-tab-label">{d.title}</span>
+        </button>
+      ))}
+    </div>
+  );
+}