📄 Documento de Execução — Card 14b: [M1.5] Correção Visual do Professor
🎯 1. O que foi implementado
Componente CorrectionCanvas (HTML5 Canvas nativo)
- Ferramentas: Pincel (free drawing), Seta (com ponta), Texto (inline input), Círculo (click + drag raio), Apagar
- Cores: Vermelho, Azul, Verde, Amarelo, Preto, Branco
- Espessura: Slider 1-10px
- Desfazer/Refazer: Stack de marcas com histórico
- Exportação:
canvas.toDataURL('image/png') → PNG + JSON das marcas
- Decisão técnica: HTML5 Canvas nativo em vez de react-konva — mais leve, sem dependência extra, sem problemas de SSR
Página Professor /professor/galeria/[postId]/corrigir
- Carrega imagem do GalleryPost no canvas
- Toolbar com ferramentas, cores, espessura, desfazer/refazer
- Feedback textual (textarea até 2000 chars)
- Conceito (select: Excelente/Bom/A Melhorar OU A/B/C/D/E)
- Botão "Enviar Correção" → exporta PNG + salva correctionData
Página Aluno /aluno/galeria/correcao/[postId]
- Mostra imagem corrigida (PNG com anotações do professor)
- Comentário textual do professor
- Conceito recebido (badge)
- Aviso "pode refazer" se conceito é A_MELHORAR/D/E
Procedures
professor.challenges.saveVisualCorrection — salva correctionData + correctionImageUrl (PNG dataURL) + feedback + concept no GalleryPost. Marca hasTeacherCorrection=true. Atualiza TaskSubmission com allowResubmit automático.student.gallery.getCorrection — busca correção de um post (só o próprio aluno)
allowResubmit automático (decisão #24)
- concept
A_MELHORAR, D, ou E → allowResubmit=true na TaskSubmission
- Libera botão "Refazer exercício" para o aluno
Link "Ver correção" na galeria
- Na aba "Meus Trabalhos", posts com
hasTeacherCorrection=true mostram botão "Ver correção" → link para /aluno/galeria/correcao/[postId]
✅ Critérios de aceite
| # |
Critério |
Status |
| 1 |
Editor com ferramentas (pincel/seta/texto/círculo/apagar) |
✅ |
| 2 |
Cores e espessura configuráveis |
✅ |
| 3 |
Desfazer/Refazer |
✅ |
| 4 |
Comentário textual + nota/conceito |
✅ |
| 5 |
Visão do aluno (corrigido) |
✅ |
| 6 |
Selo 'Correção do Prof' ativado |
✅ |
| 7 |
allowResubmit automático (A Melhorar/D/E) |
✅ |
| 8 |
Build + deploy DEV |
✅ |
📁 2. Arquivos criados/modificados
Criados
| Arquivo |
Função |
src/components/gallery/CorrectionCanvas.tsx |
Canvas HTML5 com ferramentas |
src/app/(dashboard)/professor/galeria/[postId]/corrigir/page.tsx |
Editor do professor |
src/app/(dashboard)/aluno/galeria/correcao/[postId]/page.tsx |
Revisão do aluno |
Modificados
| Arquivo |
Mudança |
src/server/trpc/routers/professor.ts |
+saveVisualCorrection |
src/server/trpc/routers/student.ts |
+getCorrection |
src/app/(dashboard)/aluno/galeria/page.tsx |
Meus Trabalhos +link "Ver correção" |
🎯 3. Próximo card
Card 14c — Vídeo-Correção (YouTube link + iframe) — último card do M1.5.