diff --git a/.gitignore b/.gitignore index 1bcc155..5d76e9c 100644 --- a/.gitignore +++ b/.gitignore @@ -23,3 +23,5 @@ data.json # Plugin di riferimento esterno (non fa parte di questo progetto) obsidian_ink/ + +.vs/ diff --git a/CLAUDE.md b/CLAUDE.md index c05c540..0b29255 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -40,92 +40,126 @@ Un plugin Obsidian che inserisce un **riquadro canvas inline** in un file `.md` --- -## Stato attuale — Fase 2 COMPLETATA, Fase 3 IN CORSO (fix Android handwriting) +## Stato attuale — Fase 3 COMPLETATA (editor in tab separata) ### File del plugin (`HandTranscriptMd/src/`) | File | Cosa fa | |------|---------| -| `main.ts` | Entry point: registra embed, comando "Insert handwriting block", ribbon icon, settings | +| `main.ts` | Entry point: registra embed, editor view, comando, ribbon, settings, `previewCallbacks` per sync inline↔tab | | `settings.ts` | Impostazioni: cartella SVG, dimensioni canvas, sfondo, lingue OCR, chiave API Gemini (campo password) | -| `drawing-canvas.ts` | Motore disegno Canvas API: Bézier quadratiche, penna, gomma parziale, undo/redo history-based, auto-expand, righe foglio | +| `drawing-canvas.ts` | Motore disegno Canvas API: Bézier quadratiche, penna, gomma parziale, undo/redo history-based, auto-expand, righe foglio, `allowFingerScroll()` | | `svg-utils.ts` | Conversione tratti ↔ SVG (dati riedit in `` JSON), righe e sfondo inclusi nell'SVG | -| `embed.ts` | Code block processor, toolbar, bottone Converti collegato (OCR → markdown → sostituisce code block), `svgToBase64Png()` helper | +| `embed.ts` | Code block processor → preview SVG inline con 3 bottoni (X, converti, comprimi) in alto a sinistra + bottone portale in document.body; preview non cliccabile | +| `editor-view.ts` | `DrawingEditorView extends ItemView` — editor canvas in tab Obsidian dedicata, toolbar completa, scroll, auto-save | | `recognizer.ts` | `IRecognizer` interface + `GeminiRecognizer`: invia PNG base64 a Gemini API, restituisce testo | | `md-parser.ts` | `parseMarkdown()`: post-processa testo OCR riga per riga applicando sintassi markdown | +### Architettura attuale (Fase 3+) + +**Due formati supportati:** +- **NUOVO (default)**: `![[_handwriting/hw_xxx.svg]]` — SVG visibile nativamente anche senza plugin +- **LEGACY**: `` ```handwriting {"id":..., "svg":...}``` `` — vecchio formato, mantenuto per compatibilità + +**Preview inline — Nuovo formato wiki:** +- Obsidian renderizza `![[svg]]` come `[img][/img]` +- **MutationObserver su `document.body`** intercetta gli span con `src*="_handwriting/"` non appena appaiono nel DOM (funziona sia in reading view che in live preview dove il post-processor non viene chiamato) +- `tryDecorate()` con flag `data-hwm-decorated="1"` per evitare doppia elaborazione; ritenta dopo 150ms se la classe `image-embed` non è ancora presente (caricamento asincrono) +- **ZERO modifica al DOM dello span** — nessuna classe aggiunta, nessun figlio inserito, nessuno stile inline. Lo span resta identico a qualsiasi altra immagine Obsidian +- **Pannello portale** (`hwm_portal-panel`) in `document.body` con 4 bottoni: ✏️ (apre tab editor), 📄 (converti OCR), ↕️ (comprimi/espandi), ✕ (elimina). Posizionato via RAF + `getBoundingClientRect()` + `position: fixed` +- **Refresh immagine**: `previewCallbacks.set(embedId, ...)` aggiorna `img.src` con cache-bust `?t=timestamp` dopo ogni salvataggio dalla tab editor (Obsidian non aggiorna automaticamente `![[svg]]` in live preview quando il file cambia) +- **NO data-URI**: il src dell'img resta sempre l'URL vault (`http://localhost/_capacitor_file_/...`) — un data-URI verrebbe interpretato da Android come drawing surface + +**Preview inline — Formato legacy:** +- Mostra l'SVG come CSS `background-image` su un `
` (no ``) +- 3 bottoni inline (`
`, non `