move image, edit image

src/app/edit-image-modal/edit-image-modal.component.ts

@@ -12,6 +12,9 @@ import { DeckImage, DeckService, OcrResult } from '../deck.service';
   imports: [CommonModule]
 })
 export class EditImageModalComponent implements AfterViewInit, OnDestroy {
+  // Konstante für die Boxfarbe
+  private readonly BOX_COLOR = 'rgba(255, 0, 0, 0.3)'; // Rot mit Transparenz
+
   @Input() deckName: string = '';
   @Input() imageData : {imageSrc:string|ArrayBuffer|null, deckImage:DeckImage|null} = {imageSrc:null,deckImage:null};
   @Output() imageSaved = new EventEmitter<void>();
@@ -35,7 +38,7 @@ export class EditImageModalComponent implements AfterViewInit, OnDestroy {
     this.modal = new Modal(this.modalElement.nativeElement,{
       onHide: () => {
         this.closed.emit();
-    }},
+      }},
     );
 
     this.maxCanvasWidth = window.innerWidth * 0.6;
@@ -87,7 +90,7 @@ export class EditImageModalComponent implements AfterViewInit, OnDestroy {
   async processImage(): Promise<void> {
     try {
       if (!this.imageData){
-        return
+        return;
       }
 
       this.canvas = new fabric.Canvas(this.canvasElement.nativeElement);
@@ -123,9 +126,9 @@ export class EditImageModalComponent implements AfterViewInit, OnDestroy {
         const rect = new fabric.Rect({
           left: box.x1 * scaleFactor,
           top: box.y1 * scaleFactor,
-          width: (box.x2-box.x1) * scaleFactor,
-          height: (box.y2-box.y1) * scaleFactor,
-          fill: 'rgba(255, 0, 0, 0.3)',
+          width: (box.x2 - box.x1) * scaleFactor,
+          height: (box.y2 - box.y1) * scaleFactor,
+          fill: this.BOX_COLOR, // Verwendung der Konstante
           selectable: true,
           hasControls: true,
           hasBorders: true,
@@ -202,12 +205,58 @@ export class EditImageModalComponent implements AfterViewInit, OnDestroy {
     this.canvas.requestRenderAll();
   }
 
+  addNewBox(): void {
+    if (!this.canvas) {
+      return;
+    }
+
+    const boxWidth = 100;
+    const boxHeight = 50;
+
+    const canvasWidth = this.canvas.getWidth();
+    const canvasHeight = this.canvas.getHeight();
+
+    const rect = new fabric.Rect({
+      left: (canvasWidth - boxWidth) / 2,
+      top: (canvasHeight - boxHeight) / 2,
+      width: boxWidth,
+      height: boxHeight,
+      fill: this.BOX_COLOR, // Verwendung der Konstante
+      selectable: true,
+      hasControls: true,
+      hasBorders: true,
+      objectCaching: false,
+    });
+
+    rect.on('modified', () => {
+      this.updateBoxCoordinates();
+    });
+    rect.on('moved', () => {
+      this.updateBoxCoordinates();
+    });
+    rect.on('scaled', () => {
+      this.updateBoxCoordinates();
+    });
+    rect.on('rotated', () => {
+      this.updateBoxCoordinates();
+    });
+    rect.on('removed', () => {
+      this.updateBoxCoordinates();
+    });
+
+    this.canvas.add(rect);
+    this.canvas.setActiveObject(rect);
+    this.canvas.requestRenderAll();
+
+    this.updateBoxCoordinates();
+  }
+
   save(): void {
     // Hier implementierst du die Logik zum Speichern der Bilddaten
     // Zum Beispiel über einen Service oder direkt hier
     const data = {
       deckname: this.deckName,
-      bildname: this.imageData.deckImage?.name,//this.imageFile?.name,
+      bildname: this.imageData.deckImage?.name, // this.imageFile?.name,
       bildid: this.imageData.deckImage?.id,
       boxes: this.boxes,
     };
@@ -222,6 +271,5 @@ export class EditImageModalComponent implements AfterViewInit, OnDestroy {
         this.closeModal();
       }
     });
-   
   }
 }