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 cf489f9d182ef6a0bc7ebe9e4c95262a562e2b1a..dde763d4312accfe86e659a8bf24fe284c66110b 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 @@ -1,5 +1,5 @@ import { - Component, OnInit, Input, ComponentFactoryResolver, ViewChild, ViewContainerRef + Component, OnInit, Input, ComponentFactoryResolver, ViewChild, ViewContainerRef, QueryList } from '@angular/core'; import { FormBuilder, FormControl, FormGroup, ValidatorFn @@ -26,6 +26,7 @@ import { MediaPlayerElementComponent } from '../../../../../common/media-player- import { MediaPlayerService } from '../../services/media-player.service'; import { TextComponent } from '../../../../../common/element-components/text.component'; import { TextFieldElement } from '../../../../../common/models/text-field-element'; +import { ElementComponent } from '../../../../../common/element-component.directive'; @Component({ selector: 'app-element-container', @@ -57,47 +58,60 @@ export class ElementContainerComponent implements OnInit { } ngOnInit(): void { - const elementComponentFactory = - ElementFactory.getComponentFactory(this.elementModel.type, this.componentFactoryResolver); - const elementComponent = this.elementComponentContainer.createComponent(elementComponentFactory).instance; - elementComponent.elementModel = this.restoreUnitStateValue(this.elementModel); + const elementComponent: ElementComponent | CompoundElementComponent = this.initElementComponent(); + this.registerAtUnitStateService(elementComponent); - this.registerElement(elementComponent); - this.subscribeCompoundChildren(elementComponent); + if (elementComponent instanceof FormElementComponent) { + this.initFormElement(elementComponent); + } else if (elementComponent instanceof CompoundElementComponent) { + this.initCompoundElement(elementComponent); + } else if (elementComponent instanceof MediaPlayerElementComponent) { + this.mediaPlayerService.registerMediaElement(elementComponent); + } this.subscribeStartSelection(elementComponent); this.subscribeApplySelection(elementComponent); this.subscribeMediaStatusChanged(elementComponent); this.subscribeNavigationRequested(elementComponent); this.subscribeElementValueChanged(elementComponent); this.subscribeForKeyboardEvents(elementComponent); + } + private initElementComponent(): ElementComponent | CompoundElementComponent { + const elementComponentFactory = + ElementFactory.getComponentFactory(this.elementModel.type, this.componentFactoryResolver); + const elementComponent = this.elementComponentContainer.createComponent(elementComponentFactory).instance; + elementComponent.elementModel = this.restoreUnitStateValue(this.elementModel); + return elementComponent; + } + + private initFormElement(elementComponent: any): void { const elementForm = this.formBuilder.group({}); - if (elementComponent instanceof FormElementComponent) { - elementComponent.parentForm = elementForm; - this.subscribeSetValidators(elementComponent, elementForm); - this.registerFormGroup(elementForm); - this.formService.registerFormControl({ - id: this.elementModel.id, - formControl: new FormControl((this.elementModel as InputElement).value), - formGroup: elementForm - }); - } else if (elementComponent instanceof CompoundElementComponent) { - elementComponent.parentForm = elementForm; - elementComponent.getFormElementModelChildren() - .forEach((element: InputElement) => { - this.registerFormGroup(elementForm); - this.formService.registerFormControl({ - id: element.id, - formControl: new FormControl(element.value), - formGroup: elementForm - }); + elementComponent.parentForm = elementForm; + this.subscribeSetValidators(elementComponent, elementForm); + this.registerFormGroup(elementForm); + this.formService.registerFormControl({ + id: this.elementModel.id, + formControl: new FormControl((this.elementModel as InputElement).value), + formGroup: elementForm + }); + } + + private initCompoundElement(elementComponent: any): void { + const elementForm = this.formBuilder.group({}); + elementComponent.parentForm = elementForm; + this.subscribeCompoundChildren(elementComponent); + elementComponent.getFormElementModelChildren() + .forEach((element: InputElement) => { + this.registerFormGroup(elementForm); + this.formService.registerFormControl({ + id: element.id, + formControl: new FormControl(element.value), + formGroup: elementForm }); - } else if (elementComponent instanceof MediaPlayerElementComponent) { - this.mediaPlayerService.registerMediaElement(elementComponent); - } + }); } - private registerElement(elementComponent: any): void { + private registerAtUnitStateService(elementComponent: any): void { if (elementComponent.domElement) { this.unitStateService.registerElement( this.initUnitStateValue(elementComponent.elementModel), @@ -107,20 +121,25 @@ export class ElementContainerComponent implements OnInit { } } - private subscribeStartSelection(elementComponent: any): void { - if (elementComponent.startSelection) { - elementComponent.startSelection + private subscribeCompoundChildren(elementComponent: any): void { + if (elementComponent.childrenAdded) { + elementComponent.childrenAdded .pipe(takeUntil(this.ngUnsubscribe)) - .subscribe((mouseEvent: MouseEvent) => { - const selection = window.getSelection(); - if (mouseEvent.ctrlKey && selection?.rangeCount) { - selection.removeAllRanges(); - } + .subscribe((children: QueryList<ElementComponent>) => { + children.forEach(child => { + if (child.domElement) { + this.unitStateService.registerElement( + this.initUnitStateValue(child.elementModel), + child.domElement, + this.pageIndex + ); + } + }); }); } } - private subscribeCompoundChildren(elementComponent: any): void { + private subscribeStartSelection(elementComponent: any): void { if (elementComponent.startSelection) { elementComponent.startSelection .pipe(takeUntil(this.ngUnsubscribe))