First Version for region tool menu

src/atlasViewer/atlasViewer.component.ts

@@ -2,13 +2,12 @@ import {
   Component,
   HostBinding,
   ViewChild,
-  ViewContainerRef,
   OnDestroy,
   OnInit,
   TemplateRef,
   AfterViewInit,
   Renderer2,
-  HostListener, ElementRef
+  ElementRef
 } from "@angular/core";
 import { Store, select, ActionsSubject } from "@ngrx/store";
 import {
@@ -17,7 +16,7 @@ import {
   FETCHED_SPATIAL_DATA,
   UPDATE_SPATIAL_DATA,
   safeFilter,
-  CHANGE_NAVIGATION
+  CHANGE_NAVIGATION, generateLabelIndexId
 } from "../services/stateStore.service";
 import {Observable, Subscription, combineLatest, interval, merge, of, Observer} from "rxjs";
 import { map, filter, distinctUntilChanged, delay, concatMap, withLatestFrom } from "rxjs/operators";
@@ -35,8 +34,8 @@ import { AGREE_COOKIE, AGREE_KG_TOS, SHOW_KG_TOS, SHOW_BOTTOM_SHEET } from "src/
 import { TabsetComponent } from "ngx-bootstrap/tabs";
 import { LocalFileService } from "src/services/localFile.service";
 import { MatDialog, MatDialogRef, MatSnackBar, MatSnackBarRef, MatBottomSheet, MatBottomSheetRef } from "@angular/material";
-import {MatMenuTrigger} from "@angular/material/menu";
 import {ADD_TO_REGIONS_SELECTION_WITH_IDS} from "src/services/state/viewerState.store";
+import {VIEWER_STATE_ACTION_TYPES} from "src/services/effect/effect";
 
 /**
  * TODO
@@ -527,6 +526,24 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
     }
   }
 
+  public toggleRegionWithId(ngId, labelIndex, removeFlag: any){
+    if (removeFlag) {
+      this.store$.dispatch({
+        type: VIEWER_STATE_ACTION_TYPES.DESELECT_REGIONS_WITH_ID,
+        deselecRegionIds: [generateLabelIndexId({ ngId, labelIndex })]
+      })
+    } else {
+      this.store$.dispatch({
+        type: ADD_TO_REGIONS_SELECTION_WITH_IDS,
+        selectRegionIds : [generateLabelIndexId({ ngId, labelIndex })]
+      })
+    }
+  }
+
+  regionIsSelected(selectedRegions, ngId, labelIndex) {
+    return selectedRegions.map(sr => generateLabelIndexId({ ngId: sr.ngId, labelIndex: sr.labelIndex })).includes(generateLabelIndexId({ ngId, labelIndex }))
+  }
+
   navigateTo(position){
     this.store$.dispatch({
       type: CHANGE_NAVIGATION,

src/atlasViewer/atlasViewer.template.html

@@ -137,7 +137,7 @@
                  class="border-dark rounded mt-2">
               <div class="text-nowrap text-ellipsis mt-2 ml-2 mr-2 overflow-hidden" [matTooltip]="onHoverRegion.name"
                    matTooltipShowDelay="1000">{{onHoverRegion.name}}</div>
-<!--              ToDo implement it with Descriptions-->
+<!-- ToDo implement it with Descriptions-->
 <!--              <div>-->
 <!--                <div class="row m-2 position-relative overflow-hidden"-->
 <!--                     [ngClass]="[collapsedRegionId === i? 'regionDescriptionTextOpened overflow-y-auto' : 'regionDescriptionTextClass', (+regionDescriptionText.scrollHeight > +regionDescriptionText.clientHeight) && collapsedRegionId !== i? 'regionDescriptionTextBefore' : '']"-->
@@ -156,8 +156,13 @@
                         matTooltipShowDelay="1000"
                         style="font-size: 12px"
                         class="p-0 w-100"
-                        (click)="regionToolsMenuVisible = false; collapsedRegionId = -1">
-                  <i class="fas fa-hand-pointer"></i> Select
+                        *ngIf="(selectedRegions$ | async) as selectedRegions"
+                        (click)="toggleRegionWithId(onHoverRegion.ngId, onHoverRegion.labelIndex, regionIsSelected(selectedRegions, onHoverRegion.ngId, onHoverRegion.labelIndex)); regionToolsMenuVisible = false; collapsedRegionId = -1">
+                  <span class="fa-stack fa-1x" >
+                    <i class="fas fa-hand-pointer fa-stack-1x"></i>
+                    <i class="fas fa-slash fa-stack-1x fa-inverse" *ngIf="regionIsSelected(selectedRegions, onHoverRegion.ngId, onHoverRegion.labelIndex)"></i>
+                  </span>
+                  <span [innerText]="regionIsSelected(selectedRegions, onHoverRegion.ngId, onHoverRegion.labelIndex)? 'Unselect' : 'Select'"></span>
                 </button>
                 <button mat-button
                         matTooltip="Navigate to region"

src/util/directives/FixedMouseContextualContainerDirective.directive.ts

@@ -25,13 +25,21 @@ export class FixedMouseContextualContainerDirective {
   }
 
   public show(){
-    if ((window.innerWidth - this.mousePos[0]) < 220) {
-      this.mousePos[0] = window.innerWidth-220
-    }
-    this.transform = `translate(${this.mousePos.map(v => v.toString() + 'px').join(', ')})`
-    this.styleDisplay = 'block'
-    this.isShown = true
-    this.onShow.emit()
+    setTimeout(() => {
+      if (window.innerHeight - this.mousePos[1] < this.el.nativeElement.clientHeight) {
+        this.mousePos[1] = window.innerHeight - this.el.nativeElement.clientHeight
+      }
+
+      if ((window.innerWidth - this.mousePos[0]) < this.el.nativeElement.clientWidth) {
+        this.mousePos[0] = window.innerWidth-this.el.nativeElement.clientWidth
+      }
+
+      this.transform = `translate(${this.mousePos.map(v => v.toString() + 'px').join(', ')})`
+      this.styleDisplay = 'block'
+      this.isShown = true
+      this.onShow.emit()
+
+    })
   }
 
   public hide(){