From 3cb52a89e93472da463ce57aa87789c25ac31ef8 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Wed, 23 Mar 2022 13:57:37 +0100
Subject: [PATCH] [editor] Fix element selection to also select underlying
section
---
.../unit-view/page-view/canvas/canvas.component.html | 1 +
.../canvas/overlays/canvas-element-overlay.ts | 3 ++-
.../canvas/overlays/static-canvas-overlay.component.ts | 10 +++++++++-
.../page-view/canvas/section-static.component.ts | 6 ++++--
4 files changed, 16 insertions(+), 4 deletions(-)
diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas.component.html b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas.component.html
index 3f7e70675..ce8bfa5d5 100644
--- a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas.component.html
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas.component.html
@@ -24,6 +24,7 @@
class="section drop-list" id="section-{{i}}"
[section]="section"
[isSelected]="selectionService.selectedPageSectionIndex === i"
+ (elementSelected)="selectionService.selectedPageSectionIndex = i"
cdkDropList cdkDropListSortingDisabled
[cdkDropListData]="{ sectionIndex: i }"
(cdkDropListDropped)="elementDropped($event)"
diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/overlays/canvas-element-overlay.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/overlays/canvas-element-overlay.ts
index 93c25b529..d36fd41a1 100644
--- a/projects/editor/src/app/components/unit-view/page-view/canvas/overlays/canvas-element-overlay.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/overlays/canvas-element-overlay.ts
@@ -1,7 +1,7 @@
import {
Directive, Input,
ComponentFactoryResolver, ComponentRef,
- ViewChild, ViewContainerRef, OnInit, OnDestroy, ChangeDetectorRef
+ ViewChild, ViewContainerRef, OnInit, OnDestroy, ChangeDetectorRef, Output, EventEmitter
} from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@@ -19,6 +19,7 @@ import { UIElement } from '../../../../../../../../common/interfaces/elements';
export abstract class CanvasElementOverlay implements OnInit, OnDestroy {
@Input() element!: UIElement;
@Input() viewMode: boolean = false;
+ @Output() elementSelected = new EventEmitter<unknown>();
@ViewChild('elementContainer', { read: ViewContainerRef, static: true }) private elementContainer!: ViewContainerRef;
isSelected = false;
protected childComponent!: ComponentRef<ElementComponent | CompoundElementComponent>;
diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/overlays/static-canvas-overlay.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/overlays/static-canvas-overlay.component.ts
index a59f3fe1b..5c48bfbfa 100644
--- a/projects/editor/src/app/components/unit-view/page-view/canvas/overlays/static-canvas-overlay.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/overlays/static-canvas-overlay.component.ts
@@ -11,7 +11,7 @@ import { UIElement } from '../../../../../../../../common/interfaces/elements';
<!-- TabIndex is needed to make the div selectable and catch keyboard events (delete). -->
<div class="draggable-element"
[class.temporaryHighlight]="temporaryHighlight"
- (click)="!isSelected && selectElement($event.shiftKey); $event.stopPropagation()"
+ (click)="elementClicked($event)"
(dblclick)="openEditDialog()"
(keyup.delete)="deleteSelectedElements()" tabindex="-1"
cdkDrag [cdkDragData]="{dragType: 'move', element: element}"
@@ -86,4 +86,12 @@ export class StaticCanvasOverlayComponent extends CanvasElementOverlay {
})
.unsubscribe();
}
+
+ elementClicked(event: any): void {
+ if (!this.isSelected) {
+ this.selectElement(event.shiftKey);
+ }
+ event.stopPropagation();
+ this.elementSelected.emit();
+ }
}
diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/section-static.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/section-static.component.ts
index 7b5544b0d..7e589a7d1 100644
--- a/projects/editor/src/app/components/unit-view/page-view/canvas/section-static.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/section-static.component.ts
@@ -1,5 +1,5 @@
import {
- Component, ElementRef, Input, QueryList, ViewChild, ViewChildren
+ Component, ElementRef, EventEmitter, Input, Output, QueryList, ViewChild, ViewChildren
} from '@angular/core';
import { UnitService } from '../../../../services/unit.service';
import { CanvasElementOverlay } from './overlays/canvas-element-overlay';
@@ -17,7 +17,8 @@ import { UIElementType } from '../../../../../../../common/interfaces/elements';
(dragover)="$event.preventDefault()" (drop)="newElementDropped($event)">
<aspect-static-canvas-overlay #elementComponent
*ngFor="let element of section.elements"
- [element]="$any(element)">
+ [element]="$any(element)"
+ (elementSelected)="elementSelected.emit($event)">
</aspect-static-canvas-overlay>
</div>
`,
@@ -28,6 +29,7 @@ import { UIElementType } from '../../../../../../../common/interfaces/elements';
export class SectionStaticComponent {
@Input() section!: Section;
@Input() isSelected!: boolean;
+ @Output() elementSelected = new EventEmitter<unknown>();
@ViewChild('sectionElement') sectionElement!: ElementRef;
@ViewChildren('elementComponent') childElementComponents!: QueryList<CanvasElementOverlay>;
--
GitLab