diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-overlay.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-overlay.ts index bfbb6a2afe9c5cc223a7cecef777479399fb9c2f..31f249828df34cf3d4e6bb2b8104d4fe1199dcca 100644 --- a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-overlay.ts +++ b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-overlay.ts @@ -1,11 +1,10 @@ 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" diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/static-canvas-overlay.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/static-canvas-overlay.component.ts index c5c47e78d4fbcf898cbd4fccb45a22b5e5cf89d1..2c9ceb77775d8bb8514bd52d4f52c1c49054d1be 100644 --- a/projects/editor/src/app/components/unit-view/page-view/canvas/static-canvas-overlay.component.ts +++ b/projects/editor/src/app/components/unit-view/page-view/canvas/static-canvas-overlay.component.ts @@ -1,15 +1,19 @@ 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(); + } }