From 2b08d2dbc274b3fe3499363cc8de7c59d9ce0ec3 Mon Sep 17 00:00:00 2001
From: fsdavid <daviti1@mail.com>
Date: Fri, 18 Oct 2019 17:07:48 +0200
Subject: [PATCH] Add Left Click Region Tool Menu
---
src/atlasViewer/atlasViewer.component.ts | 50 +++++++-
src/atlasViewer/atlasViewer.template.html | 109 ++++++++++--------
...eContextualContainerDirective.directive.ts | 2 +-
3 files changed, 112 insertions(+), 49 deletions(-)
diff --git a/src/atlasViewer/atlasViewer.component.ts b/src/atlasViewer/atlasViewer.component.ts
index 13248f4a0..8a4aea334 100644
--- a/src/atlasViewer/atlasViewer.component.ts
+++ b/src/atlasViewer/atlasViewer.component.ts
@@ -1,7 +1,18 @@
-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
}
diff --git a/src/atlasViewer/atlasViewer.template.html b/src/atlasViewer/atlasViewer.template.html
index 1cc074671..ae363d57e 100644
--- a/src/atlasViewer/atlasViewer.template.html
+++ b/src/atlasViewer/atlasViewer.template.html
@@ -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 -->
diff --git a/src/util/directives/FixedMouseContextualContainerDirective.directive.ts b/src/util/directives/FixedMouseContextualContainerDirective.directive.ts
index bf53ed235..491e32439 100644
--- a/src/util/directives/FixedMouseContextualContainerDirective.directive.ts
+++ b/src/util/directives/FixedMouseContextualContainerDirective.directive.ts
@@ -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))
--
GitLab