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

feat(annotations): support multiple pins per part

Browse Source
This commit is contained in:
Martin Grigoryan 2025-10-30 17:08:57 +04:00
parent f6ea17388c
commit 03642fdfab
1 changed files with 48 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
public/userarea/annotationsModal.js
View File

@ -18,6 +18,7 @@ $(document).ready(function () {
let fabricCanvas = null; let fabricCanvas = null;
let descriptionTextbox = null; let descriptionTextbox = null;
let markerObjects = {}; let markerObjects = {};
let nextMarkerId = 1;
let partsListData = []; let partsListData = [];
// DIMENSIONE GLOBALE MARKER // DIMENSIONE GLOBALE MARKER
let globalMarkerSize = 24; let globalMarkerSize = 24;
@ -159,6 +160,16 @@ $(document).ready(function () {
.on("input", "#markerSizeSlider", function () { .on("input", "#markerSizeSlider", function () {
globalMarkerSize = parseInt($(this).val()); globalMarkerSize = parseInt($(this).val());
$("#markerSizeValue").text(globalMarkerSize + "px"); $("#markerSizeValue").text(globalMarkerSize + "px");
partsListData.forEach(function (part) {
if (part && part.part_number != null) {
partSizes[part.part_number] = globalMarkerSize;
}
});
$("#partsListAnnotations .marker-size-slider").val(globalMarkerSize);
$("#partsListAnnotations .marker-size-value").text(globalMarkerSize + "px");
updateMarkers(); updateMarkers();
markUnsaved(); markUnsaved();
}); });
@ -366,22 +377,13 @@ $(document).ready(function () {
const partColor = const partColor =
partColors[selectedPartNumber] || "#ff0000"; partColors[selectedPartNumber] || "#ff0000";
const existingMarker = photoAnnotations[ photoAnnotations[currentPhoto].markers.push({
currentPhoto id: nextMarkerId++,
].markers.find((m) => m.partNumber == selectedPartNumber); partNumber: selectedPartNumber,
x,
if (existingMarker) { y,
existingMarker.x = x; color: partColor,
existingMarker.y = y; });
existingMarker.color = partColor;
} else {
photoAnnotations[currentPhoto].markers.push({
partNumber: selectedPartNumber,
x,
y,
color: partColor,
});
}
console.log("Marker aggiunto/spostato:", { console.log("Marker aggiunto/spostato:", {
partNumber: selectedPartNumber, partNumber: selectedPartNumber,
@ -391,8 +393,6 @@ $(document).ready(function () {
}); });
updateMarkers(); updateMarkers();
markUnsaved(); markUnsaved();
selectedPartNumber = null;
$("#partsListAnnotations li").removeClass("active");
}); });
fabricCanvas.upperCanvasEl.focus(); fabricCanvas.upperCanvasEl.focus();
@ -711,12 +711,23 @@ $(document).ready(function () {
.find(".selected-color") .find(".selected-color")
.css("background-color", color); .css("background-color", color);
// Se il marker è già presente, aggiorna anche sul canvas let currentPhoto = $("#samplePhotoAnnotations").attr("src");
if (markerObjects[partNumber]) { let annotations = photoAnnotations[currentPhoto];
const group = markerObjects[partNumber];
const circle = group.item(0); // il cerchio if (annotations) {
circle.set("fill", color); annotations.markers.forEach(function (m) {
circle.set("stroke", color); if (m.partNumber == partNumber) {
m.color = color;
let group = markerObjects[m.id];
if (group) {
let circle = group.item(0);
circle.set("fill", color);
circle.set("stroke", color);
}
}
});
fabricCanvas.renderAll(); fabricCanvas.renderAll();
} }
@ -904,9 +915,9 @@ $(document).ready(function () {
"updateMarkers chiamato, markerObjects:", "updateMarkers chiamato, markerObjects:",
Object.keys(markerObjects), Object.keys(markerObjects),
); );
for (let partNumber in markerObjects) { for (let markerId in markerObjects) {
fabricCanvas.remove(markerObjects[partNumber]); fabricCanvas.remove(markerObjects[markerId]);
delete markerObjects[partNumber]; delete markerObjects[markerId];
} }
markerObjects = {}; markerObjects = {};
@ -987,6 +998,9 @@ $(document).ready(function () {
lockRotation: true, lockRotation: true,
}); });
group.markerId = marker.id;
group.partNumber = marker.partNumber;
group.on("moving", function () { group.on("moving", function () {
marker.x = this.left / photoData.scale; marker.x = this.left / photoData.scale;
marker.y = this.top / photoData.scale; marker.y = this.top / photoData.scale;
@ -999,7 +1013,7 @@ $(document).ready(function () {
}); });
fabricCanvas.add(group); fabricCanvas.add(group);
markerObjects[marker.partNumber] = group; markerObjects[marker.id] = group;
}); });
fabricCanvas.renderAll(); fabricCanvas.renderAll();
@ -1153,9 +1167,9 @@ $(document).ready(function () {
} }
} }
for (let partNumber in markerObjects) { for (let markerId in markerObjects) {
fabricCanvas.remove(markerObjects[partNumber]); fabricCanvas.remove(markerObjects[markerId]);
delete markerObjects[partNumber]; delete markerObjects[markerId];
} }
markerObjects = {}; markerObjects = {};
@ -1190,9 +1204,9 @@ $(document).ready(function () {
photoAnnotations[currentPhoto].markers.length > 0 photoAnnotations[currentPhoto].markers.length > 0
) { ) {
const lastMarker = photoAnnotations[currentPhoto].markers.pop(); const lastMarker = photoAnnotations[currentPhoto].markers.pop();
if (markerObjects[lastMarker.partNumber]) { if (markerObjects[lastMarker.id]) {
fabricCanvas.remove(markerObjects[lastMarker.partNumber]); fabricCanvas.remove(markerObjects[lastMarker.id]);
delete markerObjects[lastMarker.partNumber]; delete markerObjects[lastMarker.id];
fabricCanvas.renderAll(); fabricCanvas.renderAll();
} }
console.log("Ultimo marker rimosso:", lastMarker); console.log("Ultimo marker rimosso:", lastMarker);