From d5ec74173ea6f2fbccd34ee07174e38b541f05ff Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Wed, 18 Aug 2021 14:33:26 +0200
Subject: [PATCH] [editor] Select element when start dragging
---
.../canvas/canvas-element-overlay.ts | 4 +--
.../dynamic-canvas-overlay.component.ts | 26 +++++++++----------
.../canvas/static-canvas-overlay.component.ts | 4 +--
3 files changed, 17 insertions(+), 17 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 49d75c0e5..5ab8645be 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
@@ -71,8 +71,8 @@ export abstract class CanvasElementOverlay {
this.selected = newValue;
}
- click(event: MouseEvent): void {
- if (event.shiftKey) {
+ selectElement(multiSelect: boolean = false): void {
+ if (multiSelect) {
this.selectionService.selectElement({ componentElement: this, multiSelect: true });
} else {
this.selectionService.selectElement({ componentElement: this, multiSelect: false });
diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/dynamic-canvas-overlay.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/dynamic-canvas-overlay.component.ts
index 06a68aa32..684c7e418 100644
--- a/projects/editor/src/app/components/unit-view/page-view/canvas/dynamic-canvas-overlay.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/dynamic-canvas-overlay.component.ts
@@ -8,20 +8,20 @@ import { UnitUIElement } from '../../../../../../../common/unit';
@Component({
selector: 'app-dynamic-canvas-overlay',
template: `
- <div #draggableElement class="draggable-element" [class.draggable-element-selected]="selected"
- cdkDrag [cdkDragData]="{dragType: 'move', element: element}" [cdkDragDisabled]="!selected"
- (click)="click($event)" (dblclick)="openEditDialog()"
- [style.height.%]="100"
- [style.border]="selected ? '1px solid' : ''">
- <div *ngIf="selected" class="resizeHandle"
- cdkDrag [cdkDragData]="{dragType: 'resize', element: element}"
- (cdkDragStarted)="dragStart()" (cdkDragEnded)="dragEnd()" (cdkDragMoved)="resizeElement($event)"
- [style.right.px]="2" [style.bottom.px]="-3">
- <mat-icon>aspect_ratio</mat-icon>
- <div *cdkDragPlaceholder></div>
+ <div #draggableElement class="draggable-element" [class.draggable-element-selected]="selected"
+ cdkDrag [cdkDragData]="{dragType: 'move', element: element}" [cdkDragDisabled]="!selected"
+ (click)="selectElement($event.shiftKey)" (dblclick)="openEditDialog()" (cdkDragStarted)="selectElement()"
+ [style.height.%]="100"
+ [style.border]="selected ? '1px solid' : ''">
+ <div *ngIf="selected" class="resizeHandle"
+ cdkDrag [cdkDragData]="{dragType: 'resize', element: element}"
+ (cdkDragStarted)="dragStart()" (cdkDragEnded)="dragEnd()" (cdkDragMoved)="resizeElement($event)"
+ [style.right.px]="2" [style.bottom.px]="-3">
+ <mat-icon>aspect_ratio</mat-icon>
+ <div *cdkDragPlaceholder></div>
+ </div>
+ <ng-template #elementContainer></ng-template>
</div>
- <ng-template #elementContainer></ng-template>
- </div>
`,
styles: [
'.draggable-element {position: relative}',
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 9ccf5836e..6927c91b0 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
@@ -7,8 +7,8 @@ import { CanvasElementOverlay } from './canvas-element-overlay';
template: `
<!-- Needs extra div because styling can interfere with drag and drop-->
<div class="draggable-element" [class.draggable-element-selected]="selected"
- cdkDrag [cdkDragData]="this.element" [cdkDragDisabled]="!selected"
- (click)="click($event)"
+ cdkDrag [cdkDragData]="this.element"
+ (click)="selectElement($event.shiftKey)" (cdkDragStarted)="selectElement()"
(dblclick)="openEditDialog()">
<div [style.position]="'absolute'"
[style.border]="selected ? '2px solid' : ''"
--
GitLab