Wizard DXF compare: zoom, Adatta e pan anche sull'anteprima immagine e sull'anteprima DXF #113

Closed
opened 2026-10-28 11:29:52 +00:00 by Adriano · 1 comment
Owner

ESITO: richiesta (analisi passo 1, Opus 5.5 claude-opus-5-5)
RIF: gitea:Adriano/TieMeasureFlow#83 (wizard), #104 (zoom già presente sull'immagine della Prova). Adriano 28/10/2026 in fiera: «metti zoom e fit anche su immagine acquisita o caricata e nell'anteprima del dxf sullo wizard del dxf compare».
COSA: le due anteprime del wizard (immagine acquisita/caricata e disegno DXF, scatole 240 px in src/frontend/flask_app/templates/maker/task_editor.html ~righe 729-750) ricevono la stessa barra in sovrimpressione dell'immagine della Prova (#104, righe ~777-797): −, +, Adatta, percentuale; Ctrl+rotella = zoom; trascinamento = pan. Criterio di fatto: su entrambe le anteprime si ingrandisce, si sposta e Adatta torna a vedere tutto; la Prova (#104) si comporta come prima.

FATTI (VERIFICATO leggendo il codice, ramo lavoro/daitarn-tmf-dxfcal ca6cd0c):

  • src/frontend/flask_app/static/js/dxf_recipe_wizard.js: zoom #104 = stato zoom/fitZoom/resPx, getter zoomPct/zoomW/zoomH/vpHeight/canPan/panCursor, metodi onPanDown/onPanMove/onPanEnd/zoomBy/fit/onWheel/onResultImgLoad, refs viewport/img/overlay. Tecnica: viewport overflow:auto, wrapper largo naturalW*zoom, img 100%.
  • Anteprima immagine: con object-fit contain, height 240px; onImagePreviewLoad(el) legge imagePx {w,h}.
  • Anteprima DXF: con view-box.camel=dxfPreviewViewBox() (bbox + margine, unità mm), un solo d=dxfPreviewD(), vector-effect non-scaling-stroke; dxfPreview impostato in loadDxfPreview().
  • Test: src/frontend/flask_app/tests/js/test_dxf_preview.js (node, lanciato da test_dxf_preview_js.py), src/frontend/flask_app/tests/test_dxf_recipe_routes.py (stringhe del template).

MODIFICHE:

  1. JS (dxf_recipe_wizard.js): NON toccare lo zoom #104 (stato, getter, metodi, refs). Aggiungere uno zoom generico per chiave, per le due anteprime: stato viste = {img: {zoom:1, fit:1, w:0, h:0}, dxf: {zoom:1, fit:1, w:0, h:0}}; refs vpImg, vpDxf; metodi vZoomBy(k, f), vFit(k), vWheel(k, ev), vPanDown(k, ev), vPanMove(k, ev), vPanEnd(k), getter/metodi per larghezza/altezza del wrapper e per la percentuale. Centro visibile invariato nello zoom, come zoomBy #104.
    • img: w,h = pixel naturali (da onImagePreviewLoad); fit = min(vpW/w, 240/h); limiti zoom [0.05, 8]; percentuale = zoom×100 (pixel nativi, come #104). Fit al load dell'immagine ().
    • dxf: w,h = larghezza/altezza del viewBox (mm) trattate come px; fit = min(vpW/w, 240/h); limiti [fit×0.5, fit×50]; percentuale = zoom/fit×100 (100 % = Adatta). Fit quando arriva una nuova dxfPreview ().
    • Viewport nascosto o largo 0 al momento del fit: un ResizeObserver sul viewport rifà il fit finché la vista è ad Adatta (zoom == fit); niente fit se clientWidth == 0.
    • Cambio immagine o DXF: si torna ad Adatta.
  2. Template (task_editor.html): le due scatole diventano: div.relative con barra (stesso markup e stile della barra #104, chiamate con la chiave) + viewport fisso 240 px, overflow:auto, touch-action:none, display:flex; wrapper interno margin:auto (centrato quando più piccolo, scorrevole per intero quando più grande) con width/height = w×zoom, h×zoom; img o svg width/height 100%. L'svg mantiene viewBox, preserveAspectRatio e path come ora. Barra visibile solo con contenuto (immagine caricata e non rotta; dxfPreview presente). Riepiloghi (imagePreviewSummary, dxfPreviewSummary) restano sotto. Commento #113 su ogni blocco nuovo.

TEST:

  • tests/js/test_dxf_preview.js (o nuovo tests/js/test_dxf_zoom.js con wrapper pytest come test_dxf_preview_js.py): vFit('img') con vp 400×240 e immagine 2856×2848 → zoom = 240/2848; vZoomBy('img', 1.25) moltiplica e resta in [0.05, 8]; dxf: dopo vFit percentuale = '100 %', vZoomBy oltre fit×50 si ferma a fit×50; vFit con clientWidth 0 non cambia lo stato.
  • test_dxf_recipe_routes.py (o simile): il template contiene i ref vpImg e vpDxf e due barre con vFit('img') / vFit('dxf').
  • Suite: uv run --python 3.13 --extra client --extra dev pytest src/frontend/flask_app/tests -q (se gli extra non bastano, usare quelli di pyproject.toml e scriverlo nel rapporto).

NON TOCCARE: zoom #104 della Prova, backend, vendor/visionsuite, scripts/ (pagina Acquisizione #111), logica di acquisizione/caricamento del wizard.
DEPLOY: PC fiera DESKTOP-RABEHJJ, file dxf_recipe_wizard.js e task_editor.html; template e statici Flask: verificare se serve riavvio (cache template Flask in produzione).

ESITO: richiesta (analisi passo 1, Opus 5.5 claude-opus-5-5) RIF: gitea:Adriano/TieMeasureFlow#83 (wizard), #104 (zoom già presente sull'immagine della Prova). Adriano 28/10/2026 in fiera: «metti zoom e fit anche su immagine acquisita o caricata e nell'anteprima del dxf sullo wizard del dxf compare». COSA: le due anteprime del wizard (immagine acquisita/caricata e disegno DXF, scatole 240 px in src/frontend/flask_app/templates/maker/task_editor.html ~righe 729-750) ricevono la stessa barra in sovrimpressione dell'immagine della Prova (#104, righe ~777-797): −, +, Adatta, percentuale; Ctrl+rotella = zoom; trascinamento = pan. Criterio di fatto: su entrambe le anteprime si ingrandisce, si sposta e Adatta torna a vedere tutto; la Prova (#104) si comporta come prima. FATTI (VERIFICATO leggendo il codice, ramo lavoro/daitarn-tmf-dxfcal ca6cd0c): - src/frontend/flask_app/static/js/dxf_recipe_wizard.js: zoom #104 = stato zoom/fitZoom/resPx, getter zoomPct/zoomW/zoomH/vpHeight/canPan/panCursor, metodi onPanDown/onPanMove/onPanEnd/zoomBy/fit/onWheel/onResultImgLoad, refs viewport/img/overlay. Tecnica: viewport overflow:auto, wrapper largo naturalW*zoom, img 100%. - Anteprima immagine: <img> con object-fit contain, height 240px; onImagePreviewLoad(el) legge imagePx {w,h}. - Anteprima DXF: <svg> con view-box.camel=dxfPreviewViewBox() (bbox + margine, unità mm), un solo <path> d=dxfPreviewD(), vector-effect non-scaling-stroke; dxfPreview impostato in loadDxfPreview(). - Test: src/frontend/flask_app/tests/js/test_dxf_preview.js (node, lanciato da test_dxf_preview_js.py), src/frontend/flask_app/tests/test_dxf_recipe_routes.py (stringhe del template). MODIFICHE: 1. JS (dxf_recipe_wizard.js): NON toccare lo zoom #104 (stato, getter, metodi, refs). Aggiungere uno zoom generico per chiave, per le due anteprime: stato viste = {img: {zoom:1, fit:1, w:0, h:0}, dxf: {zoom:1, fit:1, w:0, h:0}}; refs vpImg, vpDxf; metodi vZoomBy(k, f), vFit(k), vWheel(k, ev), vPanDown(k, ev), vPanMove(k, ev), vPanEnd(k), getter/metodi per larghezza/altezza del wrapper e per la percentuale. Centro visibile invariato nello zoom, come zoomBy #104. - img: w,h = pixel naturali (da onImagePreviewLoad); fit = min(vpW/w, 240/h); limiti zoom [0.05, 8]; percentuale = zoom×100 (pixel nativi, come #104). Fit al load dell'immagine (). - dxf: w,h = larghezza/altezza del viewBox (mm) trattate come px; fit = min(vpW/w, 240/h); limiti [fit×0.5, fit×50]; percentuale = zoom/fit×100 (100 % = Adatta). Fit quando arriva una nuova dxfPreview (). - Viewport nascosto o largo 0 al momento del fit: un ResizeObserver sul viewport rifà il fit finché la vista è ad Adatta (zoom == fit); niente fit se clientWidth == 0. - Cambio immagine o DXF: si torna ad Adatta. 2. Template (task_editor.html): le due scatole diventano: div.relative con barra (stesso markup e stile della barra #104, chiamate con la chiave) + viewport fisso 240 px, overflow:auto, touch-action:none, display:flex; wrapper interno margin:auto (centrato quando più piccolo, scorrevole per intero quando più grande) con width/height = w×zoom, h×zoom; img o svg width/height 100%. L'svg mantiene viewBox, preserveAspectRatio e path come ora. Barra visibile solo con contenuto (immagine caricata e non rotta; dxfPreview presente). Riepiloghi (imagePreviewSummary, dxfPreviewSummary) restano sotto. Commento #113 su ogni blocco nuovo. TEST: - tests/js/test_dxf_preview.js (o nuovo tests/js/test_dxf_zoom.js con wrapper pytest come test_dxf_preview_js.py): vFit('img') con vp 400×240 e immagine 2856×2848 → zoom = 240/2848; vZoomBy('img', 1.25) moltiplica e resta in [0.05, 8]; dxf: dopo vFit percentuale = '100 %', vZoomBy oltre fit×50 si ferma a fit×50; vFit con clientWidth 0 non cambia lo stato. - test_dxf_recipe_routes.py (o simile): il template contiene i ref vpImg e vpDxf e due barre con vFit('img') / vFit('dxf'). - Suite: uv run --python 3.13 --extra client --extra dev pytest src/frontend/flask_app/tests -q (se gli extra non bastano, usare quelli di pyproject.toml e scriverlo nel rapporto). NON TOCCARE: zoom #104 della Prova, backend, vendor/visionsuite, scripts/ (pagina Acquisizione #111), logica di acquisizione/caricamento del wizard. DEPLOY: PC fiera DESKTOP-RABEHJJ, file dxf_recipe_wizard.js e task_editor.html; template e statici Flask: verificare se serve riavvio (cache template Flask in produzione).
Adriano added the sviluppo label 2026-10-28 11:29:52 +00:00
Author
Owner

Soluzione

ESITO: fatto
COSA: anteprima immagine e anteprima DXF del wizard con barra −/+/Adatta/% in sovrimpressione, Ctrl+rotella, pan; zoom #104 della Prova invariato.
FILE: src/frontend/flask_app/static/js/dxf_recipe_wizard.js — views{img,dxf}, vSetContent/vReset/vFit/vZoomBy/vWheel/vPanDown/Move/End/vPct/vW/vH, ResizeObserver per Adatta; img 5-800 % pixel nativi, dxf 0,5-50× Adatta (45c9e6c, Sonnet)
FILE: src/frontend/flask_app/templates/maker/task_editor.html — viewport vpImg/vpDxf 240 px; correzioni revisione: style statico dentro :style (Alpine 3.15 :style stringa = setAttribute), x-show sul contenitore, altezza utile (04b81ad, Sonnet)
FILE: dxf_recipe_wizard.js vFit — area = offset meno bordi, non client*: Adatta premuto da ingrandito lasciava il contenuto 4 % più piccolo (198c6c6, Opus)
FILE: test: tests/js/test_dxf_zoom.js + test_dxf_zoom_js.py, test_dxf_recipe_routes.py
RAMO: lavoro/daitarn-tmf-dxfcal @ 198c6c6 (pushato)
PROVA: test_dxf_zoom_js + test_dxf_preview_js + test_dxf_recipe_routes → 36 passed; suite frontend 416 passed, 5 failed ZoneInfoNotFoundError Europe/Rome (tzdata Windows, non legati); check nuovo fallisce senza 198c6c6; browser (pagina di prova con tailwind.css del PC fiera, PNG 2464×2056 e DXF finto 40×20 mm): Adatta senza barre al load e dopo zoom, Ctrl+rotella ×1,25, pan, limiti 800 % / 5000 %
DEPLOY: DESKTOP-RABEHJJ 28/10/2026, backup C:\Tielogic\backup\pre-113, riavvio TMF 30 s, JS servito contiene vFit e offsetWidth
MANCA: PRESUNTO — template renderizzato non controllato dopo login (hash del file su disco verificato)

**Soluzione** ESITO: fatto COSA: anteprima immagine e anteprima DXF del wizard con barra −/+/Adatta/% in sovrimpressione, Ctrl+rotella, pan; zoom #104 della Prova invariato. FILE: src/frontend/flask_app/static/js/dxf_recipe_wizard.js — views{img,dxf}, vSetContent/vReset/vFit/vZoomBy/vWheel/vPanDown/Move/End/vPct/vW/vH, ResizeObserver per Adatta; img 5-800 % pixel nativi, dxf 0,5-50× Adatta (45c9e6c, Sonnet) FILE: src/frontend/flask_app/templates/maker/task_editor.html — viewport vpImg/vpDxf 240 px; correzioni revisione: style statico dentro :style (Alpine 3.15 :style stringa = setAttribute), x-show sul contenitore, altezza utile (04b81ad, Sonnet) FILE: dxf_recipe_wizard.js vFit — area = offset meno bordi, non client*: Adatta premuto da ingrandito lasciava il contenuto 4 % più piccolo (198c6c6, Opus) FILE: test: tests/js/test_dxf_zoom.js + test_dxf_zoom_js.py, test_dxf_recipe_routes.py RAMO: lavoro/daitarn-tmf-dxfcal @ 198c6c6 (pushato) PROVA: test_dxf_zoom_js + test_dxf_preview_js + test_dxf_recipe_routes → 36 passed; suite frontend 416 passed, 5 failed ZoneInfoNotFoundError Europe/Rome (tzdata Windows, non legati); check nuovo fallisce senza 198c6c6; browser (pagina di prova con tailwind.css del PC fiera, PNG 2464×2056 e DXF finto 40×20 mm): Adatta senza barre al load e dopo zoom, Ctrl+rotella ×1,25, pan, limiti 800 % / 5000 % DEPLOY: DESKTOP-RABEHJJ 28/10/2026, backup C:\Tielogic\backup\pre-113, riavvio TMF 30 s, JS servito contiene vFit e offsetWidth MANCA: PRESUNTO — template renderizzato non controllato dopo login (hash del file su disco verificato)
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Adriano/TieMeasureFlow#113