solocla/theloftstore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added cut

Browse Source
This commit is contained in:
Claudio
2025-09-08 10:26:15 +02:00
parent 7a944a73f7
commit a45ba1c8b3
13 changed files with 50425 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/userarea/photos.js
+266 -13
View File
@@ -396,11 +396,21 @@ document.addEventListener("DOMContentLoaded", function () {
closeCollageBtn.addEventListener("click", () => {
console.log("Chiusura modale collage");
document.getElementById("collageModal").style.display = "none";
if (isCropping) {
console.log(
"Chiusura modale durante ritaglio, esco dalla modalità ritaglio",
);
exitCropMode();
}
});
}
// Inizializza canvas con Fabric.js
let canvas;
let cropRect = null;
let isCropping = false;
let croppedImage = null; // Memorizza l'immagine da ritagliare
let isApplyingCrop = false; // Flag per prevenire duplicazioni
function initCollageCanvas() {
if (typeof fabric === "undefined") {
console.error("Fabric.js non è caricato!");
@@ -413,8 +423,206 @@ document.addEventListener("DOMContentLoaded", function () {
backgroundColor: "#fff",
selection: true,
});
// Imposta stile globale per i controlli
fabric.Object.prototype.set({
cornerColor: "black",
cornerStrokeColor: "black",
cornerSize: 12,
borderColor: "black",
transparentCorners: false,
});
// Abilita ridimensionamento e trascinamento
canvas.on("object:modified", () => canvas.renderAll());
canvas.on("object:modified", () => {
console.log("Oggetto modificato nel canvas");
canvas.renderAll();
});
// Gestisci selezione per abilitare/disabilitare pulsanti di ritaglio
canvas.on("selection:created", () => {
console.log("Evento selection:created triggerato");
updateCropButtons();
});
canvas.on("selection:updated", () => {
console.log("Evento selection:updated triggerato");
updateCropButtons();
});
canvas.on("selection:cleared", () => {
console.log("Evento selection:cleared triggerato");
if (!isCropping) {
updateCropButtons();
} else {
console.log(
"Ignoro selection:cleared perché in modalità ritaglio",
);
if (cropRect) {
canvas.setActiveObject(cropRect); // Ripristina selezione del rettangolo
canvas.renderAll();
}
}
});
// Forza un aggiornamento iniziale dei pulsanti
updateCropButtons();
}
// Aggiorna stato dei pulsanti di ritaglio
function updateCropButtons() {
const cropBtn = document.getElementById("cropImageBtn");
const applyCropBtn = document.getElementById("applyCropBtn");
const cancelCropBtn = document.getElementById("cancelCropBtn");
const activeObject = canvas.getActiveObject();
console.log(
"updateCropButtons: activeObject =",
activeObject ? activeObject.type : null,
"isCropping =",
isCropping,
);
if (isCropping && cropRect) {
console.log(
"Modo ritaglio attivo, applyCropBtn e cancelCropBtn abilitati",
);
cropBtn.disabled = true;
applyCropBtn.disabled = false;
if (cancelCropBtn) cancelCropBtn.disabled = false;
} else if (
activeObject &&
activeObject.type === "image" &&
!isCropping
) {
console.log("Abilitazione cropImageBtn");
cropBtn.disabled = false;
applyCropBtn.disabled = true;
if (cancelCropBtn) cancelCropBtn.disabled = true;
} else {
console.log(
"Disabilitazione cropImageBtn, applyCropBtn e cancelCropBtn",
);
cropBtn.disabled = true;
applyCropBtn.disabled = true;
if (cancelCropBtn) cancelCropBtn.disabled = true;
}
}
// Entra in modalità ritaglio
function enterCropMode() {
const activeObject = canvas.getActiveObject();
if (!activeObject || activeObject.type !== "image") {
console.warn("Nessuna immagine selezionata per il ritaglio");
alert("Seleziona un'immagine prima di attivare il ritaglio!");
return;
}
console.log(
"Entrata in modalità ritaglio per immagine:",
activeObject,
);
isCropping = true;
croppedImage = activeObject; // Memorizza l'immagine da ritagliare
canvas.discardActiveObject(); // Deseleziona l'immagine
// Crea un rettangolo di ritaglio
cropRect = new fabric.Rect({
left: activeObject.left,
top: activeObject.top,
width: activeObject.width * activeObject.scaleX * 0.5,
height: activeObject.height * activeObject.scaleY * 0.5,
fill: "rgba(0, 0, 0, 0.3)",
stroke: "red",
strokeWidth: 2,
hasBorders: true,
hasControls: true,
lockRotation: true,
selectable: true,
cornerColor: "black",
cornerStrokeColor: "black",
cornerSize: 12,
borderColor: "black",
transparentCorners: false,
});
canvas.add(cropRect);
canvas.setActiveObject(cropRect);
canvas.renderAll();
document.getElementById("cropImageBtn").disabled = true;
document.getElementById("applyCropBtn").disabled = false;
const cancelCropBtn = document.getElementById("cancelCropBtn");
if (cancelCropBtn) cancelCropBtn.disabled = false;
console.log("Rettangolo di ritaglio creato e applicato");
}
// Esci dalla modalità ritaglio
function exitCropMode() {
if (cropRect) {
console.log("Rimozione rettangolo di ritaglio");
canvas.remove(cropRect);
cropRect = null;
}
isCropping = false;
croppedImage = null;
isApplyingCrop = false;
canvas.discardActiveObject();
canvas.renderAll();
updateCropButtons();
console.log("Uscita dalla modalità ritaglio");
}
// Applica il ritaglio
function applyCrop() {
if (isApplyingCrop) {
console.log("applyCrop già in esecuzione, ignoro chiamata");
return;
}
console.log("applyCrop chiamato, stato:", {
isCropping,
cropRect: !!cropRect,
croppedImage: !!croppedImage,
});
if (!isCropping || !cropRect || !croppedImage) {
console.warn("Condizioni per il ritaglio non soddisfatte", {
isCropping,
cropRect: !!cropRect,
croppedImage: !!croppedImage,
});
alert(
"Nessun rettangolo di ritaglio attivo o immagine selezionata!",
);
exitCropMode();
return;
}
isApplyingCrop = true;
console.log("Applicazione ritaglio all'immagine:", croppedImage);
const img = croppedImage;
const cropX = (cropRect.left - img.left) / img.scaleX;
const cropY = (cropRect.top - img.top) / img.scaleY;
const cropWidth = cropRect.width / img.scaleX;
const cropHeight = cropRect.height / img.scaleY;
// Crea un'immagine ritagliata
fabric.Image.fromURL(
img.getSrc(),
(newImg) => {
newImg.set({
left: cropRect.left,
top: cropRect.top,
scaleX: img.scaleX,
scaleY: img.scaleY,
cropX: cropX,
cropY: cropY,
width: cropWidth,
height: cropHeight,
hasControls: true,
hasBorders: true,
cornerColor: "black",
cornerStrokeColor: "black",
cornerSize: 12,
borderColor: "black",
transparentCorners: false,
});
canvas.remove(img); // Rimuovi l'immagine originale
canvas.remove(cropRect); // Rimuovi il rettangolo di ritaglio
canvas.add(newImg); // Aggiungi l'immagine ritagliata
canvas.setActiveObject(newImg);
exitCropMode();
canvas.renderAll();
console.log("Ritaglio applicato con successo");
},
{ crossOrigin: "anonymous" },
);
}
// Aggiungi foto selezionate al canvas
@@ -430,18 +638,31 @@ document.addEventListener("DOMContentLoaded", function () {
}
checkboxes.forEach((cb) => {
const imgPath = cb.getAttribute("data-path");
fabric.Image.fromURL(imgPath, (img) => {
img.set({
left: Math.random() * 600, // Posizione random iniziale
top: Math.random() * 400,
scaleX: 0.5, // Scala iniziale
scaleY: 0.5,
hasControls: true, // Abilita resize/rotate
hasBorders: true,
});
canvas.add(img);
canvas.renderAll();
});
fabric.Image.fromURL(
imgPath,
(img) => {
img.set({
left: Math.random() * 600, // Posizione random iniziale
top: Math.random() * 400,
scaleX: 0.5, // Scala iniziale
scaleY: 0.5,
hasControls: true, // Abilita resize/rotate
hasBorders: true,
cornerColor: "black",
cornerStrokeColor: "black",
cornerSize: 12,
borderColor: "black",
transparentCorners: false,
});
canvas.add(img);
canvas.renderAll();
console.log(
"Immagine aggiunta al canvas:",
imgPath,
);
},
{ crossOrigin: "anonymous" },
);
});
// Deseleziona checkbox dopo aggiunta
checkboxes.forEach((cb) => (cb.checked = false));
@@ -470,6 +691,7 @@ document.addEventListener("DOMContentLoaded", function () {
// Chiudi modale e ricarica popup
document.getElementById("collageModal").style.display = "none";
loadPopupContent(iddatadb);
console.log("Collage salvato e modale chiuso");
});
}
@@ -480,6 +702,7 @@ document.addEventListener("DOMContentLoaded", function () {
canvas.clear();
canvas.setBackgroundColor("#fff");
canvas.renderAll();
console.log("Canvas pulito");
});
}
@@ -491,6 +714,7 @@ document.addEventListener("DOMContentLoaded", function () {
if (activeObject) {
canvas.bringToFront(activeObject);
canvas.renderAll();
console.log("Oggetto portato in primo piano");
} else {
alert("Seleziona un'immagine sul canvas!");
}
@@ -504,6 +728,7 @@ document.addEventListener("DOMContentLoaded", function () {
if (activeObject) {
canvas.sendToBack(activeObject);
canvas.renderAll();
console.log("Oggetto mandato in fondo");
} else {
alert("Seleziona un'immagine sul canvas!");
}
@@ -517,6 +742,7 @@ document.addEventListener("DOMContentLoaded", function () {
if (activeObject) {
canvas.bringForward(activeObject);
canvas.renderAll();
console.log("Oggetto spostato avanti di un livello");
} else {
alert("Seleziona un'immagine sul canvas!");
}
@@ -530,12 +756,39 @@ document.addEventListener("DOMContentLoaded", function () {
if (activeObject) {
canvas.sendBackwards(activeObject);
canvas.renderAll();
console.log("Oggetto spostato indietro di un livello");
} else {
alert("Seleziona un'immagine sul canvas!");
}
});
}
// Gestione ritaglio immagini
const cropImageBtn = document.getElementById("cropImageBtn");
if (cropImageBtn) {
cropImageBtn.addEventListener("click", () => {
console.log("Pulsante Ritaglia cliccato");
enterCropMode();
});
}
const applyCropBtn = document.getElementById("applyCropBtn");
if (applyCropBtn) {
applyCropBtn.addEventListener("click", () => {
console.log("Pulsante Applica Ritaglio cliccato");
applyCrop();
});
}
// Gestione pulsante Annulla Ritaglio
const cancelCropBtn = document.getElementById("cancelCropBtn");
if (cancelCropBtn) {
cancelCropBtn.addEventListener("click", () => {
console.log("Pulsante Annulla Ritaglio cliccato");
exitCropMode();
});
}
// Assicurati che il loader sia nascosto all'apertura del popup
const loader = document.getElementById("loader");
if (loader) {