maker: zoom in sovrimpressione, pan col puntatore e viewport che segue l'immagine (Refs #104)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Jbf7qKuxsnAVjxthRy7dnB

src/frontend/flask_app/tests/js/test_dxf_preview.js

@@ -163,7 +163,7 @@ const PREVIEW = {
   check('#104 fit limitato dalla larghezza', Math.abs(w5.zoom - 0.25) < 1e-9, String(w5.zoom));
   w5.$refs.img = { naturalWidth: 1000, naturalHeight: 2000 };
   w5.fit();
-  check('#104 fit limitato dall altezza', Math.abs(w5.zoom - 0.2) < 1e-9, String(w5.zoom));
+  check('#104 fit limitato dall altezza massima (520 senza window)', Math.abs(w5.zoom - 0.26) < 1e-9, String(w5.zoom));
   w5.$refs.viewport.clientWidth = 0; w5.zoom = 1; w5.fit();
   check('#104 fit con viewport nascosto non cambia', w5.zoom === 1);
 
@@ -267,6 +267,35 @@ const PREVIEW = {
   await w11.run(true);
   check('#105 dopo Salva: existing letto e non ricompilato', w11.existing && w11.existing.band_mm === 0.3 && w11._existingApplied === true);
 
+  // #104: pan col puntatore
+  const wpan = dxfRecipeWizard(1, () => 'tok', {});
+  const vppan = { scrollLeft: 100, scrollTop: 100, clientWidth: 500, clientHeight: 400, setPointerCapture() {} };
+  wpan.$refs = { viewport: vppan };
+  wpan.onPanDown({ clientX: 200, clientY: 200, pointerId: 1, pointerType: 'mouse', button: 0 });
+  wpan.onPanMove({ clientX: 170, clientY: 180 });
+  check('#104 pan: pointermove (-30,-20) -> scroll +30/+20', vppan.scrollLeft === 130 && vppan.scrollTop === 120, vppan.scrollLeft + ',' + vppan.scrollTop);
+  check('#104 pan: grabbing durante il trascinamento', wpan.panning === true);
+  wpan.onPanEnd();
+  wpan.onPanMove({ clientX: 0, clientY: 0 });
+  check('#104 pan: dopo pointerup non scrolla', vppan.scrollLeft === 130 && wpan.panning === false);
+  wpan.onPanDown({ clientX: 0, clientY: 0, pointerId: 1, pointerType: 'mouse', button: 2 });
+  check('#104 pan: il tasto destro non parte', wpan.panning === false);
+
+  // #104: altezza del viewport
+  global.window = { innerHeight: 1000 }; // max = min(700, 520) = 520
+  wpan.resPx = { w: 2000, h: 1000 };
+  wpan.$refs = { viewport: { clientWidth: 500, scrollLeft: 0, scrollTop: 0 }, img: { naturalWidth: 2000, naturalHeight: 1000 } };
+  wpan.fit(); // zoom = min(500/2000, 520/1000) = 0.25
+  check('#104 fit usa l altezza massima', Math.abs(wpan.zoom - 0.25) < 1e-9 && wpan.fitZoom === wpan.zoom, String(wpan.zoom));
+  check('#104 altezza a Fit = immagine scalata', wpan.vpHeight === 250 && wpan.canPan === false, String(wpan.vpHeight)); // zoomH = 250
+  wpan.resPx = { w: 2000, h: 400 }; // zoomH = 100 -> minimo 200
+  check('#104 altezza minima 200', wpan.vpHeight === 200, String(wpan.vpHeight));
+  wpan.zoom = 1;
+  check('#104 con zoom > Adatta altezza massima e pan attivo', wpan.vpHeight === 520 && wpan.canPan === true && wpan.panCursor === 'grab');
+  global.window = { innerHeight: 500 }; // 70vh = 350
+  check('#104 altezza massima = 70vh se minore di 520', wpan.vpHeight === 350, String(wpan.vpHeight));
+  delete global.window;
+
   if (failures) { console.log(failures + ' fallimenti'); process.exit(1); }
   console.log('tutto ok');
 })();

src/frontend/flask_app/tests/test_dxf_recipe_routes.py

@@ -354,6 +354,7 @@ class TestPages:
         assert 'x-model="mmPx"' in html  # #98: campo mm/px a mano
         assert "dxfPreviewD()" in html and "view-box.camel" in html  # #101: anteprima SVG del DXF
         assert "imageSource === 'file'" in html and "zoomBy(" in html and "fit()" in html  # #104: mm/px solo da file, zoom e Fit
+        assert 'onPanDown($event)' in html  # #104: pan col puntatore
         assert "imagePreviewUrl" in html and "imagePreviewSummary" in html  # #102: anteprima immagine
         assert "existing ? msgs.editLabel : msgs.createLabel" in html and "Modifica ricetta da DXF" in html  # #105: etichetta dinamica
         assert "Pezzo scuro su fondo chiaro" in html or "Dark part on light" in html