From 520f73ec80ef1e35f93e51cbdb42853691af226b Mon Sep 17 00:00:00 2001
From: fsdavid <daviti1@mail.com>
Date: Mon, 21 Oct 2019 18:24:45 +0200
Subject: [PATCH] Add select and navigate buttons to toolbar menu
---
src/atlasViewer/atlasViewer.component.ts | 25 +++++-
src/atlasViewer/atlasViewer.style.css | 16 ++++
src/atlasViewer/atlasViewer.template.html | 100 ++++++++++------------
3 files changed, 85 insertions(+), 56 deletions(-)
diff --git a/src/atlasViewer/atlasViewer.component.ts b/src/atlasViewer/atlasViewer.component.ts
index 8a4aea334..76ccd8868 100644
--- a/src/atlasViewer/atlasViewer.component.ts
+++ b/src/atlasViewer/atlasViewer.component.ts
@@ -11,7 +11,14 @@ import {
HostListener, ElementRef
} from "@angular/core";
import { Store, select, ActionsSubject } from "@ngrx/store";
-import { ViewerStateInterface, isDefined, FETCHED_SPATIAL_DATA, UPDATE_SPATIAL_DATA, safeFilter } from "../services/stateStore.service";
+import {
+ ViewerStateInterface,
+ isDefined,
+ FETCHED_SPATIAL_DATA,
+ UPDATE_SPATIAL_DATA,
+ safeFilter,
+ CHANGE_NAVIGATION
+} from "../services/stateStore.service";
import {Observable, Subscription, combineLatest, interval, merge, of, Observer} from "rxjs";
import { map, filter, distinctUntilChanged, delay, concatMap, withLatestFrom } from "rxjs/operators";
import { AtlasViewerDataService } from "./atlasViewer.dataService.service";
@@ -29,6 +36,7 @@ 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";
/**
* TODO
@@ -116,7 +124,8 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
private rd: Renderer2,
public localFileService: LocalFileService,
private snackbar: MatSnackBar,
- private bottomSheet: MatBottomSheet
+ private bottomSheet: MatBottomSheet,
+ private store$: Store<any>
) {
this.snackbarMessage$ = this.store.pipe(
@@ -495,9 +504,11 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
mouseUpLeftPosition
mouseUpTopPosition
regionToolsMenuVisible = false
+ collapsedRegionId = -1
mouseDownNehuba(event) {
this.regionToolsMenuVisible = false
+ this.collapsedRegionId = -1
this.mouseUpLeftPosition= event.pageX
this.mouseUpTopPosition= event.pageY
}
@@ -516,6 +527,16 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
}
}
+ navigateTo(position){
+ this.store$.dispatch({
+ type: CHANGE_NAVIGATION,
+ navigation: {
+ position,
+ animation: {}
+ }
+ })
+ }
+
@HostBinding('attr.version')
public _version : string = VERSION
}
diff --git a/src/atlasViewer/atlasViewer.style.css b/src/atlasViewer/atlasViewer.style.css
index 50e6a73eb..2d94f6968 100644
--- a/src/atlasViewer/atlasViewer.style.css
+++ b/src/atlasViewer/atlasViewer.style.css
@@ -69,3 +69,19 @@ mat-sidenav {
.mobileMenuTabs {
margin: 40px 0 0 5px;
}
+
+.regionDescriptionTextClass{
+ max-height:100px;
+ transition: max-height 0.15s ease-out;
+}
+.regionDescriptionTextOpened {
+ max-height: 300px;
+ transition: max-height 0.25s ease-in;
+}
+.regionDescriptionTextBefore:before {
+ content:'';
+ width:100%;
+ height:100%;
+ position:absolute;
+ background:linear-gradient(transparent 50px, #424242);
+}
diff --git a/src/atlasViewer/atlasViewer.template.html b/src/atlasViewer/atlasViewer.template.html
index 1c581a1c1..ef5ff0742 100644
--- a/src/atlasViewer/atlasViewer.template.html
+++ b/src/atlasViewer/atlasViewer.template.html
@@ -104,53 +104,6 @@
</ng-container>
</div>
- <!-- TODO document fixedMouseContextualContainerDirective , then deprecate this -->
- <!-- TODO move to nehuba overlay container -->
-<!-- <panel-component class="shadow" fixedMouseContextualContainerDirective #rClContextMenu>-->
-<!-- <div heading>-->
-<!-- <h5 class="pe-all p-2 m-0">-->
-<!-- What's here?-->
-<!-- </h5>-->
-<!-- </div>-->
-<!-- <div body>-->
-
-<!-- <div *ngIf="(onhoverSegmentsForFixed$ | async)?.length > 0 || (selectedRegions$ | async)?.length > 0"-->
-<!-- class="p-2">-->
-<!-- Search for data relating to:-->
-<!-- </div>-->
-
-<!-- <div *ngFor="let onhoverSegmentFixed of (onhoverSegmentsForFixed$ | async)"-->
-<!-- (click)="searchRegion([onhoverSegmentFixed])"-->
-<!-- class="ws-no-wrap text-left pe-all btn btn-sm btn-secondary btn-block mt-0" data-toggle="tooltip"-->
-<!-- data-placement="top" [title]="onhoverSegmentFixed.name">-->
-<!-- <small class="text-semi-transparent">(hovering)</small> {{ onhoverSegmentFixed.name }}-->
-<!-- </div>-->
-
-<!-- <div *ngIf="(selectedRegions$ | async)?.length > 0 && (selectedRegions$ | async); let selectedRegions"-->
-<!-- (click)="searchRegion(selectedRegions)"-->
-<!-- class="ws-no-wrap text-left pe-all mt-0 btn btn-sm btn-secondary btn-block">-->
-<!-- <ng-container *ngIf="selectedRegions.length > 1">-->
-<!-- <small class="text-semi-transparent">(selected)</small> {{ selectedRegions.length }} selected regions-->
-<!-- </ng-container>-->
-<!-- <ng-container *ngIf="selectedRegions.length === 1">-->
-<!-- <small class="text-semi-transparent">(selected)</small> {{ selectedRegions[0].name }}-->
-<!-- </ng-container>-->
-<!-- </div>-->
-
-<!-- <div class="p-2 text-muted"-->
-<!-- *ngIf="(onhoverSegmentsForFixed$ | async)?.length === 0 && (selectedRegions$ | async)?.length === 0 && (onhoverLandmarksForFixed$ | async)?.length === 0">-->
-<!-- Right click on a parcellation region or select parcellation regions to search KG for associated datasets.-->
-<!-- </div>-->
-
-<!-- <ng-template #noRegionSelected>-->
-<!-- <div (click)="searchRegion()" class="ws-no-wrap text-left pe-all mt-0 btn btn-sm btn-secondary btn-block">-->
-<!-- No region selected. Search KG for all datasets in this template space.-->
-<!-- </div>-->
-<!-- </ng-template>-->
-
-<!-- </div>-->
-<!-- </panel-component>-->
-
<div floatingMouseContextualContainerDirective>
<div class="d-inline-block" iav-mouse-hover #iavMouseHoverConetxtualBlock="iavMouseHover" contextualBlock>
@@ -180,13 +133,52 @@
<div body class="pe-all" *ngIf="(onhoverSegmentsForFixed$ | async) as onHoverSegments">
<mat-card *ngIf="onHoverSegments.length > 0 && regionToolsMenuVisible" class="d-flex flex-column p-0">
- <div *ngFor="let onHoverRegion of onHoverSegments" class="border rounded m-2">
- <div class="text-nowrap text-ellipsis mt-2 ml-2 overflow-hidden" [matTooltip]="onHoverRegion.name" matTooltipShowDelay="1000">{{onHoverRegion.name}}</div>
- <div class="d-flex align-items-center justify-content-between">
- <button mat-button matTooltip="Select region" matTooltipShowDelay="1000" style="font-size: 10px" class="p-1"><i class="fas fa-hand-pointer"></i> Select</button>
- <button mat-button matTooltip="Navigate to region" matTooltipShowDelay="1000" style="font-size: 10px" class="p-1"> <i class="fas fa-crosshairs"></i> Navigate </button>
- <button mat-button matTooltip="Region Description" matTooltipShowDelay="1000" style="font-size: 10px" class="p-1"> <i class="fas fa-info-circle"></i> Description</button>
- </div>
+ <div *ngFor="let onHoverRegion of onHoverSegments; let i = index"
+ 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-->
+<!-- <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' : '']"-->
+<!-- #regionDescriptionText>-->
+<!-- Description Text Here-->
+<!-- </div>-->
+<!-- <div (click)="collapsedRegionId = i"-->
+<!-- *ngIf="+regionDescriptionText.scrollHeight > +regionDescriptionText.clientHeight && collapsedRegionId !== i"-->
+<!-- class="w-100 d-flex justify-content-center align-items-center mt-n2 cursorPointer"><i-->
+<!-- class="fas fa-angle-down m-1"></i> Read More-->
+<!-- </div>-->
+<!-- </div>-->
+ <div class="d-flex align-items-center justify-content-between">
+ <button mat-button
+ matTooltip="Select region"
+ matTooltipShowDelay="1000"
+ style="font-size: 12px"
+ class="p-0 w-100"
+ (click)="regionToolsMenuVisible = false; collapsedRegionId = -1">
+ <i class="fas fa-hand-pointer"></i> Select
+ </button>
+ <button mat-button
+ matTooltip="Navigate to region"
+ matTooltipShowDelay="1000"
+ style="font-size: 12px"
+ class="p-0 w-100"
+ (click)="navigateTo(onHoverRegion.position); regionToolsMenuVisible = false; collapsedRegionId = -1">
+ <i class="fas fa-crosshairs"></i> Navigate
+ </button>
+
+<!-- ToDo Change other buttons font size to 10 if this button is available and remove w-100 classes-->
+<!-- <button mat-button-->
+<!-- matTooltip="Navigate to region"-->
+<!-- matTooltipShowDelay="1000"-->
+<!-- style="font-size: 10px"-->
+<!-- class="p-0 mr-1">-->
+<!-- <i class="fab fa-connectdevelop"></i> Connectivity-->
+<!-- </button>-->
+ </div>
+ <mat-divider *ngIf="onHoverSegments.length > 1 && i !== onHoverSegments.length-1"
+ class="mb-n2"></mat-divider>
</div>
</mat-card>
</div>
--
GitLab