Dyna — Generador automático de planners imprimibles

Esta es la parte central del proyecto: convertir un diseño estático en una plantilla dinámica que genera calendarios correctos para cualquier fecha, manteniendo calidad de impresión.

1. Marcado de zonas: un editor visual tipo Figma

El marcado de zonas se resolvió con Konva + react-konva (canvas HTML5 de alto nivel) en lugar de SVG puro o Fabric.js. El usuario dibuja rectángulos sobre la imagen, los redimensiona con handles, y puede usar una herramienta de rejilla que genera varios bloques a la vez de un solo arrastre — clave para mapear rápido una cuadrícula mensual de 7×5 celdas. También hay multi-selección con marquee y guías de alineación automática (snap), al estilo Figma.

Cada zona se guarda como coordenadas absolutas en píxeles, relativas a la imagen original — no como porcentajes:

interface Rectangle {
  x: number;
  y: number;
  width: number;
  height: number;
  fieldType: 'year' | 'month' | 'day' | 'startDay' | 'endDay';
  order: number; // orden para mapear días en rejillas
}

El reto real aquí fue que el zoom y el pan del editor no desalinearan las zonas marcadas. La solución: las coordenadas siempre viven en el espacio de la imagen original, y solo la vista se escala visualmente. La conversión de puntero a coordenadas de imagen queda así de simple:

const pointerToImage = useCallback(
  (pos: { x: number; y: number }) => ({
    x: (pos.x - offset.x) / scale,
    y: (pos.y - offset.y) / scale,
  }),
  [offset, scale]
);

2. Generación del calendario correcto

El motor de fechas se apoya en date-fns:

• getMonthsBetween(start, end) genera la lista de meses del rango elegido.
• Por cada mes, getCalendarWeeks y getMonthDatesForGrid calculan semanas completas y la rejilla mensual, respetando el día de inicio de semana configurado.
• getFieldValue resuelve qué texto va en cada bloque marcado, según su fieldType y el contexto (año, mes, semana o día concreto).
• Los días “leading/trailing” (los del mes anterior o siguiente que aparecen en una vista mensual) se pintan en un color secundario para diferenciarlos.

El sistema soporta 6 tipos de página (portada, separador mensual, vista mensual, vista semanal, vista diaria, extras), y el orden de generación replica cómo se usa un planner en la vida real: portadas → por cada mes, separador + vista mensual → si hay vistas semanal y diaria, por cada semana se genera la semana y luego solo los días de esa semana que caen en ese mes → páginas extra al final.

También soporta i18n completo: idioma inglés/español (con locales de date-fns), formato de año (2026 vs 26), formato de mes (Enero vs 1) y formato de día (6 vs Lunes), todo configurable por plantilla.

3. De canvas a PDF imprimible

La exportación es 100% client-side, en dos fases:

1. Rasterizado de páginas — cada página se pinta en un HTML Canvas 2D (imagen de fondo + texto de fechas) y se convierte a PNG en base64.
2. Ensamblado del PDF — con pdf-lib, corriendo en un Web Worker para no bloquear el hilo principal, cada PNG se embebe como página del PDF con el tamaño real en puntos (por ejemplo, 595×842 pt para A4).

Para mantener calidad de impresión, el sistema asume 300 DPI por defecto y detecta automáticamente si el diseño subido corresponde a A4 o A5 comparando sus dimensiones en píxeles contra varios DPIs conocidos (72/96/144/150/300).

Un planner anual con vista diaria puede generar cientos de páginas, así que el cuello de botella es el rasterizado. Para mitigarlo: progreso visible en dos fases (85% generación + 15% ensamblado), caché de páginas ya generadas si el rango no cambia, y una estimación previa del número de páginas antes de lanzar la exportación.