[UXP-126] create text-select directive

Author: Andrea Barbasso

src/app/app.component.html

@@ -1,3 +1,4 @@
 <ds-themed-root
+  (dsTextSelect)="onTextSelect($event)"
   [shouldShowFullscreenLoader]="(isAuthBlocking$ | async) || (isThemeLoading$ | async)"
   [shouldShowRouteLoader]="isRouteLoading$ | async"></ds-themed-root>

src/app/app.component.ts

@@ -29,6 +29,7 @@ import { distinctNext } from './core/shared/distinct-next';
 import { RouteService } from './core/services/route.service';
 import { getEditItemPageRoute, getWorkflowItemModuleRoute, getWorkspaceItemModuleRoute } from './app-routing-paths';
 import { SocialService } from './social/social.service';
+import { TextSelectEvent } from './directives/text-select/text-select.directive';
 
 @Component({
   selector: 'ds-app',
@@ -166,4 +167,11 @@ export class AppComponent implements OnInit, AfterViewInit {
       });
   }
 
+  onTextSelect(event: TextSelectEvent) {
+    console.group('Text selected');
+    console.warn('Text selected:', event.text);
+    console.warn('Viewport rectangle:', event.viewportRectangle);
+    console.warn('Host rectangle:', event.hostRectangle);
+    console.groupEnd();
+  }
 }

src/app/app.module.ts

@@ -32,6 +32,7 @@ import { StoreDevModules } from '../config/store/devtools';
 import { RootModule } from './root.module';
 import { NuMarkdownModule } from '@ng-util/markdown';
 import { FooterModule } from './footer/footer.module';
+import { DirectivesModule } from './directives/directives.module';
 
 export function getConfig() {
   return environment;
@@ -66,6 +67,7 @@ const IMPORTS = [
   StoreDevModules,
   EagerThemesModule,
   RootModule,
+  DirectivesModule
 ];
 
 const PROVIDERS = [
@@ -120,10 +122,10 @@ const EXPORTS = [
 ];
 
 @NgModule({
-  imports: [
-    BrowserModule.withServerTransition({ appId: 'dspace-angular' }),
-    ...IMPORTS
-  ],
+    imports: [
+        BrowserModule.withServerTransition({appId: 'dspace-angular'}),
+        ...IMPORTS
+    ],
   providers: [
     ...PROVIDERS
   ],

src/app/directives/directives.module.ts

@@ -3,10 +3,12 @@ import { RedirectDirective } from './redirect/redirect.directive';
 import { NgModule } from '@angular/core';
 import { MissingTranslationHandler, TranslateModule } from '@ngx-translate/core';
 import { MissingTranslationHelper } from '../shared/translate/missing-translation.helper';
+import { TextSelectDirective } from './text-select/text-select.directive';
 
 const DIRECTIVES = [
   RedirectDirective,
-  RedirectWithHrefDirective
+  RedirectWithHrefDirective,
+  TextSelectDirective,
 ];
 
 @NgModule({

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

@@ -0,0 +1,27 @@
+import { TextSelectDirective } from './text-select.directive';
+import { ElementRef, NgZone } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+
+describe('TextSelectDirective', () => {
+  let directive: TextSelectDirective;
+  let elementRef: ElementRef;
+  let ngZone: NgZone;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        TextSelectDirective,
+        { provide: ElementRef, useValue: { nativeElement: document.createElement('div') } },
+        NgZone
+      ]
+    });
+
+    directive = TestBed.inject(TextSelectDirective);
+    elementRef = TestBed.inject(ElementRef);
+    ngZone = TestBed.inject(NgZone);
+  });
+
+  it('should create an instance', () => {
+    expect(directive).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,146 @@
+import { Directive, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, Output } from '@angular/core';
+
+// 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: '[dsTextSelect]',
+})
+export class TextSelectDirective implements OnInit, OnDestroy {
+
+  // Event emitter for the text select event.
+  @Output()
+  dsTextSelect: EventEmitter<TextSelectEvent> = new EventEmitter();
+
+  hasSelection = false;
+
+  // Initialize the directive.
+  constructor(
+    private elementRef: ElementRef,
+    private zone: NgZone
+  ) {
+  }
+
+  // Clean up when the directive is destroyed.
+  public ngOnDestroy(): void {
+    this.elementRef.nativeElement.removeEventListener('mousedown', this.handleMousedown, false);
+    document.removeEventListener('mouseup', this.handleMouseup, false);
+    document.removeEventListener('selectionchange', this.handleSelectionchange, false);
+  }
+
+  // Set up event listeners when the directive is initialized.
+  public ngOnInit(): void {
+    this.zone.runOutsideAngular(() => {
+      this.elementRef.nativeElement.addEventListener('mousedown', this.handleMousedown, false);
+      document.addEventListener('selectionchange', this.handleSelectionchange, false);
+    });
+  }
+
+  // Get the deepest Element node in the DOM tree that contains the entire range.
+  private getRangeContainer(range: Range): Node {
+    let container = range.commonAncestorContainer;
+    while (container.nodeType !== Node.ELEMENT_NODE) {
+      container = container.parentNode;
+    }
+    return (container);
+  }
+
+  // Handle mousedown events inside the current element.
+  private handleMousedown = (): void => {
+    document.addEventListener('mouseup', this.handleMouseup, false);
+  };
+
+  // Handle mouseup events anywhere in the document.
+  private handleMouseup = (): void => {
+    document.removeEventListener('mouseup', this.handleMouseup, false);
+    this.processSelection();
+  };
+
+  // Handle selectionchange events anywhere in the document.
+  private handleSelectionchange = (): void => {
+    if (this.hasSelection) {
+      this.processSelection();
+    }
+  };
+
+  // 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 {
+    let selection = document.getSelection();
+    if (this.hasSelection) {
+      this.zone.runGuarded(() => {
+        this.hasSelection = false;
+        this.dsTextSelect.next({
+          text: '',
+          viewportRectangle: null,
+          hostRectangle: null
+        });
+      });
+    }
+    if (!selection.rangeCount || !selection.toString()) {
+      return;
+    }
+    let range = selection.getRangeAt(0);
+    let rangeContainer = this.getRangeContainer(range);
+    if (this.elementRef.nativeElement.contains(rangeContainer)) {
+      let viewportRectangle = range.getBoundingClientRect();
+      let localRectangle = this.viewportToHost(viewportRectangle, rangeContainer);
+      const stringSelection = selection.toString();
+      if (stringSelection) {
+        this.zone.runGuarded(() => {
+          this.hasSelection = true;
+          this.dsTextSelect.emit({
+            text: stringSelection,
+            viewportRectangle: {
+              left: viewportRectangle.left,
+              top: viewportRectangle.top,
+              width: viewportRectangle.width,
+              height: viewportRectangle.height
+            },
+            hostRectangle: {
+              left: localRectangle.left,
+              top: localRectangle.top,
+              width: localRectangle.width,
+              height: localRectangle.height
+            }
+          });
+        });
+      }
+    }
+  }
+
+  // Convert the given viewport-relative rectangle to a host-relative rectangle.
+  private viewportToHost(
+    viewportRectangle: SelectionRectangle,
+    rangeContainer: Node
+  ): SelectionRectangle {
+    let host = this.elementRef.nativeElement;
+    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
+    });
+  }
+}