Procreate-Style Interface
Relevant source files
The following files were used as context for generating this wiki page:
The Procreate-Style Interface is a specialized UI layer designed to provide a minimalist, "disappearing UI" experience similar to professional tablet painting applications. It operates as an alternative layout mode that can be toggled to replace the classic "Klecks" desktop toolbars with touch-optimized components, floating panels, and gesture-driven interactions.
This interface focuses on maximizing the drawing area by moving complex settings into transient pop-overs and utilizing high-contrast, monochrome icons in a fixed top bar. It leverages GPU acceleration via CanvasKit (Skia WASM) to maintain performance while handling complex UI transitions and high-resolution canvas manipulation.
Sources: src/app/script/klecks/ui/components/procreate/procreate-layout.ts:47-53, src/app/script/app/kl-app.ts:1437-1445, prompt.md
Architecture and Layout Management
The system is managed by the ProcreateLayout class, which acts as the central controller for high-level UI states. It coordinates the lifecycle of specific Procreate components and handles the transition between the classic and Procreate modes.
Core Components
The layout is composed of several specialized sub-components:
| Component | Description |
|---|---|
TopBar | Fixed header containing gallery access, tool selection (Brush, Smudge, Eraser), and panel toggles. |
SideBar | Vertical control strip for real-time brush size and opacity adjustments, plus Undo/Redo triggers. |
UtilitySideBar | A fixed right-side panel for quick access to layers, colors, and brush presets. |
FloatingPanel | A generic container used to host transient UI like Settings, Layers, or Adjustments. |
QuickMenu | A radial action menu triggered by specific gestures (e.g., 4-finger tap). |
Sources: src/app/script/klecks/ui/components/procreate/procreate-layout.ts:55-75, src/app/script/app/kl-app.ts:251-270, src/app/style/procreate.scss:26-50
Layout State Flow
When the interface is activated, it modifies the DOM hierarchy and CSS classes to suppress the standard kl-toolspace and inject the Procreate container.
Component Deep Dive
Top Bar and Panel System
The TopBar manages the primary toolset. Selecting a panel (like Layers or Adjustments) triggers a FloatingPanel instance. These panels are designed to be "gigantic" (default 400px width) to ensure touch accessibility on mobile devices.
- Adjustments Panel: Reuses the
EditUicomponent to provide filters and transformations. - Selections Panel: Integrates with the
KlAppSelectlogic for lasso and polygonal selections. - Reference Window: A dedicated companion window for viewing external images or different canvas areas.
Sources: src/app/script/klecks/ui/components/procreate/procreate-layout.ts:168-300, src/app/style/procreate.scss:320-335
Gesture and Tool Interaction
The interface implements several "Procreate-authentic" gestures through the Easel and KlAppEvents systems:
- Long Press Eyedropper: Holding a finger on the canvas activates the eyedropper tool.
- Two-Finger Tap: Triggers the Global Undo action.
- Three-Finger Tap: Triggers the Global Redo action.
- 4-Finger Tap: Opens the
QuickMenuradial shortcut interface. - Hold-to-Snap: The
QuickShapeHandlerdetects when a user holds at the end of a stroke, snapping it to a geometric shape (line, circle, rectangle).
Sources: src/app/script/app/kl-app.ts:705-725, src/app/script/app/kl-app.ts:792-820, funkcje-app.txt:45-55
Visual Styling and Themes
The interface utilizes a "Premium Dark" theme defined through CSS custom properties (variables) in procreate.scss. Key attributes include:
- Glassmorphism: Extensive use of
backdrop-filter: blur(40px)for panels and bars. - Typography: High-contrast white text (
#ffffff) on deep dark surfaces (#121212). - Accents: A distinct electric blue (
#0a84ff) used for active tool states and selections.
Technical Implementation Details
Brush Settings Synchronization
Brush size and opacity are synced via a unidirectional data flow. When the SideBar slider is moved, it updates the BrushSettingService, which then propagates the value to both the rendering engine and the UI components.
// From kl-app.ts: Synchronization of Sidebar and Brush Service
brushSettingService.subscribe((event) => {
if (event.type === 'size') {
this.procreateLayout.setSize(event.value);
} else if (event.type === 'opacity') {
this.procreateLayout.setOpacity(event.value);
}
});
Sources: src/app/script/app/kl-app.ts:1400-1407, src/app/script/klecks/ui/components/procreate/procreate-layout.ts:430-440
QuickShape Logic
The QuickShapeHandler monitors stroke duration and displacement. If a stroke remains relatively stationary for the holdDurationMs (default 500ms), it activates the detection algorithm to convert the freehand path into a perfect vector-aligned primitive.
Sources: src/app/script/app/kl-app.ts:854-910, funkcje-app.txt:10-15
Summary
The Procreate-Style Interface transforms the Klecks application into a distraction-free creative environment. By abstracting complex desktop paradigms into touch-friendly floating panels and context-aware gestures, it provides a high-performance workflow optimized for professional digital artists and tablet users. This module effectively bridges the gap between web-based tools and native creative applications through its strict adherence to modern mobile UI design and GPU-accelerated rendering.