[UXP-126] fix positioning for elements that are not app-component

Author: Andrea Barbasso

src/app/directives/text-select/text-select.directive.ts

@@ -110,7 +110,7 @@ export class TextSelectDirective implements OnInit, OnDestroy {
       let rangeContainer = this.getRangeContainer(range);
       if (this.elementRef.nativeElement.contains(rangeContainer)) {
         let viewportRectangle = range.getBoundingClientRect();
-        let localRectangle = this.viewportToHost(viewportRectangle, rangeContainer);
+        let bodyRelativeRectangle = this.rectangleRelativeToBody(viewportRectangle, rangeContainer);
         if (stringSelection) {
           this.zone.runGuarded(() => {
             this.hasSelection = true;
@@ -127,10 +127,10 @@ export class TextSelectDirective implements OnInit, OnDestroy {
 
               document.body.appendChild(domElem);
 
-              this.componentRef.instance.rectangleLeft = localRectangle.left;
-              this.componentRef.instance.rectangleTop = localRectangle.top;
-              this.componentRef.instance.rectangleWidth = localRectangle.width;
-              this.componentRef.instance.rectangleHeight = localRectangle.height;
+              this.componentRef.instance.elementRectangleLeft = bodyRelativeRectangle.left;
+              this.componentRef.instance.elementRectangleTop = bodyRelativeRectangle.top;
+              this.componentRef.instance.elementRectangleWidth = bodyRelativeRectangle.width;
+              this.componentRef.instance.elementRectangleHeight = bodyRelativeRectangle.height;
               this.componentRef.instance.text = stringSelection;
 
               this.selectedText = stringSelection;
@@ -141,12 +141,12 @@ export class TextSelectDirective implements OnInit, OnDestroy {
     // });
   }
 
-  // Convert the given viewport-relative rectangle to a host-relative rectangle.
-  private viewportToHost(
+  // Convert the given viewport-relative rectangle to a body-relative rectangle.
+  private rectangleRelativeToBody(
     viewportRectangle: SelectionRectangle,
     rangeContainer: Node
   ): SelectionRectangle {
-    let host = this.elementRef.nativeElement;
+    let host = document.body;
     let hostRectangle = host.getBoundingClientRect();
     let localLeft = (viewportRectangle.left - hostRectangle.left);
     let localTop = (viewportRectangle.top - hostRectangle.top);

src/app/directives/text-select/text-selection-tooltip/text-selection-tooltip.component.ts

@@ -27,16 +27,16 @@ import { TranslateService } from '@ngx-translate/core';
 export class TextSelectionTooltipComponent implements OnInit, OnDestroy {
 
   @Input()
-  rectangleLeft = 0;
+  elementRectangleLeft = 0;
 
   @Input()
-  rectangleTop = 0;
+  elementRectangleTop = 0;
 
   @Input()
-  rectangleWidth = 0;
+  elementRectangleWidth = 0;
 
   @Input()
-  rectangleHeight = 0;
+  elementRectangleHeight = 0;
 
   @Input()
   text: string;
@@ -67,7 +67,7 @@ export class TextSelectionTooltipComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    this.left = this.rectangleLeft + this.rectangleWidth / 2;
+    this.left = this.elementRectangleLeft + this.elementRectangleWidth / 2;
     this.checkPosition();
     this.ngZone.runOutsideAngular(() => {
       // listen to scroll event to update position
@@ -76,11 +76,11 @@ export class TextSelectionTooltipComponent implements OnInit, OnDestroy {
   }
 
   checkPosition() {
-    if (this.rectangleTop < this._window.nativeWindow.scrollY) {
-      this.top = this.rectangleTop + this.rectangleHeight + 6;
+    if (this.elementRectangleTop < this._window.nativeWindow.scrollY) {
+      this.top = this.elementRectangleTop + this.elementRectangleHeight + 6;
       this.bottomPlacement = true;
     } else {
-      this.top = this.rectangleTop - 6;
+      this.top = this.elementRectangleTop - 6;
       this.bottomPlacement = false;
     }
     this.changeDetectorRef.detectChanges();