Mobile & Responsive UI
Relevant source files
The following files were used as context for generating this wiki page:
The Mobile and Responsive UI system in Rocreate is designed to provide a seamless painting experience across various form factors, including desktop, tablet, and mobile devices. It manages the dynamic transition between a high-density "Classic" desktop interface and a touch-optimized mobile interface, while also supporting a specialized "Procreate-style" layout mode.
The architecture relies on a central controller, KlApp, which monitors window dimensions and user preferences to toggle between different UI states. This ensures that the drawing canvas remains the priority while tools and panels adapt their positioning and visibility based on available screen real estate.
Core UI Architecture
The application employs a modular UI structure where components are conditionally rendered or moved based on the uiLayout (left/right) and the current device width.
Layout Management and Responsiveness
The KlApp class serves as the primary manager for responsive behavior. It defines a collapseThreshold (set to 820px) to determine when the interface should transition into mobile mode.
- Collapse Logic: When the UI width falls below the threshold, the
MobileUicomponent is activated. The main toolspace may be hidden or displayed as a block depending on user interaction and the active layout mode. - Orientation Support: The system supports both "left" and "right" UI layouts, allowing users to switch the side where tools and sidebars appear.
- Viewport Adjustment: The
Easelcomponent (the canvas viewport) is dynamically resized to fill the remaining space after accounting for active sidebars or mobile toolbars.
Sources: src/app/script/app/kl-app.ts:154-219, src/app/script/klecks/ui/mobile/mobile-ui.ts:18-62
Component Relationship Diagram
The following diagram illustrates how KlApp coordinates various UI modules to achieve a responsive layout.
Mobile UI System
The dedicated mobile system consists of specialized components optimized for small touch screens.
MobileUI Component
The MobileUi class manages a wrapper for mobile-specific tools and a ToolspaceCollapser. It handles the positioning of mobile controls relative to the main toolspace orientation.
- State Persistence: The visibility state of the mobile toolspace is persisted in
LocalStorageusing the keyuiShowMobile. - Visibility Control: It can toggle the display of the
mobileWrapperEl, which contains the mobile brush and color interfaces.
Sources: src/app/script/klecks/ui/mobile/mobile-ui.ts:25-50
Mobile Specialized Tools
Mobile-specific sub-components provide streamlined access to core functions:
| Component | Purpose | Key Functionality |
|---|---|---|
MobileBrushUi | Specialized brush controls | Toggles between brush/eraser types and opens the Brush Library. |
MobileColorUi | Compact color picker | Features an integrated eyedropper and color selection. |
ToolspaceCollapser | UI Toggle | Allows users to collapse the main sidebar to maximize drawing area. |
Sources: src/app/script/klecks/ui/mobile/mobile-ui.ts:18-40, src/app/script/app/kl-app.ts:1091-1153
Procreate-Style Responsive Layout
Beyond standard mobile responsiveness, the application includes a procreate-mode that implements an "authentic dark" premium UI. This mode overrides standard Klecks styling and introduces its own responsive logic.
Visual Styles and Overrides
The Procreate UI uses high-contrast monochrome icons, glassmorphism (blur/backdrop filters), and custom SCSS variables for a specialized theme.
- Top Bar: A fixed header containing gallery access, tool selectors, and a color preview circle.
- Sidebar Sliders: Minimalist vertical sliders for brush size and opacity, designed for thumb-use.
- Floating Panels: Modals for layers, edit tools, and settings that are "gigantic" (400px wide) but respect
95vwon mobile.
Sources: src/app/style/procreate.scss:13-118, src/app/style/procreate.scss:408-466
Responsive Adjustments (SCSS)
The Procreate layout adapts via CSS media queries for smaller screens and shorter orientations:
- Max-width 768px: Top bar height increases to 48px, while buttons and sliders are downsized for better touch target density.
- Max-height 600px: Hides the brush size preview and reduces vertical gaps between sidebar controls to prevent overflow.
Sources: src/app/style/procreate.scss:746-787
Gesture and Input Support
The responsive system is tightly integrated with touch gestures to replace keyboard shortcuts on mobile devices.
Key Gesture Bindings
- Hand Tool: 2-finger drag, pinch, or twist for panning, zooming, and rotation.
- Fit into View: 1-finger double tap.
- Quick Menu: 4-finger tap (in Procreate mode) or long press.
Sources: src/help.html:168-185, src/app/script/app/kl-app.ts:758-765
Implementation Details
Viewport Resize Logic
The application employs several methods to ensure the UI remains consistent during browser zoom or device rotation.
// src/app/script/app/kl-app.ts:1455-1463
window.addEventListener('resize', () => {
this.resize(window.innerWidth, window.innerHeight);
});
// Handling iPad specific Safari bugs where resize events may fail
if ('visualViewport' in window && visualViewport !== null) {
visualViewport.addEventListener('resize', () => {
this.resize(window.innerWidth, window.innerHeight);
});
}
Sources: src/app/script/app/kl-app.ts:1455-1467
The resize method updates the uiWidth and uiHeight states, triggers the updateCollapse logic, and adjusts the height of color sliders and tool rows to prevent vertical scrolling in the UI panels.
Sources: src/app/script/app/kl-app.ts:1537-1555
Responsive Form Factors Summary
| Form Factor | Sidebar Behavior | Viewport Strategy |
|---|---|---|
| Desktop (>820px) | Static Sidebar (Left/Right) | Viewport = Width - Sidebar |
| Tablet (<820px) | Collapsible Mobile UI | Viewport = Full Width (Sidebar Overlays) |
| Phone (Mobile) | Collapsed by Default | Full Screen Canvas + Floating Actions |
Sources: src/app/script/app/kl-app.ts:168-210, README.md:14-15
The Mobile and Responsive UI system ensures Rocreate remains functional and performant on hardware ranging from desktop workstations to smartphones by dynamically reconfiguring layout structures and input handling based on environmental constraints.