[editor] Refactor dynamic section component

Improve code and prohibit resizing of section when child element is 
dragged.

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

 import { CdkDragDrop } from '@angular/cdk/drag-drop/drag-events';
 import {
   ChangeDetectorRef,
-  Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges
+  Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges
 } from '@angular/core';
 import { UIElement, UIElementType } from '../../../../../../../common/interfaces/elements';
 import { UnitService } from '../../../../services/unit.service';
@@ -45,7 +45,7 @@ export class DynamicSectionHelperGridComponent implements OnInit, OnChanges {
   columnCountArray: unknown[] = [];
   rowCountArray: unknown[] = [];
 
-  constructor(public unitService: UnitService) {}
+  constructor(public unitService: UnitService, public ele: ElementRef) {}
 
   ngOnInit(): void {
     this.calculateColumnCount();

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

@@ -12,7 +12,7 @@ import { UIElement } from '../../../../../../../../common/interfaces/elements';
       <!-- DragStart and DragEnd are part of a cursor hack to style the body. See global styling file. -->
       <div #draggableElement class="draggable-element"
            [class.fixed-size-content-wrapper]="element.position?.dynamicPositioning &&
-            element.position?.fixedSize"
+                                               element.position?.fixedSize"
            [class.temporaryHighlight]="temporaryHighlight"
            [style.display]="dragging ? 'none' : ''"
            tabindex="-1"
@@ -61,7 +61,8 @@ import { UIElement } from '../../../../../../../../common/interfaces/elements';
 })
 export class DynamicCanvasOverlayComponent extends CanvasElementOverlay {
   @Input() dynamicPositioning!: boolean;
-  @Output() resize = new EventEmitter<{ dragging: boolean, elementWidth?: number, elementHeight?: number }>();
+  @Output() dragStart = new EventEmitter();
+  @Output() dragEnd = new EventEmitter();
 
   @ViewChild('draggableElement') dragElement!: ElementRef;
   private gridElementWidth: number = 0;
@@ -81,32 +82,20 @@ export class DynamicCanvasOverlayComponent extends CanvasElementOverlay {
     this.gridElementHeight = this.dragElement.nativeElement.offsetHeight - 2;
     this.elementWidth = this.dragElement.nativeElement.offsetWidth - 2;
     this.elementHeight = this.dragElement.nativeElement.offsetHeight - 2;
-
-    this.resize.emit({
-      dragging: true,
-      elementWidth: this.dragElement.nativeElement.offsetWidth - 2,
-      elementHeight: this.dragElement.nativeElement.offsetHeight - 2
-    });
+    this.dragStart.emit();
   }
 
   resizeDragMove(event: CdkDragMove<{ dragType: string; element: UIElement }>): void {
     this.dragging = true;
     this.elementWidth = this.gridElementWidth + event.distance.x;
     this.elementHeight = this.gridElementHeight + event.distance.y;
-    this.resize.emit({
-      dragging: true,
-      elementWidth: this.gridElementWidth + event.distance.x,
-      elementHeight: this.gridElementHeight + event.distance.y
-    });
   }
 
   resizeDragEnd(): void {
     this.bodyElement.classList.remove('inheritCursors');
     this.bodyElement.style.cursor = 'unset';
     this.dragging = false;
-    this.resize.emit({
-      dragging: false
-    });
+    this.dragEnd.emit();
   }
 
   moveDragStart(): void {

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

 import {
-  Component,
-  Input,
-  Output,
-  EventEmitter,
-  ViewChildren,
-  QueryList, ViewChild, ElementRef
+  Component, Input, Output, EventEmitter,
+  ViewChildren, QueryList, ViewChild
 } from '@angular/core';
 import { CanvasElementOverlay } from './overlays/canvas-element-overlay';
 import { Section } from '../../../../../../../common/interfaces/unit';
@@ -20,7 +16,8 @@ import { DynamicSectionHelperGridComponent } from './dynamic-section-helper-grid
          [style.grid-auto-rows]="'auto'"
          cdkDropListGroup
          [style.border]="isSelected ? '2px solid #ff4081': '1px dotted'"
-         [style.min-height.px]="section.autoRowSize ? 50 : section.height"
+         [style.min-height.px]="section.autoRowSize ? 50 : null"
+         [style.height.px]="section.autoRowSize ? dragging ? currentHeight : null : section.height"
          [style.background-color]="section.backgroundColor"
          app-dynamic-section-helper-grid
          [autoColumnSize]="section.autoColumnSize"
@@ -56,7 +53,8 @@ import { DynamicSectionHelperGridComponent } from './dynamic-section-helper-grid
                                      [gridColumnEnd]="element.position.gridColumnEnd"
                                      [gridRowStart]="element.position.gridRowStart"
                                      [gridRowEnd]="element.position.gridRowEnd"
-                                     (resize)="resizeOverlay($event)"
+                                     (dragStart)="dragging = true"
+                                     (dragEnd)="dragging = false"
                                      (elementChanged)="helperGrid?.refresh()">
       </aspect-dynamic-canvas-overlay>
     </div>
@@ -73,8 +71,5 @@ export class SectionDynamicComponent {
   @ViewChildren('elementComponent') childElementComponents!: QueryList<CanvasElementOverlay>;
 
   dragging = false;
-
-  resizeOverlay(event: { dragging: boolean, elementWidth?: number, elementHeight?: number }): void {
-    this.dragging = event.dragging;
-  }
+  currentHeight: number = 0;
 }