Maker: ritaglio di immagine e PDF prima dell'upload (#56)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/frontend/flask_app/static/js/image-crop.js

@@ -0,0 +1,293 @@
+/**
+ * image-crop.js — ritaglio di immagine/PDF prima dell'upload (#56).
+ *
+ * Cosa fa: ImageCrop.open(file) apre una modale con un rettangolo di ritaglio
+ *   trascinabile e ridimensionabile (mouse e touch, Pointer Events). Per un PDF
+ *   rasterizza la pagina scelta con pdf.js (>= 2000 px sul lato lungo).
+ *   Risolve: Blob PNG del ritaglio (a piena risoluzione) | il file originale
+ *   ("Usa originale") | null ("Annulla").
+ * Come si usa: ImageCrop.configure({pdfSrc, workerSrc, labels}) una volta dal
+ *   template (URL di vendor/pdf e stringhe tradotte), poi `await ImageCrop.open(file)`.
+ * Dipendenze: nessuna obbligatoria. pdf.js (gia' vendorizzato) viene caricato
+ *   al bisogno solo per i PDF; il ritaglio usa un canvas 2D semplice invece di
+ *   fabric.js perche' serve solo un rettangolo, non un editor di oggetti.
+ */
+(function (global) {
+  'use strict';
+
+  var cfg = {
+    pdfSrc: '',
+    workerSrc: '',
+    labels: {
+      title: 'Ritaglia immagine',
+      page: 'Pagina',
+      hint: 'Trascina il rettangolo o i suoi bordi per scegliere la zona da tenere.',
+      pdfNote: 'Un PDF ritagliato viene salvato come immagine PNG.',
+      confirm: 'Conferma ritaglio',
+      original: 'Usa originale',
+      cancel: 'Annulla',
+      loading: 'Caricamento...',
+      error: 'Impossibile aprire il file per il ritaglio.'
+    }
+  };
+
+  var MIN_SIDE = 16;       // lato minimo del ritaglio, in px immagine
+  var HANDLE = 12;         // raggio di presa delle maniglie, in px schermo
+  var PDF_MIN_LONG = 2000; // lato lungo minimo del raster PDF
+  var PDF_MAX_LONG = 6000; // tetto per non esaurire la memoria del canvas
+
+  function configure(opts) {
+    if (!opts) return;
+    if (opts.pdfSrc) cfg.pdfSrc = opts.pdfSrc;
+    if (opts.workerSrc) cfg.workerSrc = opts.workerSrc;
+    if (opts.labels) for (var k in opts.labels) cfg.labels[k] = opts.labels[k];
+  }
+
+  function isPdf(file) {
+    return file.type === 'application/pdf' || /\.pdf$/i.test(file.name || '');
+  }
+
+  function loadPdfJs() {
+    if (global.pdfjsLib) return Promise.resolve(global.pdfjsLib);
+    if (!cfg.pdfSrc) return Promise.reject(new Error('pdf.js non configurato'));
+    return new Promise(function (resolve, reject) {
+      var s = document.createElement('script');
+      s.src = cfg.pdfSrc;
+      s.onload = function () { resolve(global.pdfjsLib); };
+      s.onerror = function () { reject(new Error('pdf.js non caricato')); };
+      document.head.appendChild(s);
+    });
+  }
+
+  function readImage(file) {
+    return new Promise(function (resolve, reject) {
+      var url = URL.createObjectURL(file);
+      var img = new Image();
+      img.onload = function () { URL.revokeObjectURL(url); resolve(img); };
+      img.onerror = function () { URL.revokeObjectURL(url); reject(new Error('immagine illeggibile')); };
+      img.src = url;
+    });
+  }
+
+  function renderPdfPage(pdf, n) {
+    return pdf.getPage(n).then(function (page) {
+      var base = page.getViewport({ scale: 1 });
+      var long = Math.max(base.width, base.height);
+      var scale = Math.min(PDF_MAX_LONG / long, Math.max(2, PDF_MIN_LONG / long));
+      var vp = page.getViewport({ scale: scale });
+      var c = document.createElement('canvas');
+      c.width = Math.round(vp.width);
+      c.height = Math.round(vp.height);
+      return page.render({ canvasContext: c.getContext('2d'), viewport: vp }).promise
+        .then(function () { return c; });
+    });
+  }
+
+  function el(tag, cls, text) {
+    var e = document.createElement(tag);
+    if (cls) e.className = cls;
+    if (text) e.textContent = text;
+    return e;
+  }
+
+  function open(file) {
+    var L = cfg.labels;
+    return new Promise(function (resolve) {
+      var src = null;                 // Image o canvas sorgente a piena risoluzione
+      var rect = null;                // {x,y,w,h} in px immagine
+      var pdfDoc = null;
+      var closed = false;
+
+      // ---- DOM (stile Maker: variabili CSS del tema + classi btn gia' presenti) ----
+      var overlay = el('div', 'fixed inset-0 z-[100] flex items-center justify-center p-3 bg-black/60');
+      overlay.setAttribute('role', 'dialog');
+      overlay.setAttribute('aria-modal', 'true');
+      var box = el('div', 'rounded-xl shadow-xl flex flex-col w-full max-w-4xl max-h-full');
+      box.style.cssText = 'background:var(--bg-primary,#fff);color:var(--text-primary,#111);border:1px solid var(--border-color,#ddd);';
+      var head = el('div', 'flex items-center justify-between gap-3 px-4 py-3');
+      head.appendChild(el('h3', 'font-semibold text-sm', L.title));
+      var pageWrap = el('label', 'text-xs items-center gap-2');
+      pageWrap.style.display = 'none';
+      pageWrap.appendChild(document.createTextNode(L.page + ' '));
+      var pageSel = el('select', 'tmf-input text-xs');
+      pageSel.style.width = 'auto';
+      pageWrap.appendChild(pageSel);
+      head.appendChild(pageWrap);
+      var body = el('div', 'px-4 flex-1 min-h-0 overflow-auto flex justify-center');
+      var status = el('p', 'text-xs py-6', L.loading);
+      body.appendChild(status);
+      var canvas = el('canvas');
+      canvas.style.cssText = 'max-width:100%;max-height:65vh;touch-action:none;cursor:crosshair;display:none;';
+      body.appendChild(canvas);
+      var foot = el('div', 'px-4 py-3 flex flex-wrap items-center justify-between gap-2');
+      var note = el('p', 'text-xs');
+      note.style.color = 'var(--text-muted,#666)';
+      note.textContent = L.hint + (isPdf(file) ? ' ' + L.pdfNote : '');
+      var btns = el('div', 'flex gap-2');
+      var bCancel = el('button', 'btn btn-secondary text-xs', L.cancel);
+      var bOrig = el('button', 'btn btn-secondary text-xs', L.original);
+      var bOk = el('button', 'btn btn-primary text-xs', L.confirm);
+      [bCancel, bOrig, bOk].forEach(function (b) { b.type = 'button'; btns.appendChild(b); });
+      bOk.disabled = true;
+      foot.appendChild(note);
+      foot.appendChild(btns);
+      box.appendChild(head); box.appendChild(body); box.appendChild(foot);
+      overlay.appendChild(box);
+      document.body.appendChild(overlay);
+
+      function onKey(e) { if (e.key === 'Escape') finish(null); }
+      function finish(value) {
+        if (closed) return;
+        closed = true;
+        document.removeEventListener('keydown', onKey);
+        overlay.remove();
+        resolve(value);
+      }
+      document.addEventListener('keydown', onKey);
+      bCancel.onclick = function () { finish(null); };
+      bOrig.onclick = function () { finish(file); };
+      bOk.onclick = function () {
+        if (!src || !rect) return;
+        var out = document.createElement('canvas');
+        out.width = Math.round(rect.w);
+        out.height = Math.round(rect.h);
+        out.getContext('2d').drawImage(src, Math.round(rect.x), Math.round(rect.y),
+          out.width, out.height, 0, 0, out.width, out.height);
+        out.toBlob(function (blob) { finish(blob || file); }, 'image/png');
+      };
+
+      // ---- disegno ----
+      function sw() { return src.width || src.naturalWidth; }
+      function sh() { return src.height || src.naturalHeight; }
+      function handlePoints(r) {
+        var mx = r.x + r.w / 2, my = r.y + r.h / 2, ex = r.x + r.w, ey = r.y + r.h;
+        return [
+          { n: 'nw', x: r.x, y: r.y }, { n: 'n', x: mx, y: r.y }, { n: 'ne', x: ex, y: r.y },
+          { n: 'e', x: ex, y: my }, { n: 'se', x: ex, y: ey }, { n: 's', x: mx, y: ey },
+          { n: 'sw', x: r.x, y: ey }, { n: 'w', x: r.x, y: my }
+        ];
+      }
+      function draw() {
+        var ctx = canvas.getContext('2d');
+        ctx.drawImage(src, 0, 0, canvas.width, canvas.height);
+        var r = rect;   // il canvas di visualizzazione ha la risoluzione della sorgente
+        // velo scuro fuori dal ritaglio (4 fasce)
+        ctx.fillStyle = 'rgba(0,0,0,0.5)';
+        ctx.fillRect(0, 0, canvas.width, r.y);
+        ctx.fillRect(0, r.y + r.h, canvas.width, canvas.height - r.y - r.h);
+        ctx.fillRect(0, r.y, r.x, r.h);
+        ctx.fillRect(r.x + r.w, r.y, canvas.width - r.x - r.w, r.h);
+        ctx.strokeStyle = '#3b82f6';
+        ctx.lineWidth = Math.max(2, canvas.width / 400);
+        ctx.strokeRect(r.x, r.y, r.w, r.h);
+        ctx.fillStyle = '#3b82f6';
+        var hs = Math.max(8, canvas.width / 80);
+        handlePoints(r).forEach(function (p) { ctx.fillRect(p.x - hs / 2, p.y - hs / 2, hs, hs); });
+      }
+      function setSource(s) {
+        src = s;
+        canvas.width = sw();
+        canvas.height = sh();
+        rect = { x: 0, y: 0, w: sw(), h: sh() };   // all'inizio: tutta l'immagine
+        status.style.display = 'none';
+        canvas.style.display = 'block';
+        bOk.disabled = false;
+        draw();
+      }
+
+      // ---- interazione ----
+      var drag = null;
+      function toImg(e) {
+        var b = canvas.getBoundingClientRect();
+        return { x: (e.clientX - b.left) * sw() / b.width, y: (e.clientY - b.top) * sh() / b.height,
+                 k: sw() / b.width };   // k = px immagine per px schermo
+      }
+      function hit(p) {
+        var best = null, bd = HANDLE * p.k;
+        handlePoints(rect).forEach(function (h) {
+          var d = Math.max(Math.abs(h.x - p.x), Math.abs(h.y - p.y));
+          if (d <= bd) { bd = d; best = h.n; }
+        });
+        if (best) return best;
+        if (p.x > rect.x && p.x < rect.x + rect.w && p.y > rect.y && p.y < rect.y + rect.h) return 'move';
+        return 'new';
+      }
+      function clamp(v, a, b) { return Math.max(a, Math.min(b, v)); }
+      canvas.addEventListener('pointerdown', function (e) {
+        if (!src) return;
+        var p = toImg(e);
+        var mode = hit(p);
+        drag = { mode: mode, sx: p.x, sy: p.y, r0: { x: rect.x, y: rect.y, w: rect.w, h: rect.h } };
+        if (mode === 'new') {   // nuovo rettangolo: parte dal punto di tocco
+          drag.r0 = { x: clamp(p.x, 0, sw()), y: clamp(p.y, 0, sh()), w: 0, h: 0 };
+        }
+        canvas.setPointerCapture(e.pointerId);
+        e.preventDefault();
+      });
+      canvas.addEventListener('pointermove', function (e) {
+        if (!src) return;
+        var p = toImg(e);
+        if (!drag) {
+          var m = hit(p);
+          canvas.style.cursor = m === 'move' ? 'move' : m === 'new' ? 'crosshair'
+            : (m.length === 2 ? (m === 'nw' || m === 'se' ? 'nwse-resize' : 'nesw-resize')
+                              : (m === 'n' || m === 's' ? 'ns-resize' : 'ew-resize'));
+          return;
+        }
+        var dx = p.x - drag.sx, dy = p.y - drag.sy, r0 = drag.r0, W = sw(), H = sh();
+        if (drag.mode === 'move') {
+          rect.x = clamp(r0.x + dx, 0, W - r0.w);
+          rect.y = clamp(r0.y + dy, 0, H - r0.h);
+        } else {
+          var x1 = r0.x, y1 = r0.y, x2 = r0.x + r0.w, y2 = r0.y + r0.h, m2 = drag.mode;
+          if (m2 === 'new') { x2 = clamp(p.x, 0, W); y2 = clamp(p.y, 0, H); }
+          else {
+            if (m2.indexOf('w') >= 0) x1 = clamp(r0.x + dx, 0, x2 - MIN_SIDE);
+            if (m2.indexOf('e') >= 0) x2 = clamp(x2 + dx, x1 + MIN_SIDE, W);
+            if (m2.indexOf('n') >= 0) y1 = clamp(r0.y + dy, 0, y2 - MIN_SIDE);
+            if (m2.indexOf('s') >= 0) y2 = clamp(y2 + dy, y1 + MIN_SIDE, H);
+          }
+          rect = { x: Math.min(x1, x2), y: Math.min(y1, y2), w: Math.abs(x2 - x1), h: Math.abs(y2 - y1) };
+        }
+        bOk.disabled = rect.w < MIN_SIDE || rect.h < MIN_SIDE;   // ritaglio troppo piccolo: non confermabile
+        draw();
+        e.preventDefault();
+      });
+      function up() { drag = null; }
+      canvas.addEventListener('pointerup', up);
+      canvas.addEventListener('pointercancel', up);
+
+      // ---- caricamento sorgente ----
+      function fail(err) {
+        console.error('ImageCrop:', err);
+        status.style.display = '';
+        status.textContent = L.error;
+        canvas.style.display = 'none';
+        bOk.disabled = true;
+      }
+      if (isPdf(file)) {
+        loadPdfJs().then(function (lib) {
+          if (cfg.workerSrc) lib.GlobalWorkerOptions.workerSrc = cfg.workerSrc;
+          return file.arrayBuffer().then(function (buf) { return lib.getDocument({ data: buf }).promise; });
+        }).then(function (pdf) {
+          pdfDoc = pdf;
+          if (pdf.numPages > 1) {
+            for (var i = 1; i <= pdf.numPages; i++) {
+              var o = el('option', '', String(i)); o.value = String(i); pageSel.appendChild(o);
+            }
+            pageWrap.style.display = 'flex';
+          }
+          return renderPdfPage(pdf, 1);
+        }).then(setSource).catch(fail);
+        pageSel.onchange = function () {
+          bOk.disabled = true;
+          renderPdfPage(pdfDoc, parseInt(pageSel.value, 10)).then(setSource).catch(fail);
+        };
+      } else {
+        readImage(file).then(setSource).catch(fail);
+      }
+    });
+  }
+
+  global.ImageCrop = { open: open, configure: configure };
+})(window);

src/frontend/flask_app/templates/maker/recipe_editor.html

@@ -503,6 +503,32 @@
 {% endblock %}
 
 {% block extra_js %}
+<script src="{{ url_for('static', filename='js/image-crop.js') }}"></script>
+<script>
+// #56: stringhe e percorsi per il ritaglio prima dell'upload
+ImageCrop.configure({
+  pdfSrc: '{{ url_for('static', filename='vendor/pdf-3.11.174.min.js') }}',
+  workerSrc: '{{ url_for('static', filename='vendor/pdf.worker-3.11.174.min.js') }}',
+  labels: {
+    title: {{ _('Ritaglia immagine')|tojson }},
+    page: {{ _('Pagina')|tojson }},
+    hint: {{ _('Trascina il rettangolo o i suoi bordi per scegliere la zona da tenere.')|tojson }},
+    pdfNote: {{ _('Un PDF ritagliato viene salvato come immagine PNG.')|tojson }},
+    confirm: {{ _('Conferma ritaglio')|tojson }},
+    original: {{ _('Usa originale')|tojson }},
+    cancel: {{ _('Annulla')|tojson }},
+    loading: {{ _('Caricamento...')|tojson }},
+    error: {{ _('Impossibile aprire il file per il ritaglio.')|tojson }}
+  }
+});
+// #56: apre la modale di ritaglio; null = annullato, altrimenti il file da caricare
+async function tmfCropBeforeUpload(file) {
+  const res = await ImageCrop.open(file);
+  if (res === null || res === file) return res;
+  const base = (file.name || 'file').replace(/\.[^.]+$/, '');
+  return new File([res], base + '-ritaglio.png', { type: 'image/png' });
+}
+</script>
 <script>
 function recipeEditor() {
   return {
@@ -672,6 +698,10 @@ function recipeEditor() {
         return;
       }
 
+      // #56: scelta di ritaglio (immagine/PDF) prima dell'upload; senza ritaglio il file resta invariato
+      file = await tmfCropBeforeUpload(file);
+      if (!file) return;
+
       this.uploadingFile = true;
       this.errorMessage = '';
 

src/frontend/flask_app/templates/maker/task_editor.html

@@ -1162,6 +1162,32 @@
 <script src="{{ url_for('static', filename='vendor/pdf-3.11.174.min.js') }}"></script>
 <script>if(typeof pdfjsLib!=='undefined')pdfjsLib.GlobalWorkerOptions.workerSrc='{{ url_for('static', filename='vendor/pdf.worker-3.11.174.min.js') }}';</script>
 <script src="{{ url_for('static', filename='js/annotation-viewer.js') }}?v=6"></script>
+<script src="{{ url_for('static', filename='js/image-crop.js') }}"></script>
+<script>
+// #56: stringhe e percorsi per il ritaglio prima dell'upload
+ImageCrop.configure({
+  pdfSrc: '{{ url_for('static', filename='vendor/pdf-3.11.174.min.js') }}',
+  workerSrc: '{{ url_for('static', filename='vendor/pdf.worker-3.11.174.min.js') }}',
+  labels: {
+    title: {{ _('Ritaglia immagine')|tojson }},
+    page: {{ _('Pagina')|tojson }},
+    hint: {{ _('Trascina il rettangolo o i suoi bordi per scegliere la zona da tenere.')|tojson }},
+    pdfNote: {{ _('Un PDF ritagliato viene salvato come immagine PNG.')|tojson }},
+    confirm: {{ _('Conferma ritaglio')|tojson }},
+    original: {{ _('Usa originale')|tojson }},
+    cancel: {{ _('Annulla')|tojson }},
+    loading: {{ _('Caricamento...')|tojson }},
+    error: {{ _('Impossibile aprire il file per il ritaglio.')|tojson }}
+  }
+});
+// #56: apre la modale di ritaglio; null = annullato, altrimenti il file da caricare
+async function tmfCropBeforeUpload(file) {
+  const res = await ImageCrop.open(file);
+  if (res === null || res === file) return res;
+  const base = (file.name || 'file').replace(/\.[^.]+$/, '');
+  return new File([res], base + '-ritaglio.png', { type: 'image/png' });
+}
+</script>
 <script>
 // Force reload when page is restored from browser bfcache (back/forward navigation).
 // This ensures fresh data is displayed after editing annotations in task_drawing.
@@ -1887,6 +1913,10 @@ function taskEditor() {
         return;
       }
 
+      // #56: scelta di ritaglio (immagine/PDF) prima dell'upload; senza ritaglio il file resta invariato
+      file = await tmfCropBeforeUpload(file);
+      if (!file) return;
+
       this.saving = true;
       this.errorMessage = '';
 

src/frontend/flask_app/tests/test_maker.py

@@ -240,3 +240,30 @@ class TestTaskEditorVisionUi:
         assert "visionRecipe(" in html
         assert "vision_output" in html
         assert "js/vision_recipe.js" in html
+
+
+class TestImageCropInclusion:
+    """#56: i due editor includono image-crop.js e agganciano il ritaglio all'upload."""
+
+    def test_task_editor_includes_crop(self, logged_in_client, mock_api_client):
+        from tests.conftest import api_get_router
+
+        mock_api_client.get.side_effect = api_get_router({
+            "/api/recipes/3": {"id": 3, "code": "R", "name": "R"},
+            "/api/recipes/3/tasks": [{
+                "id": 11, "title": "T", "task_type": "measure", "subtasks": [],
+                "file_path": None, "order_index": 1,
+            }],
+        })
+        html = logged_in_client.get("/maker/recipes/3/tasks").get_data(as_text=True)
+        assert "js/image-crop.js" in html
+        assert "tmfCropBeforeUpload(file)" in html
+
+    def test_recipe_editor_includes_crop(self, logged_in_client, mock_api_client):
+        mock_api_client.get.side_effect = [
+            {"id": 1, "code": "REC-001", "name": "Recipe A"},
+            [{"version_number": 1, "is_current": True}],
+        ]
+        html = logged_in_client.get("/maker/recipes/1/edit").get_data(as_text=True)
+        assert "js/image-crop.js" in html
+        assert "tmfCropBeforeUpload(file)" in html