From 5c8fcb93d17c101f5375aa4eb59ce992dd56106a Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Thu, 11 Nov 2021 09:34:13 +0100
Subject: [PATCH] [player] Unify naming of events for storing values
All elements now use the elementValueChanged event. Also
formValueChanged is changed.
---
.../element-components/audio.component.ts | 2 +-
.../compound-elements/likert.component.ts | 22 +++++++++----------
.../control-bar/control-bar.component.ts | 4 ++--
.../element-components/image.component.ts | 4 ++--
.../element-components/magnifier.component.ts | 4 ++--
.../element-components/video.component.ts | 2 +-
.../form-element-component.directive.ts | 4 ++--
...edia-player-element-component.directive.ts | 2 +-
.../canvas/canvas-element-overlay.ts | 2 +-
.../element-container.component.ts | 20 ++---------------
10 files changed, 25 insertions(+), 41 deletions(-)
diff --git a/projects/common/element-components/audio.component.ts b/projects/common/element-components/audio.component.ts
index 314eea51c..618810e3c 100644
--- a/projects/common/element-components/audio.component.ts
+++ b/projects/common/element-components/audio.component.ts
@@ -16,7 +16,7 @@ import { MediaPlayerElementComponent } from '../media-player-element-component.d
<app-control-bar [player]="player"
[elementModel]="elementModel"
[active]="active"
- (playbackTimeChanged)="playbackTimeChanged.emit($event)">
+ (elementValueChanged)="elementValueChanged.emit($event)">
</app-control-bar>
</div>
`
diff --git a/projects/common/element-components/compound-elements/likert.component.ts b/projects/common/element-components/compound-elements/likert.component.ts
index 6d8049192..3a4ff074e 100644
--- a/projects/common/element-components/compound-elements/likert.component.ts
+++ b/projects/common/element-components/compound-elements/likert.component.ts
@@ -43,16 +43,16 @@ import { CompoundElementComponent } from './compound-element.directive';
<ng-container *ngFor="let row of elementModel.rows; let i = index">
<app-likert-radio-button-group
- [style.background-color]="elementModel.lineColoring && i % 2 === 0 ? elementModel.lineColoringColor : ''"
- [style.display]="'grid'"
- [style.grid-column-start]="1"
- [style.grid-column-end]="elementModel.columns.length + 2"
- [style.grid-row-start]="2 + i"
- [style.grid-row-end]="3 + i"
- [style.padding.px]="3"
- [elementModel]="row"
- [parentForm]="parentForm"
- (formValueChanged)="formValueChanged.emit($event)">
+ [style.background-color]="elementModel.lineColoring && i % 2 === 0 ? elementModel.lineColoringColor : ''"
+ [style.display]="'grid'"
+ [style.grid-column-start]="1"
+ [style.grid-column-end]="elementModel.columns.length + 2"
+ [style.grid-row-start]="2 + i"
+ [style.grid-row-end]="3 + i"
+ [style.padding.px]="3"
+ [elementModel]="row"
+ [parentForm]="parentForm"
+ (elementValueChanged)="elementValueChanged.emit($event)">
</app-likert-radio-button-group>
</ng-container>
</div>
@@ -65,7 +65,7 @@ import { CompoundElementComponent } from './compound-element.directive';
]
})
export class LikertComponent extends CompoundElementComponent {
- @Output() formValueChanged = new EventEmitter<ValueChangeElement>();
+ @Output() elementValueChanged = new EventEmitter<ValueChangeElement>();
@ViewChildren(LikertRadioButtonGroupComponent) compoundChildren!: QueryList<LikertRadioButtonGroupComponent>;
elementModel!: LikertElement;
parentForm!: FormGroup;
diff --git a/projects/common/element-components/control-bar/control-bar.component.ts b/projects/common/element-components/control-bar/control-bar.component.ts
index 4c81b1fce..6fc737d6a 100644
--- a/projects/common/element-components/control-bar/control-bar.component.ts
+++ b/projects/common/element-components/control-bar/control-bar.component.ts
@@ -15,7 +15,7 @@ export class ControlBarComponent implements OnInit, AfterContentInit, OnDestroy
@Input() player!: HTMLVideoElement | HTMLAudioElement;
@Input() elementModel!: AudioElement | VideoElement;
@Input() active!: boolean;
- @Output() playbackTimeChanged = new EventEmitter<ValueChangeElement>();
+ @Output() elementValueChanged = new EventEmitter<ValueChangeElement>();
duration!: number;
currentTime!: number;
currentRestTime!: number;
@@ -146,7 +146,7 @@ export class ControlBarComponent implements OnInit, AfterContentInit, OnDestroy
}
private sendPlaybackTimeChanged() {
- this.playbackTimeChanged.emit({
+ this.elementValueChanged.emit({
id: this.elementModel.id,
values: [this.playbackTime, this.toPlaybackTime()]
});
diff --git a/projects/common/element-components/image.component.ts b/projects/common/element-components/image.component.ts
index d3ba88932..cb24d1eff 100644
--- a/projects/common/element-components/image.component.ts
+++ b/projects/common/element-components/image.component.ts
@@ -20,7 +20,7 @@ import { ValueChangeElement } from '../models/uI-element';
[zoom]="elementModel.magnifierZoom"
[used]="elementModel.magnifierUsed"
[image]=image
- (magnifierUsed)="magnifierUsed.emit($event)">
+ (elementValueChanged)="elementValueChanged.emit($event)">
</app-magnifier>
</div>
</div>
@@ -32,6 +32,6 @@ import { ValueChangeElement } from '../models/uI-element';
]
})
export class ImageComponent extends ElementComponent {
- @Output() magnifierUsed = new EventEmitter<ValueChangeElement>();
+ @Output() elementValueChanged = new EventEmitter<ValueChangeElement>();
elementModel!: ImageElement;
}
diff --git a/projects/common/element-components/magnifier.component.ts b/projects/common/element-components/magnifier.component.ts
index 9d208a7f3..b80d2851f 100644
--- a/projects/common/element-components/magnifier.component.ts
+++ b/projects/common/element-components/magnifier.component.ts
@@ -31,7 +31,7 @@ export class Magnifier {
@Input() zoom!: number;
@Input() size!: number;
@Input() used!: boolean;
- @Output() magnifierUsed = new EventEmitter<ValueChangeElement>();
+ @Output() elementValueChanged = new EventEmitter<ValueChangeElement>();
left!: number;
top!: number;
@@ -41,7 +41,7 @@ export class Magnifier {
onMousemove(event: MouseEvent): void {
if (!this.used) {
this.used = true;
- this.magnifierUsed.emit({ id: this.imageId, values: [false, true] });
+ this.elementValueChanged.emit({ id: this.imageId, values: [false, true] });
}
this.left = this.calculateGlassPosition(this.image.width, event.offsetX);
this.top = this.calculateGlassPosition(this.image.height, event.offsetY);
diff --git a/projects/common/element-components/video.component.ts b/projects/common/element-components/video.component.ts
index add8712dc..b77b1db52 100644
--- a/projects/common/element-components/video.component.ts
+++ b/projects/common/element-components/video.component.ts
@@ -15,7 +15,7 @@ import { MediaPlayerElementComponent } from '../media-player-element-component.d
<app-control-bar class="correct-position"
[player]="player"
[elementModel]="elementModel"
- (playbackTimeChanged)="playbackTimeChanged.emit($event)">
+ (elementValueChanged)="elementValueChanged.emit($event)">
</app-control-bar>
</div>
`,
diff --git a/projects/common/form-element-component.directive.ts b/projects/common/form-element-component.directive.ts
index b0cf4cc0d..7c65224c4 100644
--- a/projects/common/form-element-component.directive.ts
+++ b/projects/common/form-element-component.directive.ts
@@ -11,7 +11,7 @@ import { InputElement, InputElementValue, ValueChangeElement } from './models/uI
@Directive()
export abstract class FormElementComponent extends ElementComponent implements OnInit, OnDestroy {
- @Output() formValueChanged = new EventEmitter<ValueChangeElement>();
+ @Output() elementValueChanged = new EventEmitter<ValueChangeElement>();
@Output() setValidators = new EventEmitter<ValidatorFn[]>();
parentForm!: FormGroup;
defaultValue!: InputElementValue;
@@ -31,7 +31,7 @@ export abstract class FormElementComponent extends ElementComponent implements O
)
.subscribe(([prevValue, nextValue]: [InputElementValue, InputElementValue]) => {
if (nextValue != null) { // invalid input on number fields generates event with null TODO find a better solution
- this.formValueChanged.emit({ id: this.elementModel.id, values: [prevValue, nextValue] });
+ this.elementValueChanged.emit({ id: this.elementModel.id, values: [prevValue, nextValue] });
}
});
}
diff --git a/projects/common/media-player-element-component.directive.ts b/projects/common/media-player-element-component.directive.ts
index 9b29d9d1c..3a1870d9a 100644
--- a/projects/common/media-player-element-component.directive.ts
+++ b/projects/common/media-player-element-component.directive.ts
@@ -4,7 +4,7 @@ import { ElementComponent } from './element-component.directive';
@Directive()
export abstract class MediaPlayerElementComponent extends ElementComponent {
- @Output() playbackTimeChanged = new EventEmitter<ValueChangeElement>();
+ @Output() elementValueChanged = new EventEmitter<ValueChangeElement>();
@Output() mediaPlay = new EventEmitter<string>();
@Output() mediaPause = new EventEmitter<string>();
diff --git a/projects/editor/src/app/unit-view/page-view/canvas/canvas-element-overlay.ts b/projects/editor/src/app/unit-view/page-view/canvas/canvas-element-overlay.ts
index cb7c58493..043c98e14 100644
--- a/projects/editor/src/app/unit-view/page-view/canvas/canvas-element-overlay.ts
+++ b/projects/editor/src/app/unit-view/page-view/canvas/canvas-element-overlay.ts
@@ -39,7 +39,7 @@ export abstract class CanvasElementOverlay implements OnInit, OnDestroy {
// this functionality is wanted again. Therefore the code is kept in commented out form.
// if (this.childComponent.instance instanceof FormElementComponent) {
- // this.childComponent.instance.formValueChanged
+ // this.childComponent.instance.elementValueChanged
// .pipe(takeUntil(this.ngUnsubscribe))
// .subscribe((changeElement: ValueChangeElement) => {
// this.unitService.updateElementProperty([this.element], 'value', changeElement.values[1]);
diff --git a/projects/player/src/app/components/element-container/element-container.component.ts b/projects/player/src/app/components/element-container/element-container.component.ts
index 2e8e186e6..4d9a7a746 100644
--- a/projects/player/src/app/components/element-container/element-container.component.ts
+++ b/projects/player/src/app/components/element-container/element-container.component.ts
@@ -134,30 +134,14 @@ export class ElementContainerComponent implements OnInit {
});
}
- if (elementComponent.playbackTimeChanged) {
- elementComponent.playbackTimeChanged
+ if (elementComponent.elementValueChanged) {
+ elementComponent.elementValueChanged
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe((playbackTimeChanged: ValueChangeElement) => {
this.unitStateService.changeElementValue(playbackTimeChanged);
});
}
- if (elementComponent.magnifierUsed) {
- elementComponent.magnifierUsed
- .pipe(takeUntil(this.ngUnsubscribe))
- .subscribe((magnifierUsed: ValueChangeElement) => {
- this.unitStateService.changeElementValue(magnifierUsed);
- });
- }
-
- if (elementComponent.formValueChanged) {
- elementComponent.formValueChanged
- .pipe(takeUntil(this.ngUnsubscribe))
- .subscribe((changeElement: ValueChangeElement) => {
- this.unitStateService.changeElementValue(changeElement);
- });
- }
-
if (elementComponent.setValidators) {
elementComponent.setValidators
.pipe(takeUntil(this.ngUnsubscribe))
--
GitLab