[player] Refactor applySelection parameter

- Remove element as parameter

projects/common/components/marking-bar/marking-bar.component.ts

@@ -36,13 +36,11 @@ import { TextElement } from '../../ui-elements/text/text-element';
   ]
 })
 export class MarkingBarComponent {
-  @Input() element!: HTMLElement;
   @Input() elementModel!: TextElement;
   @Output() applySelection = new EventEmitter<{
     active: boolean,
     mode: 'mark' | 'delete',
-    color: string,
-    element: HTMLElement
+    color: string
   }>();
 
   selectedColor!: string;
@@ -51,7 +49,7 @@ export class MarkingBarComponent {
     this.selectedColor = selection.selected ? selection.color : 'none';
     this.applySelection
       .emit({
-        active: selection.selected, mode: selection.mode, color: selection.color, element: this.element
+        active: selection.selected, mode: selection.mode, color: selection.color
       });
   }
 }

projects/common/ui-elements/text/text.component.ts

@@ -16,11 +16,10 @@ import { ValueChangeElement } from '../../models/uI-element';
           *ngIf="elementModel.highlightableYellow ||
            elementModel.highlightableTurquoise ||
            elementModel.highlightableOrange"
-          [element]="container"
           [elementModel]="elementModel"
           (applySelection)="applySelection.emit($event)">
       </app-marking-bar>
-      <div #container class="text-container"
+      <div #textContainerRef class="text-container"
            [style.background-color]="elementModel.surfaceProps.backgroundColor"
            [style.color]="elementModel.fontProps.fontColor"
            [style.font-family]="elementModel.fontProps.font"
@@ -51,9 +50,8 @@ export class TextComponent extends ElementComponent {
   @Output() applySelection = new EventEmitter<{
     active: boolean,
     mode: 'mark' | 'delete',
-    color: string,
-    element: HTMLElement
+    color: string
   }>();
 
-  @ViewChild('container') containerDiv!: ElementRef;
+  @ViewChild('textContainerRef') textContainerRef!: ElementRef;
 }

projects/player/src/app/components/element-container/element-container.component.ts

@@ -193,8 +193,8 @@ export class ElementContainerComponent implements OnInit {
   private stopSelection(mouseEvent: MouseEvent, elementComponent: TextComponent) {
     const selection = window.getSelection();
     if (selection) {
-      if (!this.markingService.isDescendantOf(selection.anchorNode, elementComponent.containerDiv.nativeElement) ||
-        !this.markingService.isDescendantOf(selection.focusNode, elementComponent.containerDiv.nativeElement) ||
+      if (!this.markingService.isDescendantOf(selection.anchorNode, elementComponent.textContainerRef.nativeElement) ||
+        !this.markingService.isDescendantOf(selection.focusNode, elementComponent.textContainerRef.nativeElement) ||
       (mouseEvent.ctrlKey && selection.rangeCount)) {
         selection.removeAllRanges();
       } else if (this.selectedMode && this.selectedColor) {
@@ -202,7 +202,7 @@ export class ElementContainerComponent implements OnInit {
           .applySelection(
             this.selectedMode,
             this.selectedColor,
-            elementComponent.containerDiv.nativeElement,
+            elementComponent.textContainerRef.nativeElement,
             elementComponent as TextComponent
           );
       }
@@ -218,13 +218,15 @@ export class ElementContainerComponent implements OnInit {
           active: boolean,
           mode: 'mark' | 'delete',
           color: string;
-          element: HTMLElement;
         }) => {
           if (selection.active) {
             this.selectedColor = selection.color;
             this.selectedMode = selection.mode;
             this.markingService
-              .applySelection(selection.mode, selection.color, selection.element, elementComponent as TextComponent);
+              .applySelection(selection.mode,
+                selection.color,
+                elementComponent.textContainerRef.nativeElement,
+                elementComponent as TextComponent);
           } else {
             this.selectedColor = null;
             this.selectedMode = null;