feat: per-task image/annotations, annotation editor toolbar, Tailwind compiled
- Add per-task file upload with image preview in task editor - Add dedicated annotation editor page (task_drawing.html) with Fabric.js - Add color picker, stroke width, and line dash controls to annotation toolbar - Apply property changes to selected objects in real-time - Disable style controls until a drawing tool or object is selected - Remove zoom/pan from annotation toolbar (simplified UX) - Auto-switch to select mode after placing annotation elements - Show annotation overlay on task image previews (read-only canvas) - Add file proxy route in measure blueprint for task file access - Add file_path/file_type fields to TaskCreate/TaskUpdate Pydantic schemas - Replace Tailwind CDN with compiled CSS (tailwind.config.js with full shades) - Fix Alpine.js x-init crash: extract annotations JSON to <script> tags (recipe_preview.html, task_execute.html) to avoid HTML attribute breakage Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Adriano
@@ -107,6 +107,30 @@ def task_editor(recipe_id: int):
|
||||
return render_template("maker/task_editor.html", recipe=recipe)
|
||||
|
||||
|
||||
@maker_bp.route("/recipes/<int:recipe_id>/tasks/<int:task_id>/drawing")
|
||||
@login_required
|
||||
@role_required("Maker")
|
||||
def task_drawing(recipe_id: int, task_id: int):
|
||||
"""Annotation editor for a specific task."""
|
||||
# Load recipe for breadcrumb context
|
||||
recipe_resp = api_client.get(f"/api/recipes/{recipe_id}")
|
||||
if recipe_resp.get("error"):
|
||||
flash(_("Errore nel caricamento della ricetta: %(error)s", error=recipe_resp.get("detail", "")), "error")
|
||||
return redirect(url_for("maker.recipe_list"))
|
||||
|
||||
# Load task details
|
||||
task_resp = api_client.get(f"/api/tasks/{task_id}")
|
||||
if task_resp.get("error"):
|
||||
flash(_("Task non trovato: %(error)s", error=task_resp.get("detail", "")), "error")
|
||||
return redirect(url_for("maker.task_editor", recipe_id=recipe_id))
|
||||
|
||||
return render_template(
|
||||
"maker/task_drawing.html",
|
||||
recipe=recipe_resp,
|
||||
task=task_resp,
|
||||
)
|
||||
|
||||
|
||||
@maker_bp.route("/recipes/<int:recipe_id>/preview")
|
||||
@login_required
|
||||
@role_required("Maker")
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
"""MeasurementTec blueprint - recipe selection and measurement execution."""
|
||||
import requests as http_requests
|
||||
|
||||
from flask import (
|
||||
Blueprint, flash, jsonify, redirect, render_template,
|
||||
Blueprint, Response, flash, jsonify, redirect, render_template,
|
||||
request, session, url_for,
|
||||
)
|
||||
from flask_babel import gettext as _
|
||||
|
||||
from blueprints.auth import login_required, role_required
|
||||
from config import Config
|
||||
from services.api_client import api_client
|
||||
|
||||
measure_bp = Blueprint("measure", __name__)
|
||||
@@ -272,3 +275,25 @@ def save_measurement():
|
||||
}), status_code if status_code >= 400 else 500
|
||||
|
||||
return jsonify(resp), 201
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Route: File proxy (browser can't send X-API-Key directly)
|
||||
# ---------------------------------------------------------------------------
|
||||
@measure_bp.route("/api/files/<path:file_path>", methods=["GET"])
|
||||
@login_required
|
||||
def api_get_file(file_path: str):
|
||||
"""Proxy: Serve file from API server (browser can't send X-API-Key)."""
|
||||
api_key = session.get("api_key", "")
|
||||
base_url = Config.API_SERVER_URL.rstrip("/")
|
||||
resp = http_requests.get(
|
||||
f"{base_url}/api/files/{file_path}",
|
||||
headers={"X-API-Key": api_key},
|
||||
timeout=30,
|
||||
)
|
||||
if resp.status_code != 200:
|
||||
return Response(resp.text, status=resp.status_code)
|
||||
return Response(
|
||||
resp.content,
|
||||
content_type=resp.headers.get("content-type", "application/octet-stream"),
|
||||
)
|
||||
|
||||
@@ -52,21 +52,27 @@ function annotationEditor() {
|
||||
/** @type {HTMLCanvasElement|null} */
|
||||
canvasEl: null,
|
||||
|
||||
/** Current interaction mode: 'select' | 'marker' | 'arrow' | 'rect' | 'pan' */
|
||||
/** Current interaction mode: 'select' | 'marker' | 'arrow' | 'rect' */
|
||||
activeMode: 'select',
|
||||
|
||||
/** Next auto-assigned marker number */
|
||||
nextMarkerNumber: 1,
|
||||
|
||||
/** Current zoom level (1 = 100%) */
|
||||
zoomLevel: 1,
|
||||
|
||||
/** Whether a background image has been loaded */
|
||||
imageLoaded: false,
|
||||
|
||||
/** Whether the canvas has unsaved changes */
|
||||
isDirty: false,
|
||||
|
||||
/** Current color for new annotations */
|
||||
currentColor: '#2563EB',
|
||||
|
||||
/** Current stroke width for arrows and rectangles */
|
||||
currentStrokeWidth: 2,
|
||||
|
||||
/** Current line dash pattern: [] = solid, [5,3] = dashed, [2,2] = dotted */
|
||||
currentLineDash: [],
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
// Initialization
|
||||
// ----------------------------------------------------------------
|
||||
@@ -82,11 +88,21 @@ function annotationEditor() {
|
||||
return;
|
||||
}
|
||||
|
||||
this.canvas = new fabric.Canvas(this.canvasEl, {
|
||||
selection: true,
|
||||
preserveObjectStacking: true,
|
||||
backgroundColor: '#f1f5f9',
|
||||
});
|
||||
if (typeof fabric === 'undefined') {
|
||||
console.error('AnnotationEditor: Fabric.js not loaded');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.canvas = new fabric.Canvas(this.canvasEl, {
|
||||
selection: true,
|
||||
preserveObjectStacking: true,
|
||||
backgroundColor: '#f1f5f9',
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('AnnotationEditor: failed to create canvas:', err);
|
||||
return;
|
||||
}
|
||||
|
||||
this.setupEvents();
|
||||
this.setupKeyboard();
|
||||
@@ -109,19 +125,76 @@ function annotationEditor() {
|
||||
};
|
||||
window.addEventListener('anno-delete-selected', this._onDeleteSelected);
|
||||
|
||||
this._onZoom = function (e) {
|
||||
if (e.detail && e.detail.delta > 0) {
|
||||
self.zoomIn();
|
||||
} else {
|
||||
self.zoomOut();
|
||||
this._onColorChange = function (e) {
|
||||
if (e.detail && e.detail.color) {
|
||||
self.currentColor = e.detail.color;
|
||||
// Update selected object
|
||||
var active = self.canvas ? self.canvas.getActiveObject() : null;
|
||||
if (active) {
|
||||
if (active.objectType === 'marker') {
|
||||
var items = active.getObjects();
|
||||
if (items[0]) items[0].set('fill', e.detail.color);
|
||||
active.markerColor = e.detail.color;
|
||||
} else if (active.objectType === 'arrow') {
|
||||
var items = active.getObjects();
|
||||
if (items[0]) items[0].set('stroke', e.detail.color);
|
||||
if (items[1]) items[1].set('fill', e.detail.color);
|
||||
active.arrowColor = e.detail.color;
|
||||
} else if (active.objectType === 'area') {
|
||||
active.set('stroke', e.detail.color);
|
||||
active.areaColor = e.detail.color;
|
||||
}
|
||||
self.canvas.renderAll();
|
||||
self.isDirty = true;
|
||||
window.dispatchEvent(new CustomEvent('annotations-changed', { detail: { json: self.getAnnotationsJson() } }));
|
||||
}
|
||||
}
|
||||
};
|
||||
window.addEventListener('anno-zoom', this._onZoom);
|
||||
window.addEventListener('anno-color-change', this._onColorChange);
|
||||
|
||||
this._onZoomReset = function () {
|
||||
self.resetZoom();
|
||||
this._onStrokeWidthChange = function (e) {
|
||||
if (e.detail && e.detail.width) {
|
||||
self.currentStrokeWidth = e.detail.width;
|
||||
var active = self.canvas ? self.canvas.getActiveObject() : null;
|
||||
if (active) {
|
||||
if (active.objectType === 'arrow') {
|
||||
var items = active.getObjects();
|
||||
if (items[0]) items[0].set('strokeWidth', e.detail.width);
|
||||
if (items[1]) items[1].set({ width: 8 + e.detail.width * 2, height: 8 + e.detail.width * 2 });
|
||||
active.arrowStrokeWidth = e.detail.width;
|
||||
} else if (active.objectType === 'area') {
|
||||
active.set('strokeWidth', e.detail.width);
|
||||
active.areaStrokeWidth = e.detail.width;
|
||||
}
|
||||
self.canvas.renderAll();
|
||||
self.isDirty = true;
|
||||
window.dispatchEvent(new CustomEvent('annotations-changed', { detail: { json: self.getAnnotationsJson() } }));
|
||||
}
|
||||
}
|
||||
};
|
||||
window.addEventListener('anno-zoom-reset', this._onZoomReset);
|
||||
window.addEventListener('anno-stroke-width-change', this._onStrokeWidthChange);
|
||||
|
||||
this._onLineDashChange = function (e) {
|
||||
if (e.detail) {
|
||||
self.currentLineDash = e.detail.dash || [];
|
||||
var active = self.canvas ? self.canvas.getActiveObject() : null;
|
||||
if (active) {
|
||||
var dashArr = self.currentLineDash.length > 0 ? self.currentLineDash.slice() : null;
|
||||
if (active.objectType === 'arrow') {
|
||||
var items = active.getObjects();
|
||||
if (items[0]) items[0].set('strokeDashArray', dashArr);
|
||||
active.arrowLineDash = self.currentLineDash.slice();
|
||||
} else if (active.objectType === 'area') {
|
||||
active.set('strokeDashArray', dashArr);
|
||||
active.areaLineDash = self.currentLineDash.slice();
|
||||
}
|
||||
self.canvas.renderAll();
|
||||
self.isDirty = true;
|
||||
window.dispatchEvent(new CustomEvent('annotations-changed', { detail: { json: self.getAnnotationsJson() } }));
|
||||
}
|
||||
}
|
||||
};
|
||||
window.addEventListener('anno-line-dash-change', this._onLineDashChange);
|
||||
|
||||
this._onImageLoaded = function (e) {
|
||||
if (e.detail && e.detail.path) {
|
||||
@@ -307,7 +380,7 @@ function annotationEditor() {
|
||||
|
||||
var circle = new fabric.Circle({
|
||||
radius: 16,
|
||||
fill: '#2563EB',
|
||||
fill: this.currentColor,
|
||||
originX: 'center',
|
||||
originY: 'center',
|
||||
stroke: '#ffffff',
|
||||
@@ -334,6 +407,7 @@ function annotationEditor() {
|
||||
// Custom properties
|
||||
objectType: 'marker',
|
||||
markerNumber: markerNumber,
|
||||
markerColor: this.currentColor,
|
||||
});
|
||||
|
||||
this.canvas.add(marker);
|
||||
@@ -358,8 +432,9 @@ function annotationEditor() {
|
||||
*/
|
||||
addArrow(x1, y1, x2, y2) {
|
||||
var line = new fabric.Line([x1, y1, x2, y2], {
|
||||
stroke: '#DC2626',
|
||||
strokeWidth: 2,
|
||||
stroke: this.currentColor,
|
||||
strokeWidth: this.currentStrokeWidth,
|
||||
strokeDashArray: this.currentLineDash.length > 0 ? this.currentLineDash.slice() : null,
|
||||
originX: 'center',
|
||||
originY: 'center',
|
||||
});
|
||||
@@ -371,9 +446,9 @@ function annotationEditor() {
|
||||
top: y2,
|
||||
originX: 'center',
|
||||
originY: 'center',
|
||||
width: 12,
|
||||
height: 12,
|
||||
fill: '#DC2626',
|
||||
width: 8 + this.currentStrokeWidth * 2,
|
||||
height: 8 + this.currentStrokeWidth * 2,
|
||||
fill: this.currentColor,
|
||||
angle: angle + 90,
|
||||
});
|
||||
|
||||
@@ -385,6 +460,9 @@ function annotationEditor() {
|
||||
arrowY1: y1,
|
||||
arrowX2: x2,
|
||||
arrowY2: y2,
|
||||
arrowColor: this.currentColor,
|
||||
arrowStrokeWidth: this.currentStrokeWidth,
|
||||
arrowLineDash: this.currentLineDash.slice(),
|
||||
});
|
||||
|
||||
this.canvas.add(arrow);
|
||||
@@ -412,12 +490,15 @@ function annotationEditor() {
|
||||
top: y,
|
||||
width: width || 150,
|
||||
height: height || 100,
|
||||
fill: 'rgba(37, 99, 235, 0.1)',
|
||||
stroke: '#2563EB',
|
||||
strokeWidth: 2,
|
||||
strokeDashArray: [5, 3],
|
||||
fill: 'rgba(0, 0, 0, 0)',
|
||||
stroke: this.currentColor,
|
||||
strokeWidth: this.currentStrokeWidth,
|
||||
strokeDashArray: this.currentLineDash.length > 0 ? this.currentLineDash.slice() : null,
|
||||
selectable: true,
|
||||
objectType: 'area',
|
||||
areaColor: this.currentColor,
|
||||
areaStrokeWidth: this.currentStrokeWidth,
|
||||
areaLineDash: this.currentLineDash.slice(),
|
||||
});
|
||||
|
||||
this.canvas.add(rect);
|
||||
@@ -433,7 +514,7 @@ function annotationEditor() {
|
||||
/**
|
||||
* Set the current interaction mode.
|
||||
*
|
||||
* @param {'select'|'marker'|'arrow'|'rect'|'pan'} mode
|
||||
* @param {'select'|'marker'|'arrow'|'rect'} mode
|
||||
*/
|
||||
setMode(mode) {
|
||||
this.activeMode = mode;
|
||||
@@ -444,12 +525,6 @@ function annotationEditor() {
|
||||
this.canvas.forEachObject(function (o) {
|
||||
o.selectable = true;
|
||||
});
|
||||
} else if (mode === 'pan') {
|
||||
this.canvas.selection = false;
|
||||
this.canvas.defaultCursor = 'grab';
|
||||
this.canvas.forEachObject(function (o) {
|
||||
o.selectable = false;
|
||||
});
|
||||
} else {
|
||||
// marker, arrow, rect
|
||||
this.canvas.selection = false;
|
||||
@@ -465,8 +540,7 @@ function annotationEditor() {
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Wire up all Fabric.js mouse events for drawing, panning, selection,
|
||||
* and zoom.
|
||||
* Wire up all Fabric.js mouse events for drawing and selection.
|
||||
*/
|
||||
setupEvents() {
|
||||
var self = this;
|
||||
@@ -475,9 +549,6 @@ function annotationEditor() {
|
||||
var drawStartY = 0;
|
||||
var tempRect = null;
|
||||
var tempLine = null;
|
||||
var isPanning = false;
|
||||
var lastPanX = 0;
|
||||
var lastPanY = 0;
|
||||
|
||||
// ---- mouse:down ----
|
||||
|
||||
@@ -487,6 +558,7 @@ function annotationEditor() {
|
||||
if (self.activeMode === 'marker') {
|
||||
self.addMarker(pointer.x, pointer.y);
|
||||
self.setMode('select');
|
||||
window.dispatchEvent(new CustomEvent('anno-mode-changed', { detail: { mode: 'select' } }));
|
||||
} else if (self.activeMode === 'arrow') {
|
||||
isDrawing = true;
|
||||
drawStartX = pointer.x;
|
||||
@@ -523,27 +595,12 @@ function annotationEditor() {
|
||||
objectType: '_temp',
|
||||
});
|
||||
self.canvas.add(tempRect);
|
||||
} else if (self.activeMode === 'pan') {
|
||||
isPanning = true;
|
||||
lastPanX = opt.e.clientX;
|
||||
lastPanY = opt.e.clientY;
|
||||
self.canvas.defaultCursor = 'grabbing';
|
||||
}
|
||||
});
|
||||
|
||||
// ---- mouse:move ----
|
||||
|
||||
this.canvas.on('mouse:move', function (opt) {
|
||||
if (isPanning) {
|
||||
var vpt = self.canvas.viewportTransform;
|
||||
vpt[4] += opt.e.clientX - lastPanX;
|
||||
vpt[5] += opt.e.clientY - lastPanY;
|
||||
lastPanX = opt.e.clientX;
|
||||
lastPanY = opt.e.clientY;
|
||||
self.canvas.requestRenderAll();
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isDrawing) return;
|
||||
var pointer = self.canvas.getPointer(opt.e);
|
||||
|
||||
@@ -595,18 +652,16 @@ function annotationEditor() {
|
||||
|
||||
isDrawing = false;
|
||||
self.setMode('select');
|
||||
}
|
||||
|
||||
if (isPanning) {
|
||||
isPanning = false;
|
||||
self.canvas.defaultCursor = 'grab';
|
||||
window.dispatchEvent(new CustomEvent('anno-mode-changed', { detail: { mode: 'select' } }));
|
||||
}
|
||||
});
|
||||
|
||||
// ---- Selection events ----
|
||||
|
||||
this.canvas.on('selection:created', function (e) {
|
||||
window.dispatchEvent(new CustomEvent('annotation-selected', { detail: { selected: true } }));
|
||||
var sel = e.selected && e.selected[0];
|
||||
var objType = sel ? sel.objectType : null;
|
||||
window.dispatchEvent(new CustomEvent('annotation-selected', { detail: { selected: true, objectType: objType } }));
|
||||
var selected = e.selected;
|
||||
if (selected && selected.length === 1 && selected[0].objectType === 'marker') {
|
||||
window.dispatchEvent(new CustomEvent('marker-selected', {
|
||||
@@ -616,7 +671,9 @@ function annotationEditor() {
|
||||
});
|
||||
|
||||
this.canvas.on('selection:updated', function (e) {
|
||||
window.dispatchEvent(new CustomEvent('annotation-selected', { detail: { selected: true } }));
|
||||
var sel = e.selected && e.selected[0];
|
||||
var objType = sel ? sel.objectType : null;
|
||||
window.dispatchEvent(new CustomEvent('annotation-selected', { detail: { selected: true, objectType: objType } }));
|
||||
var selected = e.selected;
|
||||
if (selected && selected.length === 1 && selected[0].objectType === 'marker') {
|
||||
window.dispatchEvent(new CustomEvent('marker-selected', {
|
||||
@@ -642,21 +699,6 @@ function annotationEditor() {
|
||||
window.dispatchEvent(new CustomEvent('annotations-changed', { detail: { json: self.getAnnotationsJson() } }));
|
||||
});
|
||||
|
||||
// ---- Zoom with mouse wheel ----
|
||||
|
||||
this.canvas.on('mouse:wheel', function (opt) {
|
||||
var delta = opt.e.deltaY;
|
||||
var zoom = self.canvas.getZoom();
|
||||
zoom *= Math.pow(0.999, delta);
|
||||
zoom = Math.max(0.25, Math.min(5, zoom));
|
||||
self.canvas.zoomToPoint(
|
||||
{ x: opt.e.offsetX, y: opt.e.offsetY },
|
||||
zoom
|
||||
);
|
||||
self.zoomLevel = zoom;
|
||||
opt.e.preventDefault();
|
||||
opt.e.stopPropagation();
|
||||
});
|
||||
},
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
@@ -728,37 +770,6 @@ function annotationEditor() {
|
||||
this.canvas.renderAll();
|
||||
},
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
// Zoom controls
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Zoom in by 20%.
|
||||
*/
|
||||
zoomIn() {
|
||||
var zoom = Math.min(this.canvas.getZoom() * 1.2, 5);
|
||||
this.canvas.setZoom(zoom);
|
||||
this.zoomLevel = zoom;
|
||||
},
|
||||
|
||||
/**
|
||||
* Zoom out by 20%.
|
||||
*/
|
||||
zoomOut() {
|
||||
var zoom = Math.max(this.canvas.getZoom() / 1.2, 0.25);
|
||||
this.canvas.setZoom(zoom);
|
||||
this.zoomLevel = zoom;
|
||||
},
|
||||
|
||||
/**
|
||||
* Reset zoom and pan to default (1:1, origin at top-left).
|
||||
*/
|
||||
resetZoom() {
|
||||
this.canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
|
||||
this.canvas.setZoom(1);
|
||||
this.zoomLevel = 1;
|
||||
},
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
// Canvas sizing
|
||||
// ----------------------------------------------------------------
|
||||
@@ -811,6 +822,15 @@ function annotationEditor() {
|
||||
markerNumber: obj.markerNumber || null,
|
||||
};
|
||||
|
||||
// Color and stroke width
|
||||
if (obj.markerColor) data.fill = obj.markerColor;
|
||||
if (obj.arrowColor) data.stroke = obj.arrowColor;
|
||||
if (obj.areaColor) data.stroke = obj.areaColor;
|
||||
if (obj.arrowStrokeWidth) data.strokeWidth = obj.arrowStrokeWidth;
|
||||
if (obj.areaStrokeWidth) data.strokeWidth = obj.areaStrokeWidth;
|
||||
if (obj.arrowLineDash) data.lineDash = obj.arrowLineDash;
|
||||
if (obj.areaLineDash) data.lineDash = obj.areaLineDash;
|
||||
|
||||
// Arrow-specific: store original endpoints
|
||||
if (obj.objectType === 'arrow') {
|
||||
data.x1 = obj.arrowX1 != null ? Math.round(obj.arrowX1 * 100) / 100 : null;
|
||||
@@ -860,18 +880,41 @@ function annotationEditor() {
|
||||
var obj = objects[i];
|
||||
|
||||
if (obj.type === 'marker') {
|
||||
var savedColor = this.currentColor;
|
||||
if (obj.fill) this.currentColor = obj.fill;
|
||||
this.addMarker(obj.left, obj.top, obj.markerNumber);
|
||||
this.currentColor = savedColor;
|
||||
} else if (obj.type === 'arrow') {
|
||||
var savedColor2 = this.currentColor;
|
||||
var savedWidth = this.currentStrokeWidth;
|
||||
var savedDash = this.currentLineDash.slice();
|
||||
if (obj.stroke) this.currentColor = obj.stroke;
|
||||
if (obj.strokeWidth) this.currentStrokeWidth = obj.strokeWidth;
|
||||
if (obj.lineDash) this.currentLineDash = obj.lineDash;
|
||||
else this.currentLineDash = [];
|
||||
// Reconstruct arrow from stored endpoints or from position/size
|
||||
var x1 = obj.x1 != null ? obj.x1 : obj.left;
|
||||
var y1 = obj.y1 != null ? obj.y1 : obj.top;
|
||||
var x2 = obj.x2 != null ? obj.x2 : obj.left + (obj.width || 100);
|
||||
var y2 = obj.y2 != null ? obj.y2 : obj.top + (obj.height || 50);
|
||||
this.addArrow(x1, y1, x2, y2);
|
||||
this.currentColor = savedColor2;
|
||||
this.currentStrokeWidth = savedWidth;
|
||||
this.currentLineDash = savedDash;
|
||||
} else if (obj.type === 'area') {
|
||||
var savedColor3 = this.currentColor;
|
||||
var savedWidth2 = this.currentStrokeWidth;
|
||||
var savedDash2 = this.currentLineDash.slice();
|
||||
if (obj.stroke) this.currentColor = obj.stroke;
|
||||
if (obj.strokeWidth) this.currentStrokeWidth = obj.strokeWidth;
|
||||
if (obj.lineDash) this.currentLineDash = obj.lineDash;
|
||||
else this.currentLineDash = [];
|
||||
var w = (obj.width || 150) * (obj.scaleX || 1);
|
||||
var h = (obj.height || 100) * (obj.scaleY || 1);
|
||||
this.addRect(obj.left, obj.top, w, h);
|
||||
this.currentColor = savedColor3;
|
||||
this.currentStrokeWidth = savedWidth2;
|
||||
this.currentLineDash = savedDash2;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -959,11 +1002,14 @@ function annotationEditor() {
|
||||
if (this._onDeleteSelected) {
|
||||
window.removeEventListener('anno-delete-selected', this._onDeleteSelected);
|
||||
}
|
||||
if (this._onZoom) {
|
||||
window.removeEventListener('anno-zoom', this._onZoom);
|
||||
if (this._onColorChange) {
|
||||
window.removeEventListener('anno-color-change', this._onColorChange);
|
||||
}
|
||||
if (this._onZoomReset) {
|
||||
window.removeEventListener('anno-zoom-reset', this._onZoomReset);
|
||||
if (this._onStrokeWidthChange) {
|
||||
window.removeEventListener('anno-stroke-width-change', this._onStrokeWidthChange);
|
||||
}
|
||||
if (this._onLineDashChange) {
|
||||
window.removeEventListener('anno-line-dash-change', this._onLineDashChange);
|
||||
}
|
||||
if (this._onImageLoaded) {
|
||||
window.removeEventListener('image-loaded', this._onImageLoaded);
|
||||
|
||||
@@ -314,3 +314,197 @@ function annotationViewer() {
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Standalone function to render an image with annotations overlay.
|
||||
* For use in read-only previews (e.g. task cards) without Alpine.js.
|
||||
*
|
||||
* @param {HTMLCanvasElement} canvas - the canvas element to draw on
|
||||
* @param {string} imageUrl - URL of the image to load
|
||||
* @param {Object|string|null} annotationsJson - annotations data from the editor
|
||||
* @param {Object} [options] - optional settings
|
||||
* @param {number} [options.maxHeight=192] - max canvas height in pixels
|
||||
*/
|
||||
function renderAnnotationPreview(canvas, imageUrl, annotationsJson, options) {
|
||||
if (!canvas || !imageUrl) return;
|
||||
|
||||
var opts = options || {};
|
||||
var maxHeight = opts.maxHeight || 192;
|
||||
var ctx = canvas.getContext('2d');
|
||||
|
||||
var annotations = null;
|
||||
if (annotationsJson) {
|
||||
try {
|
||||
annotations = (typeof annotationsJson === 'string')
|
||||
? JSON.parse(annotationsJson)
|
||||
: annotationsJson;
|
||||
} catch (e) {
|
||||
console.error('renderAnnotationPreview: invalid annotations JSON');
|
||||
}
|
||||
}
|
||||
|
||||
var isPdf = imageUrl.toLowerCase().replace(/\?.*$/, '').endsWith('.pdf');
|
||||
|
||||
if (isPdf && typeof pdfjsLib !== 'undefined') {
|
||||
pdfjsLib.getDocument(imageUrl).promise.then(function (pdf) {
|
||||
return pdf.getPage(1);
|
||||
}).then(function (page) {
|
||||
var viewport = page.getViewport({ scale: 2 });
|
||||
var offCanvas = document.createElement('canvas');
|
||||
offCanvas.width = viewport.width;
|
||||
offCanvas.height = viewport.height;
|
||||
var offCtx = offCanvas.getContext('2d');
|
||||
page.render({ canvasContext: offCtx, viewport: viewport }).promise.then(function () {
|
||||
_drawPreview(canvas, ctx, offCanvas, viewport.width, viewport.height, annotations, maxHeight);
|
||||
});
|
||||
}).catch(function (err) {
|
||||
console.error('renderAnnotationPreview: PDF load failed:', err);
|
||||
});
|
||||
} else {
|
||||
var img = new Image();
|
||||
img.crossOrigin = 'anonymous';
|
||||
img.onload = function () {
|
||||
_drawPreview(canvas, ctx, img, img.width, img.height, annotations, maxHeight);
|
||||
};
|
||||
img.onerror = function () {
|
||||
console.error('renderAnnotationPreview: image load failed:', imageUrl);
|
||||
};
|
||||
img.src = imageUrl;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Internal: draw image + annotations on canvas, scaled to fit.
|
||||
*/
|
||||
function _drawPreview(canvas, ctx, source, srcW, srcH, annotations, maxHeight) {
|
||||
var container = canvas.parentElement;
|
||||
var containerWidth = container ? container.clientWidth : 400;
|
||||
var scale = Math.min(containerWidth / srcW, maxHeight / srcH, 1);
|
||||
|
||||
canvas.width = Math.round(srcW * scale);
|
||||
canvas.height = Math.round(srcH * scale);
|
||||
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.drawImage(source, 0, 0, canvas.width, canvas.height);
|
||||
|
||||
if (annotations && annotations.objects) {
|
||||
var annoScale = canvas.width / (annotations.width || srcW);
|
||||
_drawEditorAnnotations(ctx, annotations, annoScale);
|
||||
} else if (annotations && annotations.markers) {
|
||||
_drawLegacyAnnotations(ctx, annotations, scale);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Draw annotations in the editor format (objects: marker/arrow/area).
|
||||
*/
|
||||
function _drawEditorAnnotations(ctx, data, scale) {
|
||||
var objects = data.objects || [];
|
||||
|
||||
// Calculate annotation scale: annotations were placed on a canvas of
|
||||
// data.width x data.height, but we're drawing on a scaled canvas.
|
||||
// The image was scaled to fit data.width x data.height in the editor,
|
||||
// and now we scale again for preview. Use overall scale factor.
|
||||
var annoScale = scale;
|
||||
|
||||
for (var i = 0; i < objects.length; i++) {
|
||||
var obj = objects[i];
|
||||
|
||||
if (obj.type === 'marker') {
|
||||
_drawPreviewMarker(ctx, obj, annoScale);
|
||||
} else if (obj.type === 'arrow') {
|
||||
_drawPreviewArrow(ctx, obj, annoScale);
|
||||
} else if (obj.type === 'area') {
|
||||
_drawPreviewArea(ctx, obj, annoScale);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function _drawPreviewMarker(ctx, obj, scale) {
|
||||
var x = obj.left * scale;
|
||||
var y = obj.top * scale;
|
||||
var color = obj.fill || '#2563EB';
|
||||
var radius = 14 * Math.min(scale, 1);
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, radius, 0, Math.PI * 2);
|
||||
ctx.fillStyle = color;
|
||||
ctx.globalAlpha = 0.85;
|
||||
ctx.fill();
|
||||
ctx.globalAlpha = 1;
|
||||
|
||||
ctx.strokeStyle = '#ffffff';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.stroke();
|
||||
|
||||
if (obj.markerNumber) {
|
||||
ctx.fillStyle = '#ffffff';
|
||||
ctx.font = 'bold ' + Math.max(10, Math.round(12 * Math.min(scale, 1))) + 'px Inter, sans-serif';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.fillText(obj.markerNumber.toString(), x, y);
|
||||
}
|
||||
}
|
||||
|
||||
function _drawPreviewArrow(ctx, obj, scale) {
|
||||
var x1 = (obj.x1 != null ? obj.x1 : obj.left) * scale;
|
||||
var y1 = (obj.y1 != null ? obj.y1 : obj.top) * scale;
|
||||
var x2 = (obj.x2 != null ? obj.x2 : (obj.left + (obj.width || 100))) * scale;
|
||||
var y2 = (obj.y2 != null ? obj.y2 : (obj.top + (obj.height || 50))) * scale;
|
||||
var color = obj.stroke || '#DC2626';
|
||||
var lineWidth = obj.strokeWidth || 2;
|
||||
|
||||
var lineDash = obj.lineDash || [];
|
||||
ctx.setLineDash(lineDash);
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x1, y1);
|
||||
ctx.lineTo(x2, y2);
|
||||
ctx.strokeStyle = color;
|
||||
ctx.lineWidth = lineWidth;
|
||||
ctx.stroke();
|
||||
|
||||
ctx.setLineDash([]);
|
||||
|
||||
// Arrowhead
|
||||
var angle = Math.atan2(y2 - y1, x2 - x1);
|
||||
var headLen = 8 + lineWidth * 2;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x2, y2);
|
||||
ctx.lineTo(x2 - headLen * Math.cos(angle - Math.PI / 6), y2 - headLen * Math.sin(angle - Math.PI / 6));
|
||||
ctx.lineTo(x2 - headLen * Math.cos(angle + Math.PI / 6), y2 - headLen * Math.sin(angle + Math.PI / 6));
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = color;
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
function _drawPreviewArea(ctx, obj, scale) {
|
||||
var x = obj.left * scale;
|
||||
var y = obj.top * scale;
|
||||
var w = (obj.width || 150) * (obj.scaleX || 1) * scale;
|
||||
var h = (obj.height || 100) * (obj.scaleY || 1) * scale;
|
||||
var color = obj.stroke || '#2563EB';
|
||||
var lineWidth = obj.strokeWidth || 2;
|
||||
|
||||
var lineDash = obj.lineDash || [5, 3];
|
||||
ctx.strokeStyle = color;
|
||||
ctx.lineWidth = lineWidth;
|
||||
ctx.setLineDash(lineDash);
|
||||
ctx.strokeRect(x, y, w, h);
|
||||
ctx.setLineDash([]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Draw annotations in the legacy format (markers: point/rectangle).
|
||||
*/
|
||||
function _drawLegacyAnnotations(ctx, data, scale) {
|
||||
var markers = data.markers || [];
|
||||
for (var i = 0; i < markers.length; i++) {
|
||||
var m = markers[i];
|
||||
if (m.type === 'point') {
|
||||
_drawPreviewMarker(ctx, { left: m.x, top: m.y, markerNumber: m.marker_number, fill: '#64748B' }, scale);
|
||||
} else if (m.type === 'rectangle') {
|
||||
_drawPreviewArea(ctx, { left: m.x, top: m.y, width: m.width, height: m.height, stroke: '#64748B' }, scale);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,11 +12,31 @@ module.exports = {
|
||||
DEFAULT: '#2563EB',
|
||||
dark: '#1E40AF',
|
||||
light: '#3B82F6',
|
||||
50: '#EFF6FF',
|
||||
100: '#DBEAFE',
|
||||
200: '#BFDBFE',
|
||||
300: '#93C5FD',
|
||||
400: '#60A5FA',
|
||||
500: '#3B82F6',
|
||||
600: '#2563EB',
|
||||
700: '#1D4ED8',
|
||||
800: '#1E40AF',
|
||||
900: '#1E3A8A',
|
||||
},
|
||||
steel: {
|
||||
DEFAULT: '#64748B',
|
||||
light: '#94A3B8',
|
||||
dark: '#475569',
|
||||
50: '#F8FAFC',
|
||||
100: '#F1F5F9',
|
||||
200: '#E2E8F0',
|
||||
300: '#CBD5E1',
|
||||
400: '#94A3B8',
|
||||
500: '#64748B',
|
||||
600: '#475569',
|
||||
700: '#334155',
|
||||
800: '#1E293B',
|
||||
900: '#0F172A',
|
||||
},
|
||||
measure: {
|
||||
pass: '#059669',
|
||||
|
||||
@@ -18,56 +18,8 @@
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- TailwindCSS CDN -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: {
|
||||
DEFAULT: '#2563EB',
|
||||
dark: '#1E40AF',
|
||||
light: '#3B82F6',
|
||||
50: '#EFF6FF',
|
||||
100: '#DBEAFE',
|
||||
200: '#BFDBFE',
|
||||
500: '#3B82F6',
|
||||
600: '#2563EB',
|
||||
700: '#1D4ED8',
|
||||
800: '#1E40AF',
|
||||
900: '#1E3A8A',
|
||||
},
|
||||
steel: {
|
||||
DEFAULT: '#64748B',
|
||||
light: '#94A3B8',
|
||||
dark: '#475569',
|
||||
50: '#F8FAFC',
|
||||
100: '#F1F5F9',
|
||||
200: '#E2E8F0',
|
||||
300: '#CBD5E1',
|
||||
400: '#94A3B8',
|
||||
500: '#64748B',
|
||||
600: '#475569',
|
||||
700: '#334155',
|
||||
800: '#1E293B',
|
||||
900: '#0F172A',
|
||||
},
|
||||
measure: {
|
||||
pass: '#059669',
|
||||
warning: '#D97706',
|
||||
fail: '#DC2626',
|
||||
},
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
|
||||
mono: ['JetBrains Mono', 'ui-monospace', 'monospace'],
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<!-- TailwindCSS (compiled) -->
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/tailwind.css') }}">
|
||||
|
||||
<!-- Theme CSS Variables -->
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/themes.css') }}">
|
||||
|
||||
@@ -10,7 +10,6 @@
|
||||
|
||||
{% block extra_head %}
|
||||
<style>
|
||||
/* Drag-and-drop overlay */
|
||||
.drop-zone {
|
||||
border: 2px dashed var(--border-color);
|
||||
border-radius: 0.75rem;
|
||||
@@ -23,50 +22,6 @@
|
||||
.dark .drop-zone.drag-over {
|
||||
background-color: rgba(59, 130, 246, 0.08);
|
||||
}
|
||||
|
||||
/* Annotation toolbar button */
|
||||
.anno-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.375rem 0.625rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--bg-card);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.anno-btn:hover {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
border-color: var(--text-muted);
|
||||
}
|
||||
.anno-btn.active {
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
.anno-btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Canvas container */
|
||||
.canvas-container {
|
||||
position: relative;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
min-height: 400px;
|
||||
}
|
||||
.canvas-container canvas {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
@@ -131,7 +86,7 @@
|
||||
<p class="text-sm text-[var(--text-secondary)]" x-text="name"></p>
|
||||
{% else %}
|
||||
<p class="text-sm text-[var(--text-secondary)]">
|
||||
{{ _('Compila i dati della ricetta e carica il disegno tecnico') }}
|
||||
{{ _('Compila i dati della ricetta') }}
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -281,7 +236,7 @@
|
||||
</div>
|
||||
|
||||
<!-- ============================================================
|
||||
2. Card: Upload / Annotazioni (Canvas Fabric.js)
|
||||
2. Card: Immagine Anteprima (thumbnail ricetta)
|
||||
============================================================ -->
|
||||
<div class="tmf-card mb-6">
|
||||
<div class="tmf-card-header flex items-center justify-between">
|
||||
@@ -290,151 +245,36 @@
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
{{ _('Disegno Tecnico e Annotazioni') }}
|
||||
{{ _('Immagine Anteprima') }}
|
||||
</div>
|
||||
<!-- File indicator -->
|
||||
<template x-if="currentFilePath">
|
||||
<span class="badge badge-pass text-xs">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
{{ _('Immagine caricata') }}
|
||||
</span>
|
||||
</template>
|
||||
<span x-show="currentFilePath" class="badge badge-pass text-xs">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
{{ _('Immagine caricata') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="tmf-card-body space-y-4">
|
||||
|
||||
<!-- Annotation Toolbar -->
|
||||
<!-- Current image preview -->
|
||||
<div x-show="currentFilePath"
|
||||
x-transition
|
||||
class="flex flex-wrap items-center gap-1.5 p-2 rounded-lg bg-[var(--bg-secondary)] border border-[var(--border-color)]">
|
||||
|
||||
<!-- Select Tool -->
|
||||
<button type="button"
|
||||
class="anno-btn"
|
||||
:class="{ 'active': annoTool === 'select' }"
|
||||
@click="setAnnoTool('select')"
|
||||
title="{{ _('Seleziona') }}">
|
||||
class="relative rounded-lg overflow-hidden bg-[var(--bg-secondary)] border border-[var(--border-color)]">
|
||||
<img x-bind:src="currentFilePath ? ('/maker/api/files/' + currentFilePath) : ''"
|
||||
class="block mx-auto max-h-64 object-contain p-2"
|
||||
loading="lazy">
|
||||
<!-- Remove button -->
|
||||
<button @click.stop="currentFilePath = ''"
|
||||
type="button"
|
||||
class="absolute top-2 right-2 p-1.5 rounded-full bg-red-500/80 hover:bg-red-600 text-white transition-colors"
|
||||
title="{{ _('Rimuovi immagine') }}">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 15l-2 5L9 9l11 4-5 2z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
<span class="hidden sm:inline">{{ _('Seleziona') }}</span>
|
||||
</button>
|
||||
|
||||
<!-- Marker Tool -->
|
||||
<button type="button"
|
||||
class="anno-btn"
|
||||
:class="{ 'active': annoTool === 'marker' }"
|
||||
@click="setAnnoTool('marker')"
|
||||
title="{{ _('Marker numerato') }}">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
<span class="hidden sm:inline">{{ _('Marker') }} #</span>
|
||||
</button>
|
||||
|
||||
<!-- Arrow Tool -->
|
||||
<button type="button"
|
||||
class="anno-btn"
|
||||
:class="{ 'active': annoTool === 'arrow' }"
|
||||
@click="setAnnoTool('arrow')"
|
||||
title="{{ _('Freccia') }}">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M17 8l4 4m0 0l-4 4m4-4H3"/>
|
||||
</svg>
|
||||
<span class="hidden sm:inline">{{ _('Freccia') }}</span>
|
||||
</button>
|
||||
|
||||
<!-- Rectangle Tool -->
|
||||
<button type="button"
|
||||
class="anno-btn"
|
||||
:class="{ 'active': annoTool === 'rect' }"
|
||||
@click="setAnnoTool('rect')"
|
||||
title="{{ _('Rettangolo') }}">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
|
||||
</svg>
|
||||
<span class="hidden sm:inline">{{ _('Rettangolo') }}</span>
|
||||
</button>
|
||||
|
||||
<!-- Separator -->
|
||||
<div class="w-px h-6 bg-[var(--border-color)] mx-1"></div>
|
||||
|
||||
<!-- Delete -->
|
||||
<button type="button"
|
||||
class="anno-btn text-red-500 hover:text-red-600"
|
||||
@click="deleteAnnotation()"
|
||||
:disabled="!annoSelected"
|
||||
title="{{ _('Elimina selezionato') }}">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
|
||||
</svg>
|
||||
<span class="hidden sm:inline">{{ _('Elimina') }}</span>
|
||||
</button>
|
||||
|
||||
<!-- Separator -->
|
||||
<div class="w-px h-6 bg-[var(--border-color)] mx-1"></div>
|
||||
|
||||
<!-- Zoom Controls -->
|
||||
<span class="text-xs text-[var(--text-muted)] hidden sm:inline mr-1">{{ _('Zoom') }}:</span>
|
||||
<button type="button"
|
||||
class="anno-btn"
|
||||
@click="zoomCanvas(-0.1)"
|
||||
title="{{ _('Zoom indietro') }}">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button type="button"
|
||||
class="anno-btn"
|
||||
@click="zoomCanvas(0.1)"
|
||||
title="{{ _('Zoom avanti') }}">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button type="button"
|
||||
class="anno-btn"
|
||||
@click="resetZoom()"
|
||||
title="{{ _('Reset zoom') }}">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Separator -->
|
||||
<div class="w-px h-6 bg-[var(--border-color)] mx-1"></div>
|
||||
|
||||
<!-- Pan Mode -->
|
||||
<button type="button"
|
||||
class="anno-btn"
|
||||
:class="{ 'active': annoTool === 'pan' }"
|
||||
@click="setAnnoTool('pan')"
|
||||
title="{{ _('Trascina') }}">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M7 11.5V14m0-2.5v-6a1.5 1.5 0 113 0m-3 6a1.5 1.5 0 00-3 0v2a7.5 7.5 0 0015 0v-5a1.5 1.5 0 00-3 0m-6-2V11m0-5.5v-1a1.5 1.5 0 013 0v1m0 0V11m0-5.5a1.5 1.5 0 013 0v3m0 0V11"/>
|
||||
</svg>
|
||||
<span class="hidden sm:inline">{{ _('Pan') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Canvas Area (shown when image loaded) -->
|
||||
<div x-show="currentFilePath"
|
||||
x-transition
|
||||
x-data="annotationEditor()"
|
||||
class="canvas-container"
|
||||
id="annotationCanvasContainer">
|
||||
<canvas id="annotationCanvas" x-ref="fabricCanvas"></canvas>
|
||||
</div>
|
||||
|
||||
<!-- Drop Zone (always visible for uploading/replacing) -->
|
||||
<!-- Upload area -->
|
||||
<div class="drop-zone p-6 text-center cursor-pointer relative"
|
||||
:class="{ 'drag-over': dragOver }"
|
||||
@dragover.prevent="dragOver = true"
|
||||
@@ -449,40 +289,37 @@
|
||||
class="hidden">
|
||||
|
||||
<!-- Uploading spinner -->
|
||||
<template x-if="uploadingFile">
|
||||
<div class="flex flex-col items-center gap-3 py-4">
|
||||
<svg class="w-8 h-8 animate-spin text-primary" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
|
||||
</svg>
|
||||
<p class="text-sm text-[var(--text-secondary)]">{{ _('Caricamento in corso...') }}</p>
|
||||
</div>
|
||||
</template>
|
||||
<div x-show="uploadingFile" class="flex flex-col items-center gap-3 py-4">
|
||||
<svg class="w-8 h-8 animate-spin text-primary" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
|
||||
</svg>
|
||||
<span class="text-sm text-[var(--text-secondary)]">{{ _('Caricamento in corso...') }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Upload prompt -->
|
||||
<template x-if="!uploadingFile">
|
||||
<div class="flex flex-col items-center gap-3 py-4">
|
||||
<div class="w-12 h-12 rounded-full bg-primary-50 dark:bg-primary-900/30 flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-[var(--text-primary)]">
|
||||
<template x-if="!currentFilePath">
|
||||
<span>{{ _('Trascina qui il disegno tecnico oppure clicca per selezionare') }}</span>
|
||||
</template>
|
||||
<template x-if="currentFilePath">
|
||||
<span>{{ _('Trascina qui per sostituire il disegno tecnico') }}</span>
|
||||
</template>
|
||||
</p>
|
||||
<p class="text-xs text-[var(--text-muted)] mt-1">
|
||||
{{ _('Formati supportati: PNG, JPG, PDF') }}
|
||||
</p>
|
||||
</div>
|
||||
<div x-show="!uploadingFile" class="flex flex-col items-center gap-3 py-4">
|
||||
<div class="w-12 h-12 rounded-full bg-primary-50 dark:bg-primary-900/30 flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
<div class="text-center">
|
||||
<span x-show="!currentFilePath" class="inline-block px-4 py-2 rounded-lg bg-primary text-white text-sm font-semibold mb-2">
|
||||
{{ _('Carica Immagine o PDF') }}
|
||||
</span>
|
||||
<span x-show="currentFilePath" class="inline-block px-4 py-2 rounded-lg bg-[var(--bg-tertiary)] text-[var(--text-primary)] text-sm font-semibold mb-2 border border-[var(--border-color)]">
|
||||
{{ _('Sostituisci Immagine') }}
|
||||
</span>
|
||||
<p class="text-xs text-[var(--text-muted)]">
|
||||
{{ _('Trascina qui oppure clicca. Formati: PNG, JPG, WebP, PDF (max 50MB)') }}
|
||||
</p>
|
||||
<p class="text-xs text-[var(--text-muted)] mt-1">
|
||||
{{ _('Usata come thumbnail nella lista ricette') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -549,7 +386,7 @@
|
||||
{% endif %}
|
||||
|
||||
<!-- ============================================================
|
||||
4. Footer Action Buttons
|
||||
3. Footer Action Buttons
|
||||
============================================================ -->
|
||||
<div class="flex flex-col sm:flex-row items-center gap-3 pt-4 pb-8">
|
||||
<button @click="saveRecipe()"
|
||||
@@ -579,12 +416,6 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
|
||||
<script>
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
|
||||
</script>
|
||||
<script src="{{ url_for('static', filename='js/annotation-editor.js') }}?v=5"></script>
|
||||
<script>
|
||||
function recipeEditor() {
|
||||
return {
|
||||
@@ -598,16 +429,6 @@ function recipeEditor() {
|
||||
description: {{ (recipe.description if recipe and recipe.description else '')|tojson }},
|
||||
changeNotes: '',
|
||||
|
||||
// ---- File upload ----
|
||||
currentFilePath: {{ (recipe.current_version.tasks[0].file_path if recipe and recipe.current_version and recipe.current_version.tasks and recipe.current_version.tasks|length > 0 else None)|tojson }},
|
||||
uploadingFile: false,
|
||||
dragOver: false,
|
||||
|
||||
// ---- Annotation state (managed by annotation-editor.js) ----
|
||||
annotationsJson: {{ (recipe.current_version.tasks[0].annotations_json if recipe and recipe.current_version and recipe.current_version.tasks and recipe.current_version.tasks|length > 0 and recipe.current_version.tasks[0].annotations_json else None)|tojson }},
|
||||
annoTool: 'select',
|
||||
annoSelected: false,
|
||||
|
||||
// ---- Save state ----
|
||||
saving: false,
|
||||
saved: false,
|
||||
@@ -617,20 +438,10 @@ function recipeEditor() {
|
||||
versions: {{ (recipe.versions if recipe and recipe.versions else [])|tojson }},
|
||||
currentVersion: {{ (recipe.current_version.version_number if recipe and recipe.current_version else 0)|tojson }},
|
||||
|
||||
// ============================================================
|
||||
// Init
|
||||
// ============================================================
|
||||
init() {
|
||||
// Listen for annotation selection events from annotation-editor.js
|
||||
window.addEventListener('annotation-selected', (e) => {
|
||||
this.annoSelected = e.detail.selected;
|
||||
});
|
||||
|
||||
// Listen for annotation data changes
|
||||
window.addEventListener('annotations-changed', (e) => {
|
||||
this.annotationsJson = e.detail.json;
|
||||
});
|
||||
},
|
||||
// ---- File upload (thumbnail) ----
|
||||
currentFilePath: {{ (recipe.current_version.tasks[0].file_path if recipe and recipe.current_version and recipe.current_version.tasks and recipe.current_version.tasks|length > 0 and recipe.current_version.tasks[0].file_path else '')|tojson }},
|
||||
uploadingFile: false,
|
||||
dragOver: false,
|
||||
|
||||
// ============================================================
|
||||
// Save Recipe
|
||||
@@ -648,23 +459,16 @@ function recipeEditor() {
|
||||
description: this.description.trim(),
|
||||
};
|
||||
|
||||
// Include file_path for thumbnail
|
||||
if (this.currentFilePath) {
|
||||
payload.file_path = this.currentFilePath;
|
||||
}
|
||||
|
||||
// Include change notes if editing
|
||||
if (!this.isNew && this.changeNotes.trim()) {
|
||||
payload.change_notes = this.changeNotes.trim();
|
||||
}
|
||||
|
||||
// Include annotations if available (may be a JSON string or an object)
|
||||
if (this.annotationsJson) {
|
||||
payload.annotations_json = (typeof this.annotationsJson === 'string')
|
||||
? JSON.parse(this.annotationsJson)
|
||||
: this.annotationsJson;
|
||||
}
|
||||
|
||||
// Include file path if uploaded
|
||||
if (this.currentFilePath) {
|
||||
payload.file_path = this.currentFilePath;
|
||||
}
|
||||
|
||||
const url = this.isNew
|
||||
? '/maker/api/recipes'
|
||||
: '/maker/api/recipes/' + this.recipeId;
|
||||
@@ -683,7 +487,7 @@ function recipeEditor() {
|
||||
const data = await resp.json();
|
||||
|
||||
if (data.error) {
|
||||
var detail = data.detail || data.error || '{{ _("Errore nel salvataggio") }}';
|
||||
var detail = data.detail || data.error || {{ _("Errore nel salvataggio")|tojson }};
|
||||
this.errorMessage = (typeof detail === 'string') ? detail : JSON.stringify(detail);
|
||||
this.saving = false;
|
||||
return;
|
||||
@@ -711,108 +515,12 @@ function recipeEditor() {
|
||||
|
||||
} catch (err) {
|
||||
console.error('Save error:', err);
|
||||
this.errorMessage = '{{ _("Errore di connessione al server") }}';
|
||||
this.errorMessage = {{ _("Errore di connessione al server")|tojson }};
|
||||
}
|
||||
|
||||
this.saving = false;
|
||||
},
|
||||
|
||||
// ============================================================
|
||||
// File Upload
|
||||
// ============================================================
|
||||
async uploadFile(file) {
|
||||
if (!file) return;
|
||||
|
||||
// Validate file type
|
||||
const allowedTypes = ['image/png', 'image/jpeg', 'image/jpg', 'image/webp', 'application/pdf'];
|
||||
if (!allowedTypes.includes(file.type)) {
|
||||
this.errorMessage = '{{ _("Formato file non supportato. Usa PNG, JPG o PDF.") }}';
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate file size (max 20MB)
|
||||
const maxSize = 20 * 1024 * 1024;
|
||||
if (file.size > maxSize) {
|
||||
this.errorMessage = '{{ _("File troppo grande. Dimensione massima: 20MB.") }}';
|
||||
return;
|
||||
}
|
||||
|
||||
this.uploadingFile = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
if (this.recipeId) {
|
||||
formData.append('recipe_id', this.recipeId);
|
||||
}
|
||||
|
||||
try {
|
||||
const resp = await fetch('/maker/api/upload', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'X-CSRFToken': csrfToken || ''
|
||||
},
|
||||
body: formData
|
||||
});
|
||||
|
||||
const data = await resp.json();
|
||||
|
||||
if (data.error) {
|
||||
this.errorMessage = data.detail || '{{ _("Errore durante il caricamento del file") }}';
|
||||
} else {
|
||||
this.currentFilePath = data.file_path;
|
||||
// Notify annotation-editor to load the new image
|
||||
window.dispatchEvent(new CustomEvent('image-loaded', {
|
||||
detail: { path: data.file_path, annotations: null }
|
||||
}));
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
console.error('Upload error:', err);
|
||||
this.errorMessage = '{{ _("Errore di connessione durante il caricamento") }}';
|
||||
}
|
||||
|
||||
this.uploadingFile = false;
|
||||
this.dragOver = false;
|
||||
},
|
||||
|
||||
// ============================================================
|
||||
// Drag & Drop
|
||||
// ============================================================
|
||||
handleDrop(event) {
|
||||
this.dragOver = false;
|
||||
const files = event.dataTransfer?.files;
|
||||
if (files && files.length > 0) {
|
||||
this.uploadFile(files[0]);
|
||||
}
|
||||
},
|
||||
|
||||
// ============================================================
|
||||
// Annotation Tools (delegates to annotation-editor.js)
|
||||
// ============================================================
|
||||
setAnnoTool(tool) {
|
||||
this.annoTool = tool;
|
||||
window.dispatchEvent(new CustomEvent('anno-tool-change', {
|
||||
detail: { tool }
|
||||
}));
|
||||
},
|
||||
|
||||
deleteAnnotation() {
|
||||
window.dispatchEvent(new CustomEvent('anno-delete-selected'));
|
||||
},
|
||||
|
||||
zoomCanvas(delta) {
|
||||
window.dispatchEvent(new CustomEvent('anno-zoom', {
|
||||
detail: { delta }
|
||||
}));
|
||||
},
|
||||
|
||||
resetZoom() {
|
||||
window.dispatchEvent(new CustomEvent('anno-zoom-reset'));
|
||||
},
|
||||
|
||||
// ============================================================
|
||||
// Navigation
|
||||
// ============================================================
|
||||
@@ -826,6 +534,69 @@ function recipeEditor() {
|
||||
if (this.recipeId) {
|
||||
window.location.href = '/maker/recipes/' + this.recipeId + '/tasks';
|
||||
}
|
||||
},
|
||||
|
||||
// ============================================================
|
||||
// File Upload (thumbnail)
|
||||
// ============================================================
|
||||
handleDrop(event) {
|
||||
this.dragOver = false;
|
||||
const files = event.dataTransfer?.files;
|
||||
if (files && files.length > 0) {
|
||||
this.uploadFile(files[0]);
|
||||
}
|
||||
},
|
||||
|
||||
async uploadFile(file) {
|
||||
if (!file) return;
|
||||
|
||||
// Validate file type
|
||||
const allowed = ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'application/pdf'];
|
||||
if (!allowed.includes(file.type)) {
|
||||
this.errorMessage = {{ _("Formato file non supportato. Usa PNG, JPG, GIF, WebP o PDF.")|tojson }};
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate size (50MB)
|
||||
if (file.size > 50 * 1024 * 1024) {
|
||||
this.errorMessage = {{ _("File troppo grande. Massimo 50MB.")|tojson }};
|
||||
return;
|
||||
}
|
||||
|
||||
this.uploadingFile = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
const csrfToken = document.querySelector('meta[name=csrf-token]')?.content;
|
||||
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
if (this.recipeId) {
|
||||
formData.append('recipe_id', this.recipeId);
|
||||
}
|
||||
|
||||
const resp = await fetch('/maker/api/upload', {
|
||||
method: 'POST',
|
||||
headers: { 'X-CSRFToken': csrfToken || '' },
|
||||
body: formData
|
||||
});
|
||||
|
||||
const data = await resp.json();
|
||||
|
||||
if (data.error) {
|
||||
this.errorMessage = data.detail || {{ _("Errore nel caricamento del file")|tojson }};
|
||||
this.uploadingFile = false;
|
||||
return;
|
||||
}
|
||||
|
||||
this.currentFilePath = data.file_path;
|
||||
|
||||
} catch (err) {
|
||||
console.error('Upload error:', err);
|
||||
this.errorMessage = {{ _("Errore di connessione durante l'upload")|tojson }};
|
||||
}
|
||||
|
||||
this.uploadingFile = false;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@@ -152,6 +152,16 @@
|
||||
<div class="p-5 sm:p-6">
|
||||
<!-- Card Header -->
|
||||
<div class="flex flex-col sm:flex-row sm:items-start gap-4 mb-4">
|
||||
<!-- Thumbnail -->
|
||||
<template x-if="recipe.current_version && recipe.current_version.tasks && recipe.current_version.tasks.find(t => t.file_path && t.file_type === 'image')">
|
||||
<div class="w-20 h-20 rounded-lg overflow-hidden bg-[var(--bg-secondary)] border border-[var(--border-color)] shrink-0">
|
||||
<img :src="'/maker/api/files/' + recipe.current_version.tasks.find(t => t.file_path && t.file_type === 'image').file_path"
|
||||
class="w-full h-full object-cover"
|
||||
loading="lazy"
|
||||
onerror="this.parentElement.style.display='none'">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Left: Recipe Info -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Badges Row -->
|
||||
|
||||
@@ -34,6 +34,14 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<script>
|
||||
window.__taskAnnotations = {};
|
||||
{% for task in recipe.tasks %}
|
||||
{% if task.annotations_json %}
|
||||
window.__taskAnnotations[{{ task.id }}] = {{ task.annotations_json|tojson }};
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</script>
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8 max-w-5xl"
|
||||
x-data="recipePreview()"
|
||||
x-cloak>
|
||||
@@ -208,7 +216,7 @@
|
||||
x-data="annotationViewer()"
|
||||
x-init="
|
||||
imageUrl = '/maker/api/files/{{ task.file_path }}';
|
||||
annotations = {{ task.annotations_json|default('null')|tojson }};
|
||||
annotations = window.__taskAnnotations[{{ task.id }}] || null;
|
||||
$nextTick(() => init());
|
||||
">
|
||||
<canvas x-ref="annotationCanvas"></canvas>
|
||||
|
||||
@@ -0,0 +1,506 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{{ _('Disegno Task') }} #{{ (task.order_index or 0) + 1 }} — {{ recipe.code }} — TieMeasureFlow{% endblock %}
|
||||
|
||||
{% block extra_head %}
|
||||
<style>
|
||||
/* Annotation toolbar button */
|
||||
.anno-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.375rem 0.625rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--bg-card);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.anno-btn:hover {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
border-color: var(--text-muted);
|
||||
}
|
||||
.anno-btn.active {
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
.anno-btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Canvas container */
|
||||
.canvas-container {
|
||||
position: relative;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
min-height: 400px;
|
||||
}
|
||||
.canvas-container canvas {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<script>
|
||||
window.__taskData = {{ task|tojson }};
|
||||
window.__i18n_taskDrawing = {
|
||||
saving: {{ _("Salvataggio...")|tojson }},
|
||||
saveAnnotations: {{ _("Salva Annotazioni")|tojson }},
|
||||
saveError: {{ _("Errore nel salvataggio delle annotazioni")|tojson }},
|
||||
saveSuccess: {{ _("Annotazioni salvate con successo")|tojson }},
|
||||
connectionError: {{ _("Errore di connessione al server")|tojson }}
|
||||
};
|
||||
</script>
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8 max-w-5xl"
|
||||
x-data="taskDrawing()"
|
||||
x-cloak>
|
||||
|
||||
<!-- ============================================================
|
||||
Breadcrumb
|
||||
============================================================ -->
|
||||
<nav class="mb-6" aria-label="Breadcrumb">
|
||||
<ol class="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
|
||||
<li>
|
||||
<a href="{{ url_for('maker.recipe_list') }}"
|
||||
class="hover:text-primary transition-colors inline-flex items-center gap-1">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||
</svg>
|
||||
{{ _('Ricette') }}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<svg class="w-4 h-4 text-[var(--text-muted)]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ url_for('maker.recipe_edit', recipe_id=recipe.id) }}"
|
||||
class="hover:text-primary transition-colors">
|
||||
{{ recipe.code }}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<svg class="w-4 h-4 text-[var(--text-muted)]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ url_for('maker.task_editor', recipe_id=recipe.id) }}"
|
||||
class="hover:text-primary transition-colors">
|
||||
{{ _('Task') }}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<svg class="w-4 h-4 text-[var(--text-muted)]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</li>
|
||||
<li class="font-medium text-[var(--text-primary)]">
|
||||
{{ _('Disegno Task') }} #{{ (task.order_index or 0) + 1 }}
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<!-- ============================================================
|
||||
Header
|
||||
============================================================ -->
|
||||
<div class="mb-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-[var(--text-primary)] mb-1">
|
||||
{{ _('Annotazioni Disegno') }}
|
||||
<span class="text-[var(--text-muted)] text-lg font-normal ml-2">
|
||||
Task #{{ (task.order_index or 0) + 1 }}
|
||||
</span>
|
||||
</h1>
|
||||
<p class="text-sm text-[var(--text-secondary)]">{{ task.title or '' }}</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 shrink-0 flex-wrap">
|
||||
<button @click="saveAnnotations()"
|
||||
:disabled="saving"
|
||||
class="btn btn-primary gap-1.5">
|
||||
<svg x-show="!saving" class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
<svg x-show="saving" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
|
||||
</svg>
|
||||
<span x-text="saving ? window.__i18n_taskDrawing.saving : window.__i18n_taskDrawing.saveAnnotations"></span>
|
||||
</button>
|
||||
|
||||
<a href="{{ url_for('maker.task_editor', recipe_id=recipe.id) }}"
|
||||
class="btn btn-secondary gap-1.5">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M11 17l-5-5m0 0l5-5m-5 5h12"/>
|
||||
</svg>
|
||||
{{ _('Torna ai Task') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============================================================
|
||||
Error/Success Banners
|
||||
============================================================ -->
|
||||
<div x-show="errorMessage"
|
||||
x-transition
|
||||
class="mb-4 flex items-center gap-3 px-4 py-3 rounded-lg
|
||||
bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800
|
||||
text-red-800 dark:text-red-200 text-sm">
|
||||
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<span x-text="errorMessage"></span>
|
||||
<button @click="errorMessage = ''" class="ml-auto shrink-0 hover:opacity-70">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div x-show="successMessage"
|
||||
x-transition
|
||||
x-init="$watch('successMessage', v => { if (v) setTimeout(() => successMessage = '', 4000) })"
|
||||
class="mb-4 flex items-center gap-3 px-4 py-3 rounded-lg
|
||||
bg-emerald-50 dark:bg-emerald-900/30 border border-emerald-200 dark:border-emerald-800
|
||||
text-emerald-800 dark:text-emerald-200 text-sm">
|
||||
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<span x-text="successMessage"></span>
|
||||
</div>
|
||||
|
||||
<!-- ============================================================
|
||||
Annotation Toolbar
|
||||
============================================================ -->
|
||||
<div class="tmf-card mb-4">
|
||||
<div class="p-3 space-y-2">
|
||||
<!-- Row 1: Drawing Tools -->
|
||||
<div class="flex flex-wrap items-center gap-1.5">
|
||||
<!-- Select Tool -->
|
||||
<button type="button"
|
||||
class="anno-btn"
|
||||
:class="{ 'active': annoTool === 'select' }"
|
||||
@click="setAnnoTool('select')"
|
||||
title="{{ _('Seleziona') }}">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 15l-2 5L9 9l11 4-5 2z"/>
|
||||
</svg>
|
||||
<span class="hidden sm:inline">{{ _('Seleziona') }}</span>
|
||||
</button>
|
||||
|
||||
<!-- Marker Tool -->
|
||||
<button type="button"
|
||||
class="anno-btn"
|
||||
:class="{ 'active': annoTool === 'marker' }"
|
||||
@click="setAnnoTool('marker')"
|
||||
title="{{ _('Marker numerato') }}">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
<span class="hidden sm:inline">{{ _('Marker') }} #</span>
|
||||
</button>
|
||||
|
||||
<!-- Arrow Tool -->
|
||||
<button type="button"
|
||||
class="anno-btn"
|
||||
:class="{ 'active': annoTool === 'arrow' }"
|
||||
@click="setAnnoTool('arrow')"
|
||||
title="{{ _('Freccia') }}">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
|
||||
</svg>
|
||||
<span class="hidden sm:inline">{{ _('Freccia') }}</span>
|
||||
</button>
|
||||
|
||||
<!-- Rectangle Tool -->
|
||||
<button type="button"
|
||||
class="anno-btn"
|
||||
:class="{ 'active': annoTool === 'rect' }"
|
||||
@click="setAnnoTool('rect')"
|
||||
title="{{ _('Rettangolo') }}">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
|
||||
</svg>
|
||||
<span class="hidden sm:inline">{{ _('Rettangolo') }}</span>
|
||||
</button>
|
||||
|
||||
<!-- Separator -->
|
||||
<div class="w-px h-6 bg-[var(--border-color)] mx-1"></div>
|
||||
|
||||
<!-- Delete -->
|
||||
<button type="button"
|
||||
class="anno-btn text-red-500 hover:text-red-600"
|
||||
@click="deleteAnnotation()"
|
||||
:disabled="!annoSelected"
|
||||
title="{{ _('Elimina selezionato') }}">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
|
||||
</svg>
|
||||
<span class="hidden sm:inline">{{ _('Elimina') }}</span>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Row 2: Color, Stroke Width, Line Style -->
|
||||
<div class="flex flex-wrap items-center gap-1.5 pt-1 border-t border-[var(--border-color)]">
|
||||
<!-- Color picker -->
|
||||
<span class="text-xs text-[var(--text-muted)] mr-1">{{ _('Colore') }}:</span>
|
||||
<template x-for="c in colorOptions" :key="c.value">
|
||||
<button type="button"
|
||||
class="w-6 h-6 rounded-full border-2 transition-all"
|
||||
:style="'background-color: ' + c.value"
|
||||
:class="propsDisabled ? 'border-[var(--border-color)] opacity-30 cursor-not-allowed' : (annoColor === c.value ? 'border-[var(--text-primary)] scale-110 ring-2 ring-offset-1 ring-[var(--color-primary)]' : 'border-[var(--border-color)] hover:scale-105')"
|
||||
:title="c.label"
|
||||
:disabled="propsDisabled"
|
||||
@click="setAnnoColor(c.value)">
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<!-- Separator -->
|
||||
<div class="w-px h-6 bg-[var(--border-color)] mx-1.5"></div>
|
||||
|
||||
<!-- Stroke width -->
|
||||
<span class="text-xs text-[var(--text-muted)] mr-1">{{ _('Spessore') }}:</span>
|
||||
<template x-for="sw in strokeOptions" :key="sw">
|
||||
<button type="button"
|
||||
class="anno-btn"
|
||||
:class="{ 'active': annoStrokeWidth === sw }"
|
||||
:disabled="propsDisabled"
|
||||
@click="setAnnoStrokeWidth(sw)"
|
||||
:title="sw + 'px'">
|
||||
<div class="flex items-center justify-center w-4 h-4">
|
||||
<div class="rounded-full bg-current" :style="'width: ' + (sw + 2) + 'px; height: ' + (sw + 2) + 'px'"></div>
|
||||
</div>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<!-- Separator -->
|
||||
<div class="w-px h-6 bg-[var(--border-color)] mx-1.5"></div>
|
||||
|
||||
<!-- Line style -->
|
||||
<span class="text-xs text-[var(--text-muted)] mr-1">{{ _('Linea') }}:</span>
|
||||
<template x-for="ls in lineDashOptions" :key="ls.icon">
|
||||
<button type="button"
|
||||
class="anno-btn"
|
||||
:class="{ 'active': JSON.stringify(annoLineDash) === JSON.stringify(ls.value) }"
|
||||
:disabled="propsDisabled"
|
||||
@click="setAnnoLineDash(ls.value)"
|
||||
:title="ls.label">
|
||||
<div class="flex items-center justify-center w-5 h-4">
|
||||
<template x-if="ls.icon === 'solid'">
|
||||
<div class="w-full h-0.5 bg-current"></div>
|
||||
</template>
|
||||
<template x-if="ls.icon === 'dashed'">
|
||||
<div class="w-full h-0.5 flex gap-0.5">
|
||||
<div class="flex-1 bg-current"></div>
|
||||
<div class="flex-1 bg-current"></div>
|
||||
<div class="flex-1 bg-current"></div>
|
||||
</div>
|
||||
</template>
|
||||
<template x-if="ls.icon === 'dotted'">
|
||||
<div class="w-full h-0.5 flex gap-1 justify-center">
|
||||
<div class="w-1 h-1 rounded-full bg-current"></div>
|
||||
<div class="w-1 h-1 rounded-full bg-current"></div>
|
||||
<div class="w-1 h-1 rounded-full bg-current"></div>
|
||||
<div class="w-1 h-1 rounded-full bg-current"></div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============================================================
|
||||
Canvas Area
|
||||
============================================================ -->
|
||||
<div class="tmf-card">
|
||||
<div class="tmf-card-body p-0">
|
||||
<div x-data="annotationEditor()"
|
||||
class="canvas-container"
|
||||
id="annotationCanvasContainer">
|
||||
<canvas id="annotationCanvas" x-ref="fabricCanvas"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
|
||||
<script>
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
|
||||
</script>
|
||||
<script src="{{ url_for('static', filename='js/annotation-editor.js') }}?v=7"></script>
|
||||
<script>
|
||||
function taskDrawing() {
|
||||
const taskData = window.__taskData || {};
|
||||
|
||||
return {
|
||||
taskId: taskData.id || null,
|
||||
recipeId: {{ recipe.id|tojson }},
|
||||
|
||||
// Annotation state
|
||||
annoTool: 'select',
|
||||
annoSelected: false,
|
||||
annoSelectedType: null,
|
||||
annotationsJson: taskData.annotations_json || null,
|
||||
|
||||
// Color and stroke width
|
||||
annoColor: '#2563EB',
|
||||
annoStrokeWidth: 2,
|
||||
colorOptions: [
|
||||
{ value: '#2563EB', label: 'Blu' },
|
||||
{ value: '#DC2626', label: 'Rosso' },
|
||||
{ value: '#16A34A', label: 'Verde' },
|
||||
{ value: '#F59E0B', label: 'Arancio' },
|
||||
{ value: '#8B5CF6', label: 'Viola' },
|
||||
{ value: '#000000', label: 'Nero' },
|
||||
],
|
||||
strokeOptions: [1, 2, 3, 4],
|
||||
annoLineDash: [],
|
||||
lineDashOptions: [
|
||||
{ value: [], label: 'Continua', icon: 'solid' },
|
||||
{ value: [8, 4], label: 'Tratteggiata', icon: 'dashed' },
|
||||
{ value: [3, 3], label: 'Punteggiata', icon: 'dotted' },
|
||||
],
|
||||
|
||||
// Save state
|
||||
saving: false,
|
||||
errorMessage: '',
|
||||
successMessage: '',
|
||||
|
||||
get propsDisabled() {
|
||||
var isDrawingTool = this.annoTool === 'marker' || this.annoTool === 'arrow' || this.annoTool === 'rect';
|
||||
return !isDrawingTool && !this.annoSelected;
|
||||
},
|
||||
|
||||
init() {
|
||||
// Listen for annotation selection events from annotation-editor.js
|
||||
window.addEventListener('annotation-selected', (e) => {
|
||||
this.annoSelected = e.detail.selected;
|
||||
this.annoSelectedType = e.detail.objectType || null;
|
||||
});
|
||||
|
||||
// Listen for annotation data changes
|
||||
window.addEventListener('annotations-changed', (e) => {
|
||||
this.annotationsJson = e.detail.json;
|
||||
});
|
||||
|
||||
// Listen for mode changes from annotation editor (auto-select after placing)
|
||||
window.addEventListener('anno-mode-changed', (e) => {
|
||||
if (e.detail && e.detail.mode) {
|
||||
this.annoTool = e.detail.mode;
|
||||
}
|
||||
});
|
||||
|
||||
// Load the image into the annotation editor
|
||||
if (taskData.file_path) {
|
||||
this.$nextTick(() => {
|
||||
window.dispatchEvent(new CustomEvent('image-loaded', {
|
||||
detail: {
|
||||
path: taskData.file_path,
|
||||
annotations: taskData.annotations_json || null
|
||||
}
|
||||
}));
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// ---- Save annotations to task ----
|
||||
async saveAnnotations() {
|
||||
this.saving = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
const csrfToken = document.querySelector('meta[name=csrf-token]')?.content || '';
|
||||
|
||||
const payload = {};
|
||||
if (this.annotationsJson) {
|
||||
payload.annotations_json = (typeof this.annotationsJson === 'string')
|
||||
? JSON.parse(this.annotationsJson)
|
||||
: this.annotationsJson;
|
||||
}
|
||||
|
||||
try {
|
||||
const resp = await fetch(`/maker/api/tasks/${this.taskId}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': csrfToken
|
||||
},
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
const data = await resp.json();
|
||||
|
||||
if (data.error) {
|
||||
this.errorMessage = data.detail || window.__i18n_taskDrawing.saveError;
|
||||
} else {
|
||||
this.successMessage = window.__i18n_taskDrawing.saveSuccess;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('saveAnnotations error:', err);
|
||||
this.errorMessage = window.__i18n_taskDrawing.connectionError;
|
||||
}
|
||||
|
||||
this.saving = false;
|
||||
},
|
||||
|
||||
// ---- Annotation Tools ----
|
||||
setAnnoTool(tool) {
|
||||
this.annoTool = tool;
|
||||
window.dispatchEvent(new CustomEvent('anno-tool-change', {
|
||||
detail: { tool }
|
||||
}));
|
||||
},
|
||||
|
||||
deleteAnnotation() {
|
||||
window.dispatchEvent(new CustomEvent('anno-delete-selected'));
|
||||
},
|
||||
|
||||
setAnnoColor(color) {
|
||||
this.annoColor = color;
|
||||
window.dispatchEvent(new CustomEvent('anno-color-change', {
|
||||
detail: { color }
|
||||
}));
|
||||
},
|
||||
|
||||
setAnnoStrokeWidth(width) {
|
||||
this.annoStrokeWidth = width;
|
||||
window.dispatchEvent(new CustomEvent('anno-stroke-width-change', {
|
||||
detail: { width }
|
||||
}));
|
||||
},
|
||||
|
||||
setAnnoLineDash(dash) {
|
||||
this.annoLineDash = dash;
|
||||
window.dispatchEvent(new CustomEvent('anno-line-dash-change', {
|
||||
detail: { dash }
|
||||
}));
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -432,6 +432,59 @@
|
||||
|
||||
<div class="tmf-card-body space-y-4">
|
||||
|
||||
<!-- ========== Task File Upload / Preview ========== -->
|
||||
<div class="p-3 rounded-lg bg-[var(--bg-secondary)] border border-[var(--border-color)]">
|
||||
<p class="text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wide mb-2">
|
||||
{{ _('Disegno Tecnico') }}
|
||||
</p>
|
||||
|
||||
<!-- Preview if file exists -->
|
||||
<template x-if="task.file_path">
|
||||
<div class="space-y-2">
|
||||
<div class="relative rounded-lg overflow-hidden bg-[var(--bg-secondary)] border border-[var(--border-color)]">
|
||||
<canvas :id="'preview-' + task.id"
|
||||
class="block mx-auto"
|
||||
style="max-height: 192px;">
|
||||
</canvas>
|
||||
</div>
|
||||
<!-- Action buttons -->
|
||||
<div class="flex items-center gap-2 flex-wrap">
|
||||
<a :href="'/maker/recipes/' + recipeId + '/tasks/' + task.id + '/drawing'"
|
||||
class="btn btn-secondary text-xs gap-1.5">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
|
||||
</svg>
|
||||
{{ _('Modifica Disegno') }}
|
||||
</a>
|
||||
<label class="btn btn-secondary text-xs gap-1.5 cursor-pointer">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
|
||||
</svg>
|
||||
{{ _('Sostituisci') }}
|
||||
<input type="file"
|
||||
accept="image/*,application/pdf"
|
||||
class="hidden"
|
||||
@change="uploadTaskFile(task.id, $event.target.files[0], task); $event.target.value = ''">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Upload zone if no file -->
|
||||
<template x-if="!task.file_path">
|
||||
<label class="flex flex-col items-center gap-2 p-4 rounded-lg border-2 border-dashed border-[var(--border-color)] hover:border-primary/50 cursor-pointer transition-colors">
|
||||
<svg class="w-8 h-8 text-[var(--text-muted)]" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"/>
|
||||
</svg>
|
||||
<span class="text-xs text-[var(--text-secondary)]">{{ _('Carica immagine o PDF') }}</span>
|
||||
<input type="file"
|
||||
accept="image/*,application/pdf"
|
||||
class="hidden"
|
||||
@change="uploadTaskFile(task.id, $event.target.files[0], task); $event.target.value = ''">
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Task Directive / Description (read-only display) -->
|
||||
<template x-if="task.directive || task.description">
|
||||
<div class="flex flex-col gap-2 p-3 rounded-lg bg-[var(--bg-secondary)] border border-[var(--border-color)]">
|
||||
@@ -1020,6 +1073,9 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
|
||||
<script>if(typeof pdfjsLib!=='undefined')pdfjsLib.GlobalWorkerOptions.workerSrc='https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';</script>
|
||||
<script src="{{ url_for('static', filename='js/annotation-viewer.js') }}?v=3"></script>
|
||||
<script>
|
||||
function taskEditor() {
|
||||
return {
|
||||
@@ -1073,6 +1129,7 @@ function taskEditor() {
|
||||
// Auto-expand the first task if there is only one
|
||||
if (this.tasks.length === 1) {
|
||||
this.expandedTask = this.tasks[0].id;
|
||||
this.renderTaskPreview(this.tasks[0]);
|
||||
}
|
||||
},
|
||||
|
||||
@@ -1083,11 +1140,45 @@ function taskEditor() {
|
||||
return document.querySelector('meta[name="csrf-token"]')?.content || '';
|
||||
},
|
||||
|
||||
// ============================================================
|
||||
// Render Task Preview (deferred)
|
||||
// ============================================================
|
||||
renderTaskPreview(task) {
|
||||
if (!task || !task.file_path) return;
|
||||
if (typeof renderAnnotationPreview !== 'function') {
|
||||
// Fallback: show image via <img> tag if viewer script not loaded
|
||||
this.$nextTick(() => {
|
||||
const canvas = document.getElementById('preview-' + task.id);
|
||||
if (canvas && canvas.parentElement) {
|
||||
const img = document.createElement('img');
|
||||
img.src = '/maker/api/files/' + task.file_path;
|
||||
img.className = 'block mx-auto max-h-48 object-contain';
|
||||
img.loading = 'lazy';
|
||||
canvas.parentElement.replaceChild(img, canvas);
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
const canvas = document.getElementById('preview-' + task.id);
|
||||
if (canvas) {
|
||||
renderAnnotationPreview(canvas, '/maker/api/files/' + task.file_path, task.annotations_json);
|
||||
}
|
||||
}, 50);
|
||||
});
|
||||
},
|
||||
|
||||
// ============================================================
|
||||
// Toggle Expand
|
||||
// ============================================================
|
||||
toggleExpand(taskId) {
|
||||
this.expandedTask = this.expandedTask === taskId ? null : taskId;
|
||||
// Render preview when expanding
|
||||
if (this.expandedTask === taskId) {
|
||||
const task = this.tasks.find(t => t.id === taskId);
|
||||
if (task) this.renderTaskPreview(task);
|
||||
}
|
||||
// Reset inline editors when collapsing
|
||||
if (this.expandedTask !== taskId) {
|
||||
this.editingSubtask = null;
|
||||
@@ -1125,7 +1216,7 @@ function taskEditor() {
|
||||
const data = await resp.json();
|
||||
|
||||
if (data.error) {
|
||||
this.errorMessage = data.detail || '{{ _("Errore nella creazione del task") }}';
|
||||
this.errorMessage = data.detail || {{ _("Errore nella creazione del task")|tojson }};
|
||||
} else {
|
||||
// Ensure subtasks array exists
|
||||
if (!data.subtasks) data.subtasks = [];
|
||||
@@ -1133,11 +1224,11 @@ function taskEditor() {
|
||||
this.resetNewTask();
|
||||
this.showAddTask = false;
|
||||
this.expandedTask = data.id;
|
||||
this.successMessage = '{{ _("Task creato con successo") }}';
|
||||
this.successMessage = {{ _("Task creato con successo")|tojson }};
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('addTask error:', err);
|
||||
this.errorMessage = '{{ _("Errore di connessione al server") }}';
|
||||
this.errorMessage = {{ _("Errore di connessione al server")|tojson }};
|
||||
}
|
||||
|
||||
this.saving = false;
|
||||
@@ -1181,7 +1272,7 @@ function taskEditor() {
|
||||
const data = await resp.json();
|
||||
|
||||
if (data.error) {
|
||||
this.errorMessage = data.detail || '{{ _("Errore nel salvataggio del task") }}';
|
||||
this.errorMessage = data.detail || {{ _("Errore nel salvataggio del task")|tojson }};
|
||||
} else {
|
||||
// Update local state
|
||||
const idx = this.tasks.findIndex(t => t.id === taskId);
|
||||
@@ -1194,11 +1285,11 @@ function taskEditor() {
|
||||
}
|
||||
}
|
||||
this.cancelEditTask();
|
||||
this.successMessage = '{{ _("Task aggiornato") }}';
|
||||
this.successMessage = {{ _("Task aggiornato")|tojson }};
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('updateTask error:', err);
|
||||
this.errorMessage = '{{ _("Errore di connessione al server") }}';
|
||||
this.errorMessage = {{ _("Errore di connessione al server")|tojson }};
|
||||
}
|
||||
|
||||
this.saving = false;
|
||||
@@ -1224,14 +1315,14 @@ function taskEditor() {
|
||||
this.deleteTaskModal = false;
|
||||
this.deleteTargetTask = null;
|
||||
if (this.expandedTask === taskId) this.expandedTask = null;
|
||||
this.successMessage = '{{ _("Task eliminato") }}';
|
||||
this.successMessage = {{ _("Task eliminato")|tojson }};
|
||||
} else {
|
||||
const data = await resp.json();
|
||||
this.errorMessage = data.detail || {{ _("Errore nell'eliminazione del task")|tojson }};
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('deleteTask error:', err);
|
||||
this.errorMessage = '{{ _("Errore di connessione al server") }}';
|
||||
this.errorMessage = {{ _("Errore di connessione al server")|tojson }};
|
||||
}
|
||||
|
||||
this.saving = false;
|
||||
@@ -1322,11 +1413,11 @@ function taskEditor() {
|
||||
const data = await resp.json();
|
||||
|
||||
if (data.error) {
|
||||
this.errorMessage = data.detail || '{{ _("Errore nel riordinamento") }}';
|
||||
this.errorMessage = data.detail || {{ _("Errore nel riordinamento")|tojson }};
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('reorderTasks error:', err);
|
||||
this.errorMessage = '{{ _("Errore di connessione al server") }}';
|
||||
this.errorMessage = {{ _("Errore di connessione al server")|tojson }};
|
||||
}
|
||||
},
|
||||
|
||||
@@ -1390,7 +1481,7 @@ function taskEditor() {
|
||||
const data = await resp.json();
|
||||
|
||||
if (data.error) {
|
||||
this.errorMessage = data.detail || '{{ _("Errore nella creazione della misurazione") }}';
|
||||
this.errorMessage = data.detail || {{ _("Errore nella creazione della misurazione")|tojson }};
|
||||
} else {
|
||||
const task = this.tasks.find(t => t.id === taskId);
|
||||
if (task) {
|
||||
@@ -1398,11 +1489,11 @@ function taskEditor() {
|
||||
task.subtasks.push(data);
|
||||
}
|
||||
this.resetNewSubtask(taskId);
|
||||
this.successMessage = '{{ _("Misurazione aggiunta") }}';
|
||||
this.successMessage = {{ _("Misurazione aggiunta")|tojson }};
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('addSubtask error:', err);
|
||||
this.errorMessage = '{{ _("Errore di connessione al server") }}';
|
||||
this.errorMessage = {{ _("Errore di connessione al server")|tojson }};
|
||||
}
|
||||
|
||||
this.saving = false;
|
||||
@@ -1462,7 +1553,7 @@ function taskEditor() {
|
||||
const data = await resp.json();
|
||||
|
||||
if (data.error) {
|
||||
this.errorMessage = data.detail || '{{ _("Errore nel salvataggio della misurazione") }}';
|
||||
this.errorMessage = data.detail || {{ _("Errore nel salvataggio della misurazione")|tojson }};
|
||||
} else {
|
||||
// Update local state
|
||||
const task = this.tasks.find(t => t.id === taskId);
|
||||
@@ -1473,11 +1564,11 @@ function taskEditor() {
|
||||
}
|
||||
}
|
||||
this.cancelEditSubtask();
|
||||
this.successMessage = '{{ _("Misurazione aggiornata") }}';
|
||||
this.successMessage = {{ _("Misurazione aggiornata")|tojson }};
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('updateSubtask error:', err);
|
||||
this.errorMessage = '{{ _("Errore di connessione al server") }}';
|
||||
this.errorMessage = {{ _("Errore di connessione al server")|tojson }};
|
||||
}
|
||||
|
||||
this.saving = false;
|
||||
@@ -1507,14 +1598,93 @@ function taskEditor() {
|
||||
this.deleteSubtaskModal = false;
|
||||
this.deleteTargetSubtask = null;
|
||||
this.deleteSubtaskParentId = null;
|
||||
this.successMessage = '{{ _("Misurazione eliminata") }}';
|
||||
this.successMessage = {{ _("Misurazione eliminata")|tojson }};
|
||||
} else {
|
||||
const data = await resp.json();
|
||||
this.errorMessage = data.detail || {{ _("Errore nell'eliminazione della misurazione")|tojson }};
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('deleteSubtask error:', err);
|
||||
this.errorMessage = '{{ _("Errore di connessione al server") }}';
|
||||
this.errorMessage = {{ _("Errore di connessione al server")|tojson }};
|
||||
}
|
||||
|
||||
this.saving = false;
|
||||
},
|
||||
|
||||
// ============================================================
|
||||
// TASK FILE UPLOAD
|
||||
// ============================================================
|
||||
|
||||
async uploadTaskFile(taskId, file, task) {
|
||||
if (!file) return;
|
||||
|
||||
const allowedTypes = ['image/png', 'image/jpeg', 'image/jpg', 'image/webp', 'application/pdf'];
|
||||
if (!allowedTypes.includes(file.type)) {
|
||||
this.errorMessage = {{ _("Formato file non supportato. Usa PNG, JPG o PDF.")|tojson }};
|
||||
return;
|
||||
}
|
||||
|
||||
if (file.size > 20 * 1024 * 1024) {
|
||||
this.errorMessage = {{ _("File troppo grande. Dimensione massima: 20MB.")|tojson }};
|
||||
return;
|
||||
}
|
||||
|
||||
this.saving = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
try {
|
||||
// 1. Upload file
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('recipe_id', this.recipeId);
|
||||
|
||||
const uploadResp = await fetch('/maker/api/upload', {
|
||||
method: 'POST',
|
||||
headers: { 'X-CSRFToken': this.csrfToken() },
|
||||
body: formData
|
||||
});
|
||||
|
||||
const uploadData = await uploadResp.json();
|
||||
if (uploadData.error) {
|
||||
this.errorMessage = uploadData.detail || {{ _("Errore durante il caricamento del file")|tojson }};
|
||||
this.saving = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// Determine file type
|
||||
const fileType = file.type === 'application/pdf' ? 'pdf' : 'image';
|
||||
|
||||
// 2. Update task with file_path
|
||||
const updateResp = await fetch(`/maker/api/tasks/${taskId}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': this.csrfToken()
|
||||
},
|
||||
body: JSON.stringify({
|
||||
file_path: uploadData.file_path,
|
||||
file_type: fileType
|
||||
})
|
||||
});
|
||||
|
||||
const updateData = await updateResp.json();
|
||||
if (updateData.error) {
|
||||
this.errorMessage = updateData.detail || {{ _("Errore nel salvataggio del task")|tojson }};
|
||||
this.saving = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// 3. Update local state
|
||||
task.file_path = uploadData.file_path;
|
||||
task.file_type = fileType;
|
||||
this.successMessage = {{ _("File caricato con successo")|tojson }};
|
||||
|
||||
// Re-render preview canvas with new image
|
||||
this.renderTaskPreview(task);
|
||||
|
||||
} catch (err) {
|
||||
console.error('uploadTaskFile error:', err);
|
||||
this.errorMessage = {{ _("Errore di connessione al server")|tojson }};
|
||||
}
|
||||
|
||||
this.saving = false;
|
||||
|
||||
@@ -52,6 +52,9 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<script>
|
||||
window.__taskAnnotations = {{ task.annotations_json|default('null')|tojson }};
|
||||
</script>
|
||||
<div class="min-h-[calc(100vh-3.5rem)] flex flex-col"
|
||||
x-data="taskExecute()"
|
||||
x-init="init()"
|
||||
@@ -160,8 +163,8 @@
|
||||
<div class="annotation-container"
|
||||
x-data="annotationViewer()"
|
||||
x-init="
|
||||
imageUrl = '{{ url_for('static', filename='uploads/' ~ task.file_path) }}';
|
||||
annotations = {{ task.annotations_json|default('null')|tojson }};
|
||||
imageUrl = '/measure/api/files/{{ task.file_path }}';
|
||||
annotations = window.__taskAnnotations;
|
||||
$nextTick(() => init());
|
||||
"
|
||||
x-effect="setActiveMarker(currentSubtask?.marker_number || 0)">
|
||||
@@ -171,23 +174,18 @@
|
||||
</div>
|
||||
|
||||
{% elif task.file_path and task.file_type == 'pdf' %}
|
||||
{# PDF placeholder #}
|
||||
<div class="annotation-container flex items-center justify-center">
|
||||
<div class="text-center py-12">
|
||||
<svg class="w-16 h-16 mx-auto text-red-400 mb-3" fill="none" stroke="currentColor" stroke-width="1" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
<p class="text-sm font-medium text-[var(--text-secondary)]">{{ _('Visualizzatore PDF') }}</p>
|
||||
<p class="text-xs text-[var(--text-muted)] mt-1">{{ _('In fase di sviluppo') }}</p>
|
||||
<a href="{{ url_for('static', filename='uploads/' ~ task.file_path) }}"
|
||||
target="_blank"
|
||||
class="btn btn-secondary mt-3 text-xs">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
|
||||
</svg>
|
||||
{{ _('Apri PDF') }}
|
||||
</a>
|
||||
</div>
|
||||
{# PDF inline viewer using PDF.js via annotationViewer #}
|
||||
<div class="annotation-container"
|
||||
x-data="annotationViewer()"
|
||||
x-init="
|
||||
imageUrl = '/measure/api/files/{{ task.file_path }}';
|
||||
annotations = window.__taskAnnotations;
|
||||
$nextTick(() => init());
|
||||
"
|
||||
x-effect="setActiveMarker(currentSubtask?.marker_number || 0)">
|
||||
<canvas x-ref="annotationCanvas"
|
||||
@click="handleClick($event)"
|
||||
class="cursor-pointer"></canvas>
|
||||
</div>
|
||||
|
||||
{% else %}
|
||||
@@ -518,6 +516,10 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
|
||||
<script>
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
|
||||
</script>
|
||||
<script src="{{ url_for('static', filename='js/numpad.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/annotation-viewer.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/caliper.js') }}"></script>
|
||||
|
||||
Reference in New Issue
Block a user