From b2961b584debfa775ed1f70d7ae67dacdce0217f Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Sun, 17 Oct 2021 20:34:19 +0200
Subject: [PATCH] [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.
---
.../canvas/canvas-element-overlay.ts | 23 +------------------
.../canvas/static-canvas-overlay.component.ts | 18 +++++++++++++++
2 files changed, 19 insertions(+), 22 deletions(-)
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 bfbb6a2af..31f249828 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 c5c47e78d..2c9ceb777 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();
+ }
}
--
GitLab