Make marking bar available for Markables

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

@@ -25,7 +25,8 @@ import { TextElement } from 'common/models/elements/text/text';
                                   mode="mark"
                                   (selectedMarkingChanged)="changeMarkingData($event)">
       </aspect-text-marking-button>
-      <aspect-text-marking-button [color]="selectionColors.delete"
+      <aspect-text-marking-button *ngIf="elementModel.markingMode === 'default'"
+                                  [color]="selectionColors.delete"
                                   [isMarkingSelected]="selectedColor === selectionColors.delete"
                                   mode="delete"
                                   (selectedMarkingChanged)="changeMarkingData($event)">

projects/common/components/text/text.component.ts

@@ -4,6 +4,7 @@ import {
 import { TextElement } from 'common/models/elements/text/text';
 import { ValueChangeElement } from 'common/models/elements/element';
 import { ImageFullscreenDirective } from 'common/directives/image-fullscreen.directive';
+import { BehaviorSubject } from 'rxjs';
 import { ElementComponent } from '../../directives/element-component.directive';
 
 @Component({
@@ -12,18 +13,18 @@ import { ElementComponent } from '../../directives/element-component.directive';
     <div [style.width.%]="100"
          [style.height.%]="100">
       <aspect-text-marking-bar
-        *ngIf="elementModel.markingMode === 'default' && (
+        *ngIf="elementModel.markingMode !== 'none' && (
                elementModel.highlightableYellow ||
                elementModel.highlightableTurquoise ||
                elementModel.highlightableOrange)"
         [elementModel]="elementModel"
-        (markingDataChanged)="selectedColor=$event.colorName; markingDataChanged.emit($event)">
+        (markingDataChanged)="selectedColor.next($event.colorName); markingDataChanged.emit($event)">
       </aspect-text-marking-bar>
       <div #textContainerRef class="text-container"
-           [class.orange-selection]="selectedColor === 'orange'"
-           [class.yellow-selection]="selectedColor === 'yellow'"
-           [class.turquoise-selection]="selectedColor === 'turquoise'"
-           [class.delete-selection]="selectedColor === 'delete'"
+           [class.orange-selection]="selectedColor.value === 'orange'"
+           [class.yellow-selection]="selectedColor.value === 'yellow'"
+           [class.turquoise-selection]="selectedColor.value === 'turquoise'"
+           [class.delete-selection]="selectedColor.value === 'delete'"
            [style.background-color]="elementModel.styling.backgroundColor"
            [style.color]="elementModel.styling.fontColor"
            [style.font-size.px]="elementModel.styling.fontSize"
@@ -71,7 +72,7 @@ export class TextComponent extends ElementComponent implements AfterViewInit, On
 
   @ViewChild(ImageFullscreenDirective) imageFullScreenDirective!: ImageFullscreenDirective;
 
-  selectedColor!: string | undefined;
+  selectedColor: BehaviorSubject<string | undefined> = new BehaviorSubject<string | undefined>(undefined);
 
   static textComponents: { [id: string]: TextComponent } = {};
 

projects/common/models/elements/text/text.ts

@@ -12,7 +12,7 @@ import { InstantiationEror } from 'common/util/errors';
 export class TextElement extends UIElement implements TextProperties {
   type: UIElementType = 'text';
   text: string = 'Lorem ipsum dolor sit amet';
-  markingMode: 'none' | 'default' | 'word' | 'range' = 'word';
+  markingMode: 'none' | 'default' | 'word' | 'range' = 'none';
   highlightableOrange: boolean = false;
   highlightableTurquoise: boolean = false;
   highlightableYellow: boolean = false;

projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/ele-specific/text-properties-field-set.component.ts

@@ -6,9 +6,11 @@ import { MatInputModule } from '@angular/material/input';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { SharedModule } from 'common/shared.module';
 import { TextElement } from 'common/models/elements/text/text';
-import { DialogService } from '../../../../../services/dialog.service';
-import { SelectionService } from '../../../../../services/selection.service';
 import { UnitService } from 'editor/src/app/services/unit-services/unit.service';
+import { MatOptionModule } from '@angular/material/core';
+import { MatSelectModule } from '@angular/material/select';
+import { SelectionService } from '../../../../../services/selection.service';
+import { DialogService } from '../../../../../services/dialog.service';
 
 @Component({
   selector: 'aspect-text-props',
@@ -17,7 +19,9 @@ import { UnitService } from 'editor/src/app/services/unit-services/unit.service'
     NgIf,
     SharedModule,
     MatInputModule,
-    MatCheckboxModule
+    MatCheckboxModule,
+    MatOptionModule,
+    MatSelectModule
   ],
   template: `
     <div *ngIf="combinedProperties.text" class="fx-column-start-stretch">
@@ -42,25 +46,42 @@ import { UnitService } from 'editor/src/app/services/unit-services/unit.service'
                 combinedProperties.highlightableTurquoise !== undefined ||
                 combinedProperties.highlightableOrange !== undefined">
         {{'propertiesPanel.highlightable' | translate }}</div>
+
+      <mat-form-field *ngIf="combinedProperties.markingMode !== undefined" appearance="fill">
+        <mat-label>{{'propertiesPanel.markingMode' | translate }}</mat-label>
+        <mat-select [value]="combinedProperties.markingMode"
+                    (selectionChange)="updateModel.emit({ property: 'markingMode', value: $event.value })">
+          <mat-option *ngFor="let option of ['none', 'default', 'word', 'range']"
+                      [value]="option">
+            {{ 'propertiesPanel.markingMode-'+option | translate }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+
+
       <mat-checkbox *ngIf="combinedProperties.highlightableYellow !== undefined"
+                    [disabled]="combinedProperties.markingMode === 'none'"
                     [checked]="$any(combinedProperties.highlightableYellow)"
                     (change)="updateModel.emit({ property: 'highlightableYellow', value: $event.checked })">
         {{'propertiesPanel.highlightableYellow' | translate }}
       </mat-checkbox>
       <mat-checkbox *ngIf="combinedProperties.highlightableTurquoise !== undefined"
+                    [disabled]="combinedProperties.markingMode === 'none'"
                     [checked]="$any(combinedProperties.highlightableTurquoise)"
                     (change)="updateModel.emit({ property: 'highlightableTurquoise', value: $event.checked })">
         {{'propertiesPanel.highlightableTurquoise' | translate }}
       </mat-checkbox>
       <mat-checkbox *ngIf="combinedProperties.highlightableOrange !== undefined"
+                    [disabled]="combinedProperties.markingMode === 'none'"
                     [checked]="$any(combinedProperties.highlightableOrange)"
                     (change)="updateModel.emit({ property: 'highlightableOrange', value: $event.checked })">
         {{'propertiesPanel.highlightableOrange' | translate }}
       </mat-checkbox>
       <mat-checkbox *ngIf="unitService.expertMode && combinedProperties.hasSelectionPopup !== undefined"
-                    [disabled]="!combinedProperties.highlightableYellow &&
+                    [disabled]="combinedProperties.markingMode !== 'default' ||
+                    (!combinedProperties.highlightableYellow &&
                     !combinedProperties.highlightableTurquoise &&
-                    !combinedProperties.highlightableOrange"
+                    !combinedProperties.highlightableOrange)"
                     [style.margin-top.px]="5"
                     [checked]="$any(combinedProperties.hasSelectionPopup)"
                     (change)="updateModel.emit({ property: 'hasSelectionPopup', value: $event.checked })">

projects/editor/src/assets/i18n/de.json

@@ -119,6 +119,11 @@
     "text": "Text",
     "borderRadius": "Radius",
     "highlightable": "Markieren erlauben",
+    "markingMode": "Markierungsmodus",
+    "markingMode-none": "Keine Markierung",
+    "markingMode-default": "Freie Markierung",
+    "markingMode-word": "Wort",
+    "markingMode-range": "Bereich",
     "highlightableYellow": "Gelb",
     "highlightableTurquoise": "Türkis",
     "highlightableOrange": "Orange",

projects/player/src/app/classes/markable-support.ts

@@ -37,6 +37,7 @@ export class MarkableSupport {
         hostElement: markableContainerElement
       });
       componentRef.instance.markables = markablesContainer.markables;
+      componentRef.instance.selectedColor = elementComponent.selectedColor;
       componentRef.instance.markablesChange.subscribe(() => {
         elementComponent.elementValueChanged.emit(
           {
@@ -75,7 +76,7 @@ export class MarkableSupport {
       const word = wordWithWhitespace.match(/\S+/);
       const suffix = wordWithWhitespace.match(/[^\S]\s*$/);
       const id = startIndex + index;
-      const markedWord = MarkableSupport.getMarkedValueById(id, savedMarks);
+      const markedWord = MarkableSupport.getColorValueById(id, savedMarks);
       markables.push(
         {
           id: id,
@@ -83,7 +84,7 @@ export class MarkableSupport {
           word: word ? word[0] : '',
           suffix: suffix ? suffix[0] : '',
           isActive: !!(word && word[0].length),
-          marked: markedWord
+          color: markedWord
         }
       );
     });
@@ -107,7 +108,9 @@ export class MarkableSupport {
     return nodes;
   }
 
-  private static getMarkedValueById(id: number, savedMarks: string[]): boolean {
-    return savedMarks.map((mark: string) => mark.split('-')[0]).includes(id.toString());
+  private static getColorValueById(id: number, savedMarks: string[]): string | null {
+    const savedMarkById = savedMarks.map(savedMark => savedMark.split('-'))
+      .find(mark => mark[0] === id.toString());
+    return savedMarkById ? savedMarkById[2] : null;
   }
 }

projects/player/src/app/components/elements/compound-group-element/compound-group-element.component.ts

@@ -171,8 +171,7 @@ export class CompoundGroupElementComponent extends TextInputGroupDirective imple
             this.getTextChildModelValue(childModel as TextElement),
             childModel.type,
             {
-              markingMode: (childModel as TextElement).markingMode,
-              color: 'yellow'
+              markingMode: (childModel as TextElement).markingMode
             });
           break;
         default:
@@ -208,7 +207,7 @@ export class CompoundGroupElementComponent extends TextInputGroupDirective imple
       this.addElementCodeValueSubscription(
         child as TextComponent,
         childModel,
-        { markingMode: 'word', color: 'yellow' }
+        { markingMode: 'word' }
       );
     }
     if (childModel.type === 'image') {

projects/player/src/app/components/elements/markable-word/markable-word.component.html

-<span class="prevent-select"
-      [style.background-color]="marked ? selectionColors.yellow : 'transparent'"
+<span class="prevent-select is-active"
+      [class.is-active]="!!(markColor && markColor !== 'none')"
+      [style.background-color]="color ? color : 'transparent'"
       (click)="toggleMarked()">{{text}}</span>

projects/player/src/app/components/elements/markable-word/markable-word.component.scss

-.marked {
-  background-color: red;
+.is-active {
+  cursor: pointer;
 }
 
 .prevent-select {

projects/player/src/app/components/elements/markable-word/markable-word.component.ts

@@ -12,13 +12,21 @@ import { TextElement } from 'common/models/elements/text/text';
 })
 export class MarkableWordComponent {
   @Input() text = '';
-  @Input() marked!: boolean;
-  @Output() markedChange = new EventEmitter<boolean>();
+  @Input() color!: string | null;
+  @Input() markColor!: string | undefined;
+  @Output() colorChange = new EventEmitter<string | null>();
 
   selectionColors: Record<string, string> = TextElement.selectionColors;
 
   toggleMarked(): void {
-    this.marked = !this.marked;
-    this.markedChange.emit(this.marked);
+    if (!this.markColor || this.markColor === 'none') {
+      return;
+    }
+    if (this.color && this.color === TextElement.selectionColors[this.markColor]) {
+      this.color = null;
+    } else {
+      this.color = TextElement.selectionColors[this.markColor];
+    }
+    this.colorChange.emit(this.color);
   }
 }

projects/player/src/app/components/elements/markables-container/markables-container.component.html

@@ -4,8 +4,9 @@
   }
   @if (markable.word) {
     <aspect-markable-word [text]="markable.word"
-                          [(marked)]="markable.marked"
-                          (markedChange)="onMarkedChange()">
+                          [markColor]="selectedColor.value"
+                          [(color)]="markable.color"
+                          (colorChange)="onColorChange()">
     </aspect-markable-word>
   }
   @if (markable.suffix) {
@@ -13,4 +14,3 @@
   }
 }
 
-

projects/player/src/app/components/elements/markables-container/markables-container.component.ts

@@ -3,6 +3,7 @@ import {
 } from '@angular/core';
 import { MarkableWordComponent } from 'player/src/app/components/elements/markable-word/markable-word.component';
 import { Markable } from 'player/src/app/models/markable.interface';
+import { BehaviorSubject } from 'rxjs';
 
 @Component({
   selector: 'aspect-markables-container',
@@ -14,10 +15,11 @@ import { Markable } from 'player/src/app/models/markable.interface';
   styleUrl: './markables-container.component.scss'
 })
 export class MarkablesContainerComponent {
+  @Input() selectedColor!: BehaviorSubject<string | undefined>;
   @Input() markables!: Markable[];
   @Input() markablesChange: EventEmitter<void> = new EventEmitter<void>();
 
-  onMarkedChange() {
+  onColorChange() {
     this.markablesChange.emit();
   }
 }

projects/player/src/app/components/elements/text-group-element/text-group-element.component.ts

@@ -66,8 +66,7 @@ export class TextGroupElementComponent extends ElementGroupDirective implements
           this.getElementModelValue(),
           this.elementModel.type,
           {
-            markingMode: (this.elementModel as TextElement).markingMode,
-            color: 'yellow'
+            markingMode: (this.elementModel as TextElement).markingMode
           }),
       this.elementComponent,
       this.pageIndex);
@@ -86,8 +85,7 @@ export class TextGroupElementComponent extends ElementGroupDirective implements
           value.value,
           this.elementModel.type,
           {
-            markingMode: (this.elementModel as TextElement).markingMode,
-            color: 'yellow'
+            markingMode: (this.elementModel as TextElement).markingMode
           })
     });
   }

projects/player/src/app/models/markable.interface.ts

@@ -9,5 +9,5 @@ export interface Markable {
   word: string;
   suffix: string;
   isActive: boolean;
-  marked: boolean;
+  color: string | null;
 }

projects/player/src/app/services/element-model-element-code-mapping.service.ts

@@ -100,7 +100,7 @@ export class ElementModelElementCodeMappingService {
         }
         if (options && options.markingMode !== 'none') {
           return ElementModelElementCodeMappingService
-            .getMarkedMarkables(elementModelValue as Markable[], options.color);
+            .getMarkedMarkables(elementModelValue as Markable[]);
         }
         return [];
       case 'radio':
@@ -114,15 +114,15 @@ export class ElementModelElementCodeMappingService {
     }
   }
 
-  private static getMarkedMarkables(markables: Markable[], color: string): string[] {
+  private static getMarkedMarkables(markables: Markable[]): string[] {
     return markables
-      .filter((markable: Markable) => markable.marked)
-      .map((markable: Markable) => ElementModelElementCodeMappingService.mapToTextSelectionFormat(markable, color));
+      .filter((markable: Markable) => !!markable.color)
+      .map((markable: Markable) => ElementModelElementCodeMappingService
+        .mapToTextSelectionFormat(markable, markable.color));
   }
 
-  private static mapToTextSelectionFormat(markable: Markable, color: string): string {
-    const hexColor = TextElement.selectionColors[color];
-    return `${markable.id}-${markable.id}-${hexColor}`;
+  private static mapToTextSelectionFormat(markable: Markable, color: string | null): string {
+    return `${markable.id}-${markable.id}-${color}`;
   }
 
   private getDragNDropValueObjectById(id: string): DragNDropValueObject | undefined {