docs: Actualizar CLAUDE.md - v0.18.0 con paridad visual DVUI Fase 1
This commit is contained in:
parent
364a7d963f
commit
ebad736c75
1 changed files with 51 additions and 37 deletions
88
CLAUDE.md
88
CLAUDE.md
|
|
@ -78,54 +78,67 @@ Resumen breve (1-2 frases). Resultado principal.
|
|||
|
||||
---
|
||||
|
||||
## ⭐ TAREA PENDIENTE: Paridad Visual con DVUI
|
||||
## ⭐ Paridad Visual DVUI - Fase 1 COMPLETADA ✅
|
||||
|
||||
> **Prioridad**: ALTA
|
||||
> **Auditoría completa**: `docs/research/DVUI_AUDIT_2025-12-17.md` (570 líneas)
|
||||
> **Consensuado**: 2025-12-17
|
||||
> **Estado**: Fase 1 completada (2025-12-17)
|
||||
> **Auditoría original**: `docs/research/DVUI_AUDIT_2025-12-17.md` (570 líneas)
|
||||
|
||||
### El Problema
|
||||
### El Problema (resuelto)
|
||||
|
||||
zcatgui tiene MÁS widgets que DVUI (~45 vs ~42), pero DVUI **se ve mejor** porque:
|
||||
1. **Esquinas redondeadas** en todos los widgets
|
||||
2. **Anti-aliasing en bordes** via edge-fade (no solo en TTF)
|
||||
3. **Transiciones suaves** entre estados (hover, press)
|
||||
4. **Sombras aplicadas** a paneles y modales
|
||||
zcatgui tenía MÁS widgets que DVUI pero DVUI **se veía mejor** por falta de:
|
||||
1. ✅ **Esquinas redondeadas** → `fillRoundedRect` con edge-fade AA
|
||||
2. ✅ **Anti-aliasing en bordes** → edge-fade technique implementada
|
||||
3. ⏳ **Transiciones suaves** (Fase 2)
|
||||
4. ✅ **Sombras en paneles/modales** → Panel/Modal con shadow
|
||||
|
||||
### Solución Acordada
|
||||
### Sistema Dual Implementado
|
||||
|
||||
Implementar sistema dual: `RenderMode.simple` (rápido) vs `RenderMode.fancy` (bonito)
|
||||
```zig
|
||||
// style.zig
|
||||
pub const RenderMode = enum { simple, fancy };
|
||||
var global_render_mode: RenderMode = .fancy; // Default: bonito
|
||||
|
||||
### Fases de Implementación
|
||||
// Uso en widgets
|
||||
if (Style.isFancy() and config.corner_radius > 0) {
|
||||
ctx.pushCommand(Command.roundedRect(...));
|
||||
} else {
|
||||
ctx.pushCommand(Command.rect(...));
|
||||
}
|
||||
```
|
||||
|
||||
**Fase 1: Rendering Visual (CRÍTICO)**
|
||||
1. Crear `src/render/path.zig` - Paths con arcos para esquinas redondeadas
|
||||
2. Modificar `software.zig` - AA en bordes via edge-fade technique
|
||||
3. Actualizar widgets - corner_radius en Button, Panel, TextInput, Select, Modal
|
||||
### Widgets Actualizados
|
||||
|
||||
| Widget | corner_radius | shadow | Notas |
|
||||
|--------|---------------|--------|-------|
|
||||
| Button | 4 | - | Esquinas redondeadas en fancy mode |
|
||||
| Panel | 6 | ✅ offset 4px | Borde y shadow |
|
||||
| TextInput | 3 | - | Esquinas sutiles |
|
||||
| Select | 3 | - | Esquinas sutiles |
|
||||
| Modal | 8 | ✅ offset 6px | Diálogo + botones + input |
|
||||
|
||||
### Código Añadido
|
||||
|
||||
- `framebuffer.zig`: +350 LOC (`fillRoundedRect`, `drawRoundedRect`, edge-fade AA)
|
||||
- `command.zig`: +69 LOC (nuevos comandos `rounded_rect`, `rounded_rect_outline`)
|
||||
- `style.zig`: +33 LOC (RenderMode system)
|
||||
- Widgets: ~120 LOC entre todos
|
||||
|
||||
**Total: ~590 líneas nuevas/modificadas**
|
||||
|
||||
### Fases Pendientes
|
||||
|
||||
**Fase 2: Estados Visuales**
|
||||
4. Integrar AnimationManager en widgets para transiciones hover/press
|
||||
5. Focus ring con anti-aliasing
|
||||
- Integrar AnimationManager en widgets para transiciones hover/press
|
||||
- Focus ring con anti-aliasing
|
||||
|
||||
**Fase 3: Efectos**
|
||||
6. Activar Shadow API existente (`effects.zig`) en Panel/Modal
|
||||
7. Mejorar uso de gradientes
|
||||
|
||||
**Estimación**: ~1,400 LOC nuevas/modificadas
|
||||
|
||||
### Técnica Edge-Fade (de DVUI)
|
||||
|
||||
```
|
||||
Cada borde tiene 2 vértices paralelos:
|
||||
- Interno: color sólido (alpha = 1.0)
|
||||
- Externo: transparente (alpha = 0.0)
|
||||
GPU/CPU interpola → bordes suaves sin multisampling
|
||||
```
|
||||
**Fase 3: Efectos Avanzados**
|
||||
- Mejorar uso de gradientes
|
||||
- Blur effect para backdrops
|
||||
|
||||
### Documentación de Referencia
|
||||
|
||||
- `docs/research/DVUI_AUDIT_2025-12-17.md` - Auditoría completa
|
||||
- `docs/research/WIDGET_COMPARISON.md` - Comparativa anterior (actualizar después)
|
||||
- `docs/research/WIDGET_COMPARISON.md` - Comparativa (actualizar después)
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -175,7 +188,7 @@ ttf.drawText(fb, x, y, "Hola UTF-8: áéíóú ñ €", color, clip);
|
|||
|
||||
## Fuentes TTF: Estado Técnico
|
||||
|
||||
### Estado actual (v0.17.0) - FUNCIONAL
|
||||
### Estado actual (v0.18.0) - FUNCIONAL
|
||||
- ✅ Parsing TTF via zcatttf (cmap format 4 y 12)
|
||||
- ✅ Rasterización con áreas trapezoidales (antialiasing)
|
||||
- ✅ Fuente embebida (DroidSans)
|
||||
|
|
@ -204,7 +217,7 @@ font.drawText(fb, x, y, "Texto con UTF-8: ñ €", color, clip);
|
|||
| Campo | Valor |
|
||||
|-------|-------|
|
||||
| **Nombre** | zcatgui |
|
||||
| **Versión** | v0.17.0 |
|
||||
| **Versión** | v0.18.0 |
|
||||
| **Fecha inicio** | 2025-12-09 |
|
||||
| **Estado** | ✅ COMPLETO - 37 widgets, ~35K LOC, 4 backends, TTF funcional |
|
||||
| **Lenguaje** | Zig 0.15.2 |
|
||||
|
|
@ -766,12 +779,13 @@ const stdout = std.fs.File.stdout(); // NO std.io.getStdOut()
|
|||
| 2025-12-16 | v0.16.1 | Fuente embebida: TtfFont.initEmbedded() |
|
||||
| 2025-12-16 | v0.16.2 | Fix TTF: DroidSans (187KB) reemplaza AdwaitaSans (variable). Y-flip rasterización. |
|
||||
| 2025-12-17 | v0.17.0 | ⭐⭐⭐ Integración zcatttf v1.0 - TTF FUNCIONA PERFECTAMENTE |
|
||||
| 2025-12-17 | v0.18.0 | Paridad Visual DVUI Fase 1: RenderMode dual, esquinas redondeadas, sombras |
|
||||
|
||||
---
|
||||
|
||||
## ESTADO ACTUAL
|
||||
|
||||
**✅ PROYECTO COMPLETADO - v0.17.0**
|
||||
**✅ PROYECTO COMPLETADO - v0.18.0**
|
||||
|
||||
> **Para detalles técnicos completos, ver `REFERENCE.md`** (1370 líneas de documentación)
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue