Add size options

Author: sondreb

src/app/photo-collage/photo-collage.component.css

@@ -141,3 +141,100 @@ canvas {
 .remove-btn:hover {
   background: #ff6666;
 }
+
+.toggle-btn {
+  background: rgba(128, 128, 128, 0.9) !important;
+}
+
+.toggle-btn.active {
+  background: rgba(0, 200, 0, 0.9) !important;
+}
+
+.toggle-btn:hover {
+  background: rgba(128, 128, 128, 1) !important;
+}
+
+.toggle-btn.active:hover {
+  background: rgba(0, 200, 0, 1) !important;
+}
+
+.save-group {
+  position: relative;
+  display: inline-block;
+}
+
+.save-group:hover .save-options,
+.save-options:hover {
+  display: flex;
+}
+
+.save-options {
+  display: none;
+  position: absolute;
+  bottom: calc(100% + 2px);  /* Changed from 5px to 2px for closer proximity */
+  left: 0;
+  right: 0;
+  flex-direction: column;
+  gap: 5px;
+  background: rgba(0, 0, 0, 0.8);
+  padding: 5px;
+  border-radius: 10px;
+  padding-bottom: 8px;
+  margin-bottom: 0;  /* Removed margin-bottom */
+}
+
+/* Add a small connecting element to visually link the options with the button */
+.save-options:after {
+  content: '';
+  position: absolute;
+  bottom: -4px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid rgba(0, 0, 0, 0.8);
+}
+
+.size-btn {
+  padding: 5px 10px !important;
+  font-size: 12px !important;
+  background: rgba(128, 128, 128, 0.9) !important;
+}
+
+.size-btn:hover {
+  background: rgba(128, 128, 128, 1) !important;
+}
+
+.size-btn.active {
+  background: rgba(0, 123, 255, 0.9) !important;
+}
+
+.size-btn.active:hover {
+  background: rgba(0, 123, 255, 1) !important;
+}
+
+.size-label {
+  color: white;
+  font-size: 12px;
+  text-align: center;
+}
+
+.size-buttons {
+  display: flex;
+  gap: 5px;
+  justify-content: center;
+}
+
+/* Media query for touch devices */
+@media (hover: none) {
+  .save-options {
+    position: static;
+    margin: 0 0 10px 0;
+  }
+  
+  .save-group {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+}

src/app/photo-collage/photo-collage.component.html

@@ -43,7 +43,32 @@
          style="display: none">
   <div class="controls">
     <button (click)="fileInput.click()">Add Photos</button>
-    <button (click)="saveCollage()">Save Collage</button>
+    <div class="save-group">
+      <div class="save-options">
+        <div class="size-label">Size:</div>
+        <div class="size-buttons">
+          <button 
+            (click)="setSaveSize('normal')" 
+            [class.active]="saveSize === 'normal'"
+            class="size-btn">
+            Normal
+          </button>
+          <button 
+            (click)="setSaveSize('medium')" 
+            [class.active]="saveSize === 'medium'"
+            class="size-btn">
+            Medium
+          </button>
+          <button 
+            (click)="setSaveSize('large')" 
+            [class.active]="saveSize === 'large'"
+            class="size-btn">
+            Large
+          </button>
+        </div>
+      </div>
+      <button (click)="saveCollage()">Save Collage ({{saveSize}})</button>
+    </div>
     <button (click)="resetCollage()">Reset</button>
   </div>
 </div>

src/app/photo-collage/photo-collage.component.ts

@@ -59,6 +59,7 @@ export class PhotoCollageComponent implements AfterViewInit, OnDestroy {
   controlsPosition = { x: 0, y: 0 };
   private isOnControls = false;
   private imageCache: Map<string, HTMLImageElement> = new Map();
+  saveSize: 'normal' | 'medium' | 'large' = 'medium';
 
   presets: CollagePreset[] = [
     {
@@ -211,13 +212,62 @@ export class PhotoCollageComponent implements AfterViewInit, OnDestroy {
   }
 
   saveCollage() {
-    const dataUrl = this.canvas.toDataURL('image/png');
+    // Adjust scale based on selected size
+    const scales = {
+      normal: 2,
+      medium: 3,
+      large: 6
+    };
+    const scale = scales[this.saveSize];
+    
+    // Rest of the saveCollage method remains the same
+    const tempCanvas = document.createElement('canvas');
+    tempCanvas.width = this.canvas.width * scale;
+    tempCanvas.height = this.canvas.height * scale;
+    const tempCtx = tempCanvas.getContext('2d');
+    
+    if (!tempCtx) return;
+    
+    // Clear and prepare the temporary canvas
+    tempCtx.fillStyle = 'white';
+    tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
+    
+    // Sort photos by z-index
+    const sortedPhotos = [...this.photos].sort((a, b) => a.zIndex - b.zIndex);
+    
+    // Apply the same transforms as the main canvas, but scaled up
+    tempCtx.setTransform(1, 0, 0, 1, 0, 0);
+    tempCtx.translate(this.panX * scale, this.panY * scale);
+    tempCtx.scale(this.scale * scale, this.scale * scale);
+    
+    // Draw each photo at high resolution
+    for (const photo of sortedPhotos) {
+      const img = this.imageCache.get(photo.url);
+      if (!img) continue;
+      
+      tempCtx.save();
+      tempCtx.translate(photo.x + photo.width/2, photo.y + photo.height/2);
+      tempCtx.rotate(photo.rotation);
+      tempCtx.scale(photo.scale, photo.scale);
+      tempCtx.drawImage(img, -photo.width/2, -photo.height/2, photo.width, photo.height);
+      tempCtx.restore();
+    }
+    
+    // Reset transform
+    tempCtx.setTransform(1, 0, 0, 1, 0, 0);
+    
+    // Create download link
+    const dataUrl = tempCanvas.toDataURL('image/png');
     const link = document.createElement('a');
     link.download = 'collage.png';
     link.href = dataUrl;
     link.click();
   }
 
+  setSaveSize(size: 'normal' | 'medium' | 'large') {
+    this.saveSize = size;
+  }
+
   private handleZoom(event: WheelEvent) {
     event.preventDefault();