From 1df599c48900f0859a26f27cb316eff5f9d45f6b Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Thu, 17 Oct 2024 11:10:46 +0200
Subject: [PATCH] Support marking in selection mode with remote control for
text as child
---
.../compound-group-element.component.ts | 47 +++++++++++++++++--
.../text-group-element.component.ts | 6 +--
2 files changed, 47 insertions(+), 6 deletions(-)
diff --git a/projects/player/src/app/components/elements/compound-group-element/compound-group-element.component.ts b/projects/player/src/app/components/elements/compound-group-element/compound-group-element.component.ts
index 2a9b2e2bc..5b3d3726f 100644
--- a/projects/player/src/app/components/elements/compound-group-element/compound-group-element.component.ts
+++ b/projects/player/src/app/components/elements/compound-group-element/compound-group-element.component.ts
@@ -18,7 +18,7 @@ import { NavigationService } from 'player/src/app/services/navigation.service';
import { AnchorService } from 'player/src/app/services/anchor.service';
import { UnitNavParam } from 'common/models/elements/button/button';
import { StateVariableStateService } from 'player/src/app/services/state-variable-state.service';
-import { Subscription } from 'rxjs';
+import { Subscription, take } from 'rxjs';
import { TextInputGroupDirective } from 'player/src/app/directives/text-input-group.directive';
import { ResponseValueType } from '@iqb/responses';
import { TableElement } from 'common/models/elements/compound-elements/table/table';
@@ -33,13 +33,18 @@ import { TextComponent } from 'common/components/text/text.component';
import { TextMarkingSupport } from 'player/src/app/classes/text-marking-support';
import { TextElement } from 'common/models/elements/text/text';
import { MarkableSupport } from 'player/src/app/classes/markable-support';
+import { NavigationTarget } from 'player/modules/verona/models/verona';
+import { RemoteMarkingData } from 'common/models/marking-data';
+import { RemoteControlService } from 'player/src/app/services/remote-control.service';
+import {
+ TextGroupElementComponent
+} from 'player/src/app/components/elements/text-group-element/text-group-element.component';
import { UnitStateService } from '../../../services/unit-state.service';
import { ElementModelElementCodeMappingService } from '../../../services/element-model-element-code-mapping.service';
import { ValidationService } from '../../../services/validation.service';
import { KeypadService } from '../../../services/keypad.service';
import { KeyboardService } from '../../../services/keyboard.service';
import { DeviceService } from '../../../services/device.service';
-import { NavigationTarget } from 'player/modules/verona/models/verona';
@Component({
selector: 'aspect-compound-group-element',
@@ -80,7 +85,8 @@ export class CompoundGroupElementComponent extends TextInputGroupDirective imple
private stateVariableStateService: StateVariableStateService,
public mediaPlayerService: MediaPlayerService,
private renderer: Renderer2,
- private applicationRef: ApplicationRef
+ private applicationRef: ApplicationRef,
+ private remoteControlService: RemoteControlService
) {
super();
}
@@ -205,6 +211,10 @@ export class CompoundGroupElementComponent extends TextInputGroupDirective imple
childModel,
{ markingMode: (childModel as TextElement).markingMode }
);
+ this.subscribeToRemoteMarkingDataChanged(child as TextComponent, childModel as TextElement);
+ this.subscribeToTextSelectedColorChanged(child as TextComponent, childModel as TextElement);
+ // timeout is needed to give remote controls on other pages time to initialize
+ setTimeout(() => this.broadcastMarkingColorChange(undefined, childModel as TextElement));
}
if (childModel.type === 'image') {
this.addElementCodeValueSubscription(child as ImageComponent, childModel);
@@ -215,6 +225,37 @@ export class CompoundGroupElementComponent extends TextInputGroupDirective imple
}
}
+ private subscribeToTextSelectedColorChanged(child: TextComponent, childModel: TextElement) {
+ child.selectedColorChanged.subscribe(color => this.broadcastMarkingColorChange(color, childModel));
+ }
+
+ private broadcastMarkingColorChange(color: string | undefined, childModel: TextElement): void {
+ this.remoteControlService
+ .broadcastMarkingColorChange({
+ color: color,
+ id: childModel.id,
+ markingMode: childModel.markingMode,
+ markingBars: childModel.markingBars
+ });
+ }
+
+ private subscribeToRemoteMarkingDataChanged(child: TextComponent, childModel: TextElement) {
+ this.remoteControlService.remoteMarkingDataChanged
+ .pipe(takeUntil(this.ngUnsubscribe))
+ .subscribe((data: RemoteMarkingData) => {
+ if (childModel.markingBars.includes(data.id)) {
+ child.selectedColor
+ .next(TextGroupElementComponent.getSelectedColorValue(data.markingData));
+ this.textMarkingSupports[childModel.id].applyMarkingData(data.markingData, child);
+ child.textSelectionStart
+ .pipe(takeUntil(this.ngUnsubscribe), take(1))
+ .subscribe(pointerEvent => {
+ this.textMarkingSupports[childModel.id].startTextSelection(pointerEvent, child);
+ });
+ }
+ });
+ }
+
private addTextSelectionStartSubscription(child: TextComponent, childModel: UIElement): void {
child.textSelectionStart
.pipe(takeUntil(this.ngUnsubscribe))
diff --git a/projects/player/src/app/components/elements/text-group-element/text-group-element.component.ts b/projects/player/src/app/components/elements/text-group-element/text-group-element.component.ts
index ffee467f1..851f3897d 100644
--- a/projects/player/src/app/components/elements/text-group-element/text-group-element.component.ts
+++ b/projects/player/src/app/components/elements/text-group-element/text-group-element.component.ts
@@ -48,7 +48,7 @@ export class TextGroupElementComponent extends ElementGroupDirective implements
super();
this.textMarkingSupport = new TextMarkingSupport(nativeEventService, anchorService);
this.markableSupport = new MarkableSupport(renderer, applicationRef);
- this.subscribeToMarkingDataChanged();
+ this.subscribeToRemoteMarkingDataChanged();
}
ngOnInit(): void {
@@ -88,7 +88,7 @@ export class TextGroupElementComponent extends ElementGroupDirective implements
});
}
- private subscribeToMarkingDataChanged() {
+ private subscribeToRemoteMarkingDataChanged() {
this.remoteControlService.remoteMarkingDataChanged
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe((data: RemoteMarkingData) => {
@@ -105,7 +105,7 @@ export class TextGroupElementComponent extends ElementGroupDirective implements
});
}
- private static getSelectedColorValue(markingData: MarkingData): string | undefined {
+ static getSelectedColorValue(markingData: MarkingData): string | undefined {
if (!markingData.active) return undefined;
return markingData.colorName;
}
--
GitLab