[editor] Refactor canvas component events

The dropListList generation is now done when things are changed via the 
section menu and no longer on element update via unit service.
Also remove some interfaces to avoid circular imports. The interfaces 
are so small and insignificant that their form might as well be 
specified at usage point.

projects/editor/src/app/components/unit-view/page-view/canvas/canvas.component.html

@@ -12,6 +12,7 @@
                           [allowMoveUp]="i != 0"
                           [allowMoveDown]="i < page.sections.length - 1"
                           [allowDelete]="page.sections.length > 1"
+                          (changeLayout)="generateDropListList()"
                           (moveSection)="unitService.moveSection(section, page, $event)"
                           (duplicateSection)="unitService.duplicateSection(section, page, i)"
                           (selectElementComponent)="selectElementComponent($event)"

projects/editor/src/app/components/unit-view/page-view/canvas/canvas.component.ts

 import {
-  Component, Input, OnDestroy, OnInit, QueryList, ViewChildren
+  Component, Input, QueryList, ViewChildren
 } from '@angular/core';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
 import { UnitService } from '../../../../services/unit.service';
 import { SelectionService } from '../../../../services/selection.service';
 import { Page } from '../../../../../../../common/models/page';
@@ -25,22 +23,16 @@ import { SectionDynamicComponent } from './section-dynamic.component';
     '.section-menu.open {opacity:1; transition-delay:0s;}'
   ]
 })
-export class CanvasComponent implements OnInit, OnDestroy {
+export class CanvasComponent {
   @Input() page!: Page;
   dropListList: string[] = [];
   hoveredSection: number = -1;
-  private ngUnsubscribe = new Subject<void>();
 
-  @ViewChildren('sectionComponent') childSectionComponents!: QueryList<SectionStaticComponent | SectionDynamicComponent>;
+  @ViewChildren('sectionComponent')
+  childSectionComponents!: QueryList<SectionStaticComponent | SectionDynamicComponent>;
 
   constructor(public selectionService: SelectionService, public unitService: UnitService) { }
 
-  ngOnInit(): void {
-    this.unitService.unit
-      .pipe(takeUntil(this.ngUnsubscribe))
-      .subscribe(() => this.generateDropListList());
-  }
-
   /*
   To make it work that the section itself can handle drop events, but also have the canvas to handle drops
   when outside of the section, all the allowed dropLists have to be connected. Because the lists are not properly
@@ -58,17 +50,19 @@ export class CanvasComponent implements OnInit, OnDestroy {
   Resizing in dynamic sections is handled by the section/element-overlays themselves.
    */
   generateDropListList(): void {
-    this.dropListList = [];
-    this.page.sections.forEach((section: Section, index: number) => {
-      if (!section.dynamicPositioning) {
-        this.dropListList.push(`section-${index}`);
-      } else {
-        section.gridColumnSizes.split(' ').forEach((columnSize: string, columnIndex: number) => {
-          section.gridRowSizes.split(' ').forEach((rowSize: string, rowIndex: number) => {
-            this.dropListList.push(`list-${index}-${columnIndex + 1}-${rowIndex + 1}`); // grid starts counting at 1
+    setTimeout(() => {
+      this.dropListList = [];
+      this.page.sections.forEach((section: Section, index: number) => {
+        if (!section.dynamicPositioning) {
+          this.dropListList.push(`section-${index}`);
+        } else {
+          section.gridColumnSizes.split(' ').forEach((columnSize: string, columnIndex: number) => {
+            section.gridRowSizes.split(' ').forEach((rowSize: string, rowIndex: number) => {
+              this.dropListList.push(`list-${index}-${columnIndex + 1}-${rowIndex + 1}`); // grid starts counting at 1
+            });
           });
-        });
-      }
+        }
+      });
     });
   }
 
@@ -78,7 +72,7 @@ export class CanvasComponent implements OnInit, OnDestroy {
       this.page.sections[newSectionIndex]);
   }
 
-  elementDropped(event: CdkDragDrop<DropListData>): void {
+  elementDropped(event: CdkDragDrop<{ sectionIndex: number; gridCoordinates?: number[]; }>): void {
     const selectedElements = this.selectionService.getSelectedElements() as PositionedElement[];
 
     if (event.previousContainer !== event.container) {
@@ -137,19 +131,4 @@ export class CanvasComponent implements OnInit, OnDestroy {
     }
     return null;
   }
-
-  ngOnDestroy(): void {
-    this.ngUnsubscribe.next();
-    this.ngUnsubscribe.complete();
-  }
-}
-
-export interface DragItemData {
-  dragType: string;
-  element: UIElement;
-}
-
-export interface DropListData {
-  sectionIndex: number;
-  gridCoordinates?: number[];
 }

projects/editor/src/app/components/unit-view/page-view/canvas/section-dynamic.component.ts

@@ -2,10 +2,9 @@ import {
   Component, Input, Output, EventEmitter, ViewChildren, QueryList
 } from '@angular/core';
 import { CdkDragDrop } from '@angular/cdk/drag-drop/drag-events';
-import { DragItemData, DropListData } from './canvas.component';
 import { UnitService } from '../../../../services/unit.service';
 import { Section } from '../../../../../../../common/models/section';
-import { UIElementType } from '../../../../../../../common/models/uI-element';
+import { UIElement, UIElementType } from '../../../../../../../common/models/uI-element';
 import { CanvasElementOverlay } from './overlays/canvas-element-overlay';
 
 @Component({
@@ -77,8 +76,8 @@ export class SectionDynamicComponent {
 
   constructor(public unitService: UnitService) { }
 
-  drop(event: CdkDragDrop<DropListData>): void {
-    const dragItemData: DragItemData = event.item.data;
+  drop(event: CdkDragDrop<{ sectionIndex: number; gridCoordinates?: number[]; }>): void {
+    const dragItemData: { dragType: string; element: UIElement; } = event.item.data;
 
     // Move element to other section - handled by parent (page-canvas).
     if (event.previousContainer.data.sectionIndex !== event.container.data.sectionIndex) {

projects/editor/src/app/components/unit-view/page-view/canvas/section-menu.component.ts

@@ -154,6 +154,7 @@ export class SectionMenuComponent implements OnInit, OnDestroy {
   @Output() moveSection = new EventEmitter<'up' | 'down'>();
   @Output() duplicateSection = new EventEmitter();
   @Output() selectElementComponent = new EventEmitter<UIElement>();
+  @Output() changeLayout = new EventEmitter();
 
   @ViewChild('colorPicker') colorPicker!: ElementRef;
   columnSizes: { value: string, unit: string }[] = [];
@@ -170,6 +171,7 @@ export class SectionMenuComponent implements OnInit, OnDestroy {
 
   updateModel(property: string, value: string | number | boolean): void {
     this.unitService.updateSectionProperty(this.section, property, value);
+    this.changeLayout.emit();
   }
 
   selectElement(element: UIElement): void {
@@ -200,6 +202,7 @@ export class SectionMenuComponent implements OnInit, OnDestroy {
     this.section.gridRowSizes.split(' ').forEach((size: string) => {
       this.rowSizes.push({ value: size.slice(0, -2), unit: size.slice(-2) });
     });
+    this.changeLayout.emit();
   }
 
   /* Add elements to size array. Default value 1fr. */