From f79e4d2ce45016d07edef2c8ccfa4a3e64c2ca5c Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Fri, 12 Nov 2021 11:07:06 +0100
Subject: [PATCH] [player] Hide magnifier when mouse is not over image.
The magnifier is always visible in the editor
---
projects/common/element-components/image.component.ts | 8 ++++++--
projects/common/element-components/magnifier.component.ts | 4 ++--
2 files changed, 8 insertions(+), 4 deletions(-)
diff --git a/projects/common/element-components/image.component.ts b/projects/common/element-components/image.component.ts
index cb24d1eff..cdf49e469 100644
--- a/projects/common/element-components/image.component.ts
+++ b/projects/common/element-components/image.component.ts
@@ -8,13 +8,16 @@ import { ValueChangeElement } from '../models/uI-element';
template: `
<div [style.display]="'flex'"
[style.height.%]="100"
- [style.width.%]="100">
+ [style.width.%]="100"
+ (mouseover)="magnifierVisible = true"
+ (mouseenter)="magnifierVisible = true"
+ (mouseleave)="magnifierVisible = false">
<div class="image-container">
<img #image
[src]="elementModel.src | safeResourceUrl"
[alt]="'imageNotFound' | translate"
[class]="elementModel.dynamicPositioning? 'dynamic-image' : 'static-image'">
- <app-magnifier *ngIf="elementModel.magnifier"
+ <app-magnifier *ngIf="elementModel.magnifier && ( magnifierVisible || project === 'editor')"
[imageId]="elementModel.id"
[size]="elementModel.magnifierSize"
[zoom]="elementModel.magnifierZoom"
@@ -33,5 +36,6 @@ import { ValueChangeElement } from '../models/uI-element';
})
export class ImageComponent extends ElementComponent {
@Output() elementValueChanged = new EventEmitter<ValueChangeElement>();
+ magnifierVisible = false;
elementModel!: ImageElement;
}
diff --git a/projects/common/element-components/magnifier.component.ts b/projects/common/element-components/magnifier.component.ts
index b80d2851f..e896aca9a 100644
--- a/projects/common/element-components/magnifier.component.ts
+++ b/projects/common/element-components/magnifier.component.ts
@@ -43,8 +43,8 @@ export class Magnifier {
this.used = true;
this.elementValueChanged.emit({ id: this.imageId, values: [false, true] });
}
- this.left = this.calculateGlassPosition(this.image.width, event.offsetX);
- this.top = this.calculateGlassPosition(this.image.height, event.offsetY);
+ this.left = this.calculateGlassPosition(this.image.width, event.offsetX) - 1;
+ this.top = this.calculateGlassPosition(this.image.height, event.offsetY) - 1;
this.backgroundPosition =
`-${
this.calculateBackgroundPosition(this.image.width, event.offsetX)
--
GitLab