fixed canvas dimension
This commit is contained in:
parent
5b47416841
commit
447a0d1dea
@ -45,7 +45,7 @@
|
||||
<div class="col-md-6">
|
||||
<h6>Foto del Campione</h6>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 10px;">
|
||||
<button type="button" class="btn btn-secondary btn-sm" id="downloadPhotoBtn" style="padding: 0.1rem 0.5rem; font-size: 0.8rem; margin-right: 10px;"><i class="fas fa-download"></i> Scarica Foto</button>
|
||||
<button type="button" class="btn btn-primary btn-sm" id="downloadPhotoBtn" style="padding: 0.1rem 0.5rem; font-size: 0.8rem; margin-right: 10px;"><i class="fas fa-download"></i> </button>
|
||||
<div id="photoSelectorContainer" style="display: none;"></div>
|
||||
</div>
|
||||
<div style="position: relative; width: 100%; min-height: 400px;">
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
$(document).ready(function () {
|
||||
console.log("parts.js caricato correttamente");
|
||||
|
||||
// ===================
|
||||
// GLOBAL STATE
|
||||
// ===================
|
||||
@ -41,7 +39,6 @@ $(document).ready(function () {
|
||||
][0].transcript
|
||||
.trim()
|
||||
.toLowerCase();
|
||||
console.log("Transcript vocale:", transcript);
|
||||
|
||||
const $currentRow = $("#partsTableBody tr:last");
|
||||
const $descriptionInput = $currentRow.find(".part-description");
|
||||
@ -82,7 +79,6 @@ $(document).ready(function () {
|
||||
};
|
||||
|
||||
recognition.onerror = function (event) {
|
||||
console.error("Errore riconoscimento vocale:", event.error);
|
||||
if (event.error === "no-speech" || event.error === "aborted") {
|
||||
if (isVoiceActive) recognition.start();
|
||||
} else {
|
||||
@ -95,7 +91,6 @@ $(document).ready(function () {
|
||||
if (isVoiceActive) recognition.start();
|
||||
};
|
||||
} else {
|
||||
console.warn("Riconoscimento vocale non supportato dal browser.");
|
||||
$("#toggleVoiceBtn").hide();
|
||||
}
|
||||
|
||||
@ -295,7 +290,6 @@ $(document).ready(function () {
|
||||
const img = $("#samplePhoto");
|
||||
img.off("load").attr("src", photoPath);
|
||||
img.on("load", function () {
|
||||
console.log("Foto caricata:", photoPath);
|
||||
const canvas = document.getElementById("photoCanvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
const naturalWidth = img[0].naturalWidth;
|
||||
@ -370,13 +364,10 @@ $(document).ready(function () {
|
||||
|
||||
// 6. Registra gli eventi
|
||||
fabricCanvas.on("mouse:down", function (options) {
|
||||
console.log("Mouse down event triggered on canvas");
|
||||
if (selectedPartNumber === null) {
|
||||
console.log("Nessun partNumber selezionato");
|
||||
return;
|
||||
}
|
||||
if (options.target) {
|
||||
console.log("Click su oggetto esistente, ignorato");
|
||||
return;
|
||||
}
|
||||
const pointer = fabricCanvas.getPointer(options.e);
|
||||
@ -419,10 +410,6 @@ $(document).ready(function () {
|
||||
markUnsaved();
|
||||
selectedPartNumber = null;
|
||||
$("#partsList li").removeClass("active");
|
||||
console.log(
|
||||
"Marker aggiunto per partNumber:",
|
||||
selectedPartNumber,
|
||||
);
|
||||
});
|
||||
|
||||
// 7. Forza focus e render
|
||||
@ -432,15 +419,6 @@ $(document).ready(function () {
|
||||
// 8. Aggiorna marker e descrizioni esistenti per questa foto
|
||||
updateMarkers();
|
||||
updateDescriptions();
|
||||
|
||||
console.log("Canvas Fabric.js reinizializzato per:", photoPath);
|
||||
console.log(
|
||||
"Dimensioni canvas:",
|
||||
photoData.displayWidth,
|
||||
"x",
|
||||
photoData.displayHeight,
|
||||
);
|
||||
console.log("Scale factor:", photoData.scale);
|
||||
}, 10); // Piccolo delay per assicurare che il DOM sia pronto
|
||||
});
|
||||
}
|
||||
@ -893,7 +871,6 @@ $(document).ready(function () {
|
||||
return;
|
||||
selectedPartNumber = $(this).data("part-number");
|
||||
$(this).addClass("active").siblings().removeClass("active");
|
||||
console.log("PartNumber selezionato:", selectedPartNumber);
|
||||
});
|
||||
|
||||
$("#showMixParts").on("change", function () {
|
||||
@ -1035,7 +1012,6 @@ $(document).ready(function () {
|
||||
// MARKERS & DESCRIPTIONS
|
||||
// ===================
|
||||
function updateMarkers() {
|
||||
console.log("Aggiornamento marker");
|
||||
// Rimuovi marker esistenti
|
||||
for (let partNumber in markerObjects) {
|
||||
fabricCanvas.remove(markerObjects[partNumber]);
|
||||
@ -1120,7 +1096,6 @@ $(document).ready(function () {
|
||||
});
|
||||
|
||||
group.on("moving", function () {
|
||||
console.log("Marker spostato:", marker.partNumber);
|
||||
marker.x = this.left / photoData.scale;
|
||||
marker.y = this.top / photoData.scale;
|
||||
markUnsaved();
|
||||
@ -1131,14 +1106,9 @@ $(document).ready(function () {
|
||||
});
|
||||
|
||||
fabricCanvas.renderAll();
|
||||
console.log(
|
||||
"Marker aggiornati, totale:",
|
||||
Object.keys(markerObjects).length,
|
||||
);
|
||||
}
|
||||
|
||||
function updateDescriptions() {
|
||||
console.log("Aggiornamento descrizioni");
|
||||
const currentPhoto = $("#samplePhoto").attr("src");
|
||||
const annotations = photoAnnotations[currentPhoto] || {
|
||||
markers: [],
|
||||
@ -1189,7 +1159,7 @@ $(document).ready(function () {
|
||||
scaleY: 1,
|
||||
backgroundColor: "rgba(255, 255, 255, 0.8)",
|
||||
fontFamily: "Arial",
|
||||
fontSize: 20,
|
||||
fontSize: 24,
|
||||
fill: "#000000",
|
||||
padding: 10,
|
||||
editable: false,
|
||||
@ -1205,7 +1175,6 @@ $(document).ready(function () {
|
||||
});
|
||||
|
||||
descriptionTextbox.on("scaling", function () {
|
||||
console.log("Descrizione ridimensionata");
|
||||
fitFontToBox(this);
|
||||
annotations.descriptionSize.width = this.width * this.scaleX;
|
||||
annotations.descriptionSize.height = this.height * this.scaleY;
|
||||
@ -1213,7 +1182,6 @@ $(document).ready(function () {
|
||||
});
|
||||
|
||||
descriptionTextbox.on("moving", function () {
|
||||
console.log("Descrizione spostata");
|
||||
annotations.descriptionPosition.x = this.left / photoData.scale;
|
||||
annotations.descriptionPosition.y = this.top / photoData.scale;
|
||||
markUnsaved();
|
||||
@ -1222,11 +1190,10 @@ $(document).ready(function () {
|
||||
fabricCanvas.add(descriptionTextbox);
|
||||
fitFontToBox(descriptionTextbox);
|
||||
fabricCanvas.renderAll();
|
||||
console.log("Descrizioni aggiornate");
|
||||
}
|
||||
|
||||
function fitFontToBox(textbox) {
|
||||
let fontSize = 20;
|
||||
let fontSize = 24;
|
||||
textbox.set("fontSize", fontSize);
|
||||
textbox.setCoords();
|
||||
|
||||
@ -1256,7 +1223,6 @@ $(document).ready(function () {
|
||||
}
|
||||
|
||||
function clearCanvasMarkers(clearDescriptions = true) {
|
||||
console.log("Pulizia marker e descrizioni");
|
||||
const currentPhoto = $("#samplePhoto").attr("src");
|
||||
if (clearDescriptions && photoAnnotations[currentPhoto]) {
|
||||
photoAnnotations[currentPhoto].hasDescriptions = false;
|
||||
@ -1303,7 +1269,6 @@ $(document).ready(function () {
|
||||
}
|
||||
|
||||
function undoLastMarker() {
|
||||
console.log("Annullamento ultimo marker");
|
||||
const currentPhoto = $("#samplePhoto").attr("src");
|
||||
if (
|
||||
photoAnnotations[currentPhoto] &&
|
||||
@ -1320,7 +1285,6 @@ $(document).ready(function () {
|
||||
}
|
||||
|
||||
$("#addDescriptionsBtn").on("click", function () {
|
||||
console.log("Aggiunta descrizioni");
|
||||
const currentPhoto = $("#samplePhoto").attr("src");
|
||||
if (!photoAnnotations[currentPhoto]) {
|
||||
photoAnnotations[currentPhoto] = {
|
||||
@ -1348,7 +1312,6 @@ $(document).ready(function () {
|
||||
// SAVE PHOTO
|
||||
// ===================
|
||||
$("#savePhotoBtn").on("click", function () {
|
||||
console.log("Inizio salvataggio foto");
|
||||
if (!$("#samplePhoto").attr("src")) {
|
||||
const errorMsg = $(
|
||||
'<div class="alert alert-danger temp-alert" role="alert">Nessuna foto caricata da salvare.</div>',
|
||||
@ -1409,7 +1372,6 @@ $(document).ready(function () {
|
||||
}, 5000);
|
||||
};
|
||||
} catch (e) {
|
||||
console.error("Errore in Fabric.js toDataURL:", e);
|
||||
const errorMsg = $(
|
||||
'<div class="alert alert-danger temp-alert" role="alert">Errore durante la generazione dell\'immagine annotata.</div>',
|
||||
);
|
||||
@ -1489,11 +1451,6 @@ $(document).ready(function () {
|
||||
|
||||
// Carica effettivamente la prima foto
|
||||
loadSinglePhoto(firstPhotoPath);
|
||||
|
||||
console.log(
|
||||
"Foto aggiunta al dropdown e ritornato alla prima:",
|
||||
firstPhotoPath,
|
||||
);
|
||||
} else {
|
||||
// Se non c'è dropdown, ricarica la foto corrente per vedere la versione pulita
|
||||
const currentPhoto =
|
||||
@ -1532,7 +1489,6 @@ $(document).ready(function () {
|
||||
// PULISCI IL CANVAS COMPLETAMENTE
|
||||
clearCanvasMarkers(true); // Pulisce marker e descrizioni
|
||||
clearUnsaved();
|
||||
console.log("Foto salvata e originale pulita");
|
||||
} else {
|
||||
const errorMsg = $(
|
||||
'<div class="alert alert-danger temp-alert" role="alert">Errore: ' +
|
||||
@ -1564,7 +1520,6 @@ $(document).ready(function () {
|
||||
},
|
||||
});
|
||||
} catch (e) {
|
||||
console.error("Errore in canvas.toDataURL:", e);
|
||||
const errorMsg = $(
|
||||
'<div class="alert alert-danger temp-alert" role="alert">Errore durante la creazione dell\'immagine finale.</div>',
|
||||
);
|
||||
|
||||
@ -254,7 +254,7 @@ $result->saveToFile($qrCodeFile);
|
||||
<button id="addToCanvasBtn">Aggiungi Selezionate al Canvas</button>
|
||||
|
||||
<!-- Canvas per editing -->
|
||||
<canvas id="collageCanvas" width="800" height="600" style="border: 1px solid #ccc; margin-top: 20px;"></canvas>
|
||||
<canvas id="collageCanvas" width="960" height="720" style="border: 1px solid #ccc; margin-top: 20px;"></canvas>
|
||||
|
||||
<!-- Pannello dei livelli -->
|
||||
<div id="layersPanel" style="width: 120px; max-height: 600px; overflow-y: auto; background: #f8f9fa; padding: 10px; position: absolute; right: 0; top: 60px;">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user