From b4598fb630dfd1ddb4d28eef5e8360b952f41c21 Mon Sep 17 00:00:00 2001
From: SondreB <sondre@outlook.com>
Date: Sat, 16 Nov 2024 22:50:21 +0100
Subject: [PATCH] Show photo controls on hover

---
 .../photo-collage/photo-collage.component.css | 49 +++++++++++++++++
 .../photo-collage.component.html              | 10 +++-
 .../photo-collage/photo-collage.component.ts  | 52 ++++++++++++++++++-
 3 files changed, 109 insertions(+), 2 deletions(-)

diff --git a/src/app/photo-collage/photo-collage.component.css b/src/app/photo-collage/photo-collage.component.css
index dd1f258..5da8c72 100644
--- a/src/app/photo-collage/photo-collage.component.css
+++ b/src/app/photo-collage/photo-collage.component.css
@@ -36,3 +36,52 @@ canvas {
   transform: scale(1.05);
   background: rgba(0, 123, 255, 1);
 }
+
+.canvas-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.photo-controls-container {
+  position: absolute;
+  width: 200px;
+  height: 100px;
+  transform: translate(-50%, -50%);
+  z-index: 1000;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.photo-controls {
+  position: absolute;
+  display: flex;
+  gap: 8px;
+  padding: 8px;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 20px;
+  transform: translate(-50%, -50%);
+  z-index: 1000;
+  pointer-events: all;
+}
+
+.control-btn {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: white;
+  color: #333;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+}
+
+.control-btn:hover {
+  background: #eee;
+}
diff --git a/src/app/photo-collage/photo-collage.component.html b/src/app/photo-collage/photo-collage.component.html
index a253c0c..7ed1945 100644
--- a/src/app/photo-collage/photo-collage.component.html
+++ b/src/app/photo-collage/photo-collage.component.html
@@ -1,7 +1,15 @@
 <div class="collage-container" 
      (dragover)="$event.preventDefault()" 
      (drop)="handleDrop($event)">
-  <canvas #canvas></canvas>
+  <div class="canvas-container">
+    <canvas #canvas></canvas>
+    <div *ngIf="hoveredPhoto" class="photo-controls" [style.left.px]="controlsPosition.x" [style.top.px]="controlsPosition.y">
+      <button (click)="rotatePhoto(-15)" class="control-btn">↺</button>
+      <button (click)="rotatePhoto(15)" class="control-btn">↻</button>
+      <button (click)="scalePhoto(0.9)" class="control-btn">-</button>
+      <button (click)="scalePhoto(1.1)" class="control-btn">+</button>
+    </div>
+  </div>
   <input #fileInput 
          type="file" 
          accept="image/*" 
diff --git a/src/app/photo-collage/photo-collage.component.ts b/src/app/photo-collage/photo-collage.component.ts
index c7519ba..84eefea 100644
--- a/src/app/photo-collage/photo-collage.component.ts
+++ b/src/app/photo-collage/photo-collage.component.ts
@@ -13,6 +13,11 @@ interface PhotoElement {
   scale: number;
 }
 
+interface HoveredPhoto extends PhotoElement {
+  screenX: number;
+  screenY: number;
+}
+
 @Component({
   selector: 'app-photo-collage',
   standalone: true,
@@ -41,6 +46,9 @@ export class PhotoCollageComponent implements AfterViewInit {
   private panX = 0;
   private panY = 0;
   private zoomPoint = { x: 0, y: 0 };
+  hoveredPhoto: HoveredPhoto | null = null;
+  controlsPosition = { x: 0, y: 0 };
+  private isOnControls = false;
 
   ngAfterViewInit() {
     this.canvas = this.canvasRef.nativeElement;
@@ -64,6 +72,8 @@ export class PhotoCollageComponent implements AfterViewInit {
     this.canvas.addEventListener('touchstart', this.handleTouchStart.bind(this));
     this.canvas.addEventListener('touchmove', this.handleTouchMove.bind(this));
     this.canvas.addEventListener('touchend', this.handleTouchEnd.bind(this));
+    this.canvas.addEventListener('mousemove', this.handleHover.bind(this));
+    this.canvas.addEventListener('mouseleave', () => this.hoveredPhoto = null);
   }
 
   handleFileSelect(event: Event) {
@@ -144,6 +154,7 @@ export class PhotoCollageComponent implements AfterViewInit {
     this.lastY = offsetY;
     this.selectedPhoto = this.findPhotoAtPosition(offsetX, offsetY);
     if (this.selectedPhoto) this.isDragging = true;
+    this.hoveredPhoto = null; // Hide controls when dragging
   }
 
   private handleMouseMove(event: MouseEvent) {
@@ -208,7 +219,7 @@ export class PhotoCollageComponent implements AfterViewInit {
     } else if (this.touches.length === 2) {
       const rect = this.canvas.getBoundingClientRect();
       const x = (this.touches[0].clientX + this.touches[1].clientX) / 2 - rect.left;
-      const y = (this.touches[0].clientY + this.touches[1].clientY) / 2 - rect.top;
+      const y = (this.touches[0].clientX + this.touches[1].clientY) / 2 - rect.top;
       
       // Store zoom center point
       this.zoomPoint = {
@@ -273,4 +284,43 @@ export class PhotoCollageComponent implements AfterViewInit {
     const dy = touch1.clientY - touch2.clientY;
     return Math.sqrt(dx * dx + dy * dy);
   }
+
+  private handleHover(event: MouseEvent) {
+    if (!this.isDragging) {
+      const photo = this.findPhotoAtPosition(event.offsetX, event.offsetY);
+      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
+        };
+      } else {
+        this.hoveredPhoto = null;
+      }
+    }
+  }
+
+  rotatePhoto(degrees: number) {
+    if (this.hoveredPhoto) {
+      this.hoveredPhoto.rotation += degrees * (Math.PI / 180);
+      this.render();
+    }
+  }
+
+  scalePhoto(factor: number) {
+    if (this.hoveredPhoto) {
+      this.hoveredPhoto.scale = Math.max(0.1, Math.min(5, this.hoveredPhoto.scale * factor));
+      this.render();
+    }
+  }
 }