49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
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';
|
|
}
|
|
}
|