From c71cf1a2ce557f9b1b95ebddc887711bcc271929 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Fri, 19 Nov 2021 12:05:54 +0100
Subject: [PATCH] [editor] Change element selection to also select the
underlying section
Need to bubble the event further up to where there is a section
reference.
---
.../unit-view/page-view/canvas/canvas.component.html | 1 +
.../page-view/canvas/overlays/canvas-element-overlay.ts | 7 ++++---
.../page-view/canvas/section-dynamic.component.ts | 5 ++++-
.../page-view/canvas/section-static.component.ts | 8 ++++++--
4 files changed, 15 insertions(+), 6 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 3ac6ffafa..e24a7ce85 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
@@ -20,6 +20,7 @@
<app-section-static *ngIf="!section.dynamicPositioning"
class="section drop-list" id="section-{{i}}"
[section]="section"
+ [sectionIndex]="i"
[isSelected]="selectionService.selectedPageSectionIndex === i"
cdkDropList cdkDropListSortingDisabled
[cdkDropListData]="{ sectionIndex: i }"
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 002b06a06..ed42587d3 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 { ClozeElement } from '../../../../../../../../common/models/compound-ele
export abstract class CanvasElementOverlay implements OnInit, OnDestroy {
@Input() element!: UIElement;
@Input() viewMode: boolean = false;
+ @Output() elementSelected = new EventEmitter<any>();
@ViewChild('elementContainer', { read: ViewContainerRef, static: true }) private elementContainer!: ViewContainerRef;
isSelected = false;
protected childComponent!: ComponentRef<ElementComponent | CompoundElementComponent>;
@@ -59,9 +60,9 @@ export abstract class CanvasElementOverlay implements OnInit, OnDestroy {
selectElement(multiSelect: boolean = false): void {
if (multiSelect) {
- this.selectionService.selectElement({ componentElement: this, multiSelect: true });
+ this.elementSelected.emit({ componentElement: this, multiSelect: true });
} else {
- this.selectionService.selectElement({ componentElement: this, multiSelect: false });
+ this.elementSelected.emit({ componentElement: this, multiSelect: false });
}
}
diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/section-dynamic.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/section-dynamic.component.ts
index b643936d8..16402d274 100644
--- a/projects/editor/src/app/components/unit-view/page-view/canvas/section-dynamic.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/section-dynamic.component.ts
@@ -6,6 +6,7 @@ import { DragItemData, DropListData } from './canvas.component';
import { UnitService } from '../../../../services/unit.service';
import { Section } from '../../../../../../../common/models/section';
import { UIElementType } from '../../../../../../../common/models/uI-element';
+import { SelectionService } from '../../../../services/selection.service';
@Component({
selector: 'app-section-dynamic',
@@ -52,6 +53,8 @@ import { UIElementType } from '../../../../../../../common/models/uI-element';
cdkDropList cdkDropListSortingDisabled
[cdkDropListData]="{ sectionIndex: sectionIndex }"
[cdkDropListConnectedTo]="dropListList"
+ (elementSelected)="selectionService.selectElement($event);
+ selectionService.selectedPageSectionIndex = sectionIndex"
(resize)="resizeOverlay($event)"
[style.position]="'relative'"
[style.pointer-events]="dragging ? 'none' : 'auto'">
@@ -71,7 +74,7 @@ export class SectionDynamicComponent {
dragging = false;
- constructor(public unitService: UnitService) { }
+ constructor(public unitService: UnitService, public selectionService: SelectionService) { }
drop(event: CdkDragDrop<DropListData>): void {
const dragItemData: DragItemData = event.item.data;
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 56ba5d797..80bd26f89 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
@@ -4,6 +4,7 @@ import {
import { UnitService } from '../../../../services/unit.service';
import { Section } from '../../../../../../../common/models/section';
import { UIElementType } from '../../../../../../../common/models/uI-element';
+import { SelectionService } from '../../../../services/selection.service';
@Component({
selector: 'app-section-static',
@@ -16,7 +17,9 @@ import { UIElementType } from '../../../../../../../common/models/uI-element';
(dragover)="$event.preventDefault()" (drop)="newElementDropped($event)">
<app-static-canvas-overlay
*ngFor="let element of section.elements"
- [element]="$any(element)">
+ [element]="$any(element)"
+ (elementSelected)="selectionService.selectElement($event);
+ selectionService.selectedPageSectionIndex = sectionIndex">
</app-static-canvas-overlay>
</div>
`,
@@ -26,10 +29,11 @@ import { UIElementType } from '../../../../../../../common/models/uI-element';
})
export class SectionStaticComponent {
@Input() section!: Section;
+ @Input() sectionIndex!: number;
@Input() isSelected!: boolean;
@ViewChild('sectionElement') sectionElement!: ElementRef;
- constructor(public unitService: UnitService) { }
+ constructor(public unitService: UnitService, public selectionService: SelectionService) { }
newElementDropped(event: DragEvent): void {
event.preventDefault();
--
GitLab