Apache
/
nifi
mirror of https://github.com/apache/nifi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[NIFI-13747] - Add a delay before displaying tooltips (#9269) 

This closes #9269
This commit is contained in:
Rob Fellows 2024-09-20 14:43:00 -04:00 committed by GitHub
parent 29307dbf71
commit c6103519eb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 46 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/canvas-utils.service.ts
View File

@ -1187,6 +1187,7 @@ export class CanvasUtils {
*/
public canvasTooltip<C>(type: Type<C>, selection: any, tooltipData: any): void {
let closeTimer = -1;
let openTimer = -1;
const overlay = this.overlay;
let overlayRef: OverlayRef | null = null;
@ -1212,31 +1213,37 @@ export class CanvasUtils {
])
.withPush(true);
overlayRef = overlay.create({ positionStrategy });
openTimer = window.setTimeout(() => {
overlayRef = overlay.create({ positionStrategy });
const tooltipReference = overlayRef.attach(new ComponentPortal(type));
tooltipReference.setInput('data', tooltipData);
// register mouse events
tooltipReference.location.nativeElement.addEventListener('mouseenter', () => {
if (closeTimer > 0) {
window.clearTimeout(closeTimer);
closeTimer = -1;
}
});
tooltipReference.location.nativeElement.addEventListener('mouseleave', () => {
overlayRef?.detach();
overlayRef?.dispose();
overlayRef = null;
});
}, NiFiCommon.TOOLTIP_DELAY_OPEN_MILLIS);
}
const tooltipReference = overlayRef.attach(new ComponentPortal(type));
tooltipReference.setInput('data', tooltipData);
// register mouse events
tooltipReference.location.nativeElement.addEventListener('mouseenter', () => {
if (closeTimer > 0) {
window.clearTimeout(closeTimer);
closeTimer = -1;
}
});
tooltipReference.location.nativeElement.addEventListener('mouseleave', () => {
overlayRef?.detach();
overlayRef?.dispose();
overlayRef = null;
});
})
.on('mouseleave', function () {
if (openTimer > 0) {
window.clearTimeout(openTimer);
openTimer = -1;
}
closeTimer = window.setTimeout(() => {
overlayRef?.detach();
overlayRef?.dispose();
overlayRef = null;
}, 400);
}, NiFiCommon.TOOLTIP_DELAY_OPEN_MILLIS);
});
}

21
nifi-frontend/src/main/frontend/libs/shared/src/directives/nifi-tooltip.directive.ts
View File

@ -18,6 +18,7 @@
import { Directive, ElementRef, HostListener, Input, OnDestroy, Type } from '@angular/core';
import { ConnectedPosition, Overlay, OverlayRef, PositionStrategy } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
import { NiFiCommon } from '../services';
@Directive({
selector: '[nifiTooltip]',
@ -29,10 +30,12 @@ export class NifiTooltipDirective<T> implements OnDestroy {
@Input() tooltipInputData: any;
@Input() position: ConnectedPosition | undefined;
@Input() delayClose = true;
@Input() delayOpen = true;
private closeTimer = -1;
private overlayRef: OverlayRef | null = null;
private overTip = false;
private openTimer = -1;
constructor(
private element: ElementRef<HTMLElement>,
@ -41,8 +44,16 @@ export class NifiTooltipDirective<T> implements OnDestroy {
@HostListener('mouseenter')
mouseEnter() {
if (!this.overlayRef?.hasAttached()) {
this.attach();
if (this.delayOpen) {
this.openTimer = window.setTimeout(() => {
if (!this.overlayRef?.hasAttached()) {
this.attach();
}
}, NiFiCommon.TOOLTIP_DELAY_OPEN_MILLIS);
} else {
if (!this.overlayRef?.hasAttached()) {
this.attach();
}
}
}
@ -53,11 +64,15 @@ export class NifiTooltipDirective<T> implements OnDestroy {
this.closeTimer = window.setTimeout(() => {
this.overlayRef?.detach();
this.closeTimer = -1;
}, 400);
}, NiFiCommon.TOOLTIP_DELAY_CLOSE_MILLIS);
} else {
this.overlayRef?.detach();
}
}
if (this.openTimer > 0) {
window.clearTimeout(this.openTimer);
this.openTimer = -1;
}
}
@HostListener('mousemove')

3
nifi-frontend/src/main/frontend/libs/shared/src/services/nifi-common.service.ts
View File

@ -42,6 +42,9 @@ export class NiFiCommon {
public static readonly PACKAGE_SEPARATOR: string = '.';
public static readonly TOOLTIP_DELAY_CLOSE_MILLIS: number = 400;
public static readonly TOOLTIP_DELAY_OPEN_MILLIS: number = 500;
private policyTypeListing: SelectOption[] = [
{
text: 'view the user interface',