definma-ui/src/app/img-magnifier/img-magnifier.component.ts

import {AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';

@Component({
  selector: 'app-img-magnifier',
  templateUrl: './img-magnifier.component.html',
  styleUrls: ['./img-magnifier.component.scss']
})
export class ImgMagnifierComponent implements OnInit, AfterViewInit {

  @Input() src: string;   // image source
  @Input() zoom: number;  // zoom level
  @Input() magnifierSize: {width: number, height: number};  // size of the magnifier
  @ViewChild('mainImg') mainImg: ElementRef;

  backgroundSize;
  magnifierPos = {x: 0, y: 0};  // position of the magnifier
  showMagnifier = false;

  constructor(
    private window: Window
  ) { }

  ngOnInit(): void {
  }

  ngAfterViewInit() {
    setTimeout(() => {
      this.calcBackgroundSize();
    }, 1);
  }

  calcPos(event) {  // calculate the current magnifier position
    const img = this.mainImg.nativeElement.getBoundingClientRect();
    this.magnifierPos.x = Math.min(
      img.width - this.magnifierSize.width,
      Math.max(0, event.pageX - img.left - this.window.pageXOffset - this.magnifierSize.width / 2)
    );
    this.magnifierPos.y = Math.min(
      img.height - this.magnifierSize.height + 7,
      Math.max(0, event.pageY - img.top - this.window.pageYOffset - this.magnifierSize.height / 2)
    );
  }

  calcBackgroundSize() {
    this.backgroundSize = this.mainImg ? (this.mainImg.nativeElement.width * this.zoom - this.magnifierSize.width) +
      'px ' + (this.mainImg.nativeElement.height * this.zoom - this.magnifierSize.height) + 'px ' : '0 0';
  }
}