Ir al contenido
DocuGraph

devmind

FE-03 DiagramNode

FE-03 — DiagramNode

Sección titulada «FE-03 — DiagramNode»
  • Depende de: US-03, US-05.
  • Estado: DONE.

Objetivo

Sección titulada «Objetivo»

Render de diagramas (mermaid/texto) con fallback legible, visor a pantalla completa con soporte de rotación horizontal (RF-17), zoom multitáctil y controles adaptativos.

Entregable

Sección titulada «Entregable»
  • DiagramNode para ficha de concepto (file:lib/src/features/learn/widgets/diagram_node.dart) con degradado visual indicador de desbordamiento horizontal.
  • DiagramViewer modal a pantalla completa con InteractiveViewer, RotatedBox y AnimatedRotation (file:lib/src/features/learn/widgets/diagram_viewer.dart).
  • Soporte horizontal/vertical con rotación a 90° e indicador semántico accesible (RF-17, NFR-03).
  • Adaptación animada de los iconos de la barra de controles flotante y del AppBar al rotar a modo horizontal para una lectura apaisada directa.
  • Cuadrícula ASCII protegida contra deformación por wrap de texto (SingleChildScrollView horizontal).
  • Barra de herramientas flotante con filtro de desenfoque (BackdropFilter) y aislamiento del lienzo para evitar solapamientos.
  • Evidencia de pruebas de widgets automatizadas (test:test/features/learn/diagram_node_test.dart, test:test/features/learn/diagram_viewer_test.dart).
  • Evidencia interactiva en dispositivo físico Android (RF8Y90W0B4W / SM A175F) validada con Marionette MCP.

Criterios de aceptación

Sección titulada «Criterios de aceptación»
  • Diagrama inválido muestra la fuente en texto con tipografía monospace legible.
  • Legible y navegable en pantalla de dispositivo (8,8” y móviles estándar con zoom 0.5x - 5.0x).
  • Modo horizontal por rotación fluida (90°) bajo demanda sin requerir giro físico del dispositivo.
  • Controles accesibles (zoom in, zoom out, reset 1:1, rotar, cerrar) con target mínimo 48x48 dp y ValueKey semánticos.
  • En modo horizontal los iconos y controles se adaptan y orientan erguidos hacia el usuario (RF-17).
  • Barra flotante aislada con desenfoque de fondo y padding sin solapar el diagrama.

Investigación previa

Sección titulada «Investigación previa»

Se implementó el renderizado offline-first mediante InteractiveViewer acelerado por GPU (Impeller) con zoom multitáctil y doble tap, evitando dependencias externas en tiempo de ejecución (NFR-01).