tango-app-ui-analyse-traffic 3.8.0-alpha.25 → 3.8.0-alpha.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -5,7 +5,8 @@ export class MagnifierDirective {
|
|
|
5
5
|
renderer;
|
|
6
6
|
lens;
|
|
7
7
|
zoom = 2; // Zoom factor
|
|
8
|
-
|
|
8
|
+
lensWidth = 300; // lens width
|
|
9
|
+
lensHeight = 700; // lens height (taller)
|
|
9
10
|
constructor(el, renderer) {
|
|
10
11
|
this.el = el;
|
|
11
12
|
this.renderer = renderer;
|
|
@@ -16,8 +17,8 @@ export class MagnifierDirective {
|
|
|
16
17
|
createLens() {
|
|
17
18
|
this.lens = this.renderer.createElement('div');
|
|
18
19
|
this.renderer.setStyle(this.lens, 'position', 'absolute');
|
|
19
|
-
this.renderer.setStyle(this.lens, 'width', `${this.
|
|
20
|
-
this.renderer.setStyle(this.lens, 'height', `${this.
|
|
20
|
+
this.renderer.setStyle(this.lens, 'width', `${this.lensWidth}px`);
|
|
21
|
+
this.renderer.setStyle(this.lens, 'height', `${this.lensHeight}px`);
|
|
21
22
|
this.renderer.setStyle(this.lens, 'border', '2px solid red');
|
|
22
23
|
this.renderer.setStyle(this.lens, 'background-color', 'rgba(255,255,255,0.5)');
|
|
23
24
|
this.renderer.setStyle(this.lens, 'pointer-events', 'none');
|
|
@@ -33,16 +34,16 @@ export class MagnifierDirective {
|
|
|
33
34
|
const scrollY = window.pageYOffset;
|
|
34
35
|
const x = e.pageX - rect.left - scrollX;
|
|
35
36
|
const y = e.pageY - rect.top - scrollY;
|
|
36
|
-
const lensX = e.pageX - this.
|
|
37
|
-
const lensY = e.pageY - this.
|
|
37
|
+
const lensX = e.pageX - this.lensWidth / 2;
|
|
38
|
+
const lensY = e.pageY - this.lensHeight / 2;
|
|
38
39
|
// Move lens
|
|
39
40
|
this.renderer.setStyle(this.lens, 'left', `${lensX}px`);
|
|
40
41
|
this.renderer.setStyle(this.lens, 'top', `${lensY}px`);
|
|
41
42
|
// Set background image and zoom
|
|
42
43
|
this.renderer.setStyle(this.lens, 'backgroundImage', `url(${image.src})`);
|
|
43
44
|
this.renderer.setStyle(this.lens, 'backgroundSize', `${image.width * this.zoom}px ${image.height * this.zoom}px`);
|
|
44
|
-
const bgX = x * this.zoom - this.
|
|
45
|
-
const bgY = y * this.zoom - this.
|
|
45
|
+
const bgX = x * this.zoom - this.lensWidth / 2;
|
|
46
|
+
const bgY = y * this.zoom - this.lensHeight / 2;
|
|
46
47
|
this.renderer.setStyle(this.lens, 'backgroundPosition', `-${bgX}px -${bgY}px`);
|
|
47
48
|
this.renderer.setStyle(this.lens, 'visibility', 'visible');
|
|
48
49
|
}
|
|
@@ -71,4 +72,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
71
72
|
type: HostListener,
|
|
72
73
|
args: ['mouseleave']
|
|
73
74
|
}] } });
|
|
74
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
75
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFnbmlmaWVyLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3RhbmdvLWFuYWx5c2UtdHJhZmZpYy9zcmMvbGliL2RpcmVjdGl2ZS9tYWduaWZpZXIuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQWMsWUFBWSxFQUFnQyxNQUFNLGVBQWUsQ0FBQzs7QUFLbEcsTUFBTSxPQUFPLGtCQUFrQjtJQU1UO0lBQXdCO0lBTHBDLElBQUksQ0FBcUI7SUFDekIsSUFBSSxHQUFHLENBQUMsQ0FBQyxDQUFRLGNBQWM7SUFDL0IsU0FBUyxHQUFHLEdBQUcsQ0FBQyxDQUFHLGFBQWE7SUFDaEMsVUFBVSxHQUFHLEdBQUcsQ0FBQyxDQUFFLHVCQUF1QjtJQUVsRCxZQUFvQixFQUFjLEVBQVUsUUFBbUI7UUFBM0MsT0FBRSxHQUFGLEVBQUUsQ0FBWTtRQUFVLGFBQVEsR0FBUixRQUFRLENBQVc7SUFBRyxDQUFDO0lBRW5FLFFBQVE7UUFDTixJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7SUFDcEIsQ0FBQztJQUVPLFVBQVU7UUFDaEIsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUUvQyxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLFVBQVUsRUFBRSxVQUFVLENBQUMsQ0FBQztRQUMxRCxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLE9BQU8sRUFBRSxHQUFHLElBQUksQ0FBQyxTQUFTLElBQUksQ0FBQyxDQUFDO1FBQ2xFLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsUUFBUSxFQUFFLEdBQUcsSUFBSSxDQUFDLFVBQVUsSUFBSSxDQUFDLENBQUM7UUFDcEUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxRQUFRLEVBQUUsZUFBZSxDQUFDLENBQUM7UUFDN0QsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxrQkFBa0IsRUFBRSx1QkFBdUIsQ0FBQyxDQUFDO1FBQy9FLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxDQUFDLENBQUM7UUFDNUQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxTQUFTLEVBQUUsTUFBTSxDQUFDLENBQUM7UUFDckQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxZQUFZLEVBQUUsZUFBZSxDQUFDLENBQUM7UUFDakUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxZQUFZLEVBQUUsUUFBUSxDQUFDLENBQUM7UUFFMUQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsUUFBUSxDQUFDLElBQUksRUFBRSxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDdEQsQ0FBQztJQUdELFdBQVcsQ0FBQyxDQUFhO1FBQ3ZCLE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDO1FBQ3BDLE1BQU0sSUFBSSxHQUFHLEtBQUssQ0FBQyxxQkFBcUIsRUFBRSxDQUFDO1FBRTNDLE1BQU0sT0FBTyxHQUFHLE1BQU0sQ0FBQyxXQUFXLENBQUM7UUFDbkMsTUFBTSxPQUFPLEdBQUcsTUFBTSxDQUFDLFdBQVcsQ0FBQztRQUVuQyxNQUFNLENBQUMsR0FBRyxDQUFDLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxJQUFJLEdBQUcsT0FBTyxDQUFDO1FBQ3hDLE1BQU0sQ0FBQyxHQUFHLENBQUMsQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLEdBQUcsR0FBRyxPQUFPLENBQUM7UUFFdkMsTUFBTSxLQUFLLEdBQUcsQ0FBQyxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsU0FBUyxHQUFHLENBQUMsQ0FBQztRQUMzQyxNQUFNLEtBQUssR0FBRyxDQUFDLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxVQUFVLEdBQUcsQ0FBQyxDQUFDO1FBRTVDLFlBQVk7UUFDWixJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLE1BQU0sRUFBRSxHQUFHLEtBQUssSUFBSSxDQUFDLENBQUM7UUFDeEQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxLQUFLLEVBQUUsR0FBRyxLQUFLLElBQUksQ0FBQyxDQUFDO1FBRXZELGdDQUFnQztRQUNoQyxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLGlCQUFpQixFQUFFLE9BQU8sS0FBSyxDQUFDLEdBQUcsR0FBRyxDQUFDLENBQUM7UUFDMUUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQ3BCLElBQUksQ0FBQyxJQUFJLEVBQ1QsZ0JBQWdCLEVBQ2hCLEdBQUcsS0FBSyxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsSUFBSSxNQUFNLEtBQUssQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLElBQUksSUFBSSxDQUM3RCxDQUFDO1FBRUYsTUFBTSxHQUFHLEdBQUcsQ0FBQyxHQUFHLElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDLFNBQVMsR0FBRyxDQUFDLENBQUM7UUFDL0MsTUFBTSxHQUFHLEdBQUcsQ0FBQyxHQUFHLElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDLFVBQVUsR0FBRyxDQUFDLENBQUM7UUFFaEQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxvQkFBb0IsRUFBRSxJQUFJLEdBQUcsT0FBTyxHQUFHLElBQUksQ0FBQyxDQUFDO1FBQy9FLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsWUFBWSxFQUFFLFNBQVMsQ0FBQyxDQUFDO0lBQzdELENBQUM7SUFHRCxZQUFZO1FBQ1YsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxZQUFZLEVBQUUsUUFBUSxDQUFDLENBQUM7SUFDNUQsQ0FBQztJQUVELFdBQVc7UUFDVCx1QkFBdUI7UUFDdkIsSUFBSSxJQUFJLENBQUMsSUFBSSxJQUFJLElBQUksQ0FBQyxJQUFJLENBQUMsVUFBVSxFQUFFO1lBQ3JDLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLFFBQVEsQ0FBQyxJQUFJLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1lBQ3BELElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDO1NBQ2xCO0lBQ0gsQ0FBQzt3R0F4RVUsa0JBQWtCOzRGQUFsQixrQkFBa0I7OzRGQUFsQixrQkFBa0I7a0JBSDlCLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGdCQUFnQjtpQkFDM0I7dUdBOEJDLFdBQVc7c0JBRFYsWUFBWTt1QkFBQyxXQUFXLEVBQUUsQ0FBQyxRQUFRLENBQUM7Z0JBa0NyQyxZQUFZO3NCQURYLFlBQVk7dUJBQUMsWUFBWSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERpcmVjdGl2ZSwgRWxlbWVudFJlZiwgSG9zdExpc3RlbmVyLCBSZW5kZXJlcjIsIE9uSW5pdCwgT25EZXN0cm95IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5ARGlyZWN0aXZlKHtcclxuICBzZWxlY3RvcjogJ1thcHBNYWduaWZpZXJdJyxcclxufSlcclxuZXhwb3J0IGNsYXNzIE1hZ25pZmllckRpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcclxuICBwcml2YXRlIGxlbnM6IEhUTUxFbGVtZW50IHwgbnVsbDtcclxuICBwcml2YXRlIHpvb20gPSAyOyAgICAgICAgLy8gWm9vbSBmYWN0b3JcclxuICBwcml2YXRlIGxlbnNXaWR0aCA9IDMwMDsgICAvLyBsZW5zIHdpZHRoXHJcbiAgcHJpdmF0ZSBsZW5zSGVpZ2h0ID0gNzAwOyAgLy8gbGVucyBoZWlnaHQgKHRhbGxlcilcclxuXHJcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBlbDogRWxlbWVudFJlZiwgcHJpdmF0ZSByZW5kZXJlcjogUmVuZGVyZXIyKSB7fVxyXG5cclxuICBuZ09uSW5pdCgpIHtcclxuICAgIHRoaXMuY3JlYXRlTGVucygpO1xyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBjcmVhdGVMZW5zKCkge1xyXG4gICAgdGhpcy5sZW5zID0gdGhpcy5yZW5kZXJlci5jcmVhdGVFbGVtZW50KCdkaXYnKTtcclxuXHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMubGVucywgJ3Bvc2l0aW9uJywgJ2Fic29sdXRlJyk7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMubGVucywgJ3dpZHRoJywgYCR7dGhpcy5sZW5zV2lkdGh9cHhgKTtcclxuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5sZW5zLCAnaGVpZ2h0JywgYCR7dGhpcy5sZW5zSGVpZ2h0fXB4YCk7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMubGVucywgJ2JvcmRlcicsICcycHggc29saWQgcmVkJyk7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMubGVucywgJ2JhY2tncm91bmQtY29sb3InLCAncmdiYSgyNTUsMjU1LDI1NSwwLjUpJyk7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMubGVucywgJ3BvaW50ZXItZXZlbnRzJywgJ25vbmUnKTtcclxuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5sZW5zLCAnei1pbmRleCcsICc5OTk5Jyk7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMubGVucywgJ3RyYW5zaXRpb24nLCAnYWxsIDAuMXMgZWFzZScpO1xyXG4gICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLmxlbnMsICd2aXNpYmlsaXR5JywgJ2hpZGRlbicpO1xyXG5cclxuICAgIHRoaXMucmVuZGVyZXIuYXBwZW5kQ2hpbGQoZG9jdW1lbnQuYm9keSwgdGhpcy5sZW5zKTtcclxuICB9XHJcblxyXG4gIEBIb3N0TGlzdGVuZXIoJ21vdXNlbW92ZScsIFsnJGV2ZW50J10pXHJcbiAgb25Nb3VzZU1vdmUoZTogTW91c2VFdmVudCk6IHZvaWQge1xyXG4gICAgY29uc3QgaW1hZ2UgPSB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQ7XHJcbiAgICBjb25zdCByZWN0ID0gaW1hZ2UuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7XHJcblxyXG4gICAgY29uc3Qgc2Nyb2xsWCA9IHdpbmRvdy5wYWdlWE9mZnNldDtcclxuICAgIGNvbnN0IHNjcm9sbFkgPSB3aW5kb3cucGFnZVlPZmZzZXQ7XHJcblxyXG4gICAgY29uc3QgeCA9IGUucGFnZVggLSByZWN0LmxlZnQgLSBzY3JvbGxYO1xyXG4gICAgY29uc3QgeSA9IGUucGFnZVkgLSByZWN0LnRvcCAtIHNjcm9sbFk7XHJcblxyXG4gICAgY29uc3QgbGVuc1ggPSBlLnBhZ2VYIC0gdGhpcy5sZW5zV2lkdGggLyAyO1xyXG4gICAgY29uc3QgbGVuc1kgPSBlLnBhZ2VZIC0gdGhpcy5sZW5zSGVpZ2h0IC8gMjtcclxuXHJcbiAgICAvLyBNb3ZlIGxlbnNcclxuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5sZW5zLCAnbGVmdCcsIGAke2xlbnNYfXB4YCk7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMubGVucywgJ3RvcCcsIGAke2xlbnNZfXB4YCk7XHJcblxyXG4gICAgLy8gU2V0IGJhY2tncm91bmQgaW1hZ2UgYW5kIHpvb21cclxuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5sZW5zLCAnYmFja2dyb3VuZEltYWdlJywgYHVybCgke2ltYWdlLnNyY30pYCk7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKFxyXG4gICAgICB0aGlzLmxlbnMsXHJcbiAgICAgICdiYWNrZ3JvdW5kU2l6ZScsXHJcbiAgICAgIGAke2ltYWdlLndpZHRoICogdGhpcy56b29tfXB4ICR7aW1hZ2UuaGVpZ2h0ICogdGhpcy56b29tfXB4YFxyXG4gICAgKTtcclxuXHJcbiAgICBjb25zdCBiZ1ggPSB4ICogdGhpcy56b29tIC0gdGhpcy5sZW5zV2lkdGggLyAyO1xyXG4gICAgY29uc3QgYmdZID0geSAqIHRoaXMuem9vbSAtIHRoaXMubGVuc0hlaWdodCAvIDI7XHJcblxyXG4gICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLmxlbnMsICdiYWNrZ3JvdW5kUG9zaXRpb24nLCBgLSR7YmdYfXB4IC0ke2JnWX1weGApO1xyXG4gICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLmxlbnMsICd2aXNpYmlsaXR5JywgJ3Zpc2libGUnKTtcclxuICB9XHJcblxyXG4gIEBIb3N0TGlzdGVuZXIoJ21vdXNlbGVhdmUnKVxyXG4gIG9uTW91c2VMZWF2ZSgpIHtcclxuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5sZW5zLCAndmlzaWJpbGl0eScsICdoaWRkZW4nKTtcclxuICB9XHJcblxyXG4gIG5nT25EZXN0cm95KCkge1xyXG4gICAgLy8gQ2xlYW51cCBsZW5zIGVsZW1lbnRcclxuICAgIGlmICh0aGlzLmxlbnMgJiYgdGhpcy5sZW5zLnBhcmVudE5vZGUpIHtcclxuICAgICAgdGhpcy5yZW5kZXJlci5yZW1vdmVDaGlsZChkb2N1bWVudC5ib2R5LCB0aGlzLmxlbnMpO1xyXG4gICAgICB0aGlzLmxlbnMgPSBudWxsO1xyXG4gICAgfVxyXG4gIH1cclxufVxyXG4iXX0=
|
|
@@ -753,7 +753,8 @@ class MagnifierDirective {
|
|
|
753
753
|
renderer;
|
|
754
754
|
lens;
|
|
755
755
|
zoom = 2; // Zoom factor
|
|
756
|
-
|
|
756
|
+
lensWidth = 300; // lens width
|
|
757
|
+
lensHeight = 700; // lens height (taller)
|
|
757
758
|
constructor(el, renderer) {
|
|
758
759
|
this.el = el;
|
|
759
760
|
this.renderer = renderer;
|
|
@@ -764,8 +765,8 @@ class MagnifierDirective {
|
|
|
764
765
|
createLens() {
|
|
765
766
|
this.lens = this.renderer.createElement('div');
|
|
766
767
|
this.renderer.setStyle(this.lens, 'position', 'absolute');
|
|
767
|
-
this.renderer.setStyle(this.lens, 'width', `${this.
|
|
768
|
-
this.renderer.setStyle(this.lens, 'height', `${this.
|
|
768
|
+
this.renderer.setStyle(this.lens, 'width', `${this.lensWidth}px`);
|
|
769
|
+
this.renderer.setStyle(this.lens, 'height', `${this.lensHeight}px`);
|
|
769
770
|
this.renderer.setStyle(this.lens, 'border', '2px solid red');
|
|
770
771
|
this.renderer.setStyle(this.lens, 'background-color', 'rgba(255,255,255,0.5)');
|
|
771
772
|
this.renderer.setStyle(this.lens, 'pointer-events', 'none');
|
|
@@ -781,16 +782,16 @@ class MagnifierDirective {
|
|
|
781
782
|
const scrollY = window.pageYOffset;
|
|
782
783
|
const x = e.pageX - rect.left - scrollX;
|
|
783
784
|
const y = e.pageY - rect.top - scrollY;
|
|
784
|
-
const lensX = e.pageX - this.
|
|
785
|
-
const lensY = e.pageY - this.
|
|
785
|
+
const lensX = e.pageX - this.lensWidth / 2;
|
|
786
|
+
const lensY = e.pageY - this.lensHeight / 2;
|
|
786
787
|
// Move lens
|
|
787
788
|
this.renderer.setStyle(this.lens, 'left', `${lensX}px`);
|
|
788
789
|
this.renderer.setStyle(this.lens, 'top', `${lensY}px`);
|
|
789
790
|
// Set background image and zoom
|
|
790
791
|
this.renderer.setStyle(this.lens, 'backgroundImage', `url(${image.src})`);
|
|
791
792
|
this.renderer.setStyle(this.lens, 'backgroundSize', `${image.width * this.zoom}px ${image.height * this.zoom}px`);
|
|
792
|
-
const bgX = x * this.zoom - this.
|
|
793
|
-
const bgY = y * this.zoom - this.
|
|
793
|
+
const bgX = x * this.zoom - this.lensWidth / 2;
|
|
794
|
+
const bgY = y * this.zoom - this.lensHeight / 2;
|
|
794
795
|
this.renderer.setStyle(this.lens, 'backgroundPosition', `-${bgX}px -${bgY}px`);
|
|
795
796
|
this.renderer.setStyle(this.lens, 'visibility', 'visible');
|
|
796
797
|
}
|