karim
5fd0161bc7
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.
91 lines
3.2 KiB
TypeScript
91 lines
3.2 KiB
TypeScript
// 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>
|
|
);
|
|
}
|