Compare commits
2 commits
067bac47fd
...
6732ac1fc5
| Author | SHA1 | Date | |
|---|---|---|---|
| 6732ac1fc5 | |||
| cead6bf26f |
3 changed files with 117 additions and 97 deletions
132
CLAUDE.md
132
CLAUDE.md
|
|
@ -105,9 +105,9 @@ Resumen breve (1-2 frases). Resultado principal.
|
|||
| Campo | Valor |
|
||||
|-------|-------|
|
||||
| **Nombre** | zcatgui |
|
||||
| **Versión** | v0.21.2 |
|
||||
| **Versión** | v0.28.0 |
|
||||
| **Fecha inicio** | 2025-12-09 |
|
||||
| **Estado** | ✅ COMPLETO - 37 widgets, ~35K LOC, 4 backends, TTF funcional |
|
||||
| **Estado** | ✅ COMPLETO - 38 widgets, ~36K LOC, 4 backends, WindowState, TTF funcional |
|
||||
| **Lenguaje** | Zig 0.15.2 |
|
||||
| **Paradigma** | Immediate Mode GUI |
|
||||
| **Inspiración** | Gio (Go), microui (C), DVUI (Zig), Dear ImGui (C++) |
|
||||
|
|
@ -247,14 +247,14 @@ zcatgui/
|
|||
|
||||
---
|
||||
|
||||
## ESTADO ACTUAL (v0.25.0)
|
||||
## ESTADO ACTUAL (v0.28.0)
|
||||
|
||||
### Widgets (38 total)
|
||||
|
||||
| Categoría | Widgets |
|
||||
|-----------|---------|
|
||||
| **Básicos** | Label, Button, Checkbox, Radio, Slider, TextInput, NumberEntry |
|
||||
| **Contenedores** | Panel, Split, Modal, Scroll, Tabs, Menu |
|
||||
| **Contenedores** | Panel, Split, Modal, Scroll, Tabs, Menu, **WindowState** |
|
||||
| **Datos** | List, Table, Tree, ReorderableList, VirtualScroll |
|
||||
| **Feedback** | Progress, Tooltip, Toast, Spinner |
|
||||
| **Input avanzado** | AutoComplete, Select, TextArea, ColorPicker, DatePicker |
|
||||
|
|
@ -268,16 +268,18 @@ zcatgui/
|
|||
- **iOS**: UIKit bridge (Objective-C)
|
||||
|
||||
### Core Systems
|
||||
- Context (FrameArena, dirty rectangles, ID system)
|
||||
- Context (FrameArena, dirty rectangles, ID system, Ghost Drawing)
|
||||
- Input (keyboard, mouse, touch, shortcuts, gestures)
|
||||
- Rendering (software renderer, AA, effects)
|
||||
- Animation (20+ easing functions, springs)
|
||||
- Rendering (software renderer, AA, effects, **Shadow Cache**)
|
||||
- Animation (20+ easing functions, springs, **ColorTransition**)
|
||||
- Themes (dark, light, high_contrast, nord, dracula)
|
||||
- **WindowState** (Panel interface a nivel de librería)
|
||||
|
||||
### Métricas
|
||||
- ~35,000 LOC en 81 archivos fuente
|
||||
- ~36,000 LOC en 85 archivos fuente
|
||||
- 0 warnings, 0 memory leaks
|
||||
- WASM: ~18KB compilado
|
||||
- **Shadow Baking**: 4.2x más rápido en Debug
|
||||
|
||||
→ Detalle completo: `REFERENCE.md`
|
||||
|
||||
|
|
@ -285,48 +287,55 @@ zcatgui/
|
|||
|
||||
## HITOS RECIENTES
|
||||
|
||||
### WindowState + Panel Interface ✅ (2026-01-04)
|
||||
Panel interface movido a nivel de librería para reutilización:
|
||||
- **WindowState**: Contenedor de paneles con vtable
|
||||
- **Panel**: Interface con draw, handleEvent, onFocus, onBlur
|
||||
- Cualquier app puede usar sin reimplementar lógica de paneles
|
||||
→ Archivo: `src/window.zig`
|
||||
|
||||
### Shadow Baking ✅ (2026-01-02)
|
||||
Cache de sombras prerenderizadas - **4.2x más rápido** en Debug:
|
||||
- Evita recalcular blur por frame
|
||||
- ShadowCache con max 64 entries
|
||||
- initWithCache() para habilitar
|
||||
→ Archivo: `render/software.zig`
|
||||
|
||||
### Glyph Blitting Optimizado ✅ (2026-01-02)
|
||||
Renderizado de texto hasta 3x más rápido:
|
||||
- Early exit si fuera de clip
|
||||
- Pre-cálculo región visible
|
||||
- Fast path para alpha=255
|
||||
→ Archivo: `render/ttf.zig`
|
||||
|
||||
### ColorTransition Epsilon Fix ✅ (2026-01-03)
|
||||
Fix animaciones que no terminaban (loop infinito):
|
||||
- lerpU8 truncaba incrementos <1 → nunca convergía
|
||||
- Epsilon check ANTES del lerp para forzar snap
|
||||
- Umbral <= 2 para margen de seguridad
|
||||
→ Archivo: `render/animation.zig`
|
||||
|
||||
### SIMD fillRect ✅ (2026-01-03)
|
||||
Relleno de rectángulos 8 píxeles por iteración:
|
||||
- @Vector(8, u32) para batch writing
|
||||
- Solo en hot paths (>50% tiempo en framebuffer)
|
||||
→ Archivo: `render/framebuffer.zig`
|
||||
|
||||
### Ghost Drawing ✅ (2026-01-02)
|
||||
Supresión de comandos sin romper input:
|
||||
- `ctx.suppress_commands = true` → pushCommand ignora
|
||||
- Widgets procesan input normalmente
|
||||
- 36% menos tiempo de ejecución
|
||||
→ Archivo: `core/context.zig`
|
||||
|
||||
### Liquid UI V2 ✅ (2025-12-30)
|
||||
Sistema de transiciones de color suaves para paneles:
|
||||
- **ColorTransition**: 500ms (medio segundo) para transiciones perceptibles
|
||||
- **Mayor contraste**: Dark mode 4%/20% base, Light mode 1%/6% base
|
||||
- **requestAnimationFrame()**: Paneles solicitan redraw durante animación
|
||||
- Fondo de paneles "fluye" al cambiar focus
|
||||
→ Archivos: `render/animation.zig`, `core/style.zig`, `core/context.zig`
|
||||
Transiciones de color suaves (500ms) con contraste mejorado.
|
||||
→ Archivos: `render/animation.zig`, `core/style.zig`
|
||||
|
||||
### IdleCompanion Widget ✅ (2025-12-30)
|
||||
Mascota animada que aparece tras inactividad del usuario:
|
||||
- Se asoma por bordes de paneles aleatorios
|
||||
- Ojos que miran a los lados, orejas con movimiento
|
||||
- Salto de pánico al detectar actividad
|
||||
- Clipping correcto (respeta límites del panel)
|
||||
Mascota animada (gatito) tras inactividad.
|
||||
→ Archivo: `widgets/idle_companion.zig`
|
||||
|
||||
### Primitivas Gráficas 2D ✅ (2025-12-30)
|
||||
Nuevas primitivas para formas orgánicas:
|
||||
- **FilledTriangle**: Rasterización por scanlines (v0.23.0)
|
||||
- **FilledCircle**: Algoritmo Midpoint/Bresenham (v0.24.0)
|
||||
→ Archivos: `core/command.zig`, `render/software.zig`
|
||||
|
||||
### Refactorización Modular ✅ (2025-12-29)
|
||||
Archivos grandes modularizados en carpetas:
|
||||
- `autocomplete/` (910→571 LOC hub, -37%): state, types, filtering
|
||||
- `icon/` (805→515 LOC hub, -36%): types, drawing_helpers
|
||||
→ Detalle: `docs/REFACTORING_MODULAR_2025-12-29.md`
|
||||
|
||||
### AdvancedTable Color por Focus ✅ (2025-12-19)
|
||||
Fila seleccionada cambia color según focus de la tabla:
|
||||
- `selected_row`: color con focus (accent)
|
||||
- `selected_row_unfocus`: color sin focus (gris sutil)
|
||||
- `BasicColors` acepta override desde aplicación
|
||||
|
||||
### TTF Rendering ✅ (2025-12-17)
|
||||
Integración zcatttf v1.0 - texto TTF funciona perfectamente.
|
||||
→ Librería: `/mnt/cello2/arno/re/recode/zig/zcatttf/`
|
||||
|
||||
### Paridad Visual DVUI ✅ (2025-12-17)
|
||||
Sistema dual (simple/fancy), esquinas redondeadas, sombras, transiciones, focus ring AA.
|
||||
→ Detalle: `docs/research/DVUI_AUDIT_2025-12-17.md`
|
||||
|
||||
### AdvancedTable ✅ (2025-12-17)
|
||||
Widget ~3,700 LOC con schema, CRUD, sorting, lookup, multi-select, search, validation.
|
||||
→ Detalle: `docs/ADVANCED_TABLE_MERGE_PLAN.md`
|
||||
|
|
@ -367,29 +376,26 @@ pub const MacroPlayer = struct {
|
|||
|
||||
---
|
||||
|
||||
## OPTIMIZACIONES DE RENDIMIENTO (2026-01-03)
|
||||
## OPTIMIZACIONES DE RENDIMIENTO (2026-01-05)
|
||||
|
||||
### Optimizaciones Activas ✅
|
||||
|
||||
| Optimización | Archivo | Descripción |
|
||||
|--------------|---------|-------------|
|
||||
| **Turbo Píxeles** | `render/framebuffer.zig:117` | `@setRuntimeSafety(false)` en `fillRect` - elimina bounds checks en hot path |
|
||||
| **Fast Path Texto** | `render/ttf.zig:323,375` | Escritura directa para píxeles opacos (alpha==255), evita blend innecesario |
|
||||
| # | Optimización | Archivo | Impacto |
|
||||
|---|--------------|---------|---------|
|
||||
| 1 | **Shadow Baking** | `render/software.zig` | 4.2x más rápido Debug |
|
||||
| 2 | **Glyph Blitting** | `render/ttf.zig` | 3x más rápido texto |
|
||||
| 3 | **SIMD fillRect** | `render/framebuffer.zig` | 8 pixels/iteración |
|
||||
| 4 | **Turbo Píxeles** | `render/framebuffer.zig` | Sin bounds checks |
|
||||
| 5 | **Fast Path α=255** | `render/ttf.zig` | Sin blend innecesario |
|
||||
| 6 | **Ghost Drawing** | `core/context.zig` | 36% menos comandos |
|
||||
| 7 | **ColorTransition ε** | `render/animation.zig` | Convergencia garantizada |
|
||||
|
||||
### Optimización Probada y Revertida ❌
|
||||
### Resultado Final
|
||||
|
||||
| Optimización | Problema | Alternativa |
|
||||
|--------------|----------|-------------|
|
||||
| **Burst Suppression** (auto-gestión de estrés) | Causaba paneles vacíos durante navegación rápida | El debounce en DataManager ya evita queries excesivas |
|
||||
|
||||
**Detalles del Burst Suppression:**
|
||||
- Concepto: suprimir dibujo de paneles durante ráfagas de navegación (<100ms)
|
||||
- Implementación: `if (!frame_result.should_draw) return;` en paneles
|
||||
- Problema: el frame se dibujaba vacío (solo fondo), sin widgets
|
||||
- Causa raíz: suprimía TODO el dibujo, no solo las queries BD
|
||||
- Lección: el debounce a nivel DataManager es más elegante
|
||||
|
||||
**Pendiente verificar:** Mensajes continuos de redraw en idle (posible bug en animaciones).
|
||||
- **Debug mode:** 180ms → 43ms (4.2x mejora)
|
||||
- **ReleaseSafe:** ~16.7ms = 60fps objetivo
|
||||
- **CPU idle:** ~0% (waitEventTimeout)
|
||||
- **Memory leaks:** 0 verificado
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ const std = @import("std");
|
|||
const Context = @import("context.zig").Context;
|
||||
const Layout = @import("layout.zig");
|
||||
const Rect = Layout.Rect;
|
||||
const Input = @import("input.zig");
|
||||
|
||||
// =============================================================================
|
||||
// Panel Interface (con contexto opaco)
|
||||
|
|
@ -32,6 +33,9 @@ pub const PanelInfo = struct {
|
|||
preferred_zone: Zone = .center,
|
||||
/// Tecla de acceso rápido: Ctrl+focus_key (1-9, null = sin atajo)
|
||||
focus_key: ?u8 = null,
|
||||
/// Sensibilidad a ráfagas: si true, el panel se auto-suprime durante navegación rápida
|
||||
/// Paneles de navegación principal (who_list, who_detail) deben ser false
|
||||
burst_sensitive: bool = true,
|
||||
};
|
||||
|
||||
/// Zonas de layout disponibles
|
||||
|
|
@ -45,19 +49,14 @@ pub const Zone = enum {
|
|||
};
|
||||
|
||||
/// Evento simplificado para paneles
|
||||
/// Usa Input.KeyEvent de core/input.zig para compatibilidad
|
||||
pub const Event = union(enum) {
|
||||
key: KeyEvent,
|
||||
key: Input.KeyEvent,
|
||||
mouse: MouseEvent,
|
||||
resize: ResizeEvent,
|
||||
text_input: TextInputEvent,
|
||||
quit,
|
||||
|
||||
pub const KeyEvent = struct {
|
||||
key: u32,
|
||||
pressed: bool,
|
||||
modifiers: Modifiers,
|
||||
};
|
||||
|
||||
pub const MouseEvent = struct {
|
||||
x: i32,
|
||||
y: i32,
|
||||
|
|
@ -77,11 +76,8 @@ pub const Event = union(enum) {
|
|||
|
||||
pub const MouseButton = enum { left, middle, right };
|
||||
|
||||
pub const Modifiers = struct {
|
||||
ctrl: bool = false,
|
||||
shift: bool = false,
|
||||
alt: bool = false,
|
||||
};
|
||||
// Re-export KeyEvent para acceso uniforme
|
||||
pub const KeyEvent = Input.KeyEvent;
|
||||
};
|
||||
|
||||
/// Interface Panel con contexto opaco (desacoplado de aplicación)
|
||||
|
|
@ -199,8 +195,9 @@ pub const WindowState = struct {
|
|||
/// Identificador de la ventana
|
||||
id: []const u8,
|
||||
|
||||
/// Lista de paneles (BoundedArray - sin allocations dinámicas)
|
||||
panels: std.BoundedArray(Panel, MAX_PANELS),
|
||||
/// Lista de paneles (array estático + contador - sin allocations dinámicas)
|
||||
panels_arr: [MAX_PANELS]Panel,
|
||||
panels_len: usize,
|
||||
|
||||
/// Rectángulos para cada panel (actualizados externamente por layout)
|
||||
rects: [MAX_PANELS]Rect,
|
||||
|
|
@ -217,7 +214,8 @@ pub const WindowState = struct {
|
|||
pub fn init(id: []const u8, base_focus_group: u64) Self {
|
||||
return .{
|
||||
.id = id,
|
||||
.panels = .{},
|
||||
.panels_arr = undefined,
|
||||
.panels_len = 0,
|
||||
.rects = [_]Rect{.{ .x = 0, .y = 0, .w = 0, .h = 0 }} ** MAX_PANELS,
|
||||
.focused_idx = 0,
|
||||
.base_focus_group = base_focus_group,
|
||||
|
|
@ -226,12 +224,19 @@ pub const WindowState = struct {
|
|||
|
||||
/// Añade un panel a la ventana
|
||||
pub fn addPanel(self: *Self, panel: Panel) error{Overflow}!void {
|
||||
try self.panels.append(panel);
|
||||
if (self.panels_len >= MAX_PANELS) return error.Overflow;
|
||||
self.panels_arr[self.panels_len] = panel;
|
||||
self.panels_len += 1;
|
||||
}
|
||||
|
||||
/// Obtiene slice de paneles
|
||||
pub fn panels(self: *Self) []Panel {
|
||||
return self.panels_arr[0..self.panels_len];
|
||||
}
|
||||
|
||||
/// Actualiza los rectángulos de los paneles (llamado por layout externo)
|
||||
pub fn updateRects(self: *Self, rects: []const Rect) void {
|
||||
const len = @min(rects.len, self.panels.len);
|
||||
const len = @min(rects.len, self.panels_len);
|
||||
for (0..len) |i| {
|
||||
self.rects[i] = rects[i];
|
||||
}
|
||||
|
|
@ -240,7 +245,7 @@ pub const WindowState = struct {
|
|||
/// Dibuja todos los paneles - EL ID VIAJA CON EL PANEL
|
||||
/// Elimina errores de mismatch de IDs por construcción
|
||||
pub fn draw(self: *Self, ctx: *Context, app_ctx: ?*anyopaque) void {
|
||||
for (self.panels.slice(), 0..) |panel, i| {
|
||||
for (self.panels(), 0..) |panel, i| {
|
||||
const info = panel.getInfo();
|
||||
const rect = self.rects[i];
|
||||
|
||||
|
|
@ -256,17 +261,17 @@ pub const WindowState = struct {
|
|||
|
||||
/// Mueve el foco al siguiente panel (F6)
|
||||
pub fn focusNext(self: *Self, ctx: *Context) void {
|
||||
if (self.panels.len == 0) return;
|
||||
if (self.panels_len == 0) return;
|
||||
|
||||
// Notificar blur al panel actual
|
||||
const current = self.panels.slice()[self.focused_idx];
|
||||
const current = self.panels()[self.focused_idx];
|
||||
current.onBlur(null);
|
||||
|
||||
// Mover al siguiente
|
||||
self.focused_idx = (self.focused_idx + 1) % self.panels.len;
|
||||
self.focused_idx = (self.focused_idx + 1) % self.panels_len;
|
||||
|
||||
// Notificar focus al nuevo panel
|
||||
const next = self.panels.slice()[self.focused_idx];
|
||||
const next = self.panels()[self.focused_idx];
|
||||
next.onFocus(null);
|
||||
|
||||
// Actualizar focus group activo
|
||||
|
|
@ -275,17 +280,17 @@ pub const WindowState = struct {
|
|||
|
||||
/// Mueve el foco al panel anterior (Shift+F6)
|
||||
pub fn focusPrev(self: *Self, ctx: *Context) void {
|
||||
if (self.panels.len == 0) return;
|
||||
if (self.panels_len == 0) return;
|
||||
|
||||
// Notificar blur al panel actual
|
||||
const current = self.panels.slice()[self.focused_idx];
|
||||
const current = self.panels()[self.focused_idx];
|
||||
current.onBlur(null);
|
||||
|
||||
// Mover al anterior
|
||||
self.focused_idx = if (self.focused_idx == 0) self.panels.len - 1 else self.focused_idx - 1;
|
||||
self.focused_idx = if (self.focused_idx == 0) self.panels_len - 1 else self.focused_idx - 1;
|
||||
|
||||
// Notificar focus al nuevo panel
|
||||
const prev = self.panels.slice()[self.focused_idx];
|
||||
const prev = self.panels()[self.focused_idx];
|
||||
prev.onFocus(null);
|
||||
|
||||
// Actualizar focus group activo
|
||||
|
|
@ -294,17 +299,17 @@ pub const WindowState = struct {
|
|||
|
||||
/// Enfoca un panel por índice (Ctrl+1, Ctrl+2, etc.)
|
||||
pub fn focusByIndex(self: *Self, ctx: *Context, idx: usize) void {
|
||||
if (idx >= self.panels.len) return;
|
||||
if (idx >= self.panels_len) return;
|
||||
|
||||
// Notificar blur al panel actual
|
||||
const current = self.panels.slice()[self.focused_idx];
|
||||
const current = self.panels()[self.focused_idx];
|
||||
current.onBlur(null);
|
||||
|
||||
// Cambiar índice
|
||||
self.focused_idx = idx;
|
||||
|
||||
// Notificar focus al nuevo panel
|
||||
const target = self.panels.slice()[self.focused_idx];
|
||||
const target = self.panels()[self.focused_idx];
|
||||
target.onFocus(null);
|
||||
|
||||
// Actualizar focus group activo
|
||||
|
|
@ -313,19 +318,19 @@ pub const WindowState = struct {
|
|||
|
||||
/// Obtiene el panel actualmente enfocado
|
||||
pub fn getFocusedPanel(self: *Self) ?Panel {
|
||||
if (self.panels.len == 0) return null;
|
||||
return self.panels.slice()[self.focused_idx];
|
||||
if (self.panels_len == 0) return null;
|
||||
return self.panels()[self.focused_idx];
|
||||
}
|
||||
|
||||
/// Despacha un evento al panel enfocado
|
||||
pub fn handleEvent(self: *Self, event: Event, app_ctx: ?*anyopaque) bool {
|
||||
if (self.panels.len == 0) return false;
|
||||
const focused = self.panels.slice()[self.focused_idx];
|
||||
if (self.panels_len == 0) return false;
|
||||
const focused = self.panels()[self.focused_idx];
|
||||
return focused.handleEvent(event, app_ctx);
|
||||
}
|
||||
|
||||
/// Número de paneles en la ventana
|
||||
pub fn panelCount(self: *const Self) usize {
|
||||
return self.panels.len;
|
||||
return self.panels_len;
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -69,6 +69,15 @@ pub const SwipeDirection = gesture.SwipeDirection;
|
|||
// Window system (paneles dinámicos)
|
||||
pub const window = @import("core/window.zig");
|
||||
pub const WindowState = window.WindowState;
|
||||
|
||||
// Panel types - usados por aplicaciones para definir paneles
|
||||
pub const Panel = window.Panel;
|
||||
pub const PanelInfo = window.PanelInfo;
|
||||
pub const Zone = window.Zone;
|
||||
pub const Event = window.Event;
|
||||
pub const makePanel = window.makePanel;
|
||||
|
||||
// Aliases legacy (deprecated - usar los de arriba)
|
||||
pub const WindowPanel = window.Panel;
|
||||
pub const WindowPanelInfo = window.PanelInfo;
|
||||
pub const makeWindowPanel = window.makePanel;
|
||||
|
|
|
|||
Loading…
Reference in a new issue