Merge pull request #43 from FZJ-INM1-BDA/big_fixes_region_selection_mode

fix region selection bugs

src/atlasViewer/atlasViewer.apiService.service.ts

-import { Injectable } from "@angular/core";
+import {Injectable, NgZone} from "@angular/core";
 import { select, Store } from "@ngrx/store";
 import { Observable, Subscribable } from "rxjs";
 import { distinctUntilChanged, map, filter, startWith } from "rxjs/operators";
@@ -30,13 +30,14 @@ export class AtlasViewerAPIServices {
 
   public loadedLibraries: Map<string, {counter: number, src: HTMLElement|null}> = new Map()
 
-  public getUserToSelectARegionResolve
-  public getUserToSelectARegionReject
+  public getUserToSelectARegionResolve: any
+  public rejectUserSelectionMode: any
 
   constructor(
     private store: Store<IavRootStoreInterface>,
     private dialogService: DialogService,
     private log: LoggingService,
+    private zone: NgZone,
   ) {
 
     this.loadedTemplates$ = this.store.pipe(
@@ -132,21 +133,26 @@ export class AtlasViewerAPIServices {
         getUserConfirmation: config => this.dialogService.getUserConfirm(config),
 
         getUserToSelectARegion: (selectingMessage) => new Promise((resolve, reject) => {
-          this.store.dispatch({
-            type: ENABLE_PLUGIN_REGION_SELECTION,
-            payload: selectingMessage
+          this.zone.run(() => {
+            this.store.dispatch({
+              type: ENABLE_PLUGIN_REGION_SELECTION,
+              payload: selectingMessage
+            })
+
+            this.getUserToSelectARegionResolve = resolve
+            this.rejectUserSelectionMode = reject
           })
-
-          this.getUserToSelectARegionResolve = resolve
-          this.getUserToSelectARegionReject = reject
         }),
 
         // ToDo Method should be able to cancel any pending promise.
         cancelPromise: (pr) => {
-          if (pr === this.interactiveViewer.uiHandle.getUserToSelectARegion) {
-            if (this.getUserToSelectARegionReject) this.getUserToSelectARegionReject('Rej')
-            this.store.dispatch({type: DISABLE_PLUGIN_REGION_SELECTION})
-          }
+          this.zone.run(() => {
+            if (pr === this.interactiveViewer.uiHandle.getUserToSelectARegion) {
+              if (this.rejectUserSelectionMode) this.rejectUserSelectionMode()
+              this.store.dispatch({type: DISABLE_PLUGIN_REGION_SELECTION})
+            }
+
+          })
         }
 
       },

src/atlasViewer/atlasViewer.component.ts

 import {
-  AfterViewInit, ChangeDetectorRef,
+  AfterViewInit,
   Component,
   HostBinding,
   OnDestroy,
@@ -29,7 +29,6 @@ import { AtlasViewerConstantsServices, UNSUPPORTED_INTERVAL, UNSUPPORTED_PREVIEW
 import { WidgetServices } from "./widgetUnit/widgetService.service";
 
 import { LocalFileService } from "src/services/localFile.service";
-import { LoggingService } from "src/services/logging.service";
 import { AGREE_COOKIE, AGREE_KG_TOS, SHOW_BOTTOM_SHEET, SHOW_KG_TOS } from "src/services/state/uiState.store";
 import {
   CLOSE_SIDE_PANEL,
@@ -67,6 +66,9 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
   public compareFn = compareFn
 
   @ViewChild('cookieAgreementComponent', {read: TemplateRef}) public cookieAgreementComponent: TemplateRef<any>
+
+  private persistentStateNotifierMatDialogRef: MatDialogRef<any>
+  @ViewChild('persistentStateNotifierTemplate', {read: TemplateRef}) public persistentStateNotifierTemplate: TemplateRef<any>
   @ViewChild('kgToS', {read: TemplateRef}) public kgTosComponent: TemplateRef<any>
   @ViewChild(LayoutMainSide) public layoutMainSide: LayoutMainSide
 
@@ -122,7 +124,7 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
 
   private pluginRegionSelectionEnabled$: Observable<boolean>
   private pluginRegionSelectionEnabled: boolean = false
-  public persistentStateNotifierTemplate$: Observable<string>
+  public persistentStateNotifierMessage$: Observable<string>
 
   private hoveringRegions = []
   public presentDatasetDialogRef: MatDialogRef<any>
@@ -137,9 +139,7 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
     private rd: Renderer2,
     public localFileService: LocalFileService,
     private snackbar: MatSnackBar,
-    private bottomSheet: MatBottomSheet,
-    private log: LoggingService,
-    private changeDetectorRef: ChangeDetectorRef,
+    private bottomSheet: MatBottomSheet
   ) {
 
     this.snackbarMessage$ = this.store.pipe(
@@ -152,9 +152,9 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
       select("pluginRegionSelectionEnabled"),
       distinctUntilChanged(),
     )
-    this.persistentStateNotifierTemplate$ = this.store.pipe(
+    this.persistentStateNotifierMessage$ = this.store.pipe(
       select('uiState'),
-      select("persistentStateNotifierTemplate"),
+      select("persistentStateNotifierMessage"),
       distinctUntilChanged(),
     )
 
@@ -253,6 +253,7 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
       this.selectedParcellation$.subscribe(parcellation => {
         this.selectedParcellation = parcellation
       }),
+
     )
 
     this.subscriptions.push(
@@ -278,6 +279,10 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
         this.hoveringRegions = hr
       })
     )
+
+    this.subscriptions.push(
+      this.pluginRegionSelectionEnabled$.subscribe(bool => this.pluginRegionSelectionEnabled = bool)
+    )
   }
 
   private selectedParcellation$: Observable<any>
@@ -362,9 +367,11 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
     )
 
     this.subscriptions.push(
-      this.pluginRegionSelectionEnabled$.subscribe(PRSE => {
-        this.pluginRegionSelectionEnabled = PRSE
-        this.changeDetectorRef.detectChanges()
+      this.persistentStateNotifierMessage$.subscribe(msg => {
+        if (msg) this.persistentStateNotifierMatDialogRef = this.matDialog.open(this.persistentStateNotifierTemplate, { hasBackdrop: false, position: { top: '5px'} })
+        else {
+          if (this.persistentStateNotifierMatDialogRef) this.persistentStateNotifierMatDialogRef.close()
+        }
       })
     )
   }

src/atlasViewer/atlasViewer.template.html

@@ -123,11 +123,6 @@
         </ng-container>
       </div>
 
-      <div class="fixed-top pe-none d-flex justify-content-center m-4" *ngIf="pluginRegionSelectionEnabled">
-        <ng-container *ngTemplateOutlet="persistentStateNotifierTemplate">
-        </ng-container>
-      </div>
-
       <div floatingMouseContextualContainerDirective>
 
         <div *ngIf="!ismobile && !presentDatasetDialogRef"
@@ -246,6 +241,6 @@
 </ng-template>
 
 <ng-template #persistentStateNotifierTemplate>
-  <mat-card>{{persistentStateNotifierTemplate$ | async}}</mat-card>
+  {{persistentStateNotifierMessage$ | async}}
 </ng-template>
 

src/plugin_examples/plugin_api.md

@@ -165,6 +165,9 @@ window.interactiveViewer
     "message":"Message to be seen by the user." // default: ""
   }
   ```
+  - *getUserToSelectARegion(string)* Used to turn on region selection mode (in this mode, region menu will not displayed on click). Expects message to display on top off viewer while selection mode is active. Returns a Promise, resolves when user clicks on parcellation region, resolve body is desired region(s) array, rejects when user cancels region selection mode. 
+  - *cancelPromise(promise)* Used to reject promises in "uiHandle". Expects listed promises to reject:
+    - getUserToSelectARegion
   
 - pluginControl
 

src/services/state/uiState.store.ts

@@ -23,7 +23,7 @@ export const defaultState: StateInterface = {
   bottomSheetTemplate: null,
 
   pluginRegionSelectionEnabled: false,
-  persistentStateNotifierTemplate: null,
+  persistentStateNotifierMessage: null,
 
   /**
    * replace with server side logic (?)
@@ -112,14 +112,14 @@ export const getStateStore = ({ state = defaultState } = {}) => (prevState: Stat
     return {
       ...prevState,
       pluginRegionSelectionEnabled: true,
-      persistentStateNotifierTemplate: action.payload
+      persistentStateNotifierMessage: action.payload
     }
   }
   case DISABLE_PLUGIN_REGION_SELECTION: {
     return {
       ...prevState,
       pluginRegionSelectionEnabled: false,
-      persistentStateNotifierTemplate: null
+      persistentStateNotifierMessage: null
     }
   }
 
@@ -187,7 +187,7 @@ export interface StateInterface {
   snackbarMessage: symbol
 
   pluginRegionSelectionEnabled: boolean
-  persistentStateNotifierTemplate: TemplateRef<any>
+  persistentStateNotifierMessage: string
 
   agreedCookies: boolean
   agreedKgTos: boolean