diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/page-canvas.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/page-canvas.component.ts index aa4fc55a91b4d4e1554adfe0e44dc93ce739d3e5..86709586619535e9658187853c71f46adb9ff49c 100644 --- a/projects/editor/src/app/components/unit-view/page-view/canvas/page-canvas.component.ts +++ b/projects/editor/src/app/components/unit-view/page-view/canvas/page-canvas.component.ts @@ -22,7 +22,8 @@ export class PageCanvasComponent implements OnInit, OnDestroy { @Input() pageObservable!: Observable<UnitPage>; @ViewChildren('section_component') canvasSections!: QueryList<CanvasSectionComponent>; private pageSubscription!: Subscription; - private pageSwitchSubscription!: Subscription; + private pageIndexSubscription!: Subscription; + private selectedPageSectionIndexSubscription!: Subscription; page!: UnitPage; sectionEditMode: boolean = false; selectedSectionIndex = 0; @@ -47,12 +48,12 @@ export class PageCanvasComponent implements OnInit, OnDestroy { sectionComponent.updateSelection(this.unitService.getSelectedElements()); }); }); - this.pageSwitchSubscription = this.unitService.selectedPageIndex.subscribe( // TODO name properly + this.pageIndexSubscription = this.unitService.selectedPageIndex.subscribe( () => { this.clearSelection(); } ); - this.pageSwitchSubscription = this.unitService.selectedPageSectionIndex.subscribe( + this.selectedPageSectionIndexSubscription = this.unitService.selectedPageSectionIndex.subscribe( (index: number) => { this.selectedSectionIndex = index; } @@ -60,7 +61,7 @@ export class PageCanvasComponent implements OnInit, OnDestroy { } selectSection(id: number): void { - this.unitService.selectPageSection(Number(id)); + this.unitService.updatePageSectionSelection(Number(id)); } elementSelected(event: { componentElement: CanvasDragOverlayComponent; multiSelect: boolean }): void { @@ -68,7 +69,7 @@ export class PageCanvasComponent implements OnInit, OnDestroy { this.clearSelection(); } this.selectedComponentElements.push(event.componentElement); - this.unitService.selectElement(event.componentElement.element); + this.unitService.addElementSelection(event.componentElement.element); event.componentElement.setSelected(true); } @@ -77,7 +78,7 @@ export class PageCanvasComponent implements OnInit, OnDestroy { this.canvasSections?.toArray().forEach((sectionComponent: CanvasSectionComponent) => { sectionComponent.clearSelection(); }); - this.unitService.clearSelectedElements(); + this.unitService.clearElementSelection(); } elementDropped(event: CdkDragDrop<UnitPageSection>): void { @@ -115,7 +116,7 @@ export class PageCanvasComponent implements OnInit, OnDestroy { dropSection(event: CdkDragDrop<string[]>): void { moveItemInArray(this.page.sections, event.previousIndex, event.currentIndex); - this.unitService.selectPageSection(0); + this.unitService.updatePageSectionSelection(0); } getPageHeight(): number { // TODO weg @@ -160,6 +161,7 @@ export class PageCanvasComponent implements OnInit, OnDestroy { ngOnDestroy(): void { this.pageSubscription.unsubscribe(); - this.pageSwitchSubscription.unsubscribe(); + this.pageIndexSubscription.unsubscribe(); + this.selectedPageSectionIndexSubscription.unsubscribe(); } } diff --git a/projects/editor/src/app/components/unit-view/page-view/ui-element-toolbox/ui-element-toolbox.component.ts b/projects/editor/src/app/components/unit-view/page-view/ui-element-toolbox/ui-element-toolbox.component.ts index aec5241eeff9b0fd9c21ddee2a516a3cbf489128..65cb4e300852eabb50412dc9b80696c20f68dd64 100644 --- a/projects/editor/src/app/components/unit-view/page-view/ui-element-toolbox/ui-element-toolbox.component.ts +++ b/projects/editor/src/app/components/unit-view/page-view/ui-element-toolbox/ui-element-toolbox.component.ts @@ -16,6 +16,6 @@ export class UiElementToolboxComponent { constructor(public unitService: UnitService) { } async addUIElement(elementType: string): Promise<void> { - await this.unitService.addPageElement(elementType); + await this.unitService.addElement(elementType); } } diff --git a/projects/editor/src/app/unit.service.ts b/projects/editor/src/app/unit.service.ts index 76697ed92a4deb596ff91e2962388d7ec35447f9..93ed941b8e393ef7a258881240c1431fff0b049d 100644 --- a/projects/editor/src/app/unit.service.ts +++ b/projects/editor/src/app/unit.service.ts @@ -3,7 +3,6 @@ import { BehaviorSubject, Observable } from 'rxjs'; import { - ButtonElement, TextElement, Unit, UnitPage, UnitPageSection, UnitUIElement } from '../../../common/unit'; import { FileService } from '../../../common/file.service'; @@ -122,7 +121,7 @@ export class UnitService { } } - async addPageElement(elementType: string): Promise<void> { + async addElement(elementType: string): Promise<void> { let newElement: UnitUIElement; switch (elementType) { case 'text': @@ -168,12 +167,34 @@ export class UnitService { this._pages[this._selectedPageIndex.value].next(this._unit.value.pages[this._selectedPageIndex.value]); } - clearSelectedElements(): void { - this._selectedElements.next([]); + deleteSelectedElements(): void { + const oldElements = this._unit.value.pages[this._selectedPageIndex.value] + .sections[this._selectedPageSectionIndex.value].elements; + this._unit.value.pages[this._selectedPageIndex.value] + .sections[this._selectedPageSectionIndex.value].elements = + oldElements.filter(element => !this._selectedElements.value.includes(element)); + this._pages[this._selectedPageIndex.value].next(this._unit.value.pages[this._selectedPageIndex.value]); } - selectElement(elementModel: UnitUIElement): void { - this._selectedElements.next([...this._selectedElements.getValue(), elementModel]); + duplicateSelectedElements(): void { + this._selectedElements.value.forEach((element: UnitUIElement) => { + const newElement: UnitUIElement = { ...element }; + newElement.id = this.idService.getNewID(newElement.type); + newElement.xPosition += 10; + newElement.yPosition += 10; + + this._unit.value.pages[this._selectedPageIndex.value] + .sections[this._selectedPageSectionIndex.value].elements.push(newElement); + this._pages[this._selectedPageIndex.value].next(this._unit.value.pages[this._selectedPageIndex.value]); + }); + } + + updatePageSelection(newIndex: number): void { + this._selectedPageIndex.next(newIndex); + } + + updatePageSectionSelection(newIndex: number): void { + this._selectedPageSectionIndex.next(newIndex); } updateSelectedElementProperty(property: string, value: string | number | boolean): boolean { @@ -197,13 +218,12 @@ export class UnitService { return true; } - deleteSelectedElements(): void { - const oldElements = this._unit.value.pages[this._selectedPageIndex.value] - .sections[this._selectedPageSectionIndex.value].elements; - this._unit.value.pages[this._selectedPageIndex.value] - .sections[this._selectedPageSectionIndex.value].elements = - oldElements.filter(element => !this._selectedElements.value.includes(element)); - this._pages[this._selectedPageIndex.value].next(this._unit.value.pages[this._selectedPageIndex.value]); + addElementSelection(elementModel: UnitUIElement): void { + this._selectedElements.next([...this._selectedElements.getValue(), elementModel]); + } + + clearElementSelection(): void { + this._selectedElements.next([]); } saveUnit(): void { @@ -223,10 +243,6 @@ export class UnitService { this.idService.readExistingIDs(this._unit.value); } - selectPageSection(index: number): void { - this._selectedPageSectionIndex.next(index); - } - showDefaultEditDialog(element: UnitUIElement): void { if (Object.prototype.hasOwnProperty.call(element, 'label')) { this.dialogService.showTextEditDialog((element as any).label).subscribe((result: string) => { @@ -242,17 +258,4 @@ export class UnitService { }); } } - - duplicateSelectedElements(): void { - this._selectedElements.value.forEach((element: UnitUIElement) => { - const newElement: UnitUIElement = { ...element }; - newElement.id = this.idService.getNewID(newElement.type); - newElement.xPosition += 10; - newElement.yPosition += 10; - - this._unit.value.pages[this._selectedPageIndex.value] - .sections[this._selectedPageSectionIndex.value].elements.push(newElement); - this._pages[this._selectedPageIndex.value].next(this._unit.value.pages[this._selectedPageIndex.value]); - }); - } }