298 lines
12 KiB
TypeScript
298 lines
12 KiB
TypeScript
// Inhalts-Panel „Attribute" — die Attribut-Palette (Vectorworks-Stil) für die
|
|
// aktuelle Auswahl. Zeigt die EFFEKTIV aufgelösten Stift-/Füll-Eigenschaften des
|
|
// ersten selektierten Elements und erlaubt das direkte Bearbeiten (Farbe,
|
|
// Strichstärke, Füllschraffur).
|
|
//
|
|
// Vordergrund/Hintergrund/Strichstärke/Schraffur tragen je einen 3-Optionen-
|
|
// Quellen-Dropdown: „Nach Ebene" (die LayerCategory erzwingt den Wert), „Nach
|
|
// Bauteil" (erbt vom Component-Manager, heutiges Default-Verhalten) oder
|
|
// „eigener Wert" (expliziter Override, gewinnt immer). Das Eingabe-Element
|
|
// (Farb-Swatch/mm-Zahlenfeld/Schraffur-Dropdown) erscheint NUR bei „eigener
|
|
// Wert"; ein Wechsel auf „Nach Ebene"/„Nach Bauteil" löscht den Wert wieder
|
|
// (siehe host.ts: onSetSelection{Foreground,Background,StrokeWeight,Hatch}Source).
|
|
//
|
|
// Daten/Handler kommen ausschließlich über usePanelHost (kein Prop-Drilling).
|
|
// Es werden NUR Eigenschaften angeboten, die der Host-Kontrakt tatsächlich
|
|
// setzen kann — keine Stubs/Fake-Setter (Konvention wire-dont-stub). Felder ohne
|
|
// echten Setter (Linienstil) werden read-only/informativ gezeigt; Felder, die
|
|
// das Modell gar nicht trägt (Deckkraft, Caps, Schlagschatten), werden bewusst
|
|
// weggelassen, um die Palette ehrlich und schlank zu halten.
|
|
//
|
|
// DOSSIER-Tabellen-Look: KEINE wiederholten Feld-Labels pro Zeile — ein kompaktes
|
|
// Label→Wert-Grid. Bezeichner englisch, UI-Text/Kommentare deutsch (CONVENTIONS.md).
|
|
// Alle sichtbaren Texte über t(...).
|
|
|
|
import type { ReactNode } from "react";
|
|
import { t } from "../i18n";
|
|
import { formatM } from "../model/types";
|
|
import { PEN_WEIGHTS } from "../model/types";
|
|
import type { AttributeSource } from "../model/types";
|
|
import { usePanelHost } from "./host";
|
|
import { Dropdown } from "../ui/Dropdown";
|
|
import { ColorHexField } from "../ui/ColorHexField";
|
|
|
|
/** UI-Zustand des 3-Optionen-Quellen-Dropdowns (nicht 1:1 das Modell-Feld:
|
|
* „custom" ist abgeleitet aus „ist ein expliziter Wert gesetzt?", nicht
|
|
* selbst gespeichert). */
|
|
type UiSource = "layer" | "object" | "custom";
|
|
|
|
/** Leitet den UI-Quellen-Zustand ab: ein gesetzter Wert gewinnt immer („eigener
|
|
* Wert"), sonst das rohe Source-Feld (`undefined` ⇒ „Nach Bauteil", Default). */
|
|
function uiSourceOf(hasValue: boolean, raw: AttributeSource | undefined): UiSource {
|
|
return hasValue ? "custom" : raw ?? "object";
|
|
}
|
|
|
|
export function AttributesPanel() {
|
|
const host = usePanelHost();
|
|
const sel = host.selection;
|
|
const { project } = host;
|
|
|
|
// Wandtyp-/Deckentyp-Wahl für das NEUE Bauteil (was gezeichnet wird) — früher
|
|
// in der Werkzeug-Sidebar (ToolsPanel), seit deren Entfernung hier. Erscheint
|
|
// nur bei aktivem Wand-/Decken-Werkzeug (unabhängig von einer Auswahl); Wand und
|
|
// Decke teilen sich denselben Aufbau-Typ (WallType) + Host-State.
|
|
const drawingComponent =
|
|
host.activeTool === "wall" || host.activeTool === "ceiling";
|
|
const typeSection = drawingComponent ? (
|
|
<>
|
|
<div className="attr-section-label">{t("attr.newComponent")}</div>
|
|
<div className="attr-grid">
|
|
<span className="attr-key">
|
|
{t(host.activeTool === "wall" ? "tool.wallType" : "tool.ceilingType")}
|
|
</span>
|
|
<span className="attr-val">
|
|
<Dropdown
|
|
value={host.activeWallTypeId}
|
|
disabled={!host.toolsEnabled}
|
|
onChange={(v) => host.onActiveWallTypeId(v)}
|
|
options={project.wallTypes.map((wt) => ({ value: wt.id, label: wt.name }))}
|
|
/>
|
|
</span>
|
|
</div>
|
|
</>
|
|
) : null;
|
|
|
|
// Leerzustand: der Typ-Picker (falls ein Bauteil-Werkzeug aktiv ist), sonst ein
|
|
// kompakter Hinweis.
|
|
if (sel === null) {
|
|
return (
|
|
<div className="attr-panel">
|
|
{typeSection}
|
|
{!typeSection && <div className="attr-empty">{t("attr.empty")}</div>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const isDrawing = sel.kind === "drawing2d";
|
|
// Strichstärke: Wand/Decke/Drawing2D tragen einen eigenen Override
|
|
// (`strokeWeight`/`weightMm`) + Quellen-Dropdown; andere Elementarten erben
|
|
// stets aus der Kategorie (kein Setter im Kontrakt → nicht editierbar).
|
|
const weightEditable = sel.kind === "wall" || sel.kind === "ceiling" || isDrawing;
|
|
// Schraffur: Wand/Decke (Schnitt-/Ansichts-Schraffur) oder geschlossene 2D-Form.
|
|
const fillEditable =
|
|
sel.kind === "wall" || sel.kind === "ceiling" || (isDrawing && sel.closed === true);
|
|
// Vordergrund/Hintergrund (Muster-/Füllfarbe) tragen Wand, Decke und
|
|
// geschlossene 2D-Formen als Override; `undefined` = „Nach System".
|
|
const pocheEditable =
|
|
sel.kind === "wall" ||
|
|
sel.kind === "ceiling" ||
|
|
(isDrawing && sel.closed === true);
|
|
|
|
// Der 3-Optionen-Quellen-Dropdown, gemeinsam für alle vier Felder. Deaktiviert,
|
|
// wenn das Feld für diese Elementart gar nicht gilt (z. B. Strichstärke bei
|
|
// einer Treppe).
|
|
const sourceSelect = (
|
|
editable: boolean,
|
|
ui: UiSource,
|
|
onChange: (next: UiSource) => void,
|
|
) => (
|
|
<Dropdown
|
|
value={ui}
|
|
disabled={!editable}
|
|
onChange={(v) => onChange(v as UiSource)}
|
|
options={[
|
|
{ value: "layer", label: t("attr.source.layer") },
|
|
{ value: "object", label: t("attr.source.object") },
|
|
{ value: "custom", label: t("attr.source.custom") },
|
|
]}
|
|
/>
|
|
);
|
|
|
|
// Farb-Swatch-Eingabe für „eigener Wert" (Vordergrund/Hintergrund). Erscheint
|
|
// nur, wenn die Quelle „custom" ist — sonst zeigt allein der Dropdown den
|
|
// Zustand.
|
|
const colorValue = (value: string | undefined, onSet: (color: string) => void) => (
|
|
<ColorHexField value={value ?? "#808080"} onChange={onSet} />
|
|
);
|
|
|
|
// Eine Attribut-Zeile: Label + Quellen-Dropdown + (nur bei „eigener Wert")
|
|
// das passende Eingabe-Element.
|
|
const sourceRow = (
|
|
labelKey: string,
|
|
editable: boolean,
|
|
ui: UiSource,
|
|
onSource: (next: UiSource) => void,
|
|
valueEditor: ReactNode,
|
|
) => (
|
|
<>
|
|
<span className="attr-key">{t(labelKey)}</span>
|
|
<span className="attr-val">
|
|
{ui === "custom" && valueEditor}
|
|
{sourceSelect(editable, ui, onSource)}
|
|
</span>
|
|
</>
|
|
);
|
|
|
|
// Vordergrund/Hintergrund: „eigener Wert" ⇒ auf Quelle "object" (Nach
|
|
// Bauteil, Default) zurückfallen; „Nach Ebene"/„Nach Bauteil" schreiben die
|
|
// Quelle direkt (der Host löscht dabei den expliziten Wert).
|
|
const fgUi = uiSourceOf(sel.foreground !== undefined, sel.foregroundSource);
|
|
const bgUi = uiSourceOf(sel.background !== undefined, sel.backgroundSource);
|
|
const weightUi = uiSourceOf(sel.strokeWeightOverride !== undefined, sel.strokeWeightSource);
|
|
const hatchUi = uiSourceOf(
|
|
sel.fillHatchId !== undefined && sel.fillHatchId !== null,
|
|
sel.hatchSource,
|
|
);
|
|
|
|
const onForegroundSourceChange = (next: UiSource) => {
|
|
if (next === "custom") host.onSetSelectionForeground(sel.foreground ?? sel.color);
|
|
else host.onSetSelectionForegroundSource(next);
|
|
};
|
|
const onBackgroundSourceChange = (next: UiSource) => {
|
|
if (next === "custom") host.onSetSelectionBackground(sel.background ?? sel.color);
|
|
else host.onSetSelectionBackgroundSource(next);
|
|
};
|
|
const onWeightSourceChange = (next: UiSource) => {
|
|
if (next === "custom") host.onSetSelectionWeight(sel.weightMm);
|
|
else host.onSetSelectionStrokeWeightSource(next);
|
|
};
|
|
const onHatchSourceChange = (next: UiSource) => {
|
|
if (next === "custom") host.onSetSelectionFill(project.hatches[0]?.id ?? null);
|
|
else host.onSetSelectionHatchSource(next);
|
|
};
|
|
|
|
// Effektiver Linienstil rein informativ (kein Setter im Kontrakt → kein Fake).
|
|
// Wir leiten ihn aus dem Modell-Element ab, wenn explizit gesetzt; sonst „—".
|
|
const drawing = isDrawing
|
|
? project.drawings2d.find((d) => d.id === sel.id)
|
|
: undefined;
|
|
const lineStyle = drawing?.lineStyleId
|
|
? project.lineStyles.find((l) => l.id === drawing.lineStyleId)
|
|
: undefined;
|
|
|
|
const bboxW = sel.bbox.maxX - sel.bbox.minX;
|
|
const bboxH = sel.bbox.maxY - sel.bbox.minY;
|
|
|
|
return (
|
|
<div className="attr-panel">
|
|
{/* Typ-Picker für das neue Bauteil (nur bei aktivem Wand-/Decken-Werkzeug). */}
|
|
{typeSection}
|
|
{/* EIN durchgehendes Grid über alle Sektionen — dieselben zwei Spalten
|
|
(Label | Wert) für Stift/Füllung/Maße, damit die Wertfelder überall
|
|
bündig in EINER Spalte stehen. Sektion-Balken spannen beide Spalten. */}
|
|
<div className="attr-grid">
|
|
{/* ── Stift/Strich ──────────────────────────────────────────── */}
|
|
<div className="attr-section-label">{t("attr.stroke")}</div>
|
|
|
|
{/* Farbe — gilt für Wand UND Drawing2D (Kontrakt setzt beide). */}
|
|
<span className="attr-key">{t("attr.color")}</span>
|
|
<span className="attr-val">
|
|
<ColorHexField value={sel.color} onChange={host.onSetSelectionColor} />
|
|
</span>
|
|
|
|
{/* Strichstärke (mm) — Wand/Decke/Drawing2D, mit Nach-Ebene/Nach-Bauteil/
|
|
eigener-Wert-Quelle; andere Elementarten erben stets aus der Kategorie. */}
|
|
{sourceRow(
|
|
"attr.weight",
|
|
weightEditable,
|
|
weightUi,
|
|
onWeightSourceChange,
|
|
<>
|
|
<input
|
|
className="attr-num"
|
|
style={{ width: 72 }}
|
|
type="number"
|
|
step={0.01}
|
|
min={0}
|
|
list="attr-pen-weights"
|
|
value={sel.weightMm}
|
|
onChange={(e) => {
|
|
const v = Number(e.target.value);
|
|
if (Number.isFinite(v)) host.onSetSelectionWeight(v);
|
|
}}
|
|
/>
|
|
<datalist id="attr-pen-weights">
|
|
{PEN_WEIGHTS.map((w) => (
|
|
<option key={w} value={w} />
|
|
))}
|
|
</datalist>
|
|
</>,
|
|
)}
|
|
|
|
{/* Linienstil — nur Drawing2D trägt ihn (Wand/Decke/etc. read-only). */}
|
|
<span className="attr-key">{t("attr.lineStyle")}</span>
|
|
<span className="attr-val">
|
|
{isDrawing ? (
|
|
<Dropdown
|
|
value={drawing?.lineStyleId ?? "__none__"}
|
|
onChange={(v) =>
|
|
host.onSetSelectionLineStyle(v === "__none__" ? undefined : v)
|
|
}
|
|
options={[
|
|
{ value: "__none__", label: t("attr.lineStyle.none") },
|
|
...project.lineStyles.map((l) => ({ value: l.id, label: l.name })),
|
|
]}
|
|
/>
|
|
) : (
|
|
<span className="attr-readonly">{lineStyle ? lineStyle.name : "—"}</span>
|
|
)}
|
|
</span>
|
|
|
|
{/* ── Füllung (Vordergrund/Hintergrund + Schraffur) ─────────── */}
|
|
{/* Vordergrund = Muster-/Schraffurfarbe, Hintergrund = Füllfarbe/
|
|
Poché. Jedes Feld: Nach Ebene (LayerCategory erzwingt den Wert) /
|
|
Nach Bauteil (erbt vom Component-Manager, Default) / eigener Wert. */}
|
|
<div className="attr-section-label">{t("attr.fill")}</div>
|
|
|
|
{sourceRow(
|
|
"attr.foreground",
|
|
pocheEditable,
|
|
fgUi,
|
|
onForegroundSourceChange,
|
|
colorValue(sel.foreground, host.onSetSelectionForeground),
|
|
)}
|
|
|
|
{sourceRow(
|
|
"attr.background",
|
|
pocheEditable,
|
|
bgUi,
|
|
onBackgroundSourceChange,
|
|
colorValue(sel.background, host.onSetSelectionBackground),
|
|
)}
|
|
|
|
{sourceRow(
|
|
"attr.hatch",
|
|
fillEditable,
|
|
hatchUi,
|
|
onHatchSourceChange,
|
|
<Dropdown
|
|
value={sel.fillHatchId ?? ""}
|
|
onChange={(v) => host.onSetSelectionFill(v || null)}
|
|
options={[
|
|
{ value: "", label: t("attr.none") },
|
|
...project.hatches.map((h) => ({ value: h.id, label: h.name })),
|
|
]}
|
|
/>,
|
|
)}
|
|
|
|
{/* ── Maße (informativ, aus der bbox) ───────────────────────── */}
|
|
<div className="attr-section-label">{t("attr.size")}</div>
|
|
<span className="attr-key">{t("attr.width")}</span>
|
|
<span className="attr-val attr-readonly">{formatM(bboxW)}</span>
|
|
<span className="attr-key">{t("attr.height")}</span>
|
|
<span className="attr-val attr-readonly">{formatM(bboxH)}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|