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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
public/userarea/parts.js
View File

@ -17,7 +17,7 @@ $(document).ready(function () {
// selection & descriptions
let selectedPartNumber = null;
let descriptionPosition = { x: 10, y: 10 }; // NATURAL coords
let descriptionPosition = {x: 10, y: 10}; // NATURAL coords
let hasDescriptions = false;
// ===================
@ -76,7 +76,7 @@ $(document).ready(function () {
$.ajax({
url: "load_photo.php",
method: "GET",
data: { iddatadb: iddatadb },
data: {iddatadb: iddatadb},
success: function (response) {
if (response.success) {
if (response.photos && response.photos.length > 1) {
@ -150,7 +150,7 @@ $(document).ready(function () {
const displayHeight = Math.max(1, Math.round(naturalHeight * scale));
// 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.width = naturalWidth;
@ -161,8 +161,8 @@ $(document).ready(function () {
canvas.style.height = `${displayHeight}px`;
// Also size/align the overlay containers to match the canvas
$("#markerContainer").css({ width: `${displayWidth}px`, height: `${displayHeight}px` });
$("#descriptionList").css({ maxWidth: `${Math.max(200, Math.round(displayWidth * 0.35))}px` });
$("#markerContainer").css({width: `${displayWidth}px`, height: `${displayHeight}px`});
$("#descriptionList").css({maxWidth: `${Math.max(200, Math.round(displayWidth * 0.35))}px`});
// Draw fresh image at full resolution
ctx.clearRect(0, 0, naturalWidth, naturalHeight);
@ -233,7 +233,7 @@ $(document).ready(function () {
$.ajax({
url: "delete_part.php",
method: "POST",
data: JSON.stringify({ part_id: partId }),
data: JSON.stringify({part_id: partId}),
contentType: "application/json",
success: function (response) {
if (response.success) {
@ -316,7 +316,7 @@ $(document).ready(function () {
$.ajax({
url: "load_parts.php",
method: "GET",
data: { iddatadb: iddatadb },
data: {iddatadb: iddatadb},
success: function (response) {
if (response.success) {
$("#partsTableBody").empty();
@ -427,7 +427,7 @@ $(document).ready(function () {
existingMarker.x = x;
existingMarker.y = y;
} else {
photoMarkers[currentPhoto].push({ partNumber: selectedPartNumber, x, y });
photoMarkers[currentPhoto].push({partNumber: selectedPartNumber, x, y});
}
updateMarkers();
@ -442,7 +442,7 @@ $(document).ready(function () {
markerContainer.empty();
// 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 markers = photoMarkers[currentPhoto] || [];
@ -488,7 +488,7 @@ $(document).ready(function () {
currentX = Math.max(0, Math.min(currentX, maxX));
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) {
item.x = (currentX + 8) / photoData.scale;
@ -555,7 +555,7 @@ $(document).ready(function () {
$("#addDescriptionsBtn").on("click", function () {
hasDescriptions = true;
descriptionPosition = { x: 10, y: 10 };
descriptionPosition = {x: 10, y: 10};
drawDescriptions(descriptionPosition.x, descriptionPosition.y);
makeDraggable($("#descriptionList"));
});
@ -651,7 +651,22 @@ $(document).ready(function () {
// ტექსტი
ctx.fillStyle = "#111111";
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);
});
}