The Spatial UI Engine: Modular Floating Panels & Window Orchestration
A static sidebar can often restrict available screen real estate. The Floating Panel System is a highly adaptive UI framework that enables the decoupling of core features such as the Layer System, Pose Library, and App Settings into independent, draggable, and resizable windows designed for professional multi-monitor configurations.
The module architecture centers on dynamic layout orchestration, cross-window state persistence, and the development of high-performance React interfaces that interact with the WebGL workspace.
Technical Architecture: The Polymorphic Window Manager
The primary challenge involves transitioning from a fixed-position sidebar to a non-linear, spatial UI while maintaining global state integrity across the application.
- Layout Paradigm Switching: A "Workspace Mode" toggle within Zustand facilitates a structural refactor. When transitioning from Sidebar to Floating mode, the system unmounts the static container and instantiates a modular window manager. Each tool is wrapped in a specialized
PanelContainerthat manages its own spatial coordinates independently. - Vertical Resizing and Bounds Detection: Custom-hook-driven resizing logic allows for height adjustments via a bottom-edge drag listener. The system includes logic to prevent panels from overlapping or moving outside viewport boundaries, ensuring the UI remains accessible in complex multi-screen setups.
- Minimized Tab Orchestration: To manage workspace clutter, a taskbar logic is located at the bottom of the viewport. Minimized panels are serialized into an organized tab system that populates from left to right, keeping the workspace clear while maintaining immediate access to tools.
Key Feature Breakdown
The Floating Panel system provides extensive customization options for professional workstations:
| Tool | Technical Implementation | Production Purpose |
|---|---|---|
| Spatial Drag Handlers | Pointer-event tracking translating screen-space movement to absolute CSS positioning. | Provides the freedom to position tools on secondary monitors or specific canvas regions. |
| Modular Resizing Engine | Dynamic CSS height manipulation via a dedicated bottom-edge drag listener. | Adjusts the UI to task complexity, such as expanding the Layer System for deep hierarchies. |
| Master UI Toggle | A global visibility flag that hides or reveals the Main Toolbar and UI overlays. | Removes all interface elements for a distraction-free environment during reviews or "Cinema Mode." |
| Recall Icon Stack | A vertical index of closed panels that restores previous spatial coordinates upon re-opening. | Allows for workspace clearing and the retrieval of specific tools without manual repositioning. |
| Auto-Scroll Intelligence | Logic calculating the scroll-offset of nested items within the Layer System panel. | Highlights and centers selected canvas items within the UI hierarchy to reduce manual navigation. |
Performance and Optimization
Managing multiple independent UI windows requires specific optimizations to prevent layout instability and resource contention:
- GPU-Accelerated Windowing: Panel movements utilize
transform: translate3d()to ensure that UI manipulation is handled by the GPU. This prevents the primary PIXI.js canvas from dropping frames when panels are moved. - Isolated Re-renders: A slot-based architecture for panel content ensures that state changes within one panel do not trigger re-renders in unrelated panels, maintaining interface responsiveness and memory efficiency.
- Debounced Coordinate Persistence: The spatial coordinates (X, Y, Height) of every panel are debounced before being saved to local storage. This ensures custom layouts are preserved without causing excessive disk I/O during active resizing or repositioning.
Core Architectural Benefits
The Floating Panel System classifies the application as a professional-grade creative suite by prioritizing user-defined ergonomics.
- Multi-Monitor Optimization: Support for dragging panels away from the main window accommodates modern workstation setups, allowing for a dedicated canvas on one screen and technical tools on another.
- User-Centric Flexibility: The UI adapts to specific mental models, whether the workflow requires a clean, minimized tab system or a dense, multi-panel configuration.
- Context-Aware Navigation: Features like Auto-Scroll bridge the gap between the spatial canvas and the hierarchical UI, making the management of complex, nested scenes more intuitive.
- Professional Tactile Experience: The implementation of draggable and resizable windows provides a tactile experience consistent with industry-standard desktop software, achieved within a modern React and Tauri stack.