diff --git a/src/atlasViewer/atlasViewer.component.ts b/src/atlasViewer/atlasViewer.component.ts
index b816e13167f8ef86cbefc11726c7a112a00d7752..6d44baeb9f12658b593978da841e0a4a094cc1f6 100644
--- a/src/atlasViewer/atlasViewer.component.ts
+++ b/src/atlasViewer/atlasViewer.component.ts
@@ -118,7 +118,9 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
public sidePanelOpen$: Observable<boolean>
- public toggleMessage = this.constantsService.toggleMessage
+
+ onhoverSegmentsForFixed$: Observable<any>
+ regionToolsMenuVisible = false
constructor(
private store: Store<ViewerStateInterface>,
@@ -132,7 +134,7 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
private rd: Renderer2,
public localFileService: LocalFileService,
private snackbar: MatSnackBar,
- private bottomSheet: MatBottomSheet,
+ private bottomSheet: MatBottomSheet
) {
this.snackbarMessage$ = this.store.pipe(
@@ -423,6 +425,27 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
this.kgTosDialogRef = this.matDialog.open(this.kgTosComponent)
})
+ this.onhoverSegmentsForFixed$ = this.rClContextualMenu.onShow.pipe(
+ withLatestFrom(this.onhoverSegments$),
+ map(([_flag, onhoverSegments]) => onhoverSegments || [])
+ )
+
+ }
+
+ mouseDownNehuba(event) {
+ this.regionToolsMenuVisible = false
+ this.rClContextualMenu.hide()
+ }
+
+ mouseUpNehuba(event) {
+ // if (this.mouseUpLeftPosition === event.pageX && this.mouseUpTopPosition === event.pageY) {}
+ this.regionToolsMenuVisible = true
+ if (!this.rClContextualMenu) return
+ this.rClContextualMenu.mousePos = [
+ event.clientX,
+ event.clientY
+ ]
+ this.rClContextualMenu.show()
}
/**
diff --git a/src/atlasViewer/atlasViewer.template.html b/src/atlasViewer/atlasViewer.template.html
index 208098be5f33a64c4d9c6d54457bb6c45b448790..f3d7f314ba7c1bace8e14173120e67f2e2a78f02 100644
--- a/src/atlasViewer/atlasViewer.template.html
+++ b/src/atlasViewer/atlasViewer.template.html
@@ -41,8 +41,9 @@
<ui-nehuba-container iav-mouse-hover #iavMouseHoverEl="iavMouseHover"
[currentOnHoverObs$]="iavMouseHoverEl.currentOnHoverObs$"
[currentOnHover]="iavMouseHoverEl.currentOnHoverObs$ | async"
- singleClickOnNehubaWithoutNavigate
- [regionToolsMenu]="regionToolsMenu">
+ mapClickDirective
+ (mouseDownEmitter)="mouseDownNehuba($event)"
+ (mapClicked)="mouseUpNehuba($event)">
</ui-nehuba-container>
<div class="z-index-10 position-absolute pe-none w-100 h-100">
@@ -128,11 +129,24 @@
<!-- TODO Potentially implementing plugin contextual info -->
</div>
+ <panel-component class="shadow p-0 m-0" fixedMouseContextualContainerDirective>
+ <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; let i = index"
+ class="border-dark rounded mt-2">
- <region-tools-menu #regionToolsMenu
- [selectedRegions$]="selectedRegions$"
- [onhoverSegments$]="onhoverSegments$">
- </region-tools-menu>
+ <region-tools-menu #regionToolsMenu
+ [selectedRegions$]="selectedRegions$"
+ [onHoverRegion]="onHoverRegion">
+ </region-tools-menu>
+
+ <mat-divider *ngIf="onHoverSegments.length > 1 && i !== onHoverSegments.length-1"
+ class="mb-n2"></mat-divider>
+ </div>
+ </mat-card>
+ </div>
+
+ </panel-component>
</layout-floating-container>
diff --git a/src/main.module.ts b/src/main.module.ts
index f9b537cb70aaabdffd51dfeab3986a08e4a4480f..0834d401cc1da8205b77020351a1e5688fe2b4a6 100644
--- a/src/main.module.ts
+++ b/src/main.module.ts
@@ -30,7 +30,6 @@ import { FloatingContainerDirective } from "./util/directives/floatingContainer.
import { PluginFactoryDirective } from "./util/directives/pluginFactory.directive";
import { FloatingMouseContextualContainerDirective } from "./util/directives/floatingMouseContextualContainer.directive";
import { AuthService } from "./services/auth.service";
-// import { FixedMouseContextualContainerDirective } from "./util/directives/FixedMouseContextualContainerDirective.directive";
import { DatabrowserService } from "./ui/databrowserModule/databrowser.service";
import { TransformOnhoverSegmentPipe } from "./atlasViewer/onhoverSegment.pipe";
import {HttpClientModule} from "@angular/common/http";
@@ -54,7 +53,7 @@ import 'hammerjs'
import 'src/res/css/version.css'
import 'src/theme.scss'
import 'src/res/css/extra_styles.css'
-import {SingleClickOnNehubaWithoutNavigateDirective} from "src/util/directives/singleClickOnNehubaWithoutNavigate.directive";
+import {MapClickDirective} from "src/util/directives/mapClick.directive";
@NgModule({
imports : [
@@ -108,9 +107,8 @@ import {SingleClickOnNehubaWithoutNavigateDirective} from "src/util/directives/s
FloatingContainerDirective,
PluginFactoryDirective,
FloatingMouseContextualContainerDirective,
- // FixedMouseContextualContainerDirective,
DragDropDirective,
- SingleClickOnNehubaWithoutNavigateDirective,
+ MapClickDirective,
/* pipes */
GetNamesPipe,
diff --git a/src/res/css/extra_styles.css b/src/res/css/extra_styles.css
index 6075c674bba44e19de2955377d83747ac3b146f3..774f1adebd5fe25aee189b0b48c594e0234ff8af 100644
--- a/src/res/css/extra_styles.css
+++ b/src/res/css/extra_styles.css
@@ -681,7 +681,7 @@ body::after
margin-top: 0.25rem;
}
-.readMoreCollapseButton:before {
+.linear-gradient-fade:before {
content:'';
width:100%;
height:100%;
diff --git a/src/ui/regionToolsMenu/regionToolsMenu.component.ts b/src/ui/regionToolsMenu/regionToolsMenu.component.ts
index 32fdc9f6a56af61e542150903262c7ca8c5298bd..03ef23331a404ab499ae02700b19797b5b581a42 100644
--- a/src/ui/regionToolsMenu/regionToolsMenu.component.ts
+++ b/src/ui/regionToolsMenu/regionToolsMenu.component.ts
@@ -12,45 +12,15 @@ import {Store} from "@ngrx/store";
templateUrl: './regionToolsMenu.template.html',
styleUrls: ['./regionToolsMenu.style.css']
})
-export class RegionToolsMenuComponent implements AfterViewInit {
- @Input() mouseDownObs$: any
- @Input() clickObs$: any
- @Input() onhoverSegments$: any
+export class RegionToolsMenuComponent {
@Input() selectedRegions$: any
-
- @ViewChild(FixedMouseContextualContainerDirective) rClContextualMenu: FixedMouseContextualContainerDirective
-
- onhoverSegmentsForFixed$: Observable<any>
+ @Input() onHoverRegion: any
regionToolsMenuVisible = false
- collapsedRegionId = -1
+ collapsedRegionDescription = false
constructor(private store$: Store<any>) {}
- ngAfterViewInit(): void {
- this.onhoverSegmentsForFixed$ = this.rClContextualMenu.onShow.pipe(
- withLatestFrom(this.onhoverSegments$),
- map(([_flag, onhoverSegments]) => onhoverSegments || [])
- )
- }
-
-
- mouseDownNehuba(event) {
- this.regionToolsMenuVisible = false
- this.rClContextualMenu.hide()
- this.collapsedRegionId = -1
- }
-
- mouseUpNehuba(event) {
- // if (this.mouseUpLeftPosition === event.pageX && this.mouseUpTopPosition === event.pageY) {}
- this.regionToolsMenuVisible = true
- if (!this.rClContextualMenu) return
- this.rClContextualMenu.mousePos = [
- event.clientX,
- event.clientY
- ]
- this.rClContextualMenu.show()
- }
toggleRegionWithId(ngId, labelIndex, removeFlag: any){
if (removeFlag) {
diff --git a/src/ui/regionToolsMenu/regionToolsMenu.style.css b/src/ui/regionToolsMenu/regionToolsMenu.style.css
index be57725a7da673eb119fded9f9f53731ad503b1b..fc202344466f16355a9dd257690a17f7e56c151c 100644
--- a/src/ui/regionToolsMenu/regionToolsMenu.style.css
+++ b/src/ui/regionToolsMenu/regionToolsMenu.style.css
@@ -3,7 +3,7 @@
transition: max-height 0.15s ease-out;
}
.regionDescriptionTextOpened {
- max-height: 300px;
+ max-height: 310px;
transition: max-height 0.25s ease-in;
}
diff --git a/src/ui/regionToolsMenu/regionToolsMenu.template.html b/src/ui/regionToolsMenu/regionToolsMenu.template.html
index 03190481a3ce01c35198363cc6fdc720f97db5f5..627d216810b114582df8fde8d150e68eaf1e86b8 100644
--- a/src/ui/regionToolsMenu/regionToolsMenu.template.html
+++ b/src/ui/regionToolsMenu/regionToolsMenu.template.html
@@ -1,53 +1,50 @@
-<panel-component class="shadow p-0 m-0" fixedMouseContextualContainerDirective>
- <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; let i = index"
- class="border-dark rounded mt-2">
- <div class="text-nowrap text-truncate 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? 'readMoreCollapseButton' : '']"-->
- <!-- #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
- style="font-size: 12px"
- class="p-0 w-100"
- *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" >
+<div class="text-nowrap text-truncate mt-2 ml-2 mr-2 overflow-hidden" [matTooltip]="onHoverRegion.name"
+ matTooltipShowDelay="1000">{{onHoverRegion.name}}</div>
+<!-- ToDo implement it with Descriptions-->
+<!-- <div > <!–*ngIf="!onHoverRegion.description && !onHoverRegion.description.length"–>-->
+<!-- <div class="row m-2 position-relative overflow-hidden"-->
+<!-- [class.regionDescriptionTextOpened] = "collapsedRegionDescription"-->
+<!-- [class.overflow-y-auto] = "collapsedRegionDescription"-->
+<!-- [class.regionDescriptionTextClass] = "!collapsedRegionDescription"-->
+<!-- [class.linear-gradient-fade] = "(+regionDescriptionText.scrollHeight > +regionDescriptionText.clientHeight) && !collapsedRegionDescription"-->
+<!-- #regionDescriptionText>-->
+<!-- {{onHoverRegion.description}}-->
+<!-- </div>-->
+<!-- <div (click)="collapsedRegionDescription = true"-->
+<!-- *ngIf="+regionDescriptionText.scrollHeight > +regionDescriptionText.clientHeight && !collapsedRegionDescription"-->
+<!-- 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 (click)="collapsedRegionDescription = false"-->
+<!-- *ngIf="collapsedRegionDescription"-->
+<!-- class="w-100 d-flex justify-content-center align-items-center mt-n2 cursorPointer"><i-->
+<!-- class="fas fa-angle-up m-1"></i> Collapse-->
+<!-- </div>-->
+<!-- </div>-->
+<div class="d-flex align-items-center justify-content-between">
+ <button mat-button
+ style="font-size: 12px"
+ class="p-0 w-100"
+ *ngIf="(selectedRegions$ | async) as selectedRegions"
+ (click)="toggleRegionWithId(onHoverRegion.ngId, onHoverRegion.labelIndex, regionIsSelected(selectedRegions, onHoverRegion.ngId, onHoverRegion.labelIndex)); regionToolsMenuVisible = false; collapsedRegionDescription = false">
+ <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>
+ <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)? 'Deselect' : 'Select'"></span>
- </button>
- <button mat-button
- 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>
+ <span [innerText]="regionIsSelected(selectedRegions, onHoverRegion.ngId, onHoverRegion.labelIndex)? 'Deselect' : 'Select'"></span>
+ </button>
+ <button mat-button
+ style="font-size: 12px"
+ class="p-0 w-100"
+ (click)="navigateTo(onHoverRegion.position); regionToolsMenuVisible = false; collapsedRegionDescription = false">
+ <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-->
- <!-- 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>
-
-</panel-component>
\ No newline at end of file
+ <!-- ToDo Change other buttons font size to 10 if this button is available and remove w-100 classes-->
+ <!-- <button mat-button-->
+ <!-- style="font-size: 10px"-->
+ <!-- class="p-0 mr-1">-->
+ <!-- <i class="fab fa-connectdevelop"></i> Connectivity-->
+ <!-- </button>-->
+</div>
\ No newline at end of file
diff --git a/src/ui/ui.module.ts b/src/ui/ui.module.ts
index e5341b8d70c7ccbec898741ef3553974d1ffe833..841b34d7f5487e645248e7bccc7a631e2e1a66c1 100644
--- a/src/ui/ui.module.ts
+++ b/src/ui/ui.module.ts
@@ -184,7 +184,8 @@ import {FixedMouseContextualContainerDirective} from "src/util/directives/FixedM
ElementOutClickDirective,
SearchSideNav,
ViewerStateMini,
- RegionToolsMenuComponent
+ RegionToolsMenuComponent,
+ FixedMouseContextualContainerDirective
]
})
diff --git a/src/util/directives/FixedMouseContextualContainerDirective.directive.ts b/src/util/directives/FixedMouseContextualContainerDirective.directive.ts
index 9745ef7010174d12f5fd4d17b2eda3e24d41463a..81736ed6d79d46f9b45971e2f3d1fe13507e1205 100644
--- a/src/util/directives/FixedMouseContextualContainerDirective.directive.ts
+++ b/src/util/directives/FixedMouseContextualContainerDirective.directive.ts
@@ -55,14 +55,4 @@ export class FixedMouseContextualContainerDirective {
@HostBinding('style.transform')
public transform = `translate(${this.mousePos.map(v => v.toString() + 'px').join(', ')})`
- @HostListener('document:click', ['$event'])
- documentClick(event: MouseEvent){
- if (event.button !== 0) {
- if (this.styleDisplay === 'none')
- return
- if (this.el.nativeElement.contains(event.target))
- return
- this.hide()
- }
- }
}
\ No newline at end of file
diff --git a/src/util/directives/mapClick.directive.ts b/src/util/directives/mapClick.directive.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9845527b4e6a6dc9818846b27d17390c60e50025
--- /dev/null
+++ b/src/util/directives/mapClick.directive.ts
@@ -0,0 +1,52 @@
+import {Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output} from "@angular/core";
+import {Observable, Observer, Subscription} from "rxjs";
+import {switchMapTo, takeUntil} from "rxjs/operators";
+import {RegionToolsMenuComponent} from "src/ui/regionToolsMenu/regionToolsMenu.component";
+
+@Directive({
+ selector: '[mapClickDirective]'
+})
+
+export class MapClickDirective implements OnInit, OnDestroy {
+
+ private subscriptions: Subscription[] = []
+ @Output() mapClicked: EventEmitter<any> = new EventEmitter()
+ @Output() mouseDownEmitter: EventEmitter<any> = new EventEmitter()
+
+
+ constructor(private el: ElementRef){}
+
+ ngOnInit(): void {
+
+ // Listen click Events
+ const mouseDownObs$ = new Observable((observer: Observer<any>) => {
+ this.el.nativeElement.addEventListener('mousedown', event => observer.next({eventName: 'mousedown', event}), true)
+ }) as Observable<{eventName: string, event: MouseEvent}>
+ const mouseMoveObs$ = new Observable((observer: Observer<any>) => {
+ this.el.nativeElement.addEventListener('mousemove', event => observer.next({eventName: 'mousemove', event}), true)
+ }) as Observable<{eventName: string, event: MouseEvent}>
+ const mouseUpObs$ = new Observable((observer: Observer<any>) => {
+ this.el.nativeElement.addEventListener('mouseup', event => observer.next({eventName: 'mouseup', event}), true)
+ }) as Observable<{eventName: string, event: MouseEvent}>
+
+ this.subscriptions.push(
+ mouseDownObs$.subscribe(e => {
+ this.mouseDownEmitter.emit(e.event)
+ }),
+ mouseDownObs$.pipe(
+ switchMapTo(
+ mouseUpObs$.pipe(
+ takeUntil(mouseMoveObs$)
+ )
+ )
+ ).subscribe(e => {
+ this.mapClicked.emit(e.event)
+ })
+ )
+ }
+
+ ngOnDestroy(): void {
+ this.subscriptions.forEach(s=> s.unsubscribe())
+ }
+
+}
\ No newline at end of file
diff --git a/src/util/directives/singleClickOnNehubaWithoutNavigate.directive.ts b/src/util/directives/singleClickOnNehubaWithoutNavigate.directive.ts
deleted file mode 100644
index 78f33d375195a6a22addd4cafc81f02bf0b92678..0000000000000000000000000000000000000000
--- a/src/util/directives/singleClickOnNehubaWithoutNavigate.directive.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import {Directive, ElementRef, Input, OnDestroy, OnInit} from "@angular/core";
-import {Observable, Observer, Subscription} from "rxjs";
-import {switchMapTo, takeUntil} from "rxjs/operators";
-import {RegionToolsMenuComponent} from "src/ui/regionToolsMenu/regionToolsMenu.component";
-
-@Directive({
- selector: '[singleClickOnNehubaWithoutNavigate]'
-})
-
-export class SingleClickOnNehubaWithoutNavigateDirective implements OnInit, OnDestroy {
-
- private subscriptions: Subscription[] = []
- @Input() regionToolsMenu: RegionToolsMenuComponent
-
-
- constructor(private el: ElementRef){}
-
- ngOnInit(): void {
-
- // Listen click Events
- const mouseDownObs$ = new Observable((observer: Observer<any>) => {
- this.el.nativeElement.addEventListener('mousedown', event => observer.next({eventName: 'mousedown', event}), true)
- }) as Observable<{eventName: string, event: MouseEvent}>
- const mouseMoveObs$ = new Observable((observer: Observer<any>) => {
- this.el.nativeElement.addEventListener('mousemove', event => observer.next({eventName: 'mousemove', event}), true)
- }) as Observable<{eventName: string, event: MouseEvent}>
- const mouseUpObs$ = new Observable((observer: Observer<any>) => {
- this.el.nativeElement.addEventListener('mouseup', event => observer.next({eventName: 'mouseup', event}), true)
- }) as Observable<{eventName: string, event: MouseEvent}>
-
- this.subscriptions.push(
- mouseDownObs$.subscribe(e => {
- this.regionToolsMenu.mouseDownNehuba(e.event)
- }),
- mouseDownObs$.pipe(
- switchMapTo(
- mouseUpObs$.pipe(
- takeUntil(mouseMoveObs$)
- )
- )
- ).subscribe(e => {
- this.regionToolsMenu.mouseUpNehuba(e.event)
- })
- )
-
-
- // Listen Touch Evenets
- const touchStartObs$ = new Observable((observer: Observer<any>) => {
- this.el.nativeElement.addEventListener('touchstart', event => observer.next({eventName: 'mousedown', event}), true)
- }) as Observable<{eventName: string, event: MouseEvent}>
- const touchMoveObs$ = new Observable((observer: Observer<any>) => {
- this.el.nativeElement.addEventListener('touchmove', event => observer.next({eventName: 'mousemove', event}), true)
- }) as Observable<{eventName: string, event: MouseEvent}>
- const touchEndObs$ = new Observable((observer: Observer<any>) => {
- this.el.nativeElement.addEventListener('touchend', event => observer.next({eventName: 'mouseup', event}), true)
- }) as Observable<{eventName: string, event: MouseEvent}>
-
- this.subscriptions.push(
- touchStartObs$.subscribe(e => {
- this.regionToolsMenu.mouseDownNehuba(e.event)
- }),
- touchStartObs$.pipe(
- switchMapTo(
- touchEndObs$.pipe(
- takeUntil(touchMoveObs$)
- )
- )
- ).subscribe(e => {
- this.regionToolsMenu.mouseUpNehuba(e.event)
- })
- )
- }
-
- ngOnDestroy(): void {
- this.subscriptions.forEach(s=> s.unsubscribe())
- }
-
-}
\ No newline at end of file