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 3ac6ffafa17b0a419542ab418d3793209e4345f1..e24a7ce85f05179c341898d7bf5b291164599576 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 002b06a064fba94eb5834ddfe4453ba30e5eafa2..ed42587d3a9534d173070d5e59f867866824bf30 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 b643936d8b40191f87f126e603136b27da075938..16402d274c738abdcf94aa8ac7767a409e6a89eb 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 56ba5d797862a1bd63a22b8688060883cea5ae3d..80bd26f899af357315197c3b70334c7b49906a45 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();