diff --git a/src/atlasViewer/atlasViewer.component.ts b/src/atlasViewer/atlasViewer.component.ts index 76ccd88688d1948693466fce651bde2b6a5c1dbd..e68157caf55ea03a4d2d84b2e6f4c1b60ebd5d67 100644 --- a/src/atlasViewer/atlasViewer.component.ts +++ b/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, diff --git a/src/atlasViewer/atlasViewer.template.html b/src/atlasViewer/atlasViewer.template.html index ef5ff0742612741189188f4a95e6183f1f8c6e54..d31855335cb91eb695615b16223de06888449182 100644 --- a/src/atlasViewer/atlasViewer.template.html +++ b/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" diff --git a/src/util/directives/FixedMouseContextualContainerDirective.directive.ts b/src/util/directives/FixedMouseContextualContainerDirective.directive.ts index 491e32439589f72acfafa3b4b401c02f95cb65b3..9745ef7010174d12f5fd4d17b2eda3e24d41463a 100644 --- a/src/util/directives/FixedMouseContextualContainerDirective.directive.ts +++ b/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(){