ObjectInfo→Attribute: element-spezifische Abschnitte (Wand/Decke/Öffnung/Treppe/Raum) ins Attribute-Panel; ObjectInfo nur noch Bezugspunkt + Masse

This commit is contained in:
2026-07-05 21:50:03 +02:00
parent d01cb82a89
commit 3a2cef3886
2 changed files with 48 additions and 50 deletions
+19
View File
@@ -30,6 +30,16 @@ import type { AttributeSource } from "../model/types";
import { usePanelHost } from "./host"; import { usePanelHost } from "./host";
import { Dropdown } from "../ui/Dropdown"; import { Dropdown } from "../ui/Dropdown";
import { ColorHexField } from "../ui/ColorHexField"; import { ColorHexField } from "../ui/ColorHexField";
// Element-spezifische Attribut-Abschnitte (Wand/Decke/Öffnung/Treppe/Raum) —
// aus ObjectInfoPanel hierher verschoben (Ribbon Phase 3: ObjectInfo trägt nur
// noch Bezugspunkt + Masse).
import {
WallSection,
CeilingSection,
OpeningSection,
StairSection,
RoomSection,
} from "./ObjectInfoPanel";
/** UI-Zustand des 3-Optionen-Quellen-Dropdowns (nicht 1:1 das Modell-Feld: /** UI-Zustand des 3-Optionen-Quellen-Dropdowns (nicht 1:1 das Modell-Feld:
* „custom" ist abgeleitet aus „ist ein expliziter Wert gesetzt?", nicht * „custom" ist abgeleitet aus „ist ein expliziter Wert gesetzt?", nicht
@@ -292,6 +302,15 @@ export function AttributesPanel() {
<span className="attr-key">{t("attr.height")}</span> <span className="attr-key">{t("attr.height")}</span>
<span className="attr-val attr-readonly">{formatM(bboxH)}</span> <span className="attr-val attr-readonly">{formatM(bboxH)}</span>
</div> </div>
{/* Element-spezifische Abschnitte (aus ObjectInfo hierher verschoben) —
nur der jeweils passende erscheint. Nutzen weiter die `objinfo-*`-
Darstellung + die Host-Handler. */}
{sel.wall && <WallSection wall={sel.wall} host={host} />}
{sel.ceiling && <CeilingSection ceiling={sel.ceiling} host={host} />}
{sel.opening && <OpeningSection opening={sel.opening} host={host} />}
{sel.stair && <StairSection stair={sel.stair} host={host} />}
{sel.room && <RoomSection room={sel.room} roomId={sel.id} host={host} />}
</div> </div>
); );
} }
+29 -50
View File
@@ -82,40 +82,14 @@ export function ObjectInfoPanel() {
host.onResizeSelection(nextWidth, nextHeight, anchor); host.onResizeSelection(nextWidth, nextHeight, anchor);
} }
const wall = sel.wall;
const ceiling = sel.ceiling;
const opening = sel.opening;
const stair = sel.stair;
const room = sel.room;
return ( return (
<div className="objinfo-panel"> <div className="objinfo-panel">
{/* Kopfzeile: Typ + Kategorie. Bei einer Wand rechts oben das {/* Kopfzeile: Typ + Kategorie. Die element-spezifischen Attribut-Abschnitte
Referenzlinie-Dropdown (wo die Achse über die Dicke liegt). */} (Wand/Decke/Öffnung/Treppe/Raum) liegen jetzt im Attribute-Panel;
ObjectInfo trägt nur noch Bezugspunkt + Masse. */}
<div className="objinfo-head"> <div className="objinfo-head">
<span className="objinfo-kind">{t(`objinfo.kind.${sel.kind}`)}</span> <span className="objinfo-kind">{t(`objinfo.kind.${sel.kind}`)}</span>
{wall ? ( <span className="objinfo-cat">{sel.categoryCode}</span>
<div className="objinfo-head-ref" title={t("objinfo.wall.refLine")}>
<span className="objinfo-head-ref-label">
{t("objinfo.wall.refLine")}
</span>
<Dropdown
value={wall.referenceLine}
onChange={(v) =>
host.onSetWallReferenceLine(v as WallReferenceLine)
}
options={[
{ value: "left", label: t("objinfo.wall.refLine.left") },
{ value: "center", label: t("objinfo.wall.refLine.center") },
{ value: "right", label: t("objinfo.wall.refLine.right") },
]}
title={t("objinfo.wall.refLine")}
width={120}
/>
</div>
) : (
<span className="objinfo-cat">{sel.categoryCode}</span>
)}
</div> </div>
<div className="objinfo-sep" /> <div className="objinfo-sep" />
@@ -174,21 +148,9 @@ export function ObjectInfoPanel() {
value={height} value={height}
onCommit={(h) => commitSize(width, h)} onCommit={(h) => commitSize(width, h)}
/> />
{/* Die element-spezifischen Abschnitte (Wand/Decke/Öffnung/Treppe/Raum)
{/* ── Wand-Abschnitt (nur bei genau einer Wand) ────────────────────── */} werden jetzt im Attribute-Panel gerendert (AttributesPanel importiert
{wall && <WallSection wall={wall} host={host} />} die exportierten *Section-Komponenten). */}
{/* ── Decken-Abschnitt (nur bei genau einer Decke) ─────────────────── */}
{ceiling && <CeilingSection ceiling={ceiling} host={host} />}
{/* ── Öffnungs-Abschnitt (nur bei genau einer Öffnung) ─────────────── */}
{opening && <OpeningSection opening={opening} host={host} />}
{/* ── Treppen-Abschnitt (nur bei genau einer Treppe) ───────────────── */}
{stair && <StairSection stair={stair} host={host} />}
{/* ── Raum-Abschnitt (nur bei genau einem Raum) ────────────────────── */}
{room && <RoomSection room={room} roomId={sel.id} host={host} />}
</div> </div>
); );
} }
@@ -197,7 +159,7 @@ export function ObjectInfoPanel() {
// Editierbarer Name, SIA-416-Kategorie (5 Blatt-Kategorien), abgeleitete Fläche // Editierbarer Name, SIA-416-Kategorie (5 Blatt-Kategorien), abgeleitete Fläche
// + Umfang (read-only), Referenzgeschoss, sowie ein Button, der den Rich-Text- // + Umfang (read-only), Referenzgeschoss, sowie ein Button, der den Rich-Text-
// Stempel-Editor öffnet. Alle Werte/Setter über den Host. // Stempel-Editor öffnet. Alle Werte/Setter über den Host.
function RoomSection({ export function RoomSection({
room, room,
roomId, roomId,
host, host,
@@ -269,7 +231,7 @@ function RoomSection({
// ── Treppen-Attribut-Abschnitt ─────────────────────────────────────────────── // ── Treppen-Attribut-Abschnitt ───────────────────────────────────────────────
// Grundform (gerade/L/Wendel), Laufbreite, Stufenanzahl, Steighöhe (+ abgeleitete // Grundform (gerade/L/Wendel), Laufbreite, Stufenanzahl, Steighöhe (+ abgeleitete
// Steigungshöhe/Auftrittstiefe), Laufrichtung; Referenzgeschoss + UK/OK read-only. // Steigungshöhe/Auftrittstiefe), Laufrichtung; Referenzgeschoss + UK/OK read-only.
function StairSection({ export function StairSection({
stair, stair,
host, host,
}: { }: {
@@ -385,7 +347,7 @@ function StairSection({
// ── Öffnungs-Attribut-Abschnitt ────────────────────────────────────────────── // ── Öffnungs-Attribut-Abschnitt ──────────────────────────────────────────────
// Art (Fenster/Tür), Wirts-Wand, Position/Breite/Höhe/Brüstung, bei Türen // Art (Fenster/Tür), Wirts-Wand, Position/Breite/Höhe/Brüstung, bei Türen
// zusätzlich Anschlag/Aufschlag/Richtung/Winkel; UK/OK read-only. // zusätzlich Anschlag/Aufschlag/Richtung/Winkel; UK/OK read-only.
function OpeningSection({ export function OpeningSection({
opening, opening,
host, host,
}: { }: {
@@ -557,7 +519,7 @@ function OpeningSection({
// ── Decken-Attribut-Abschnitt ──────────────────────────────────────────────── // ── Decken-Attribut-Abschnitt ────────────────────────────────────────────────
// Aufbau-Typ (einschichtig/mehrschichtig), Dicke/Preset, Referenzgeschoss + // Aufbau-Typ (einschichtig/mehrschichtig), Dicke/Preset, Referenzgeschoss +
// OK-Bindung, Fläche. Alle Werte/Setter über den Host. // OK-Bindung, Fläche. Alle Werte/Setter über den Host.
function CeilingSection({ export function CeilingSection({
ceiling, ceiling,
host, host,
}: { }: {
@@ -670,7 +632,7 @@ function CeilingSection({
// ── Wand-Attribut-Abschnitt ────────────────────────────────────────────────── // ── Wand-Attribut-Abschnitt ──────────────────────────────────────────────────
// Aufbau-Typ (einschichtig/mehrschichtig), Dicke/Preset, Referenzgeschoss + // Aufbau-Typ (einschichtig/mehrschichtig), Dicke/Preset, Referenzgeschoss +
// Oberverknüpfung, UK/OK je Modus-Umschalter. Alle Werte/Setter über den Host. // Oberverknüpfung, UK/OK je Modus-Umschalter. Alle Werte/Setter über den Host.
function WallSection({ export function WallSection({
wall, wall,
host, host,
}: { }: {
@@ -701,6 +663,23 @@ function WallSection({
<div className="objinfo-sep" /> <div className="objinfo-sep" />
<div className="objinfo-section-label">{t("objinfo.wall.section")}</div> <div className="objinfo-section-label">{t("objinfo.wall.section")}</div>
{/* Referenzlinie (wo die Achse über die Dicke liegt) — früher im ObjectInfo-
Kopf, jetzt hier bei den Wand-Attributen. */}
<div className="objinfo-field">
<span className="objinfo-flabel">{t("objinfo.wall.refLine")}</span>
<Dropdown
value={wall.referenceLine}
onChange={(v) => host.onSetWallReferenceLine(v as WallReferenceLine)}
options={[
{ value: "left", label: t("objinfo.wall.refLine.left") },
{ value: "center", label: t("objinfo.wall.refLine.center") },
{ value: "right", label: t("objinfo.wall.refLine.right") },
]}
title={t("objinfo.wall.refLine")}
width={120}
/>
</div>
{/* Aufbau-Typ-Segment. */} {/* Aufbau-Typ-Segment. */}
<div className="objinfo-field"> <div className="objinfo-field">
<span className="objinfo-flabel">{t("objinfo.wall.buildup")}</span> <span className="objinfo-flabel">{t("objinfo.wall.buildup")}</span>