diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-section-toolbar.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-section-toolbar.component.ts index a22171ddc77f422704ba01611d0771e0db9eef64..b5cc41c6cd88a9e22ede0f6d2ff4ee01a699aeb7 100644 --- a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-section-toolbar.component.ts +++ b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-section-toolbar.component.ts @@ -1,23 +1,40 @@ -import { Component, EventEmitter, Output } from '@angular/core'; +import { + Component, EventEmitter, OnInit, Output +} from '@angular/core'; +import { UnitService } from '../../../../unit.service'; +import { UnitPageSection } from '../../../../../../../common/unit'; @Component({ selector: 'app-canvas-section-toolbar', template: ` <div class="canvas-section-toolbar"> - Seitenabschnitte + Seitenabschnitt <button mat-raised-button [disabled]="editMode" - (click)="addSection.emit()"> + (click)="unitService.addSection()"> Hinzufügen <mat-icon>add</mat-icon> </button> <button mat-raised-button [disabled]="editMode" - (click)="removeSection.emit()"> + (click)="unitService.deleteSection()"> Entfernen <mat-icon>remove</mat-icon> </button> <mat-checkbox (change)="toggleEditMode($event.checked)"> Abschnitte verschieben </mat-checkbox> + + <mat-form-field> + <mat-label>Breite</mat-label> + <input matInput type="number" [(ngModel)]="section.width"> + </mat-form-field> + <mat-form-field> + <mat-label>Höhe</mat-label> + <input matInput type="number" [(ngModel)]="section.height"> + </mat-form-field> + <mat-form-field> + <mat-label>Hintergrundfarbe</mat-label> + <input matInput type="text" [(ngModel)]="section.backgroundColor"> + </mat-form-field> </div> `, styles: [ @@ -26,12 +43,17 @@ import { Component, EventEmitter, Output } from '@angular/core'; '.canvas-section-toolbar mat-checkbox {margin-left: 15px}' ] }) -export class CanvasSectionToolbarComponent { - @Output() addSection = new EventEmitter(); - @Output() removeSection = new EventEmitter(); +export class CanvasSectionToolbarComponent implements OnInit { @Output() sectionEditMode = new EventEmitter<boolean>(); + section!: UnitPageSection; editMode: boolean = false; + constructor(public unitService: UnitService) { } + + ngOnInit(): void { + this.section = this.unitService.getSelectedPageSection(); + } + toggleEditMode(checked: boolean): void { this.editMode = checked; this.sectionEditMode.emit(checked); 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 d6d67a19e278a1b461a721f87787947a063683d3..28fb5120f0f61d429ea64029fafd41b9d792d77d 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 @@ -14,8 +14,6 @@ import { CanvasDragOverlayComponent } from './canvas-drag-overlay.component'; selector: 'app-page-canvas', template: ` <app-canvas-section-toolbar - (addSection)="unitService.addSection()" - (removeSection)="unitService.deleteSection()" (sectionEditMode)="sectionEditMode = $event"> </app-canvas-section-toolbar> @@ -41,8 +39,9 @@ import { CanvasDragOverlayComponent } from './canvas-drag-overlay.component'; (cdkDropListDropped)="elementDropped($event)" [cdkDropListData]="section" [ngStyle]="{ border: i === selectedSectionIndex ? '1px solid': '1px dotted', - 'width.px': page.width, - 'height.px': section.height }"> + 'width.px': section.width, + 'height.px': section.height, + 'background-color': section.backgroundColor}"> </div> </div> </div>