[editor] Add selection logic for Cloze Components

This uses a special event fired only by ClozeComponent, but potentially 
future compound elements as well.
The selection service gets a special method bypassing the usual 
selection logic and just firing the selection event for the props panel.

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

@@ -4,11 +4,16 @@ import {
   ViewChild, ViewContainerRef, OnInit, OnDestroy, ChangeDetectorRef
 } from '@angular/core';
 import { Subject } from 'rxjs';
-import { UnitService } from '../../../../services/unit.service';
-import * as ElementFactory from '../../../../../../../common/util/element.factory';
-import { ElementComponent } from '../../../../../../../common/element-component.directive';
-import { SelectionService } from '../../../../services/selection.service';
-import { UIElement } from '../../../../../../../common/models/uI-element';
+import { takeUntil } from 'rxjs/operators';
+import { UnitService } from '../../../../../services/unit.service';
+import * as ElementFactory from '../../../../../../../../common/util/element.factory';
+import { ElementComponent } from '../../../../../../../../common/element-component.directive';
+import { SelectionService } from '../../../../../services/selection.service';
+import { UIElement } from '../../../../../../../../common/models/uI-element';
+import { CompoundElementComponent } from
+  '../../../../../../../../common/element-components/compound-elements/compound-element.directive';
+import { ClozeComponent } from '../../../../../../../../common/element-components/compound-elements/cloze.component';
+import { ClozeElement } from '../../../../../../../../common/models/compound-elements/cloze-element';
 
 @Directive()
 export abstract class CanvasElementOverlay implements OnInit, OnDestroy {
@@ -16,7 +21,7 @@ export abstract class CanvasElementOverlay implements OnInit, OnDestroy {
   @Input() viewMode: boolean = false;
   @ViewChild('elementContainer', { read: ViewContainerRef, static: true }) private elementContainer!: ViewContainerRef;
   isSelected = false;
-  protected childComponent!: ComponentRef<ElementComponent>;
+  protected childComponent!: ComponentRef<ElementComponent | CompoundElementComponent>;
   private ngUnsubscribe = new Subject<void>();
 
   constructor(public selectionService: SelectionService,
@@ -30,21 +35,18 @@ export abstract class CanvasElementOverlay implements OnInit, OnDestroy {
     this.childComponent.instance.elementModel = this.element;
 
     // Make children not clickable. This way the only relevant events are managed by the overlay.
-    // this.childComponent.location.nativeElement.style.pointerEvents = 'none';
+    this.childComponent.location.nativeElement.style.pointerEvents = 'none';
 
     this.selectionService.selectElement({ componentElement: this, multiSelect: false });
 
-    // This allows to listen for changed directly on the element. And update the model accordingly.
-    // Since the elements are no longer interactable this code is not used. It may be in the future that
-    // this functionality is wanted again. Therefore the code is kept in commented out form.
-
-    // if (this.childComponent.instance instanceof FormElementComponent) {
-    //   this.childComponent.instance.elementValueChanged
-    //     .pipe(takeUntil(this.ngUnsubscribe))
-    //     .subscribe((changeElement: ValueChangeElement) => {
-    //       this.unitService.updateElementProperty([this.element], 'value', changeElement.values[1]);
-    //     });
-    // }
+    if (this.childComponent.instance instanceof ClozeComponent) {
+      this.childComponent.instance.elementSelected
+        .pipe(takeUntil(this.ngUnsubscribe))
+        .subscribe((element: ClozeElement) => {
+          this.childComponent.location.nativeElement.style.pointerEvents = 'unset';
+          this.selectionService.selectCompoundChild(element);
+        });
+    }
   }
 
   setSelected(newValue: boolean): void {

projects/editor/src/app/services/selection.service.ts

@@ -39,4 +39,8 @@ export class SelectionService {
     this.selectedElementComponents = [];
     this._selectedElements.next([]);
   }
+
+  selectCompoundChild(element: UIElement): void {
+    this._selectedElements.next([element]);
+  }
 }