Adriano
f2df6be060
In setMode('select'), explicitly set hasControls, hasBorders, and evented
on all objects. In drawing modes, disable selectable/evented to prevent
accidental interaction. Fixes controls only appearing on multi-select drag.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
507 lines
19 KiB
HTML
507 lines
19 KiB
HTML
{% 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=10"></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')|tojson }} },
|
|
{ value: '#DC2626', label: {{ _('Rosso')|tojson }} },
|
|
{ value: '#16A34A', label: {{ _('Verde')|tojson }} },
|
|
{ value: '#F59E0B', label: {{ _('Arancio')|tojson }} },
|
|
{ value: '#8B5CF6', label: {{ _('Viola')|tojson }} },
|
|
{ value: '#000000', label: {{ _('Nero')|tojson }} },
|
|
],
|
|
strokeOptions: [1, 2, 3, 4],
|
|
annoLineDash: [],
|
|
lineDashOptions: [
|
|
{ value: [], label: {{ _('Continua')|tojson }}, icon: 'solid' },
|
|
{ value: [8, 4], label: {{ _('Tratteggiata')|tojson }}, icon: 'dashed' },
|
|
{ value: [3, 3], label: {{ _('Punteggiata')|tojson }}, 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 %}
|