[editor] Fix element deletion via Delete key

This is now done via listener directly on the element overlay. The 
overlay's div is made selectable with 'tabindex'. Then the key event is 
caught and delete logic started. The actual logic did not change and 
still deletes all selected elements not just the one catching the delete 
key event.

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

 import {
   Directive, Input,
   ComponentFactoryResolver, ComponentRef,
-  HostListener,
   ViewChild, ViewContainerRef, OnInit, OnDestroy, ChangeDetectorRef
 } from '@angular/core';
 import { Subject } from 'rxjs';
-import { take, takeUntil } from 'rxjs/operators';
+import { takeUntil } from 'rxjs/operators';
 import { UnitService } from '../../../../unit.service';
 import * as ComponentUtils from '../../../../../../../common/component-utils';
 import { FormElementComponent } from '../../../../../../../common/form-element-component.directive';
@@ -55,26 +54,6 @@ export abstract class CanvasElementOverlay implements OnInit, OnDestroy {
     }
   }
 
-  @HostListener('window:keydown', ['$event'])
-  handleKeyDown(event: KeyboardEvent): void {
-    if ((event.target as Element).tagName !== 'INPUT' && (event.target as Element).tagName !== 'TEXTAREA' &&
-        ((event.target as Element).className.indexOf('aspect-inserted-element') > -1 ||
-        (event.target as Element).closest('.aspect-inserted-element')) &&
-        event.key === 'Delete') {
-      this.selectionService.selectedElements
-        .pipe(take(1))
-        .subscribe((selectedElements: UIElement[]) => {
-          this.unitService.deleteElementsFromSectionByIndex(
-            selectedElements,
-            this.selectionService.selectedPageIndex,
-            this.selectionService.selectedPageSectionIndex
-          );
-          this.selectionService.clearElementSelection();
-        })
-        .unsubscribe();
-    }
-  }
-
   setSelected(newValue: boolean): void {
     this.isSelected = newValue;
     // This avoids: "NG0100: Expression has changed after it was checked"

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

 import { Component } from '@angular/core';
+import { take } from 'rxjs/operators';
 import { CdkDragMove } from '@angular/cdk/drag-drop';
 import { CanvasElementOverlay } from './canvas-element-overlay';
+import { UIElement } from '../../../../../../../common/models/uI-element';
 
 @Component({
   selector: 'app-static-canvas-overlay',
   template: `
     <!-- Is also a droplist to catch the resize drop and not let it bubble up to the canvas drop handler. -->
+    <!-- TabIndex is needed to make the div selectable and catch keyboard events (delete). -->
     <div class="draggable-element" [class.draggable-element-selected]="isSelected"
          cdkDrag [cdkDragData]="{dragType: 'move', element: element}"
          (click)="selectElement($event.shiftKey)" (cdkDragStarted)="!isSelected && selectElement()"
          (dblclick)="openEditDialog()"
+         (keyup.delete)="deleteSelectedElements()" tabindex="-1"
          cdkDropList>
       <!-- Needs extra div because styling can interfere with drag and drop-->
       <div [style.position]="'absolute'"
@@ -63,4 +67,18 @@ export class StaticCanvasOverlayComponent extends CanvasElementOverlay {
       Math.max(this.oldY + event.distance.y, 0)
     );
   }
+
+  deleteSelectedElements(): void {
+    this.selectionService.selectedElements
+      .pipe(take(1))
+      .subscribe((selectedElements: UIElement[]) => {
+        this.unitService.deleteElementsFromSectionByIndex(
+          selectedElements,
+          this.selectionService.selectedPageIndex,
+          this.selectionService.selectedPageSectionIndex
+        );
+        this.selectionService.clearElementSelection();
+      })
+      .unsubscribe();
+  }
 }