<!DOCTYPE html><html lang="it">
<head>
<meta charset="UTF-8">
<title>Report Designer Avanzato</title>
<style>
body {
font-family: sans-serif;
margin: 0;
overflow: hidden;
}
#toolbar {
background: #f0f0f0;
padding: 10px;
display: flex;
gap: 10px;
border-bottom: 1px solid #ccc;
position: fixed;
width: 100%;
top: 0;
z-index: 10;
}
#workspace {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
}
#canvas {
background: white;
border: 1px solid #ccc;
margin: 20px;
transform-origin: 0 0;
}
input[type="file"] {
display: none;
}
</style>
</head>
<body> <div id="toolbar">
<button onclick="setTool('hline')">Linea Orizzontale</button>
<button onclick="setTool('vline')">Linea Verticale</button>
<button onclick="setTool('rect')">Box</button>
<button onclick="setTool('label')">Label</button>
<button onclick="triggerImageUpload()">Immagine</button>
<button onclick="setTool('select')">Seleziona/Modifica</button>
<button onclick="deleteSelected()">Elimina</button>
<button onclick="downloadXML()">Salva XML</button>
<button onclick="uploadXML()">Carica XML</button>
<button onclick="toggleZoom()">Zoom</button>
<input type="file" id="imgInput" accept="image/*" onchange="handleImage(event)">
<input type="file" id="xmlInput" accept=".xml" onchange="handleXML(event)">
</div> <div id="workspace">
<canvas id="canvas" width="794" height="1123"></canvas>
</div> <script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const imgInput = document.getElementById('imgInput');
const xmlInput = document.getElementById('xmlInput');
let tool = 'select';
let elements = [];
let drawing = false;
let startX, startY;
let selected = null;
let dragging = false;
let resizing = false;
let zoom = 1;
function setTool(t) {
tool = t;
selected = null;
}
function triggerImageUpload() {
imgInput.click();
}
function uploadXML() {
xmlInput.click();
}
function toggleZoom() {
zoom = zoom === 1 ? 1.5 : 1;
canvas.style.transform = `scale(${zoom})`;
}
function drawAll() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (const el of elements) {
drawElement(el);
}
if (selected) drawSelectionBox(selected);
}
function drawElement(el) {
ctx.save();
if (el.type === 'line') {
ctx.beginPath();
ctx.moveTo(el.x1, el.y1);
ctx.lineTo(el.x2, el.y2);
ctx.stroke();
} else if (el.type === 'rect') {
ctx.strokeRect(el.x, el.y, el.width, el.height);
} else if (el.type === 'label') {
ctx.fillText(el.text, el.x, el.y);
} else if (el.type === 'image') {
const img = new Image();
img.src = el.src;
img.onload = () => {
ctx.drawImage(img, el.x, el.y, el.width, el.height);
};
}
ctx.restore();
}
function drawSelectionBox(el) {
ctx.save();
ctx.setLineDash([5, 5]);
if (el.type === 'line') {
ctx.strokeRect(Math.min(el.x1, el.x2), Math.min(el.y1, el.y2), Math.abs(el.x2 - el.x1), Math.abs(el.y2 - el.y1));
} else {
ctx.strokeRect(el.x, el.y, el.width, el.height);
}
ctx.restore();
}
canvas.addEventListener('mousedown', (e) => {
const rect = canvas.getBoundingClientRect();
const x = (e.clientX - rect.left) / zoom;
const y = (e.clientY - rect.top) / zoom;
startX = x; startY = y;
drawing = true;
if (tool === 'select') {
selected = elements.find(el => isInside(el, x, y));
if (selected) dragging = true;
drawAll();
} else if (tool === 'hline') {
elements.push({ type: 'line', x1: x, y1: y, x2: x + 100, y2: y });
drawAll();
} else if (tool === 'vline') {
elements.push({ type: 'line', x1: x, y1: y, x2: x, y2: y + 100 });
drawAll();
} else if (tool === 'rect') {
selected = { type: 'rect', x, y, width: 0, height: 0 };
elements.push(selected);
} else if (tool === 'label') {
const text = prompt("Testo della label:");
if (text) elements.push({ type: 'label', x, y, text });
drawAll();
}
});
canvas.addEventListener('mousemove', (e) => {
if (!drawing) return;
const rect = canvas.getBoundingClientRect();
const x = (e.clientX - rect.left) / zoom;
const y = (e.clientY - rect.top) / zoom;
if (tool === 'select' && dragging && selected) {
if (selected.type === 'line') {
const dx = x - startX;
const dy = y - startY;
selected.x1 += dx;
selected.y1 += dy;
selected.x2 += dx;
selected.y2 += dy;
} else {
selected.x += x - startX;
selected.y += y - startY;
}
startX = x; startY = y;
drawAll();
} else if (tool === 'rect' && selected) {
selected.width = x - selected.x;
selected.height = y - selected.y;
drawAll();
}
});
canvas.addEventListener('mouseup', () => {
drawing = false;
dragging = false;
selected = null;
});
function isInside(el, x, y) {
if (el.type === 'line') {
const minX = Math.min(el.x1, el.x2) - 3;
const maxX = Math.max(el.x1, el.x2) + 3;
const minY = Math.min(el.y1, el.y2) - 3;
const maxY = Math.max(el.y1, el.y2) + 3;
return x >= minX && x <= maxX && y >= minY && y <= maxY;
} else {
return x >= el.x && x <= el.x + el.width && y >= el.y && y <= el.y + el.height;
}
}
function deleteSelected() {
if (selected) {
elements = elements.filter(el => el !== selected);
selected = null;
drawAll();
}
}
function handleImage(e) {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = (ev) => {
const src = ev.target.result;
const img = new Image();
img.onload = () => {
elements.push({ type: 'image', x: 50, y: 50, width: img.width / 2, height: img.height / 2, src });
drawAll();
};
img.src = src;
};
reader.readAsDataURL(file);
}
function downloadXML() {
let xml = `<report>\n`;
elements.forEach(el => {
if (el.type === 'line') {
xml += ` <line x1="${el.x1}" y1="${el.y1}" x2="${el.x2}" y2="${el.y2}"/>\n`;
} else if (el.type === 'rect') {
xml += ` <rect x="${el.x}" y="${el.y}" width="${el.width}" height="${el.height}"/>\n`;
} else if (el.type === 'label') {
xml += ` <label x="${el.x}" y="${el.y}">${el.text}</label>\n`;
} else if (el.type === 'image') {
xml += ` <image x="${el.x}" y="${el.y}" width="${el.width}" height="${el.height}" src="${el.src}"/>\n`;
}
});
xml += `</report>`;
const blob = new Blob([xml], { type: 'application/xml' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'report.xml';
link.click();
}
function handleXML(e) {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = (ev) => {
const parser = new DOMParser();
const xml = parser.parseFromString(ev.target.result, 'application/xml');
elements = [];
xml.querySelectorAll('line').forEach(n => {
elements.push({
type: 'line',
x1: parseFloat(n.getAttribute('x1')),
y1: parseFloat(n.getAttribute('y1')),
x2: parseFloat(n.getAttribute('x2')),
y2: parseFloat(n.getAttribute('y2')),
});
});
xml.querySelectorAll('rect').forEach(n => {
elements.push({
type: 'rect',
x: parseFloat(n.getAttribute('x')),
y: parseFloat(n.getAttribute('y')),
width: parseFloat(n.getAttribute('width')),
height: parseFloat(n.getAttribute('height')),
});
});
xml.querySelectorAll('label').forEach(n => {
elements.push({
type: 'label',
x: parseFloat(n.getAttribute('x')),
y: parseFloat(n.getAttribute('y')),
text: n.textContent
});
});
xml.querySelectorAll('image').forEach(n => {
elements.push({
type:
