From 1acf27548fb6bf6baae44eec5eabdd50ebe73380 Mon Sep 17 00:00:00 2001 From: Karim Date: Wed, 22 Jul 2026 00:28:34 +0200 Subject: [PATCH] Oberleisten-/Status-Zustand aus App.tsx in useTopBarState() extrahiert MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Bündelt Detailstufe, 3D-Rendermodus, Sichtfeld, Boden-Referenzraster, Plan-Farbmodus, Achslinien, Linienmodus, Fadenkreuz-/Snap-Farbe, Papier-Massstab, Live-Zoom, Cursor und Ausschnitt-Auswahl (Teil der laufenden App.tsx-Verkleinerung). --- src/App.tsx | 76 +++++++++++++----------------- src/state/useTopBarState.ts | 92 +++++++++++++++++++++++++++++++++++++ 2 files changed, 124 insertions(+), 44 deletions(-) create mode 100644 src/state/useTopBarState.ts diff --git a/src/App.tsx b/src/App.tsx index 97faa97..11288b9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -158,6 +158,7 @@ import { useContextMenuState } from "./menus/useContextMenuState"; import { InlineEditor } from "./views/InlineEditor"; import { Content } from "./views/viewportContent"; import { useDialogState } from "./state/useDialogState"; +import { useTopBarState } from "./state/useTopBarState"; import { useThemeModeState } from "./theme/useThemeMode"; import { CommandLine } from "./ui/CommandLine"; import type { CommandLineHandle, CommandLineField, CommandLineOption } from "./ui/CommandLine"; @@ -396,50 +397,37 @@ export default function App() { // ── Oberleisten-/Status-Zustand (View-State, kein Modell) ───────────────── // detail wirkt im Grundriss (Symbole + Schraffuren/Linien), renderMode in der // 3D-Ansicht (3 Modi), referenceLines schaltet die Wand-Achslinien. - const detail = useStore((s) => s.detail); - const setDetail = useStore((s) => s.setDetail); - const renderMode = useStore((s) => s.renderMode); - const setRenderMode = useStore((s) => s.setRenderMode); - const view3d = useStore((s) => s.view3d); - const setView3d = useStore((s) => s.setView3d); - const fov = useStore((s) => s.fov); - const setFov = useStore((s) => s.setFov); - // Boden-Referenzraster im 3D-Viewport (wirkt nur im WASM/Nordstern-Pfad, - // s. Wasm3DViewport.tsx) — Umschalter sitzt als Overlay-Button im Viewport. - const grid3dVisible = useStore((s) => s.grid3dVisible); - const setGrid3dVisible = useStore((s) => s.setGrid3dVisible); - const planColorMode = useStore((s) => s.planColorMode); - const setPlanColorMode = useStore((s) => s.setPlanColorMode); - const referenceLines = useStore((s) => s.referenceLines); - const setReferenceLines = useStore((s) => s.setReferenceLines); - const lineMode = useStore((s) => s.lineMode); - const setLineMode = useStore((s) => s.setLineMode); - const marqueeColor = useStore((s) => s.marqueeColor); - const setMarqueeColor = useStore((s) => s.setMarqueeColor); - const snapColor = useStore((s) => s.snapColor); - const setSnapColor = useStore((s) => s.setSnapColor); - const scaleDenominator = useStore((s) => s.scaleDenominator); - const setScaleDenominator = useStore((s) => s.setScaleDenominator); - // LIVE Papier-Massstab-Nenner aus der View-Transform (PlanView meldet ihn); - // null = keine Plan-Ansicht aktiv. Transienter UI-State, bleibt lokal. - const [liveScale, setLiveScale] = useState(null); - // „Angewählter" Ausschnitt (View-Snapshot): bleibt gesetzt, solange der - // Live-Zustand EXAKT dem Ausschnitt entspricht (siehe Effekt weiter unten). - // Steuert die Footer-Bar + die Aktiv-Markierung im Ausschnitte-Panel. - const [selectedViewSnapshotId, setSelectedViewSnapshotId] = useState< - string | null - >(null); - // Cursor in Modell-Metern (aus der Plan-Ansicht) bzw. null (nicht über Plan). - const [cursor, setCursor] = useState(null); - // Live-Zoom in Prozent RELATIV zum angewandten Papier-Massstab: 100 % = - // Live-Ansicht steht exakt im angewandten Massstab (liveScale == scaleDenominator). - // Reinzoomen > 100 %, Rauszoomen < 100 %. Einzige Quelle: angewandter Nenner - // (scaleDenominator) / Live-Nenner (liveScale). Ohne Live-Massstab (keine - // Plan-Ansicht) Fallback 100 %. - const zoomPercent = - liveScale != null && liveScale > 0 - ? (scaleDenominator / liveScale) * 100 - : 100; + const { + detail, + setDetail, + renderMode, + setRenderMode, + view3d, + setView3d, + fov, + setFov, + grid3dVisible, + setGrid3dVisible, + planColorMode, + setPlanColorMode, + referenceLines, + setReferenceLines, + lineMode, + setLineMode, + marqueeColor, + setMarqueeColor, + snapColor, + setSnapColor, + scaleDenominator, + setScaleDenominator, + liveScale, + setLiveScale, + selectedViewSnapshotId, + setSelectedViewSnapshotId, + cursor, + setCursor, + zoomPercent, + } = useTopBarState(); // ── Zeichenwerkzeuge (transienter View-State; bleibt lokal) ─────────────── // Aktives Werkzeug, Werkzeug-Parameter (Wandtyp/Kategorie/Linienstil), Snap- diff --git a/src/state/useTopBarState.ts b/src/state/useTopBarState.ts new file mode 100644 index 0000000..f432d28 --- /dev/null +++ b/src/state/useTopBarState.ts @@ -0,0 +1,92 @@ +// Bündelt den Oberleisten-/Status-Zustand (View-State, kein Modell): Detail- +// stufe, 3D-Rendermodus, Feldweite, Boden-Referenzraster, Plan-Farbmodus, +// Wand-Achslinien, Linienmodus, Fadenkreuz-/Snap-Farbe und Papier-Massstab +// kommen aus dem Store; liveScale/selectedViewSnapshotId/cursor sind rein +// lokaler UI-State (PlanView meldet den Live-Massstab, kein Undo/Redo-Bezug). +// zoomPercent ist daraus abgeleitet. Nur aus App() herausgezogen, um die +// Funktion zu entlasten — reine Zustands-Bündelung, keine Verhaltensänderung. +// +// Extrahiert aus App.tsx. Bezeichner englisch, Kommentare deutsch (CONVENTIONS.md). + +import { useState } from "react"; +import { useStore } from "./appStore"; +import type { Vec2 } from "../model/types"; + +export function useTopBarState() { + const detail = useStore((s) => s.detail); + const setDetail = useStore((s) => s.setDetail); + const renderMode = useStore((s) => s.renderMode); + const setRenderMode = useStore((s) => s.setRenderMode); + const view3d = useStore((s) => s.view3d); + const setView3d = useStore((s) => s.setView3d); + const fov = useStore((s) => s.fov); + const setFov = useStore((s) => s.setFov); + // Boden-Referenzraster im 3D-Viewport (wirkt nur im WASM/Nordstern-Pfad, + // s. Wasm3DViewport.tsx) — Umschalter sitzt als Overlay-Button im Viewport. + const grid3dVisible = useStore((s) => s.grid3dVisible); + const setGrid3dVisible = useStore((s) => s.setGrid3dVisible); + const planColorMode = useStore((s) => s.planColorMode); + const setPlanColorMode = useStore((s) => s.setPlanColorMode); + const referenceLines = useStore((s) => s.referenceLines); + const setReferenceLines = useStore((s) => s.setReferenceLines); + const lineMode = useStore((s) => s.lineMode); + const setLineMode = useStore((s) => s.setLineMode); + const marqueeColor = useStore((s) => s.marqueeColor); + const setMarqueeColor = useStore((s) => s.setMarqueeColor); + const snapColor = useStore((s) => s.snapColor); + const setSnapColor = useStore((s) => s.setSnapColor); + const scaleDenominator = useStore((s) => s.scaleDenominator); + const setScaleDenominator = useStore((s) => s.setScaleDenominator); + // LIVE Papier-Massstab-Nenner aus der View-Transform (PlanView meldet ihn); + // null = keine Plan-Ansicht aktiv. Transienter UI-State, bleibt lokal. + const [liveScale, setLiveScale] = useState(null); + // „Angewählter" Ausschnitt (View-Snapshot): bleibt gesetzt, solange der + // Live-Zustand EXAKT dem Ausschnitt entspricht (siehe Effekt weiter unten). + // Steuert die Footer-Bar + die Aktiv-Markierung im Ausschnitte-Panel. + const [selectedViewSnapshotId, setSelectedViewSnapshotId] = useState< + string | null + >(null); + // Cursor in Modell-Metern (aus der Plan-Ansicht) bzw. null (nicht über Plan). + const [cursor, setCursor] = useState(null); + // Live-Zoom in Prozent RELATIV zum angewandten Papier-Massstab: 100 % = + // Live-Ansicht steht exakt im angewandten Massstab (liveScale == scaleDenominator). + // Reinzoomen > 100 %, Rauszoomen < 100 %. Einzige Quelle: angewandter Nenner + // (scaleDenominator) / Live-Nenner (liveScale). Ohne Live-Massstab (keine + // Plan-Ansicht) Fallback 100 %. + const zoomPercent = + liveScale != null && liveScale > 0 + ? (scaleDenominator / liveScale) * 100 + : 100; + + return { + detail, + setDetail, + renderMode, + setRenderMode, + view3d, + setView3d, + fov, + setFov, + grid3dVisible, + setGrid3dVisible, + planColorMode, + setPlanColorMode, + referenceLines, + setReferenceLines, + lineMode, + setLineMode, + marqueeColor, + setMarqueeColor, + snapColor, + setSnapColor, + scaleDenominator, + setScaleDenominator, + liveScale, + setLiveScale, + selectedViewSnapshotId, + setSelectedViewSnapshotId, + cursor, + setCursor, + zoomPercent, + }; +}