Adds annotation components

src/app/app.routes.ts

 import { Routes } from '@angular/router';
+import { AnnotationComponent } from './components/annotation/annotation.component';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+    { path: "", component: AnnotationComponent }
+];

src/app/components/annotation/annotation.component.html

+<div id="dropZone" (drop)="onUploadImage($event)" (dragover)="onDragOver($event)">
+    <amc-annotator #annotator></amc-annotator>
+</div>

src/app/components/annotation/annotation.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AnnotationComponent } from './annotation.component';
+
+describe('AnnotationComponent', () => {
+  let component: AnnotationComponent;
+  let fixture: ComponentFixture<AnnotationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AnnotationComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AnnotationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/annotation/annotation.component.ts

+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { AnnotatorComponent } from "../annotator/annotator.component";
+
+@Component({
+  selector: 'amc-annotation',
+  standalone: true,
+  imports: [AnnotatorComponent],
+  templateUrl: './annotation.component.html',
+  styleUrl: './annotation.component.scss'
+})
+export class AnnotationComponent {
+  @ViewChild("annotator", { static: true })
+  private annotator!: AnnotatorComponent;
+
+  public onUploadImage(event: DragEvent): void {
+    console.log(this.annotator);
+
+    event.preventDefault();
+
+    const file = event.dataTransfer?.files[0];
+    
+    if (file && file.type.startsWith("image/")) {
+      console.log(file);
+      
+      const reader = new FileReader();
+
+      reader.onload = (event: ProgressEvent<FileReader>) => {
+        console.log("Read");
+        const image = new Image();
+
+        image.onload = (event: Event) => {
+          this.annotator.changeImage(image);
+        }
+
+        if (typeof(event.target?.result) === "string") {
+          image.src = event.target.result;
+        }
+      };
+
+      reader.readAsDataURL(file);
+    } else {
+      alert("Only images are supported");
+    }
+  }
+
+  public onDragOver(event: DragEvent): void {
+    event.preventDefault();
+    console.log(typeof (event));
+  }
+
+}

src/app/components/annotator/annotator.component.html

+<canvas #annotator id="annotator"
+    (mousedown)="onMouseDown($event)"
+    (mousemove)="onMouseMove($event)"
+    (mouseup)="onMouseUp($event)"></canvas>
\ No newline at end of file

src/app/components/annotator/annotator.component.scss

+canvas#annotator {
+    background-color: red;
+    max-width: 800px;
+    max-height: 600px;
+}
\ No newline at end of file

src/app/components/annotator/annotator.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AnnotatorComponent } from './annotator.component';
+
+describe('AnnotatorComponent', () => {
+  let component: AnnotatorComponent;
+  let fixture: ComponentFixture<AnnotatorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AnnotatorComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AnnotatorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/annotator/annotator.component.ts

+import { Component, ElementRef, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'amc-annotator',
+  standalone: true,
+  imports: [],
+  templateUrl: './annotator.component.html',
+  styleUrl: './annotator.component.scss'
+})
+export class AnnotatorComponent {
+  @ViewChild("annotator", { static: true })
+  public canvas!: ElementRef<HTMLCanvasElement>;
+
+  private startPoint?: [number, number];
+  private backgroundImage?: HTMLImageElement;
+
+  private isDrawing(): boolean {
+    return this.startPoint !== undefined;
+  }
+
+  private getCanvasContext(): CanvasRenderingContext2D {
+    const context = this.canvas.nativeElement.getContext("2d");
+
+    if (context === null) {
+      throw new Error("canvas is not initialized");
+    } else {
+      return context;
+    }
+  }
+
+  public changeImage(image: HTMLImageElement): void {
+    this.backgroundImage = image;
+    this.repaintImage();
+  }
+
+  private repaintImage(): void {
+    const canvas = this.canvas.nativeElement;
+
+    if (this.backgroundImage === undefined) {
+      const context = this.getCanvasContext();
+      context.clearRect(0, 0, canvas.width, canvas.height);
+    } else {
+      canvas.width = this.backgroundImage.width;
+      canvas.height = this.backgroundImage.height;
+
+      const context = this.getCanvasContext();
+      context.clearRect(0, 0, canvas.width, canvas.height);
+      context.drawImage(this.backgroundImage, 0, 0, canvas.width, canvas.height);
+    }
+  }
+
+
+  public onMouseDown(event: MouseEvent): void {
+    this.startPoint = [event.offsetX, event.offsetY];
+  }
+
+  public onMouseMove(event: MouseEvent): void {
+    if (this.isDrawing() && this.startPoint !== undefined) {
+      const [x0, y0] = this.startPoint;
+      const [x, y, width, height] = this.adjustCoordinates(x0, y0, event.clientX - x0, event.clientY - y0);
+
+      const canvas = this.canvas.nativeElement;
+      const context = this.getCanvasContext();
+
+      this.repaintImage();
+      context.globalCompositeOperation = "xor";
+      context.strokeStyle = "black";
+      context.lineWidth = Math.ceil(Math.max(canvas.width, canvas.height) / 500);
+      context.beginPath();
+      context.rect(x, y, width, height);
+      context.stroke();
+    }
+  }
+
+  private adjustCoordinates(x: number, y: number, width: number, height: number): [number, number, number, number] {
+    const canvas = this.canvas.nativeElement;
+
+    if (canvas.width === canvas.clientWidth && canvas.height === canvas.clientHeight) {
+      return [x, y, width, height];
+    } else {
+      return [
+        x * canvas.width / canvas.clientWidth,
+        y * canvas.height / canvas.clientHeight,
+        width * canvas.width / canvas.clientWidth,
+        height * canvas.height / canvas.clientHeight
+      ];
+    }
+  }
+
+  public onMouseUp(event: MouseEvent): void {
+    this.startPoint = undefined;
+  }
+}