diff --git a/HandTranscriptMd/src/embed.ts b/HandTranscriptMd/src/embed.ts index 6589eea..52953e8 100644 --- a/HandTranscriptMd/src/embed.ts +++ b/HandTranscriptMd/src/embed.ts @@ -682,18 +682,54 @@ function createPortalPanel( }); // --- Funzioni condivise: usate dai bottoni e dal menu globale (⋮ Obsidian) --- + // Assicura che l' sia dentro un div.hwm_clip-wrapper. + // Animiamo solo il wrapper (non il container span) così il ResizeObserver + // di Obsidian Mobile sul container non si attiva e non re-imposta le dimensioni dell'img. + // Usiamo img.parentElement come anchor per insertBefore: su Android l'img + // potrebbe non essere figlia diretta del container span. + const ensureWrapper = (): HTMLElement | null => { + let wrapper = container.querySelector('.hwm_clip-wrapper') as HTMLElement | null; + if (wrapper) return wrapper; + const img = container.querySelector('img'); + if (!img || !img.parentElement) return null; + wrapper = document.createElement('div'); + wrapper.className = 'hwm_clip-wrapper'; + img.parentElement.insertBefore(wrapper, img); + wrapper.appendChild(img); + return wrapper; + }; + const doExpand = () => { isExpanded = true; - container.style.height = ''; - container.style.overflow = ''; + const wrapper = container.querySelector('.hwm_clip-wrapper') as HTMLElement | null; + if (wrapper) { + // Anima da collapsedHeight verso l'altezza naturale (scrollHeight) + wrapper.style.height = wrapper.scrollHeight + 'px'; + // A transizione finita rimuovi l'altezza esplicita: il wrapper torna flessibile + wrapper.addEventListener('transitionend', () => { + wrapper.style.height = ''; + wrapper.style.overflow = ''; + }, { once: true }); + } + container.classList.remove('hwm_is-collapsed'); collapseBtn.classList.remove('hwm_rotated'); collapseBtn.title = t('btn_collapse'); collapseBtn.setAttribute('data-hwm-key', 'btn_collapse'); }; const doCollapse = () => { isExpanded = false; - container.style.height = collapsedHeight + 'px'; - container.style.overflow = 'hidden'; + const wrapper = ensureWrapper(); + if (wrapper) { + wrapper.style.overflow = 'hidden'; + // Prima forza un'altezza esplicita pari all'altezza attuale (altrimenti + // la transizione partirebbe da 'auto' e non si animarebbe) + wrapper.style.height = wrapper.scrollHeight + 'px'; + // Nel frame successivo imposta l'altezza target: la transizione CSS scatta + requestAnimationFrame(() => { + wrapper.style.height = collapsedHeight + 'px'; + }); + } + container.classList.add('hwm_is-collapsed'); collapseBtn.classList.add('hwm_rotated'); collapseBtn.title = t('btn_expand'); collapseBtn.setAttribute('data-hwm-key', 'btn_expand'); diff --git a/HandTranscriptMd/styles.css b/HandTranscriptMd/styles.css index 6de6953..03a3ab5 100644 --- a/HandTranscriptMd/styles.css +++ b/HandTranscriptMd/styles.css @@ -625,6 +625,26 @@ font-size: 14px; } +/* Wrapper per il collapse: contiene l' e gestisce il clip. + Animiamo solo il wrapper, non il container span, così il ResizeObserver + di Obsidian Mobile non si attiva e non re-imposta le dimensioni dell'img. */ +.hwm_clip-wrapper { + width: 100%; + background: transparent !important; + transition: height 0.3s ease; +} +/* L'img dentro il wrapper non deve mai rimpicciolirsi: occupa la larghezza + piena e la sua altezza naturale, poi il wrapper la clippa dall'alto */ +.hwm_clip-wrapper img { + display: block !important; + width: 100% !important; + height: auto !important; + max-height: none !important; + min-height: 0 !important; + object-fit: unset !important; + background: transparent !important; +} + /* --- Suggest SVG reference: thumbnail + nome file --- */ .hwm_svg-suggest-item { display: flex; diff --git a/NOTES.md b/NOTES.md index f94fbd2..d8e5c89 100644 --- a/NOTES.md +++ b/NOTES.md @@ -5,6 +5,49 @@ Per istruzioni, architettura e task aperti vedi `CLAUDE.md`. --- +## ✅ Task completati (sessione 2026-03-24) + +### Fix focus perso dopo `window.confirm()` — RISOLTO ✅ + +**Sintomo**: dopo aver confermato o annullato la cancellazione di un SVG (sia dal pannello portale inline che dalla `DrawingModal`), il focus veniva perso e non era più possibile scrivere nel documento Obsidian finché non si cambiava finestra. +**Causa**: `window.confirm()` in Electron apre un dialogo nativo che rimuove il focus a livello OS dalla finestra Electron. Alla chiusura il focus non viene ripristinato automaticamente. +**Fix — `DrawingModal`** (`src/editor-view.ts`): aggiunto metodo `showDeleteConfirm()` che crea un overlay `
` dentro `contentEl` con due bottoni ("Elimina" e "Annulla"). Nessun dialogo nativo, nessun problema di focus. La `doDelete()` del modal usa ora `showDeleteConfirm()` + listener `vault.on('modify')` + `setTimeout(300)` per ripristinare il focus dopo la cancellazione del file. +**Fix — pannello portale inline** (`src/embed.ts`): aggiunta funzione helper `showInlineConfirm(anchorEl, msg)` che crea lo stesso overlay `position:absolute` sopra l'elemento passato. Sia il bottone elimina del formato wiki che quello del formato legacy usano ora `showInlineConfirm`. +**File**: `src/editor-view.ts`, `src/embed.ts`, `styles.css`, `src/locales/*.json` (chiavi `confirm_ok`, `confirm_cancel`). + +### Fix overlay di conferma non cliccabile nel pannello portale — RISOLTO ✅ + +**Sintomo**: dopo la conversione all'overlay inline, i bottoni "Elimina" e "Annulla" non erano cliccabili nel pannello portale. Era anche possibile cliccare i bottoni sottostanti attraverso l'overlay. +**Causa**: due problemi CSS simultanei — (1) l'overlay aveva `z-index: 10`, uguale al pannello portale; (2) il container span eredita `pointer-events: none` e l'overlay lo ereditava. +**Fix CSS** (`styles.css`): `z-index: 100` sull'overlay + `pointer-events: auto !important` su `.hwm_confirm-overlay` e sui suoi bottoni. +**File**: `styles.css`. + +### Fix letterboxing (bordi neri) su Android al comprimi/espandi — RISOLTO ✅ + +**Sintomo**: su Android, comprimere o espandere un riquadro SVG creava grossi bordi neri ai lati dell'immagine invece di ridimensionarla correttamente. +**Causa**: Obsidian Mobile ha un `ResizeObserver` interno sul container span. Quando `container.style.height` veniva modificato, il ResizeObserver si attivava e ricalcolava il layout dell'``, forzando proporzioni con letterbox. +**Fix**: tecnica del "wrapper div" — `doCollapse`/`doExpand` in `embed.ts` creano (o riusano) un `
` figlio diretto dell'``. L'animazione viene applicata sull'altezza del wrapper, mai sul container span, quindi il ResizeObserver non si attiva. `img.parentElement.insertBefore(wrapper, img)` per evitare eccezione silenziosa su Android dove `` non è figlio diretto del container. +**CSS aggiunto** (`.hwm_clip-wrapper`): `width: 100%; transition: height 0.3s ease;` e regole sull'img figlio per forzare `width: 100%; height: auto; object-fit: unset`. +**File**: `src/embed.ts`, `styles.css`. + +### Animazione comprimi/espandi — AGGIUNTA ✅ + +**Cosa**: l'altezza del wrapper si anima con `transition: height 0.3s ease`. Al collapse: `scrollHeight` → `collapsedHeight` (px) via `requestAnimationFrame`. All'expand: `collapsedHeight` → `scrollHeight`, poi `height: ''` e `overflow: ''` rimossi su `transitionend` per ripristinare il layout naturale. +**File**: `src/embed.ts`, `styles.css`. + +### Rimozione nome branch dalla versione nelle impostazioni — RISOLTO ✅ + +**Cosa**: il header della pagina impostazioni mostrava `v1.x.x — branch: overlay`. La stringa del branch è stata rimossa; ora mostra solo `v${this.plugin.manifest.version}`. +**File**: `src/settings.ts` (rimossa costante `PLUGIN_BRANCH` dall'UI, variabile mantenuta per uso interno). + +### Preview SVG nella ricerca "Insert SVG reference" — AGGIUNTA ✅ + +**Cosa**: il modal fuzzy-search per inserire un riferimento a un SVG esistente ora mostra una thumbnail dell'SVG a sinistra del nome file, invece del solo testo. +**Implementazione**: override di `renderSuggestion()` in `SvgReferenceSuggest` (`src/main.ts`). Usa `app.vault.getResourcePath(file)` come `src` dell'``. CSS aggiunto: `.hwm_svg-suggest-item` (flex), `.hwm_svg-thumb` (48×48px, border-radius), `.hwm_svg-suggest-name`. +**File**: `src/main.ts`, `styles.css`. + +--- + ## ✅ Task completati (sessione 2026-03-23) ### Tema automatico (bgMode 'auto')