From fffff184311e0443bbabb4fe7f5e3b3204338136 Mon Sep 17 00:00:00 2001 From: AlessioDelConte Date: Sat, 13 Jul 2024 10:16:33 +0200 Subject: [PATCH] Add tooltip style and refactor positioning --- .../page-features-viewer.component.html | 14 +------ .../page-features-viewer.component.ts | 2 +- .../lib/ngx-features-viewer.component.html | 2 +- .../lib/ngx-features-viewer.component.scss | 28 +++++++++++++ .../src/lib/services/tooltip.service.ts | 40 ++++++++++++------- 5 files changed, 57 insertions(+), 29 deletions(-) diff --git a/projects/demo-showcase/src/app/page-features-viewer/page-features-viewer.component.html b/projects/demo-showcase/src/app/page-features-viewer/page-features-viewer.component.html index d0e7bc5..0d25c54 100644 --- a/projects/demo-showcase/src/app/page-features-viewer/page-features-viewer.component.html +++ b/projects/demo-showcase/src/app/page-features-viewer/page-features-viewer.component.html @@ -49,18 +49,8 @@

Feature viewer

-
-
-
{{ feature.label }}
-
-
-

- {{ index }} -

-

- {{ coordinates }} -

-
+
+ {{ feature.label }}
diff --git a/projects/demo-showcase/src/app/page-features-viewer/page-features-viewer.component.ts b/projects/demo-showcase/src/app/page-features-viewer/page-features-viewer.component.ts index 3e4f072..86b8301 100644 --- a/projects/demo-showcase/src/app/page-features-viewer/page-features-viewer.component.ts +++ b/projects/demo-showcase/src/app/page-features-viewer/page-features-viewer.component.ts @@ -56,7 +56,7 @@ export class PageFeaturesViewerComponent { 'text-color' : 'black', // Define margins 'margin-top' : 0, - 'margin-right' : 50, + 'margin-right' : 0, 'margin-bottom' : 0, 'margin-left' : 140, 'sequence-show' : true, diff --git a/projects/ngx-features-viewer/src/lib/ngx-features-viewer.component.html b/projects/ngx-features-viewer/src/lib/ngx-features-viewer.component.html index 37f0279..9da2f7b 100644 --- a/projects/ngx-features-viewer/src/lib/ngx-features-viewer.component.html +++ b/projects/ngx-features-viewer/src/lib/ngx-features-viewer.component.html @@ -26,7 +26,7 @@
-
+
diff --git a/projects/ngx-features-viewer/src/lib/ngx-features-viewer.component.scss b/projects/ngx-features-viewer/src/lib/ngx-features-viewer.component.scss index 0dfe887..08e56cb 100644 --- a/projects/ngx-features-viewer/src/lib/ngx-features-viewer.component.scss +++ b/projects/ngx-features-viewer/src/lib/ngx-features-viewer.component.scss @@ -67,3 +67,31 @@ text { //font-family: monospace; user-select: none; } + + +.tooltip { + user-select: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + margin: 0; + display: block; + position: fixed; + top: 0; + left: 0; + border-style: solid; + white-space: nowrap; + z-index: 9999999; + box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 10px; + transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; + background-color: rgb(255, 255, 255); + border-width: 1px; + border-radius: 4px; + color: rgb(102, 102, 102); + font: 14px / 21px sans-serif; + padding: 10px; + transform: translate3d(0px, 0px, 0px); + border-color: rgb(255, 255, 255); + pointer-events: none; + opacity: 0; + visibility: hidden; +} + diff --git a/projects/ngx-features-viewer/src/lib/services/tooltip.service.ts b/projects/ngx-features-viewer/src/lib/services/tooltip.service.ts index 0e01c84..5ed2552 100644 --- a/projects/ngx-features-viewer/src/lib/services/tooltip.service.ts +++ b/projects/ngx-features-viewer/src/lib/services/tooltip.service.ts @@ -38,26 +38,34 @@ export class TooltipService { constructor(public initializeService: InitializeService) { } + private getTooltipSize(tooltip: Selection) { + // Define tooltip size + const width = tooltip.node()?.clientWidth || 0; + const height = tooltip.node()?.clientHeight || 0; + return { width, height }; + } + private setTooltipPosition(event: MouseEvent) { const tooltip = this._tooltip; - // If we are over the center of the page, we move the tooltip to the left - if (event.clientX > window.innerWidth / 2) { - tooltip.style("left", "auto"); - tooltip.style("right", `${window.innerWidth - event.clientX + 10}px`); - } else { - tooltip.style("right", "auto"); - tooltip.style("left", `${event.clientX + 10}px`); + // Get tooltip size + const { width, height } = this.getTooltipSize(tooltip); + + // Default position at bottom left + let offsetX = 10; + let offsetY = 10; + + // Adjust if the tooltip would go out of bounds + if (event.clientX + offsetX + width > window.innerWidth) { + offsetX = -width - 10; } - if (event.clientY > window.innerHeight / 2) { - tooltip.style("top", "auto"); - tooltip.style("bottom", `${window.innerHeight - event.clientY + 10}px`); - } else { - tooltip.style("bottom", "auto"); - tooltip.style("top", `${event.clientY + 10}px`); + if (event.clientY + offsetY + height > window.innerHeight) { + offsetY = -height - 10; } + // Apply the new position using transform + tooltip.style("transform", `translate(${event.clientX + offsetX}px, ${event.clientY + offsetY}px)`); } public onMouseEnter(event: MouseEvent, trace: InternalTrace, feature?: Feature, index?: number) { @@ -68,7 +76,8 @@ export class TooltipService { // Emit tooltip context this.tooltip$.next({ trace, feature, index, coordinates }); // Set tooltip visible - tooltip.style("display", "block"); + tooltip.style("opacity", "1"); + tooltip.style("visibility", "visible"); this.setTooltipPosition(event); } @@ -88,7 +97,8 @@ export class TooltipService { // Define tooltip const tooltip = this._tooltip; // Hide tooltip - tooltip.style("display", "none"); + tooltip.style("opacity", "0"); + tooltip.style("visibility", "hidden"); // Remove tooltip context this.tooltip$.next(null); }