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

fixed annotation description placement

Browse Source
This commit is contained in:
Lasha Kapanadze
2025-08-25 19:59:22 +04:00
parent 1bda30e957
commit 1361340928
1 changed files with 27 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/userarea/parts.js
+27 -12
View File
@@ -17,7 +17,7 @@ $(document).ready(function () {
// selection & descriptions // selection & descriptions
let selectedPartNumber = null; let selectedPartNumber = null;
let descriptionPosition = { x: 10, y: 10 }; // NATURAL coords let descriptionPosition = {x: 10, y: 10}; // NATURAL coords
let hasDescriptions = false; let hasDescriptions = false;
// =================== // ===================
@@ -76,7 +76,7 @@ $(document).ready(function () {
$.ajax({ $.ajax({
url: "load_photo.php", url: "load_photo.php",
method: "GET", method: "GET",
data: { iddatadb: iddatadb }, data: {iddatadb: iddatadb},
success: function (response) { success: function (response) {
if (response.success) { if (response.success) {
if (response.photos && response.photos.length > 1) { if (response.photos && response.photos.length > 1) {
@@ -150,7 +150,7 @@ $(document).ready(function () {
const displayHeight = Math.max(1, Math.round(naturalHeight * scale)); const displayHeight = Math.max(1, Math.round(naturalHeight * scale));
// Save globally // Save globally
photoData = { naturalWidth, naturalHeight, displayWidth, displayHeight, scale }; photoData = {naturalWidth, naturalHeight, displayWidth, displayHeight, scale};
// Canvas in REAL size (so saving uses natural coords 1:1) // Canvas in REAL size (so saving uses natural coords 1:1)
canvas.width = naturalWidth; canvas.width = naturalWidth;
@@ -161,8 +161,8 @@ $(document).ready(function () {
canvas.style.height = `${displayHeight}px`; canvas.style.height = `${displayHeight}px`;
// Also size/align the overlay containers to match the canvas // Also size/align the overlay containers to match the canvas
$("#markerContainer").css({ width: `${displayWidth}px`, height: `${displayHeight}px` }); $("#markerContainer").css({width: `${displayWidth}px`, height: `${displayHeight}px`});
$("#descriptionList").css({ maxWidth: `${Math.max(200, Math.round(displayWidth * 0.35))}px` }); $("#descriptionList").css({maxWidth: `${Math.max(200, Math.round(displayWidth * 0.35))}px`});
// Draw fresh image at full resolution // Draw fresh image at full resolution
ctx.clearRect(0, 0, naturalWidth, naturalHeight); ctx.clearRect(0, 0, naturalWidth, naturalHeight);
@@ -233,7 +233,7 @@ $(document).ready(function () {
$.ajax({ $.ajax({
url: "delete_part.php", url: "delete_part.php",
method: "POST", method: "POST",
data: JSON.stringify({ part_id: partId }), data: JSON.stringify({part_id: partId}),
contentType: "application/json", contentType: "application/json",
success: function (response) { success: function (response) {
if (response.success) { if (response.success) {
@@ -316,7 +316,7 @@ $(document).ready(function () {
$.ajax({ $.ajax({
url: "load_parts.php", url: "load_parts.php",
method: "GET", method: "GET",
data: { iddatadb: iddatadb }, data: {iddatadb: iddatadb},
success: function (response) { success: function (response) {
if (response.success) { if (response.success) {
$("#partsTableBody").empty(); $("#partsTableBody").empty();
@@ -427,7 +427,7 @@ $(document).ready(function () {
existingMarker.x = x; existingMarker.x = x;
existingMarker.y = y; existingMarker.y = y;
} else { } else {
photoMarkers[currentPhoto].push({ partNumber: selectedPartNumber, x, y }); photoMarkers[currentPhoto].push({partNumber: selectedPartNumber, x, y});
} }
updateMarkers(); updateMarkers();
@@ -442,7 +442,7 @@ $(document).ready(function () {
markerContainer.empty(); markerContainer.empty();
// keep overlay sized to canvas display // keep overlay sized to canvas display
markerContainer.css({ width: `${photoData.displayWidth}px`, height: `${photoData.displayHeight}px` }); markerContainer.css({width: `${photoData.displayWidth}px`, height: `${photoData.displayHeight}px`});
const currentPhoto = $("#samplePhoto").attr("src"); const currentPhoto = $("#samplePhoto").attr("src");
const markers = photoMarkers[currentPhoto] || []; const markers = photoMarkers[currentPhoto] || [];
@@ -488,7 +488,7 @@ $(document).ready(function () {
currentX = Math.max(0, Math.min(currentX, maxX)); currentX = Math.max(0, Math.min(currentX, maxX));
currentY = Math.max(0, Math.min(currentY, maxY)); currentY = Math.max(0, Math.min(currentY, maxY));
$element.css({ left: currentX + "px", top: currentY + "px" }); $element.css({left: currentX + "px", top: currentY + "px"});
if (item && item.partNumber) { if (item && item.partNumber) {
item.x = (currentX + 8) / photoData.scale; item.x = (currentX + 8) / photoData.scale;
@@ -555,7 +555,7 @@ $(document).ready(function () {
$("#addDescriptionsBtn").on("click", function () { $("#addDescriptionsBtn").on("click", function () {
hasDescriptions = true; hasDescriptions = true;
descriptionPosition = { x: 10, y: 10 }; descriptionPosition = {x: 10, y: 10};
drawDescriptions(descriptionPosition.x, descriptionPosition.y); drawDescriptions(descriptionPosition.x, descriptionPosition.y);
makeDraggable($("#descriptionList")); makeDraggable($("#descriptionList"));
}); });
@@ -651,7 +651,22 @@ $(document).ready(function () {
// ტექსტი // ტექსტი
ctx.fillStyle = "#111111"; ctx.fillStyle = "#111111";
partsList.forEach((part, index) => { partsList.forEach((part, index) => {
ctx.fillText(part, x + 15, y + 35 + index * textHeight); const domWidth = $("#samplePhoto").width();
const domHeight = $("#samplePhoto").height();
// NATURAL ზომა (ფაილის რეალური ზომა)
const naturalWidth = photoData.naturalWidth;
const naturalHeight = photoData.naturalHeight;
// მასშტაბები
const scaleX = naturalWidth / domWidth;
const scaleY = naturalHeight / domHeight;
// გადაყვანილი კოორდინატები
const x = descriptionPosition.x * scaleX;
const y = descriptionPosition.y * scaleY;
ctx.fillText(part, x + 15, y + 35 + index * textHeight);
}); });
} }