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
|
> **Estado**: Fase 1 completada (2025-12-17)
|
||||||
> **Auditoría completa**: `docs/research/DVUI_AUDIT_2025-12-17.md` (570 líneas)
|
> **Auditoría original**: `docs/research/DVUI_AUDIT_2025-12-17.md` (570 líneas)
|
||||||
> **Consensuado**: 2025-12-17
|
|
||||||
|
|
||||||
### El Problema
|
### El Problema (resuelto)
|
||||||
|
|
||||||
zcatgui tiene MÁS widgets que DVUI (~45 vs ~42), pero DVUI **se ve mejor** porque:
|
zcatgui tenía MÁS widgets que DVUI pero DVUI **se veía mejor** por falta de:
|
||||||
1. **Esquinas redondeadas** en todos los widgets
|
1. ✅ **Esquinas redondeadas** → `fillRoundedRect` con edge-fade AA
|
||||||
2. **Anti-aliasing en bordes** via edge-fade (no solo en TTF)
|
2. ✅ **Anti-aliasing en bordes** → edge-fade technique implementada
|
||||||
3. **Transiciones suaves** entre estados (hover, press)
|
3. ⏳ **Transiciones suaves** (Fase 2)
|
||||||
4. **Sombras aplicadas** a paneles y modales
|
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)**
|
### Widgets Actualizados
|
||||||
1. Crear `src/render/path.zig` - Paths con arcos para esquinas redondeadas
|
|
||||||
2. Modificar `software.zig` - AA en bordes via edge-fade technique
|
| Widget | corner_radius | shadow | Notas |
|
||||||
3. Actualizar widgets - corner_radius en Button, Panel, TextInput, Select, Modal
|
|--------|---------------|--------|-------|
|
||||||
|
| 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**
|
**Fase 2: Estados Visuales**
|
||||||
4. Integrar AnimationManager en widgets para transiciones hover/press
|
- Integrar AnimationManager en widgets para transiciones hover/press
|
||||||
5. Focus ring con anti-aliasing
|
- Focus ring con anti-aliasing
|
||||||
|
|
||||||
**Fase 3: Efectos**
|
**Fase 3: Efectos Avanzados**
|
||||||
6. Activar Shadow API existente (`effects.zig`) en Panel/Modal
|
- Mejorar uso de gradientes
|
||||||
7. Mejorar uso de gradientes
|
- Blur effect para backdrops
|
||||||
|
|
||||||
**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
|
|
||||||
```
|
|
||||||
|
|
||||||
### Documentación de Referencia
|
### Documentación de Referencia
|
||||||
|
|
||||||
- `docs/research/DVUI_AUDIT_2025-12-17.md` - Auditoría completa
|
- `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
|
## 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)
|
- ✅ Parsing TTF via zcatttf (cmap format 4 y 12)
|
||||||
- ✅ Rasterización con áreas trapezoidales (antialiasing)
|
- ✅ Rasterización con áreas trapezoidales (antialiasing)
|
||||||
- ✅ Fuente embebida (DroidSans)
|
- ✅ Fuente embebida (DroidSans)
|
||||||
|
|
@ -204,7 +217,7 @@ font.drawText(fb, x, y, "Texto con UTF-8: ñ €", color, clip);
|
||||||
| Campo | Valor |
|
| Campo | Valor |
|
||||||
|-------|-------|
|
|-------|-------|
|
||||||
| **Nombre** | zcatgui |
|
| **Nombre** | zcatgui |
|
||||||
| **Versión** | v0.17.0 |
|
| **Versión** | v0.18.0 |
|
||||||
| **Fecha inicio** | 2025-12-09 |
|
| **Fecha inicio** | 2025-12-09 |
|
||||||
| **Estado** | ✅ COMPLETO - 37 widgets, ~35K LOC, 4 backends, TTF funcional |
|
| **Estado** | ✅ COMPLETO - 37 widgets, ~35K LOC, 4 backends, TTF funcional |
|
||||||
| **Lenguaje** | Zig 0.15.2 |
|
| **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.1 | Fuente embebida: TtfFont.initEmbedded() |
|
||||||
| 2025-12-16 | v0.16.2 | Fix TTF: DroidSans (187KB) reemplaza AdwaitaSans (variable). Y-flip rasterización. |
|
| 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.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
|
## 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)
|
> **Para detalles técnicos completos, ver `REFERENCE.md`** (1370 líneas de documentación)
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue