From 7c404c7e64c6315ba01c2ecafe3ac247b3e7a4f9 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Mon, 1 Aug 2022 15:41:29 +0200
Subject: [PATCH] [editor] Fix selection logic to only use one method
..instead of multiple methods doing almost the same stuff.
---
.../canvas/overlays/canvas-element-overlay.ts | 19 ++++------
.../dynamic-canvas-overlay.component.ts | 37 +++++++++----------
.../static-canvas-overlay.component.ts | 4 +-
3 files changed, 28 insertions(+), 32 deletions(-)
diff --git a/projects/editor/src/app/components/canvas/overlays/canvas-element-overlay.ts b/projects/editor/src/app/components/canvas/overlays/canvas-element-overlay.ts
index 426b903ac..05252760e 100644
--- a/projects/editor/src/app/components/canvas/overlays/canvas-element-overlay.ts
+++ b/projects/editor/src/app/components/canvas/overlays/canvas-element-overlay.ts
@@ -62,19 +62,16 @@ export abstract class CanvasElementOverlay implements OnInit, OnDestroy {
this.changeDetectorRef.detectChanges();
}
- selectElement(multiSelect: boolean = false): void {
- if (multiSelect) {
- this.selectionService.selectElement({ elementComponent: this, multiSelect: true });
- } else {
- this.selectionService.selectElement({ elementComponent: this, multiSelect: false });
- }
- }
-
- elementClicked(event: MouseEvent): void { //TODO method name
+ selectElement(event?: MouseEvent): void {
if (!this.isSelected) {
- this.selectElement(event.shiftKey);
+ // this.selectElement(event.shiftKey);
+ if (event?.shiftKey) {
+ this.selectionService.selectElement({ elementComponent: this, multiSelect: true });
+ } else {
+ this.selectionService.selectElement({ elementComponent: this, multiSelect: false });
+ }
}
- event.stopPropagation();
+ event?.stopPropagation();
this.elementSelected.emit();
}
diff --git a/projects/editor/src/app/components/canvas/overlays/dynamic-canvas-overlay.component.ts b/projects/editor/src/app/components/canvas/overlays/dynamic-canvas-overlay.component.ts
index 463674409..c0a9cb8d2 100644
--- a/projects/editor/src/app/components/canvas/overlays/dynamic-canvas-overlay.component.ts
+++ b/projects/editor/src/app/components/canvas/overlays/dynamic-canvas-overlay.component.ts
@@ -6,29 +6,29 @@ import { CanvasElementOverlay } from './canvas-element-overlay';
@Component({
selector: 'aspect-dynamic-canvas-overlay',
template: `
- <!-- TabIndex is needed to make the div selectable and catch keyboard events (delete). -->
- <!-- 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 &&
+ <!-- TabIndex is needed to make the div selectable and catch keyboard events (delete). -->
+ <!-- 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"
- [class.temporaryHighlight]="temporaryHighlight"
- tabindex="-1"
- cdkDrag [cdkDragData]="{dragType: 'move', element: element}"
- (click)="elementClicked($event)" (dblclick)="openEditDialog()"
- (cdkDragStarted)="moveDragStart()"
- (cdkDragEnded)="moveDragEnd()"
- [style.outline]="isSelected ? 'purple solid 1px' : ''"
- [style.z-index]="isSelected ? 2 : 1">
- <div *cdkDragPlaceholder></div>
- <div [class.fixed-size-content]="element.position?.dynamicPositioning &&
+ [class.temporaryHighlight]="temporaryHighlight"
+ tabindex="-1"
+ cdkDrag [cdkDragData]="{dragType: 'move', element: element}"
+ (click)="selectElement($event)" (dblclick)="openEditDialog()"
+ (cdkDragStarted)="selectElement(); moveDragStart()"
+ (cdkDragEnded)="moveDragEnd()"
+ [style.outline]="isSelected ? 'purple solid 1px' : ''"
+ [style.z-index]="isSelected ? 2 : 1">
+ <div *cdkDragPlaceholder></div>
+ <div [class.fixed-size-content]="element.position?.dynamicPositioning &&
element.position?.fixedSize"
- [style.width]="element.position?.dynamicPositioning && element.position?.fixedSize ?
+ [style.width]="element.position?.dynamicPositioning && element.position?.fixedSize ?
element.width + 'px' : '100%'"
- [style.height]="element.position?.dynamicPositioning && element.position?.fixedSize ?
+ [style.height]="element.position?.dynamicPositioning && element.position?.fixedSize ?
element.height + 'px' : '100%'">
- <ng-template #elementContainer></ng-template>
- </div>
+ <ng-template #elementContainer></ng-template>
</div>
+ </div>
`,
styles: [
'.draggable-element {width: 100%; height: 100%}',
@@ -42,7 +42,6 @@ export class DynamicCanvasOverlayComponent extends CanvasElementOverlay {
bodyElement: HTMLElement = document.body;
moveDragStart(): void {
- this.selectElement();
this.bodyElement.classList.add('inheritCursors');
this.bodyElement.style.cursor = 'move';
}
diff --git a/projects/editor/src/app/components/canvas/overlays/static-canvas-overlay.component.ts b/projects/editor/src/app/components/canvas/overlays/static-canvas-overlay.component.ts
index 3f1b302a7..cd2a2f70d 100644
--- a/projects/editor/src/app/components/canvas/overlays/static-canvas-overlay.component.ts
+++ b/projects/editor/src/app/components/canvas/overlays/static-canvas-overlay.component.ts
@@ -11,11 +11,11 @@ import { CanvasElementOverlay } from './canvas-element-overlay';
<!-- TabIndex is needed to make the div selectable and catch keyboard events (delete). -->
<div class="draggable-element"
[class.temporaryHighlight]="temporaryHighlight"
- (click)="elementClicked($event)"
+ (click)="selectElement($event)"
(dblclick)="openEditDialog()"
(keyup.delete)="deleteSelectedElements()" tabindex="-1"
cdkDrag [cdkDragData]="{dragType: 'move', element: element}"
- (cdkDragStarted)="!isSelected && selectElement()"
+ (cdkDragStarted)="selectElement()"
cdkDropList>
<div *cdkDragPlaceholder></div>
<!-- Needs extra div because styling can interfere with drag and drop-->
--
GitLab