Improve focal point editor to precisely set image focus for various aspect ratios

Refactor the `FocalPointEditor` component in `admin-gallery.tsx` to accurately map click coordinates on aspect ratio previews to the original image's focal point. This involves recalculating the mapping logic to account for image scaling and cropping (`object-fit: cover`). Additionally, new focal point data has been added to `server/gallery-focal-points.json`, and some image mappings in `server/cloudinary-gallery-map.json` have been adjusted.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 23852c00-4779-460a-9e0c-d09fee4b6c92
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 2f918981-5322-41bc-8a92-d34c6986c129
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/23852c00-4779-460a-9e0c-d09fee4b6c92/ncMMRQ9
Replit-Helium-Checkpoint-Created: true

client/src/pages/admin-gallery.tsx

@@ -140,12 +140,31 @@ function FocalPointEditor({
 
   const handlePreviewClick = (e: React.MouseEvent<HTMLDivElement>) => {
     const rect = e.currentTarget.getBoundingClientRect();
-    const clickX = (e.clientX - rect.left) / rect.width;
+    const contW = rect.width;
-    const clickY = (e.clientY - rect.top) / rect.height;
+    const contH = rect.height;
-    const currentPos = point || { x: 50, y: 15 };
+    const cx = e.clientX - rect.left;
-    const newX = Math.round(Math.max(0, Math.min(100, currentPos.x + (clickX - 0.5) * 30)));
+    const cy = e.clientY - rect.top;
-    const newY = Math.round(Math.max(0, Math.min(100, currentPos.y + (clickY - 0.5) * 30)));
+
-    setPoint({ x: newX, y: newY });
+    const imgW = image.width;
+    const imgH = image.height;
+
+    const px = (point?.x ?? 50) / 100;
+    const py = (point?.y ?? 15) / 100;
+
+    const scale = Math.max(contW / imgW, contH / imgH);
+    const scaledW = imgW * scale;
+    const scaledH = imgH * scale;
+
+    const overflowX = scaledW - contW;
+    const overflowY = scaledH - contH;
+
+    const origX = (cx + overflowX * px) / scaledW * 100;
+    const origY = (cy + overflowY * py) / scaledH * 100;
+
+    setPoint({
+      x: Math.round(Math.max(0, Math.min(100, origX))),
+      y: Math.round(Math.max(0, Math.min(100, origY))),
+    });
   };
 
   const handleZoomIn = () => setZoom((z) => Math.min(z + 0.5, 4));

server/cloudinary-gallery-map.json

@@ -7,7 +7,6 @@
   "Julia Buchner 1 .jpg": "folx-gallery/Julia_Buchner_1_",
   "John Prisco 1.jpg": "folx-gallery/John_Prisco_1",
   "Mosaik 4.jpg": "folx-gallery/Mosaik_4",
-  "Acarina 1 (1).jpg": "folx-gallery/Acarina_1__1_",
   "Grazer Spitzbuam 2.jpg": "folx-gallery/Grazer_Spitzbuam_2",
   "Maibritt 1 (1).jpg": "folx-gallery/Maibritt_1__1_",
   "Sellraintaler Exklusiv 2.jpg": "folx-gallery/Sellraintaler_Exklusiv_2",
@@ -78,7 +77,6 @@
   "Grazer Spitzbuam 1.jpg": "folx-gallery/Grazer_Spitzbuam_1",
   "Arina 1.jpg": "folx-gallery/Arina_1",
   "Maibritt 2.jpg": "folx-gallery/Maibritt_2",
-  "Acarina 1.jpg": "folx-gallery/Acarina_1",
   "Aufwärts 1.jpg": "folx-gallery/Aufw_rts_1",
   "Aufwärts 2.jpg": "folx-gallery/Aufw_rts_2",
   "Sellraintaler Exklusiv 1.jpg": "folx-gallery/Sellraintaler_Exklusiv_1",

server/gallery-focal-points.json

@@ -50,5 +50,33 @@
   "DSC08350.jpg": {
     "x": 51,
     "y": 33
+  },
+  "Berny Blank 1.jpg": {
+    "x": 44,
+    "y": 31
+  },
+  "Christa Fartek und Robert F   1 .jpg": {
+    "x": 49,
+    "y": 27
+  },
+  "Die 3 K rntner 1.jpg": {
+    "x": 28,
+    "y": 36
+  },
+  "Die Zwirn 2.jpg": {
+    "x": 50,
+    "y": 29
+  },
+  "DSC07177.jpg": {
+    "x": 0,
+    "y": 0
+  },
+  "DSC07217.jpg": {
+    "x": 52,
+    "y": 0
+  },
+  "Adriana 1.jpg": {
+    "x": 100,
+    "y": 23
   }
 }