Web UI & Layout Structures
Relevant source files
The following files were used as context for generating this wiki page:
The Web UI and Layout Structures of Dotorixel define a responsive, multi-paradigm interface designed to accommodate various screen sizes and input methods. The system transitions between a mobile-oriented tabbed navigation and a desktop-oriented docked panel layout based on the available viewport width. This architecture ensures that the pixel art editor remains functional and ergonomic across compact mobile devices, tablets, and high-resolution desktop monitors.
The core of this layout system is a reactive state-driven approach that utilizes Svelte's reactivity and modern CSS techniques like CSS Grid and Flexbox. By centralizing layout detection in specialized utilities, the editor can dynamically swap entire structural components while maintaining a consistent application state.
Layout Paradigms and Breakpoints
Dotorixel implements two primary layout paradigms triggered by specific viewport width thresholds. These paradigms dictate the positioning of toolbars, panels, and the central drawing canvas.
Breakpoint Definitions
The layout system categorizes devices into four tiers based on width, which then map to the two primary structural paradigms:
| Tier | Range | Layout Paradigm |
|---|---|---|
| Compact | < 600px | Tab Navigation |
| Medium | 600px - 1023px | Tab Navigation |
| Wide | 1024px - 1439px | Docked Panels |
| X-Wide | 1440px+ | Docked Panels |
Sources: tasks/records/046-editor-layout-restructure.md, tasks/records/040-screen-inventory-breakpoint-matrix.md
Docked Panel Layout (>= 1024px)
In the docked paradigm, the editor uses a CSS Grid-based structure to provide simultaneous access to all core tools and settings.
The layout is structured as follows:
- TopBar: Fixed height (44px/48px), spans full width.
- LeftToolbar: Fixed width (44px/48px), contains tools and history controls.
- RightPanel: Fixed width (200px/240px), contains canvas dimensions and color management.
- StatusBar: Fixed height (28px), spans full width at the bottom.
Sources: tasks/records/046-editor-layout-restructure.md:16-30, src/routes/editor/+page.svelte
Tab Navigation Layout (< 1024px)
The tabbed paradigm optimizes for smaller screens by stacking UI elements vertically and using a bottom navigation bar to switch between views.
- Draw Tab: Shows the Canvas, ToolStrip, and ColorBar.
- Colors Tab: Provides a full-screen HSV picker and palette via
ColorsContent. - Settings Tab: Displays canvas configuration and actions via
SettingsContent.
Sources: tasks/records/046-editor-layout-restructure.md:32-51, src/routes/editor/+page.svelte
Core UI Components
The editor is composed of modular Svelte components that adapt their internal styling based on the active layout mode or specific variants.
Layout Detection (layout-mode.svelte.ts)
The createLayoutMode utility uses the matchMedia API to provide reactive boolean states representing the current breakpoint.
isCompact:(max-width: 599px)isMedium:(min-width: 600px) and (max-width: 1023px)isDocked:(min-width: 1024px)isWide:(min-width: 1024px) and (max-width: 1439px)isXWide:(min-width: 1440px)
Sources: src/lib/ui-editor/layout-mode.svelte.ts, tasks/records/046-editor-layout-restructure.md:120-123
RightPanel and SettingsContent
These components handle canvas and color state. To reduce duplication, they utilize a shared CanvasSizeControl component.
| Feature | Description |
|---|---|
| Canvas Size Control | Manages presets (8, 16, 32, 64), custom W/H inputs, and resize anchors. |
| Validation | Uses WasmPixelCanvas.is_valid_dimension() for real-time validation (1-256px). |
| Color Management | Includes an inline HSV picker, FG/BG swap, and recent colors list. |
Sources: src/lib/ui-editor/RightPanel.svelte, issues/011-canvas-size-control.md, tasks/records/057-canvas-resize-ux.md
LeftToolbar
The LeftToolbar is a vertical container used in the docked layout. It houses drawing tools (Pencil, Eraser, Fill, etc.) and history buttons. It uses a separator to visually group tools away from action buttons like Undo and Redo.
Sources: src/lib/ui-editor/LeftToolbar.svelte, tasks/records/046-editor-layout-restructure.md:73-75
Data Flow and State Management
The UI components do not hold primary application state. Instead, they interact with a centralized EditorState class that facilitates communication between the UI and the underlying Rust/WASM core.
Key Data Structures
- EditorState: A Svelte 5 runes-based class managing reactive state for the active tool, colors, zoom level, and history status.
- SharedState: A reference object shared across multiple
EditorStateinstances to synchronize tools and colors when using multiple tabs.
Sources: src/lib/canvas/editor-state.svelte.ts, issues/002-tab-system.md:46-56, tasks/records/007-pebble-ui-design.md
Responsive Implementation Details
The transition between paradigms is handled via structural Svelte conditionals and CSS Grid/Flex transitions.
- Grid Templates: The docked layout uses
grid-template-areasto define the 3x3 layout (TopBar, Sidebar/Canvas/Panel, StatusBar). - Flex Direction: The tab navigation uses a
VStack(Flexbox column) to manage the vertical arrangement of the AppBar, Content area, and navigation bars. - Dynamic Sizing: The system uses
100dvh(dynamic viewport height) to correctly handle mobile browser address bars and virtual keyboards.
Sources: tasks/records/046-editor-layout-restructure.md:54-62, src/routes/editor/+page.svelte
Summary
Dotorixel's Web UI and Layout structures provide a high-performance, responsive environment for pixel art. By utilizing a dual-paradigm approach—Docked Panels for desktop and Tab Navigation for mobile—the application maintains a high degree of usability across the entire device spectrum. The architecture is built on modern Svelte 5 principles, ensuring reactive updates and clean separation between the visual UI shell and the heavy-duty Rust core logic.