Skip to content
Snippets Groups Projects
Commit 2b08d2db authored by fsdavid's avatar fsdavid
Browse files

Add Left Click Region Tool Menu

parent 0351f7f9
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/atlasViewer/atlasViewer.component.ts
+ 47
− 3
View file @ 2b08d2db
import { Component, HostBinding, ViewChild, ViewContainerRef, OnDestroy, OnInit, TemplateRef, AfterViewInit, Renderer2 } from "@angular/core";
import {
Component,
HostBinding,
ViewChild,
ViewContainerRef,
OnDestroy,
OnInit,
TemplateRef,
AfterViewInit,
Renderer2,
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 { Observable, Subscription, combineLatest, interval, merge, of } from "rxjs";
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";
import { WidgetServices } from "./widgetUnit/widgetService.service";
......@@ -17,6 +28,7 @@ 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";
/**
* TODO
......@@ -353,8 +365,16 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
)
}
@ViewChild('iavMouseHoverEl', {read: ElementRef}) iavMouseHoverEl: ElementRef
ngAfterViewInit() {
const obst = new Observable((observer: Observer<any>) => {
this.iavMouseHoverEl.nativeElement.addEventListener('mousedown', event => observer.next({eventName: 'mousedown', event}), true)
}) as Observable<{eventName: string, event: MouseEvent}>
obst.subscribe(e => {
this.mouseDownNehuba(e.event)
})
/**
* preload the main bundle after atlas viewer has been loaded.
* This should speed up where user first navigate to the home page,
......@@ -472,6 +492,30 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
window.open(dataset.externalLink, "_blank")
}
mouseUpLeftPosition
mouseUpTopPosition
regionToolsMenuVisible = false
mouseDownNehuba(event) {
this.regionToolsMenuVisible = false
this.mouseUpLeftPosition= event.pageX
this.mouseUpTopPosition= event.pageY
}
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()
// alert(' Show Menu! ')
}
}
@HostBinding('attr.version')
public _version : string = VERSION
}
......
src/atlasViewer/atlasViewer.template.html
+ 64
− 45
View file @ 2b08d2db
......@@ -41,7 +41,9 @@
<ui-nehuba-container iav-mouse-hover #iavMouseHoverEl="iavMouseHover"
[currentOnHoverObs$]="iavMouseHoverEl.currentOnHoverObs$"
[currentOnHover]="iavMouseHoverEl.currentOnHoverObs$ | async"
(contextmenu)="$event.stopPropagation(); $event.preventDefault();">
(contextmenu)="$event.stopPropagation(); $event.preventDefault();"
(mousedown)="mouseDownNehuba($event)"
(mouseup)="mouseUpNehuba($event)">
</ui-nehuba-container>
<div class="z-index-10 position-absolute pe-none w-100 h-100">
......@@ -104,50 +106,50 @@
<!-- 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>
<!-- <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>
......@@ -174,6 +176,23 @@
<!-- TODO Potentially implementing plugin contextual info -->
</div>
<panel-component class="shadow" fixedMouseContextualContainerDirective>
<div body class="pe-all">
<mat-card *ngIf="(onhoverSegmentsForFixed$ | async)?.length > 0 && regionToolsMenuVisible" class="p-0 m-0 d-flex flex-column">
</mat-card>
</div>
</panel-component>
</layout-floating-container>
<!-- required for manufacturing plugin templates -->
......
src/util/directives/FixedMouseContextualContainerDirective.directive.ts
+ 1
− 1
View file @ 2b08d2db
......@@ -49,7 +49,7 @@ export class FixedMouseContextualContainerDirective {
@HostListener('document:click', ['$event'])
documentClick(event: MouseEvent){
if (event.button !== 2) {
if (event.button !== 0) {
if (this.styleDisplay === 'none')
return
if (this.el.nativeElement.contains(event.target))
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment