[player] Mark text directly after selecting on mouseUp

- Implement marking buttons as toggle buttons

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

@@ -7,44 +7,51 @@ import { TextElement } from '../../ui-elements/text/text-element';
   selector: 'app-marking-bar',
   template: `
     <div class="marking-bar">
-      <button *ngIf="elementModel.highlightableYellow"
-              type="button"
-              class="marking-button"
-              mat-mini-fab [style.background-color]="'#f9f871'"
-              (click)="applySelection.emit({ mode: 'mark', color:'#f9f871', element })">
-        <mat-icon>border_color</mat-icon>
-      </button>
-      <button *ngIf="elementModel.highlightableTurquoise"
-              type="button"
-              class="marking-button"
-              mat-mini-fab [style.background-color]="'#9de8eb'"
-              (click)="applySelection.emit({ mode: 'mark', color: '#9de8eb', element })">
-        <mat-icon>border_color</mat-icon>
-      </button>
-      <button *ngIf="elementModel.highlightableOrange"
-              type="button"
-              class="marking-button"
-              mat-mini-fab [style.background-color]="'#ffa06a'"
-              (click)="applySelection.emit({ mode: 'mark', color: '#ffa06a', element })">
-        <mat-icon>border_color</mat-icon>
-      </button>
-      <button type="button"
-              class="marking-button" [style.background-color]="'lightgrey'" mat-mini-fab
-              (click)="applySelection.emit({ mode: 'delete', color: 'none', element })">
-        <mat-icon svgIcon="rubber-black"></mat-icon>
-      </button>
+      <app-marking-button *ngIf="elementModel.highlightableYellow"
+                          [color]="'#f9f871'"
+                          [selected]="selectedColor === '#f9f871'"
+                          mode="mark"
+                          (selectedChange)="onSelectionChange($event)">
+      </app-marking-button>
+      <app-marking-button *ngIf="elementModel.highlightableTurquoise"
+                          [color]="'#9de8eb'"
+                          [selected]="selectedColor === '#9de8eb'"
+                          mode="mark"
+                          (selectedChange)="onSelectionChange($event)">
+      </app-marking-button>
+      <app-marking-button *ngIf="elementModel.highlightableOrange"
+                          [color]="'#ffa06a'"
+                          [selected]="selectedColor === '#ffa06a'"
+                          mode="mark"
+                          (selectedChange)="onSelectionChange($event)">
+      </app-marking-button>
+      <app-marking-button [color]="'lightgrey'"
+                          [selected]="selectedColor === 'lightgrey'"
+                          mode="delete"
+                          (selectedChange)="onSelectionChange($event)">
+      </app-marking-button>
     </div>`,
   styles: [
-    '.marking-bar {position: sticky; top: 0; margin-bottom: 15px;}',
-    '.marking-button {color: #333; margin-right: 5px;}'
+    '.marking-bar {position: sticky; top: 0; margin-bottom: 13px;}'
   ]
 })
 export class MarkingBarComponent {
   @Input() element!: HTMLElement;
   @Input() elementModel!: TextElement;
   @Output() applySelection = new EventEmitter<{
+    active: boolean,
     mode: 'mark' | 'delete',
     color: string,
     element: HTMLElement
   }>();
+
+  selectedColor!: string;
+
+  onSelectionChange(selection: { selected: boolean, color: string, mode: 'mark' | 'delete' }): void {
+    this.selectedColor = selection.selected ? selection.color : 'none';
+    this.applySelection
+      .emit({
+        active: selection.selected, mode: selection.mode, color: selection.color, element: this.element
+      });
+  }
 }

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

+import {
+  Component, EventEmitter, Input, Output
+} from '@angular/core';
+
+@Component({
+  selector: 'app-marking-button',
+  template: `
+    <button type="button"
+            class="marking-button"
+            [class.selected] = selected
+            mat-mini-fab
+            [style.background-color]="color"
+            (click)="selected = !selected; selectedChange.emit({ selected, mode, color })">
+      <mat-icon *ngIf="mode === 'mark'">border_color</mat-icon>
+      <mat-icon *ngIf="mode === 'delete'" svgIcon="rubber-black"></mat-icon>
+    </button>`,
+  styles: [
+    '.marking-button {color: #333; margin-left: 5px; margin-top: 2px}',
+    '.selected {outline: 2px solid black}']
+})
+export class MarkingButtonComponent {
+  @Input() selected!: boolean;
+  @Input() color!: string;
+  @Input() mode!: 'mark' | 'delete';
+  @Input() element!: HTMLElement;
+  @Output() selectedChange = new EventEmitter<{
+    selected: boolean,
+    mode: 'mark' | 'delete',
+    color: string,
+  }>();
+}

projects/common/shared.module.ts

@@ -51,6 +51,7 @@ import { FrameComponent } from './ui-elements/frame/frame.component';
 import { ToggleButtonComponent } from './ui-elements/toggle-button/toggle-button.component';
 import { MarkingBarComponent } from './components/marking-bar/marking-bar.component';
 import { StyleMarksPipe } from './ui-elements/cloze/styleMarks.pipe';
+import { MarkingButtonComponent } from './components/marking-bar/marking-button.component';
 
 @NgModule({
   imports: [
@@ -103,7 +104,8 @@ import { StyleMarksPipe } from './ui-elements/cloze/styleMarks.pipe';
     FrameComponent,
     ToggleButtonComponent,
     MarkingBarComponent,
-    StyleMarksPipe
+    StyleMarksPipe,
+    MarkingButtonComponent
   ],
   exports: [
     CommonModule,

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

@@ -49,6 +49,7 @@ export class TextComponent extends ElementComponent {
   @Output() elementValueChanged = new EventEmitter<ValueChangeElement>();
   @Output() startSelection = new EventEmitter<MouseEvent>();
   @Output() applySelection = new EventEmitter<{
+    active: boolean,
     mode: 'mark' | 'delete',
     color: string,
     element: HTMLElement

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

@@ -42,6 +42,8 @@ export class ElementContainerComponent implements OnInit {
   @Input() pageIndex!: number;
 
   isKeyboardOpen!: boolean;
+  selectedColor!: string | null;
+  selectedMode!: 'mark' | 'delete' | null;
 
   private ngUnsubscribe = new Subject<void>();
 
@@ -183,18 +185,26 @@ export class ElementContainerComponent implements OnInit {
         .subscribe((mouseEvent: MouseEvent) => {
           this.nativeEventService.mouseUp
             .pipe(takeUntil(this.ngUnsubscribe), first())
-            .subscribe(() => this.startSelection(mouseEvent, elementComponent));
+            .subscribe(() => this.stopSelection(mouseEvent, elementComponent));
         });
     }
   }
 
-  private startSelection(mouseEvent: MouseEvent, elementComponent: TextComponent) {
+  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) ||
       (mouseEvent.ctrlKey && selection.rangeCount)) {
         selection.removeAllRanges();
+      } else if (this.selectedMode && this.selectedColor) {
+        this.markingService
+          .applySelection(
+            this.selectedMode,
+            this.selectedColor,
+            elementComponent.containerDiv.nativeElement,
+            elementComponent as TextComponent
+          );
       }
     }
   }
@@ -205,12 +215,20 @@ export class ElementContainerComponent implements OnInit {
         .pipe(takeUntil(this.ngUnsubscribe))
         .subscribe((selection:
         {
+          active: boolean,
           mode: 'mark' | 'delete',
           color: string;
           element: HTMLElement;
         }) => {
-          this.markingService
-            .applySelection(selection.mode, selection.color, selection.element, elementComponent as TextComponent);
+          if (selection.active) {
+            this.selectedColor = selection.color;
+            this.selectedMode = selection.mode;
+            this.markingService
+              .applySelection(selection.mode, selection.color, selection.element, elementComponent as TextComponent);
+          } else {
+            this.selectedColor = null;
+            this.selectedMode = null;
+          }
         });
     }
   }