From ee38b3ce61a05c35111c61e11b4ebb7a66f56c60 Mon Sep 17 00:00:00 2001
From: SondreB <sondre@outlook.com>
Date: Sun, 17 Nov 2024 00:13:21 +0100
Subject: [PATCH] Make the toolbar act on foremost photo

---
 .../photo-collage/photo-collage.component.ts  | 47 +++++++++++--------
 1 file changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/app/photo-collage/photo-collage.component.ts b/src/app/photo-collage/photo-collage.component.ts
index f41f631..481f278 100644
--- a/src/app/photo-collage/photo-collage.component.ts
+++ b/src/app/photo-collage/photo-collage.component.ts
@@ -277,10 +277,16 @@ export class PhotoCollageComponent implements AfterViewInit, OnDestroy {
     const canvasX = (x - this.panX) / this.scale;
     const canvasY = (y - this.panY) / this.scale;
     
-    return this.photos.find(photo => 
-      canvasX >= photo.x && canvasX <= photo.x + photo.width &&
-      canvasY >= photo.y && canvasY <= photo.y + photo.height
-    ) || null;
+    // Find all photos at this position and sort by z-index in descending order
+    const photosAtPosition = this.photos
+      .filter(photo => 
+        canvasX >= photo.x && canvasX <= photo.x + photo.width &&
+        canvasY >= photo.y && canvasY <= photo.y + photo.height
+      )
+      .sort((a, b) => b.zIndex - a.zIndex);
+    
+    // Return the topmost photo (highest z-index) or null if none found
+    return photosAtPosition[0] || null;
   }
 
   private handleDoubleClick(event: MouseEvent) {
@@ -419,21 +425,24 @@ export class PhotoCollageComponent implements AfterViewInit, OnDestroy {
       const photo = this.findPhotoAtPosition(event.offsetX, event.offsetY);
       if (photo || this.isOnControls) {
         if (photo) {
-          // Convert photo position to screen coordinates
-          const screenX = (photo.x * this.scale) + this.panX;
-          const screenY = (photo.y * this.scale) + this.panY;
-          
-          this.hoveredPhoto = {
-            ...photo,
-            screenX,
-            screenY
-          };
-          
-          // Position controls in center of photo
-          this.controlsPosition = {
-            x: screenX + ((photo.width * photo.scale) * this.scale) / 2,
-            y: screenY + ((photo.height * photo.scale) * this.scale) / 2
-          };
+          // Only update if it's a different photo or no photo is currently hovered
+          if (!this.hoveredPhoto || this.hoveredPhoto.id !== photo.id) {
+            // Convert photo position to screen coordinates
+            const screenX = (photo.x * this.scale) + this.panX;
+            const screenY = (photo.y * this.scale) + this.panY;
+            
+            this.hoveredPhoto = {
+              ...photo,
+              screenX,
+              screenY
+            };
+            
+            // Position controls in center of photo
+            this.controlsPosition = {
+              x: screenX + ((photo.width * photo.scale) * this.scale) / 2,
+              y: screenY + ((photo.height * photo.scale) * this.scale) / 2
+            };
+          }
         }
       } else {
         this.hoveredPhoto = null;