[editor] Fix selection logic to only use one method

..instead of multiple methods doing almost the same stuff.

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();
   }
 

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';
   }

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-->