From 7a82a5ff160444185507e86668ceab4ceb493b60 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Fri, 9 Jul 2021 15:37:16 +0200
Subject: [PATCH] [editor] Refactor section toolbar to use UnitService directly

Also add section prop editing.
---
 .../canvas-section-toolbar.component.ts       | 36 +++++++++++++++----
 .../page-view/canvas/page-canvas.component.ts |  7 ++--
 2 files changed, 32 insertions(+), 11 deletions(-)

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 a22171ddc..b5cc41c6c 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 d6d67a19e..28fb5120f 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>
-- 
GitLab