Add magnifier component for images

projects/common/element-components/image.component.ts

@@ -8,12 +8,19 @@ import { ImageElement } from '../models/image-element';
     <div [style.display]="'flex'"
          [style.height.%]="100"
          [style.width.%]="100">
-      <img [src]="elementModel.src | safeResourceUrl"
-           [alt]="'imageNotFound' | translate"
-           [class]="elementModel.dynamicPositioning? 'dynamic-image' : 'static-image'">
+      <div class="image-container">
+        <img #image
+             [src]="elementModel.src | safeResourceUrl"
+             [alt]="'imageNotFound' | translate"
+             [class]="elementModel.dynamicPositioning? 'dynamic-image' : 'static-image'">
+        <app-magnifier
+            [image]=image>
+        </app-magnifier>
+      </div>
     </div>
   `,
   styles: [
+    '.image-container{ width: fit-content; height: fit-content; margin: auto; position: relative}',
     '.dynamic-image{width: 100%; height: fit-content}',
     '.static-image{ width: 100%; height: 100%; object-fit: contain}'
   ]

projects/common/element-components/magnifier.component.ts

+import { Component, HostListener, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-magnifier',
+  template: `
+    <div *ngIf="image && image.width && image.height"
+         class="hide-cursor">
+      <div class="magnifier-glass"
+           [style.backgroundImage] = "'url('+ (image.src) + ')'"
+           [style.backgroundPosition] = "backgroundPosition"
+           [style.left.px]="left"
+           [style.top.px]="top"
+           [style.width.px]="glassRadius * 2"
+           [style.height.px]="glassRadius * 2"
+           [style.backgroundSize] = "(image.width * zoom) + 'px ' + (image.height * zoom) + 'px'"
+           [style.backgroundRepeat] = "'no-repeat'">
+      </div>
+    </div>
+  `,
+  styles: [
+    ':host { position: absolute; top: 0; bottom: 0; right: 0; left: 0; }',
+    '.magnifier-glass{ position: absolute; outline: 1px solid #000; pointer-events: none;}',
+    '.hide-cursor{ width: 100%; height: 100%; cursor: none }'
+  ]
+})
+export class Magnifier {
+  @Input() image!: HTMLImageElement;
+
+  glassRadius = 50;
+  zoom: number = 2;
+  left!: number;
+  top!:number;
+  backgroundPosition!: string;
+
+  @HostListener('mousemove', ['$event'])
+  onMousemove(event: MouseEvent): void {
+    this.left = this.calculateGlassPosition(this.image.width, event.offsetX);
+    this.top = this.calculateGlassPosition(this.image.height, event.offsetY);
+    this.backgroundPosition =
+      `-${this.calculateBackgroundPosition(event.offsetX)}px -${this.calculateBackgroundPosition(event.offsetY)}px`;
+  }
+
+  private calculateGlassPosition(max: number, value: number): number {
+    return ((max - 2 * this.glassRadius) / (max)) * value;
+  }
+
+  private calculateBackgroundPosition(value: number): number {
+    return (value * this.zoom) < this.glassRadius ? 0 : (value * this.zoom - this.glassRadius);
+  }
+}

projects/common/shared.module.ts

@@ -40,6 +40,7 @@ import { ControlBarComponent } from './element-components/control-bar/control-ba
 import { PlayerTimeFormatPipe } from './element-components/control-bar/player-time-format.pipe';
 import { LikertComponent } from './element-components/compound-elements/likert.component';
 import { LikertRadioButtonGroupComponent } from './element-components/compound-elements/likert-radio-button-group.component';
+import { Magnifier } from './element-components/magnifier.component';
 
 @NgModule({
   imports: [
@@ -77,7 +78,8 @@ import { LikertRadioButtonGroupComponent } from './element-components/compound-e
     ControlBarComponent,
     PlayerTimeFormatPipe,
     LikertComponent,
-    LikertRadioButtonGroupComponent
+    LikertRadioButtonGroupComponent,
+    Magnifier
   ],
   exports: [
     CommonModule,