[UXP-126] cleanup and refactor code

Author: Andrea Barbasso

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

@@ -13,23 +13,6 @@ import {
 } from '@angular/core';
 import { TextSelectionTooltipComponent } from './text-selection-tooltip/text-selection-tooltip.component';
 
-// Define the structure of the event that will be emitted when text is selected.
-export interface TextSelectEvent {
-  text: string;
-  viewportRectangle: SelectionRectangle | null;
-  hostRectangle: SelectionRectangle | null;
-}
-
-// Define the structure of the selection rectangle.
-interface SelectionRectangle {
-  left: number;
-  top: number;
-  width: number;
-  height: number;
-}
-
-
-// This directive emits an event when the user selects text within the host element.
 @Directive({
   selector: '[dsTextSelectTooltip]',
 })
@@ -60,7 +43,6 @@ export class TextSelectDirective implements OnInit, OnDestroy {
 
   // Set up event listeners when the directive is initialized.
   public ngOnInit(): void {
-    this.elementRef.nativeElement.style.position = 'relative';
     this.zone.runOutsideAngular(() => {
       this.elementRef.nativeElement.addEventListener('mousedown', this.handleMousedown, false);
     });
@@ -87,15 +69,11 @@ export class TextSelectDirective implements OnInit, OnDestroy {
   };
 
 
-  // Inspect the document's current selection and check to see if it should be
-  // emitted as a TextSelectEvent within the current element.
   private processSelection(): void {
-    // setting up a zero-delay timeout to wait for the selection to be cleared
-    // this solves the issue of the previous selection not being cleared before the mouseup event
-    // setTimeout(() => {
     const selection = document.getSelection();
     const stringSelection = selection.toString().trim();
     const previousSelection = this.selectedText;
+
     if (this.hasSelection) {
       this.zone.runGuarded(() => {
         this.hasSelection = false;
@@ -112,26 +90,25 @@ export class TextSelectDirective implements OnInit, OnDestroy {
     }
     let range = selection.getRangeAt(0);
     let rangeContainer = this.getRangeContainer(range);
+    // check if the range container is inside the current element
+    // (to avoid showing the tooltip when selecting text in other elements)
     if (this.elementRef.nativeElement.contains(rangeContainer)) {
       let viewportRectangle = range.getBoundingClientRect();
-      let bodyRelativeRectangle = this.rectangleRelativeToBody(viewportRectangle, rangeContainer);
       if (stringSelection) {
         this.zone.runGuarded(() => {
           this.hasSelection = true;
           if (this.componentRef === null) {
             this.componentRef = createComponent(TextSelectionTooltipComponent, {environmentInjector: this.injector});
             this.appRef.attachView(this.componentRef.hostView);
 
-            const domElem =
-              (this.componentRef.hostView as EmbeddedViewRef<any>)
-                .rootNodes[0] as HTMLElement;
+            const domElem = (this.componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
 
             document.body.appendChild(domElem);
 
-            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.elementRectangleLeft = viewportRectangle.left + window.scrollX;
+            this.componentRef.instance.elementRectangleTop = viewportRectangle.top + window.scrollY;
+            this.componentRef.instance.elementRectangleWidth = viewportRectangle.width;
+            this.componentRef.instance.elementRectangleHeight = viewportRectangle.height;
             this.componentRef.instance.text = stringSelection;
 
             this.componentRef.instance.showTTSControls = this.showTTSControls;
@@ -141,28 +118,5 @@ export class TextSelectDirective implements OnInit, OnDestroy {
         });
       }
     }
-    // });
-  }
-
-  // Convert the given viewport-relative rectangle to a body-relative rectangle.
-  private rectangleRelativeToBody(
-    viewportRectangle: SelectionRectangle,
-    rangeContainer: Node
-  ): SelectionRectangle {
-    let host = document.body;
-    let hostRectangle = host.getBoundingClientRect();
-    let localLeft = (viewportRectangle.left - hostRectangle.left);
-    let localTop = (viewportRectangle.top - hostRectangle.top);
-    let node = rangeContainer;
-    do {
-      localLeft += (<Element>node).scrollLeft;
-      localTop += (<Element>node).scrollTop;
-    } while ((node !== host) && (node = node.parentNode));
-    return ({
-      left: localLeft,
-      top: localTop,
-      width: viewportRectangle.width,
-      height: viewportRectangle.height
-    });
   }
 }

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

@@ -59,7 +59,7 @@ export class TextSelectionTooltipComponent implements OnInit, OnDestroy {
   utterance: SpeechSynthesisUtterance;
   isPaused = false;
 
-  bindedCheckPosition = this.checkPosition.bind(this);
+  boundCheckPosition = this.checkPosition.bind(this);
 
   constructor(
     @Inject(NativeWindowService) protected _window: NativeWindowRef,
@@ -74,7 +74,7 @@ export class TextSelectionTooltipComponent implements OnInit, OnDestroy {
     this.checkPosition();
     this.ngZone.runOutsideAngular(() => {
       // listen to scroll event to update position
-      window.addEventListener('scroll', this.bindedCheckPosition);
+      window.addEventListener('scroll', this.boundCheckPosition);
     });
   }
 
@@ -112,7 +112,7 @@ export class TextSelectionTooltipComponent implements OnInit, OnDestroy {
     if (this.utterance) {
       speechSynthesis.cancel();
     }
-    window.removeEventListener('scroll', this.bindedCheckPosition);
+    window.removeEventListener('scroll', this.boundCheckPosition);
   }
 
   pauseTextToSpeech() {