[editor] Change element selection to also select the underlying section

Need to bubble the event further up to where there is a section 
reference.

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

projects/editor/src/app/components/unit-view/page-view/canvas/overlays/canvas-element-overlay.ts

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

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;

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