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