Main Workspace Layouts
Relevant source files
The following files were used as context for generating this wiki page:
- src/app/script/app/kl-app.ts
- src/app/script/klecks/ui/easel/easel.ts
- src/app/script/klecks/ui/components/procreate/procreate-layout.ts
- src/app/style/procreate.scss
- src/app/script/klecks/ui/components/toolspace-top-row.ts
- src/app/script/klecks/ui/tool-tabs/edit-ui.ts
- src/app/script/klecks/ui/tool-tabs/file-ui.ts
The Rocreate workspace is designed to be highly adaptive, supporting multiple interface paradigms to accommodate different hardware and user preferences. The system primarily oscillates between a "Classic" Klecks-style interface—characterized by a fixed toolspace and modular tabs—and a "Procreate-style" layout that emphasizes a minimalist, gesture-heavy, "disappearing UI" philosophy.
The workspace architecture manages the positioning of the canvas (the Easel), the visibility of utility panels, and the responsiveness of UI elements across various screen dimensions. It handles state transitions between left-handed and right-handed orientations, as well as mobile-collapsed states for smaller viewports.
Sources: src/app/script/app/kl-app.ts:167-210, src/app/script/app/kl-app.ts:1451-1463, src/app/style/procreate.scss:1-35
Workspace Architecture & Components
The workspace is controlled by the KlApp class, which acts as the central orchestrator for layout state. It manages the rootEl container and determines how child components like the Easel (viewport), toolspace (classic panels), and ProcreateLayout (modern UI) are positioned.
Key Structural Components
| Component | Description | Source |
|---|---|---|
Easel | The interactive viewport managing the canvas, zoom, pan, and tool rendering. | src/app/script/klecks/ui/easel/easel.ts:50 |
Toolspace | The side panel containing brushes, layers, and settings in the Classic UI. | src/app/script/app/kl-app.ts:795-807 |
ProcreateLayout | Manages floating panels, the minimalist top bar, and the vertical sidebar. | src/app/script/app/kl-app.ts:1268-1275 |
MobileUi | A specialized interface for small screens that collapses the toolspace into a compact view. | src/app/script/app/kl-app.ts:846-851 |
Layout Logic Flow
The following diagram illustrates how the application decides which layout to render based on user settings and window dimensions.
Classic Layout System
The Classic layout uses a rigid side-panel approach (the "Toolspace"). This panel has a fixed width of 271px. The workspace supports a uiLayout state of either 'left' or 'right', which determines which side of the screen the toolspace occupies.
Responsive Behavior
The workspace defines a collapseThreshold of 820px. When the window width falls below this value:
- The standard toolspace is hidden.
- The
MobileUiis activated. - The
Easel(canvas viewport) expands to fill the available width, unless the toolspace is manually toggled open.
Viewport Management
The Easel component manages the physical canvas rendering. It receives size updates via the setSize method and calculates the transformation required to fit the project into the viewport.
Procreate-Style Layout
The Procreate-style layout (enabled via procreateLayout.activate()) completely replaces the Classic sidebar with a "floating" UI paradigm.
UI Characteristics
- Floating Panels: Components like
LayersUi,EditUi, andSettingsUiare moved from the fixed toolspace intoFloatingPanelinstances. - Top Bar: A minimalist horizontal bar (
ProcreateTopBar) containing high-level actions (Gallery, Adjustments, Layers, Color). - Side Bar: A vertical bar (
ProcreateSideBar) containing brush size/opacity sliders and undo/redo buttons. - Canvas Centering: The
Easelis typically set to fill the screen or maintain a consistent background (#1a1a1a) with floating UI elements on top.
Transition Logic
When switching to Procreate mode, the application invokes toggleProcreateMode(). This triggers a CSS class .procreate-mode on the root element, which uses !important declarations to hide the classic kl-toolspace.
Sources: src/app/script/app/kl-app.ts:1451-1463, src/app/style/procreate.scss:1-15, src/app/script/klecks/ui/components/procreate/procreate-layout.ts:120-150
Orientation and Mirroring
The workspace allows users to swap the UI between left and right sides. This is critical for accommodating left-handed or right-handed users.
Transformation Updates
When the layout orientation changes:
- The
uiLayoutstate is updated ('left'vs'right'). - CSS classes
kl-toolspace--leftorkl-toolspace--rightare toggled. - The
Easelelement'sleftproperty is adjusted (either0or271px). - The
StatusOverlayandLayerPreviewcomponents are notified to update their internal positions.
Layout-Specific Components
Toolspace Top Row
In the Classic UI, the ToolspaceTopRow provides the primary navigation for file operations.
| Action | Component Method | Source |
|---|---|---|
| New Image | onNew() | src/app/script/klecks/ui/components/toolspace-top-row.ts:85 |
| Import | onImport() | src/app/script/klecks/ui/components/toolspace-top-row.ts:91 |
| Save | onSave() | src/app/script/klecks/ui/components/toolspace-top-row.ts:97 |
| Help | onHelp() | src/app/script/klecks/ui/components/toolspace-top-row.ts:114 |
Edit and File UI Panels
These panels are rendered as tabs within the TabRow of the classic layout. In the Procreate-style layout, the KlApp detaches these elements and hands them to the ProcreateLayout to be wrapped in floating windows.
Sources: src/app/script/app/kl-app.ts:1335-1360, src/app/script/klecks/ui/tool-tabs/edit-ui.ts:50, src/app/script/klecks/ui/tool-tabs/file-ui.ts:20
Summary
Main Workspace Layouts in Rocreate are a hybrid system combining the structural efficiency of traditional desktop sidebars with the immersive experience of touch-optimized mobile interfaces. Through the KlApp orchestrator, the workspace dynamically recalculates the Easel viewport boundaries and toggles between the modular Toolspace tabs and the sophisticated ProcreateLayout floating system based on user-driven configuration and environment constraints.