[editor] Refactor canvas drag and drop - enable drop on frame

Frames are meant to be in the background and putting elements on top is 
common with them.

projects/editor/src/app/components/unit-view/canvas/canvas-element-overlay.ts

@@ -15,6 +15,7 @@ import { MathTableComponent } from 'common/components/input-elements/math-table.
 import { UnitService } from '../../../services/unit-services/unit.service';
 import { SelectionService } from '../../../services/selection.service';
 import { ElementService } from 'editor/src/app/services/unit-services/element.service';
+import { DragNDropService } from 'editor/src/app/services/drag-n-drop.service';
 
 @Directive()
 export abstract class CanvasElementOverlay implements OnInit, OnDestroy {
@@ -32,6 +33,7 @@ export abstract class CanvasElementOverlay implements OnInit, OnDestroy {
   constructor(public selectionService: SelectionService,
               protected unitService: UnitService,
               protected elementService: ElementService,
+              protected dragNDropService: DragNDropService,
               private changeDetectorRef: ChangeDetectorRef) { }
 
   ngOnInit(): void {

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

@@ -13,10 +13,10 @@ import { CanvasElementOverlay } from '../canvas-element-overlay';
          [class.centered-vertical]="element.dimensions.isHeightFixed"
          [class.temporaryHighlight]="temporaryHighlight"
          tabindex="-1"
-         cdkDrag [cdkDragData]="{dragType: 'move', element: element}"
          (click)="selectElement($event)" (dblclick)="openEditDialog()"
-         (cdkDragStarted)="selectElement(); moveDragStart()"
-         (cdkDragEnded)="moveDragEnd()"
+         cdkDrag [cdkDragData]="{dragType: 'move', element: element}"
+         (cdkDragStarted)="startDrag()"
+         (cdkDragEnded)="endDrag()"
          [style.outline]="isSelected ? 'purple solid 1px' : ''"
          [style.z-index]="isSelected ? 2 : 1">
       <div *cdkDragPlaceholder></div>
@@ -45,12 +45,23 @@ export class DynamicCanvasOverlayComponent extends CanvasElementOverlay {
   @ViewChild('draggableElement') dragElement!: ElementRef;
   bodyElement: HTMLElement = document.body;
 
-  moveDragStart(): void {
+  startDrag(): void {
+    this.selectElement();
+    this.setCursorFix();
+    this.dragNDropService.isDragInProgress = true;
+  }
+
+  endDrag(): void {
+    this.unsetCursorFix();
+    this.dragNDropService.isDragInProgress = false;
+  }
+
+  setCursorFix(): void {
     this.bodyElement.classList.add('inheritCursors');
     this.bodyElement.style.cursor = 'move';
   }
 
-  moveDragEnd(): void {
+  unsetCursorFix(): void {
     this.bodyElement.classList.remove('inheritCursors');
     this.bodyElement.style.cursor = 'unset';
   }

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

@@ -3,6 +3,7 @@ import {
   ViewChildren, QueryList, ViewChild
 } from '@angular/core';
 import { Section } from 'common/models/section';
+import { DragNDropService } from 'editor/src/app/services/drag-n-drop.service';
 import { CanvasElementOverlay } from '../canvas-element-overlay';
 import { DynamicSectionHelperGridComponent } from './dynamic-section-helper-grid.component';
 
@@ -16,7 +17,7 @@ import { DynamicSectionHelperGridComponent } from './dynamic-section-helper-grid
          [style.grid-auto-rows]="'auto'"
          [style.border]="isSelected ? '2px solid #ff4081': '1px dotted'"
          [style.min-height.px]="section.autoRowSize ? 50 : null"
-         [style.height.px]="section.autoRowSize ? dragging ? currentHeight : null : section.height"
+         [style.height.px]="section.autoRowSize ? null : section.height"
          [style.background-color]="section.backgroundColor"
          app-dynamic-section-helper-grid
          [autoColumnSize]="section.autoColumnSize"
@@ -50,7 +51,9 @@ import { DynamicSectionHelperGridComponent } from './dynamic-section-helper-grid
                                      [cdkDropListData]="{ sectionIndex: sectionIndex }"
                                      [cdkDropListConnectedTo]="dropListList"
                                      [style.position]="'relative'"
-                                     [style.pointer-events]="dragging ? 'none' : 'auto'"
+                                     [style.pointer-events]="dragNDropService.isDragInProgress &&
+                                                             element.type == 'frame' ?
+                                                             'none' : 'auto'"
                                      appElementGridChangeListener
                                      [gridColumn]="element.position.gridColumn"
                                      [gridColumnRange]="element.position.gridColumnRange"
@@ -62,7 +65,6 @@ import { DynamicSectionHelperGridComponent } from './dynamic-section-helper-grid
     </div>
   `
 })
-
 export class SectionDynamicComponent {
   @Input() section!: Section;
   @Input() sectionIndex!: number;
@@ -74,6 +76,5 @@ export class SectionDynamicComponent {
   @ViewChild(DynamicSectionHelperGridComponent) helperGrid!: DynamicSectionHelperGridComponent;
   @ViewChildren('elementComponent') childElementComponents!: QueryList<CanvasElementOverlay>;
 
-  dragging = false;
-  currentHeight: number = 0;
+  constructor(protected dragNDropService: DragNDropService) { }
 }

projects/editor/src/app/services/drag-n-drop.service.ts

+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DragNDropService {
+  isDragInProgress = false;
+}