Plan Pages Canvas

Plan de Migración Completo

Fase 1: Fundamentos (Sprint 1)

Objetivo: Establecer bases sin romper funcionalidad actual

1. Canvas Base:

@Component({
  standalone: true
})
export abstract class BaseCanvasComponent {
  @Input() config!: CanvasConfig;
  @Input() widgets: Widget[] = [];
}

2. Modelos Base:

export interface CanvasConfig {
  type: 'page' | 'container';
  layout: ResponsivePageLayout;
  gridEnabled?: boolean;
  zoom?: number;
}

export interface EditorConfig {
  type: 'page' | 'container';
  canvasConfig: CanvasConfig;
  mode?: EditorMode;
}

3. Editor Base:

@Component({
  standalone: true
})
export abstract class EditorBaseComponent {
  @Input() config?: EditorConfig;
}

Testing Fase 1:

• Unit tests para nuevos modelos
• Verificar que nada se rompe
• Documentar APIs base

Fase 2: Migración de Canvas (Sprint 1-2)

Objetivo: Implementar nuevo sistema de canvas

1. Page Canvas:

@Component({
  selector: 'lib-page-canvas',
  standalone: true
})
export class PageCanvasComponent extends BaseCanvasComponent {
  // Migrar lógica actual
}

2. Container Canvas:

@Component({
  selector: 'lib-container-canvas',
  standalone: true
})
export class ContainerCanvasComponent extends BaseCanvasComponent {
  // Versión específica para containers
}

3. Canvas Service:

@Injectable()
export class CanvasService {
  // Lógica común de canvas
  // Gestión de viewport
}

Testing Fase 2:

• Tests para cada tipo de canvas
• Verificar drag&drop
• Tests de integración canvas-service

Fase 3: Editores Especializados (Sprint 2)

Objetivo: Implementar editores específicos

1. Page Editor:

@Component({
  selector: 'lib-page-editor',
  standalone: true
})
export class PageEditorComponent extends EditorBaseComponent {
  // Migrar editor actual aquí
}

2. Container Editor:

@Component({
  selector: 'lib-container-editor',
  standalone: true
})
export class ContainerEditorComponent extends EditorBaseComponent {
  // Versión para containers
}

Testing Fase 3:

• Tests para cada editor
• Verificar funcionalidad específica
• Tests de integración

Fase 4: Servicios y Estado (Sprint 2-3)

Objetivo: Refactorizar servicios existentes

1. Editor Service Base:

@Injectable()
export abstract class EditorBaseService {
  // Funcionalidad común
}

2. Servicios Especializados:

@Injectable()
export class PageEditorService extends EditorBaseService {
  // Lógica específica de páginas
}

Testing Fase 4:

• Tests unitarios servicios
• Verificar gestión estado
• Tests de integración

Fase 5: Facade y Punto de Entrada (Sprint 3)

Objetivo: Crear interfaz unificada

1. Editor Facade:

@Component({
  selector: 'lib-editor',
  standalone: true,
  template: `
    @switch (editorType()) {
      @case ('page') {
        <lib-page-editor [config]="config()" />
      }
      @case ('container') {
        <lib-container-editor [config]="config()" />
      }
    }
  `
})
export class EditorFacadeComponent {
  @Input() editorType = signal<'page' | 'container'>('page');
  @Input() config = signal<EditorConfig | null>(null);
}

Testing Fase 5:

• Tests de integración facade
• Verificar switching
• Tests E2E básicos

Fase 6: Migración y Optimización (Sprint 3-4)

Objetivo: Migrar usos existentes y optimizar

1. Actualizar Usos:

@Component({
  template: `
    <lib-editor
      [editorType]="'page'"
      [config]="pageConfig()"
    />
  `
})

2. Optimizaciones:

• Lazy loading
• Performance
• Bundle size

Testing Fase 6:

• Tests E2E completos
• Pruebas de rendimiento
• Verificación final

Plan de Releases:

1. Release 1 (Sprint 1):

• Bases de canvas y modelos
• Sin cambios visibles
• Testing completo

2. Release 2 (Sprint 2):

• Canvas implementados
• Editores base
• Migración parcial

3. Release 3 (Sprint 3):

• Facade completo
• Servicios optimizados
• Migración mayor

4. Release 4 (Sprint 4):

• Optimizaciones finales
• Migración completa
• Documentación

Consideraciones:

1. Por Sprint:

• Mantener funcionalidad existente
• Testing incremental
• Documentación actualizada

2. Técnicas:

• Signals para estado
• OnPush change detection
• Lazy loading donde posible

3. Testing:

• Unit tests por componente
• Integration tests por fase
• E2E tests completos
• Performance testing