diff --git a/src/ui/config/config.component.ts b/src/ui/config/config.component.ts index 1a0e15cdfed2280faed73006978c123df033e833..6f6f0b4f4a06b7110d9481dc9324b3947bb2106d 100644 --- a/src/ui/config/config.component.ts +++ b/src/ui/config/config.component.ts @@ -121,15 +121,22 @@ export class ConfigComponent implements OnInit, OnDestroy{ }) } handleDragOver(event:DragEvent){ - event.preventDefault(); - (event.target as HTMLElement).classList.add('onDragOver') + event.preventDefault() + const target = (event.target as HTMLElement) + target.classList.add('onDragOver') } handleDragLeave(event:DragEvent){ (event.target as HTMLElement).classList.remove('onDragOver') } handleDragStart(event:DragEvent){ - const attri = (event.target as HTMLElement).getAttribute('panel-order') + const target = (event.target as HTMLElement) + const attri = target.getAttribute('panel-order') event.dataTransfer.setData('text/plain', attri) + + } + handleDragend(event:DragEvent){ + const target = (event.target as HTMLElement) + target.classList.remove('onDragOver') } public stepSize: number = 10 diff --git a/src/ui/config/config.template.html b/src/ui/config/config.template.html index e34dc8b62bb2fde4d9347e52f35060b98ef61b65..20927120dd97ec7f77e783ae3fcabfbcdc6243b6 100644 --- a/src/ui/config/config.template.html +++ b/src/ui/config/config.template.html @@ -3,207 +3,20 @@ <!-- viewer preference --> <mat-tab label="Viewer Preference"> - <div [ngSwitch]="panelMode$ | async" class="d-flex flex-row p-2"> - <layout-four-panel - *ngSwitchCase="supportedPanelModes[0]" - class="d-block w-20em h-15em cdk-drag-boundary"> - <div - matRipple - (dragstart)="handleDragStart($event)" - (dragover)="handleDragOver($event)" - (dragleave)="handleDragLeave($event)" - (drop)="handleDrop($event)" - class="w-100 h-100 config-transition" - cell-i> - <div - [attr.panel-order]="0" - class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border" - draggable="true"> - {{ (panelTexts$ | async)[0] }} - </div> - </div> - <div - matRipple - (dragstart)="handleDragStart($event)" - (dragover)="handleDragOver($event)" - (dragleave)="handleDragLeave($event)" - (drop)="handleDrop($event)" - class="w-100 h-100 config-transition" - cell-ii> - <div - [attr.panel-order]="1" - class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border" - draggable="true"> - {{ (panelTexts$ | async)[1] }} - </div> - </div> - <div - matRipple - (dragstart)="handleDragStart($event)" - (dragover)="handleDragOver($event)" - (dragleave)="handleDragLeave($event)" - (drop)="handleDrop($event)" - class="w-100 h-100 config-transition" - cell-iii> - <div - [attr.panel-order]="2" - class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border" - draggable="true"> - {{ (panelTexts$ | async)[2] }} - </div> - </div> - <div - matRipple - (dragstart)="handleDragStart($event)" - (dragover)="handleDragOver($event)" - (dragleave)="handleDragLeave($event)" - (drop)="handleDrop($event)" - class="w-100 h-100 config-transition" - cell-iv> - <div - [attr.panel-order]="3" - class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border" - draggable="true"> - {{ (panelTexts$ | async)[3] }} - </div> - </div> - </layout-four-panel> - <layout-horizontal-one-three - *ngSwitchCase="supportedPanelModes[1]" - class="d-block w-20em h-15em"> - <div - matRipple - (dragstart)="handleDragStart($event)" - (dragover)="handleDragOver($event)" - (dragleave)="handleDragLeave($event)" - (drop)="handleDrop($event)" - class="w-100 h-100 config-transition" - cell-i> - <div - [attr.panel-order]="0" - class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border" - draggable="true"> - {{ (panelTexts$ | async)[0] }} - </div> - </div> - <div - matRipple - (dragstart)="handleDragStart($event)" - (dragover)="handleDragOver($event)" - (dragleave)="handleDragLeave($event)" - (drop)="handleDrop($event)" - class="w-100 h-100 config-transition" - cell-ii> - <div - [attr.panel-order]="1" - class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border" - draggable="true"> - {{ (panelTexts$ | async)[1] }} - </div> - </div> - <div - matRipple - (dragstart)="handleDragStart($event)" - (dragover)="handleDragOver($event)" - (dragleave)="handleDragLeave($event)" - (drop)="handleDrop($event)" - class="w-100 h-100 config-transition" - cell-iii> - <div - [attr.panel-order]="2" - class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border" - draggable="true"> - {{ (panelTexts$ | async)[2] }} - </div> - </div> - <div - matRipple - (dragstart)="handleDragStart($event)" - (dragover)="handleDragOver($event)" - (dragleave)="handleDragLeave($event)" - (drop)="handleDrop($event)" - class="w-100 h-100 config-transition" - cell-iv> - <div - [attr.panel-order]="3" - class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border" - draggable="true"> - {{ (panelTexts$ | async)[3] }} - </div> - </div> - </layout-horizontal-one-three> - <layout-vertical-one-three - *ngSwitchCase="supportedPanelModes[2]" - class="d-block w-20em h-15em"> - <div - matRipple - (dragstart)="handleDragStart($event)" - (dragover)="handleDragOver($event)" - (dragleave)="handleDragLeave($event)" - (drop)="handleDrop($event)" - class="w-100 h-100 config-transition" - cell-i> - <div - [attr.panel-order]="0" - class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border" - draggable="true"> - {{ (panelTexts$ | async)[0] }} - </div> - </div> - <div - matRipple - (dragstart)="handleDragStart($event)" - (dragover)="handleDragOver($event)" - (dragleave)="handleDragLeave($event)" - (drop)="handleDrop($event)" - class="w-100 h-100 config-transition" - cell-ii> - <div - [attr.panel-order]="1" - class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border" - draggable="true"> - {{ (panelTexts$ | async)[1] }} - </div> - </div> - <div - matRipple - (dragstart)="handleDragStart($event)" - (dragover)="handleDragOver($event)" - (dragleave)="handleDragLeave($event)" - (drop)="handleDrop($event)" - class="w-100 h-100 config-transition" - cell-iii> - <div - [attr.panel-order]="2" - class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border" - draggable="true"> - {{ (panelTexts$ | async)[2] }} - </div> - </div> - <div - matRipple - (dragstart)="handleDragStart($event)" - (dragover)="handleDragOver($event)" - (dragleave)="handleDragLeave($event)" - (drop)="handleDrop($event)" - class="w-100 h-100 config-transition" - cell-iv> - <div - [attr.panel-order]="3" - class="config-transition w-100 h-100 d-flex align-items-center justify-content-center border" - draggable="true"> - {{ (panelTexts$ | async)[3] }} - </div> - </div> - </layout-vertical-one-three> - <layout-single-panel - *ngSwitchCase="supportedPanelModes[3]" - class="d-block w-20em h-15em"> + <div class="m-2"> + <div class="mat-h2"> + Rearrange Viewports + </div> + <div class="mat-h4 text-muted"> + Click and drag to rearrange viewport positions + </div> + <current-layout class="d-flex w-20em h-15em p-2"> <div matRipple (dragstart)="handleDragStart($event)" (dragover)="handleDragOver($event)" (dragleave)="handleDragLeave($event)" + (dragend)="handleDragend($event)" (drop)="handleDrop($event)" class="w-100 h-100 config-transition" cell-i> @@ -219,6 +32,7 @@ (dragstart)="handleDragStart($event)" (dragover)="handleDragOver($event)" (dragleave)="handleDragLeave($event)" + (dragend)="handleDragend($event)" (drop)="handleDrop($event)" class="w-100 h-100 config-transition" cell-ii> @@ -234,6 +48,7 @@ (dragstart)="handleDragStart($event)" (dragover)="handleDragOver($event)" (dragleave)="handleDragLeave($event)" + (dragend)="handleDragend($event)" (drop)="handleDrop($event)" class="w-100 h-100 config-transition" cell-iii> @@ -249,6 +64,7 @@ (dragstart)="handleDragStart($event)" (dragover)="handleDragOver($event)" (dragleave)="handleDragLeave($event)" + (dragend)="handleDragend($event)" (drop)="handleDrop($event)" class="w-100 h-100 config-transition" cell-iv> @@ -259,13 +75,21 @@ {{ (panelTexts$ | async)[3] }} </div> </div> - </layout-single-panel> - <div *ngSwitchDefault> - A panel mode which I have never seen before ... + </current-layout> + + <div class="mat-body text-muted font-italic"> + Plane designation refers to default orientation (without oblique rotation). </div> </div> <!-- scroll window --> + + <div class="m-2"> + <div class="mat-h2"> + Select a viewports configuration + </div> + </div> + <div class="d-flex flex-row flex-nowrap p-2"> <!-- Four Panel Card --> @@ -275,10 +99,10 @@ (click)="usePanelMode(supportedPanelModes[0])" [color]="(panelMode$ | async) === supportedPanelModes[0] ? 'primary' : null"> <layout-four-panel class="d-block w-10em h-7em"> - <div cell-i></div> - <div cell-ii></div> - <div cell-iii></div> - <div cell-iv></div> + <div class="border w-100 h-100" cell-i></div> + <div class="border w-100 h-100" cell-ii></div> + <div class="border w-100 h-100" cell-iii></div> + <div class="border w-100 h-100" cell-iv></div> </layout-four-panel> </button> @@ -289,10 +113,10 @@ (click)="usePanelMode(supportedPanelModes[1])" [color]="(panelMode$ | async) === supportedPanelModes[1] ? 'primary' : null"> <layout-horizontal-one-three class="d-block w-10em h-7em"> - <div cell-i></div> - <div cell-ii></div> - <div cell-iii></div> - <div cell-iv></div> + <div class="border w-100 h-100" cell-i></div> + <div class="border w-100 h-100" cell-ii></div> + <div class="border w-100 h-100" cell-iii></div> + <div class="border w-100 h-100" cell-iv></div> </layout-horizontal-one-three> </button> @@ -303,10 +127,10 @@ (click)="usePanelMode(supportedPanelModes[2])" [color]="(panelMode$ | async) === supportedPanelModes[2] ? 'primary' : null"> <layout-vertical-one-three class="d-block w-10em h-7em"> - <div cell-i></div> - <div cell-ii></div> - <div cell-iii></div> - <div cell-iv></div> + <div class="border w-100 h-100" cell-i></div> + <div class="border w-100 h-100" cell-ii></div> + <div class="border w-100 h-100" cell-iii></div> + <div class="border w-100 h-100" cell-iv></div> </layout-vertical-one-three> </button> @@ -317,10 +141,10 @@ (click)="usePanelMode(supportedPanelModes[3])" [color]="(panelMode$ | async) === supportedPanelModes[3] ? 'primary' : null"> <layout-single-panel class="d-block w-10em h-7em"> - <div cell-i></div> - <div cell-ii></div> - <div cell-iii></div> - <div cell-iv></div> + <div class="border w-100 h-100" cell-i></div> + <div class="border w-100 h-100" cell-ii></div> + <div class="border w-100 h-100" cell-iii></div> + <div class="border w-100 h-100" cell-iv></div> </layout-single-panel> </button> </div> diff --git a/src/ui/config/currentLayout/currentLayout.component.ts b/src/ui/config/currentLayout/currentLayout.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..df40022f719efb0d9cce84fa1a8bcdfbe6512b06 --- /dev/null +++ b/src/ui/config/currentLayout/currentLayout.component.ts @@ -0,0 +1,27 @@ +import { Component } from "@angular/core"; +import { Store, select } from "@ngrx/store"; +import { Observable } from "rxjs"; +import { SUPPORTED_PANEL_MODES } from "src/services/state/ngViewerState.store"; +import { startWith } from "rxjs/operators"; + +@Component({ + selector: 'current-layout', + templateUrl: './currentLayout.template.html', + styleUrls: [ + './currentLayout.style.css' + ] +}) + +export class CurrentLayout{ + + public supportedPanelModes = SUPPORTED_PANEL_MODES + public panelMode$: Observable<string> + + constructor(private store$: Store<any>){ + this.panelMode$ = this.store$.pipe( + select('ngViewerState'), + select('panelMode'), + startWith(SUPPORTED_PANEL_MODES[0]) + ) + } +} \ No newline at end of file diff --git a/src/ui/config/currentLayout/currentLayout.style.css b/src/ui/config/currentLayout/currentLayout.style.css new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/src/ui/config/currentLayout/currentLayout.template.html b/src/ui/config/currentLayout/currentLayout.template.html new file mode 100644 index 0000000000000000000000000000000000000000..f3d04c104239b9e81f3ff0552c892e86c444ba0d --- /dev/null +++ b/src/ui/config/currentLayout/currentLayout.template.html @@ -0,0 +1,82 @@ +<div [ngSwitch]="panelMode$ | async" class="w-100 h-100 d-flex flex-row"> + <layout-four-panel + *ngSwitchCase="supportedPanelModes[0]" + class="d-block w-100 h-100"> + <div class="w-100 h-100" cell-i> + <ng-content *ngTemplateOutlet="celli"></ng-content> + </div> + <div class="w-100 h-100" cell-ii> + <ng-content *ngTemplateOutlet="cellii"></ng-content> + </div> + <div class="w-100 h-100" cell-iii> + <ng-content *ngTemplateOutlet="celliii"></ng-content> + </div> + <div class="w-100 h-100" cell-iv> + <ng-content *ngTemplateOutlet="celliv"></ng-content> + </div> + </layout-four-panel> + <layout-horizontal-one-three + *ngSwitchCase="supportedPanelModes[1]" + class="d-block w-100 h-100"> + <div class="w-100 h-100" cell-i> + <ng-content *ngTemplateOutlet="celli"></ng-content> + </div> + <div class="w-100 h-100" cell-ii> + <ng-content *ngTemplateOutlet="cellii"></ng-content> + </div> + <div class="w-100 h-100" cell-iii> + <ng-content *ngTemplateOutlet="celliii"></ng-content> + </div> + <div class="w-100 h-100" cell-iv> + <ng-content *ngTemplateOutlet="celliv"></ng-content> + </div> + </layout-horizontal-one-three> + <layout-vertical-one-three + *ngSwitchCase="supportedPanelModes[2]" + class="d-block w-100 h-100"> + <div class="w-100 h-100" cell-i> + <ng-content *ngTemplateOutlet="celli"></ng-content> + </div> + <div class="w-100 h-100" cell-ii> + <ng-content *ngTemplateOutlet="cellii"></ng-content> + </div> + <div class="w-100 h-100" cell-iii> + <ng-content *ngTemplateOutlet="celliii"></ng-content> + </div> + <div class="w-100 h-100" cell-iv> + <ng-content *ngTemplateOutlet="celliv"></ng-content> + </div> + </layout-vertical-one-three> + <layout-single-panel + *ngSwitchCase="supportedPanelModes[3]" + class="d-block w-100 h-100"> + <div class="w-100 h-100" cell-i> + <ng-content *ngTemplateOutlet="celli"></ng-content> + </div> + <div class="w-100 h-100" cell-ii> + <ng-content *ngTemplateOutlet="cellii"></ng-content> + </div> + <div class="w-100 h-100" cell-iii> + <ng-content *ngTemplateOutlet="celliii"></ng-content> + </div> + <div class="w-100 h-100" cell-iv> + <ng-content *ngTemplateOutlet="celliv"></ng-content> + </div> + </layout-single-panel> + <div *ngSwitchDefault> + A panel mode which I have never seen before ... + </div> +</div> + +<ng-template #celli> + <ng-content select="[cell-i]"></ng-content> +</ng-template> +<ng-template #cellii> + <ng-content select="[cell-ii]"></ng-content> +</ng-template> +<ng-template #celliii> + <ng-content select="[cell-iii]"></ng-content> +</ng-template> +<ng-template #celliv> + <ng-content select="[cell-iv]"></ng-content> +</ng-template> \ No newline at end of file diff --git a/src/ui/config/layouts/fourPanel/fourPanel.template.html b/src/ui/config/layouts/fourPanel/fourPanel.template.html index 37cd6732a39f4e06aceb21adab0ead302fddedfd..ddb10f1f6a34adda68f578625dd843baf536dfa0 100644 --- a/src/ui/config/layouts/fourPanel/fourPanel.template.html +++ b/src/ui/config/layouts/fourPanel/fourPanel.template.html @@ -1,17 +1,17 @@ <div class="w-100 h-100 d-flex flex-column justify-content-center align-items-stretch"> <div class="d-flex flex-row flex-grow-1 flex-shrink-1"> - <div class="d-flex flex-row four-panel-cell border align-items-center justify-content-center"> + <div class="d-flex flex-row four-panel-cell align-items-center justify-content-center"> <ng-content select="[cell-i]"></ng-content> </div> - <div class="d-flex flex-row four-panel-cell border align-items-center justify-content-center"> + <div class="d-flex flex-row four-panel-cell align-items-center justify-content-center"> <ng-content select="[cell-ii]"></ng-content> </div> </div> <div class="d-flex flex-row flex-grow-1 flex-shrink-1"> - <div class="d-flex flex-row four-panel-cell border align-items-center justify-content-center"> + <div class="d-flex flex-row four-panel-cell align-items-center justify-content-center"> <ng-content select="[cell-iii]"></ng-content> </div> - <div class="d-flex flex-row four-panel-cell border align-items-center justify-content-center"> + <div class="d-flex flex-row four-panel-cell align-items-center justify-content-center"> <ng-content select="[cell-iv]"></ng-content> </div> </div> diff --git a/src/ui/config/layouts/h13/h13.template.html b/src/ui/config/layouts/h13/h13.template.html index c18778839283cf818be54d25955e3bd9ed02dae8..d389ce304f6671f2610920c5c6c3d7780b63ac1d 100644 --- a/src/ui/config/layouts/h13/h13.template.html +++ b/src/ui/config/layouts/h13/h13.template.html @@ -1,17 +1,17 @@ <div class="w-100 h-100 d-flex flex-row justify-content-center align-items-stretch"> <div class="d-flex flex-column major-column"> - <div class="overflow-hidden border flex-grow-1 d-flex align-items-center justify-content-center"> + <div class="overflow-hidden flex-grow-1 d-flex align-items-center justify-content-center"> <ng-content select="[cell-i]"></ng-content> </div> </div> <div class="d-flex flex-column minor-column"> - <div class="overflow-hidden border layout-31-cell d-flex align-items-center justify-content-center"> + <div class="overflow-hidden layout-31-cell d-flex align-items-center justify-content-center"> <ng-content select="[cell-ii]"></ng-content> </div> - <div class="overflow-hidden border layout-31-cell d-flex align-items-center justify-content-center"> + <div class="overflow-hidden layout-31-cell d-flex align-items-center justify-content-center"> <ng-content select="[cell-iii]"></ng-content> </div> - <div class="overflow-hidden border layout-31-cell d-flex align-items-center justify-content-center"> + <div class="overflow-hidden layout-31-cell d-flex align-items-center justify-content-center"> <ng-content select="[cell-iv]"></ng-content> </div> </div> diff --git a/src/ui/config/layouts/single/single.template.html b/src/ui/config/layouts/single/single.template.html index f7511175205e48ba3b0aecab473d26f6f6d46148..561a6363b701518ec5d27b1f0d78507e02afe30a 100644 --- a/src/ui/config/layouts/single/single.template.html +++ b/src/ui/config/layouts/single/single.template.html @@ -1,17 +1,17 @@ <div class="w-100 h-100 d-flex flex-row justify-content-center align-items-stretch"> <div class="d-flex flex-column major-column"> - <div class="overflow-hidden border flex-grow-1 d-flex align-items-center justify-content-center"> + <div class="overflow-hidden flex-grow-1 d-flex align-items-center justify-content-center"> <ng-content select="[cell-i]"></ng-content> </div> </div> <div class="d-flex flex-column minor-column"> - <div class="overflow-hidden border layout-31-cell d-flex align-items-center justify-content-center"> + <div class="overflow-hidden layout-31-cell d-flex align-items-center justify-content-center"> <ng-content select="[cell-ii]"></ng-content> </div> - <div class="overflow-hidden border layout-31-cell d-flex align-items-center justify-content-center"> + <div class="overflow-hidden layout-31-cell d-flex align-items-center justify-content-center"> <ng-content select="[cell-iii]"></ng-content> </div> - <div class="overflow-hidden border layout-31-cell d-flex align-items-center justify-content-center"> + <div class="overflow-hidden layout-31-cell d-flex align-items-center justify-content-center"> <ng-content select="[cell-iv]"></ng-content> </div> </div> diff --git a/src/ui/config/layouts/v13/v13.template.html b/src/ui/config/layouts/v13/v13.template.html index 6c4059a7ce36bb036d881ea3c537ce062c4b42ad..148f70cb596d2df0183f25d012bb9d948b610f60 100644 --- a/src/ui/config/layouts/v13/v13.template.html +++ b/src/ui/config/layouts/v13/v13.template.html @@ -1,17 +1,17 @@ <div class="w-100 h-100 d-flex flex-column justify-content-center align-items-stretch"> <div class="d-flex flex-column major-column"> - <div class="border flex-grow-1 d-flex align-items-center justify-content-center"> + <div class="flex-grow-1 d-flex align-items-center justify-content-center"> <ng-content select="[cell-i]"></ng-content> </div> </div> <div class="d-flex flex-row minor-column"> - <div class="border layout-31-cell d-flex align-items-center justify-content-center"> + <div class="layout-31-cell d-flex align-items-center justify-content-center"> <ng-content select="[cell-ii]"></ng-content> </div> - <div class="border layout-31-cell d-flex align-items-center justify-content-center"> + <div class="layout-31-cell d-flex align-items-center justify-content-center"> <ng-content select="[cell-iii]"></ng-content> </div> - <div class="border layout-31-cell d-flex align-items-center justify-content-center"> + <div class="layout-31-cell d-flex align-items-center justify-content-center"> <ng-content select="[cell-iv]"></ng-content> </div> </div> diff --git a/src/ui/nehubaContainer/nehubaContainer.component.ts b/src/ui/nehubaContainer/nehubaContainer.component.ts index 22d62b6e0110cc5916e6c6238f7423a22776b5f0..3f766cdd613588092aa835103457079c3409dbd9 100644 --- a/src/ui/nehubaContainer/nehubaContainer.component.ts +++ b/src/ui/nehubaContainer/nehubaContainer.component.ts @@ -3,7 +3,7 @@ import { NehubaViewerUnit } from "./nehubaViewer/nehubaViewer.component"; import { Store, select } from "@ngrx/store"; import { ViewerStateInterface, safeFilter, CHANGE_NAVIGATION, isDefined, USER_LANDMARKS, ADD_NG_LAYER, REMOVE_NG_LAYER, NgViewerStateInterface, MOUSE_OVER_LANDMARK, SELECT_LANDMARKS, Landmark, PointLandmarkGeometry, PlaneLandmarkGeometry, OtherLandmarkGeometry, getNgIds, getMultiNgIdsRegionsLabelIndexMap, generateLabelIndexId } from "../../services/stateStore.service"; import { Observable, Subscription, fromEvent, combineLatest, merge } from "rxjs"; -import { filter,map, take, scan, debounceTime, distinctUntilChanged, switchMap, skip, withLatestFrom, buffer, tap, throttleTime, bufferTime, switchMapTo } from "rxjs/operators"; +import { filter,map, take, scan, debounceTime, distinctUntilChanged, switchMap, skip, withLatestFrom, buffer, tap, switchMapTo, shareReplay } from "rxjs/operators"; import { AtlasViewerAPIServices, UserLandmark } from "../../atlasViewer/atlasViewer.apiService.service"; import { timedValues } from "../../util/generator"; import { AtlasViewerConstantsServices } from "../../atlasViewer/atlasViewer.constantService.service"; @@ -86,10 +86,6 @@ const scanFn : (acc:[boolean, boolean, boolean], curr: CustomEvent) => [boolean, export class NehubaContainer implements OnInit, OnDestroy{ @ViewChild('container',{read:ViewContainerRef}) container : ViewContainerRef - @ViewChild('[pos00]',{read:ElementRef}) topleft : ElementRef - @ViewChild('[pos01]',{read:ElementRef}) topright : ElementRef - @ViewChild('[pos10]',{read:ElementRef}) bottomleft : ElementRef - @ViewChild('[pos11]',{read:ElementRef}) bottomright : ElementRef private nehubaViewerFactory : ComponentFactory<NehubaViewerUnit> @@ -145,6 +141,7 @@ export class NehubaContainer implements OnInit, OnDestroy{ private viewerConfig : Partial<ViewerConfiguration> = {} private viewPanels: [HTMLElement, HTMLElement, HTMLElement, HTMLElement] = [null, null, null, null] + public panelMode$: Observable<string> constructor( private constantService : AtlasViewerConstantsServices, @@ -336,30 +333,10 @@ export class NehubaContainer implements OnInit, OnDestroy{ ).pipe( map(results => results[1] === null ? results[0] : '') ) - - /* each time a new viewer is initialised, take the first event to get the translation function */ - this.subscriptions.push( - this.newViewer$.pipe( - switchMap(() => pipeFromArray([...takeOnePipe])(fromEvent(this.elementRef.nativeElement, 'sliceRenderEvent'))) - ).subscribe((events)=>{ - for (const idx in [0,1,2]) { - const ev = events[idx] as CustomEvent - this.viewPanels[idx] = ev.target as HTMLElement - this.nanometersToOffsetPixelsFn[idx] = ev.detail.nanometersToOffsetPixels - } - }) - ) - - this.subscriptions.push( - this.newViewer$.pipe( - switchMapTo(fromEvent(this.elementRef.nativeElement, 'perpspectiveRenderEvent').pipe( - take(1) - )), - ).subscribe(ev => this.viewPanels[3] = ((ev as CustomEvent).target) as HTMLElement) - ) this.sliceViewLoadingMain$ = fromEvent(this.elementRef.nativeElement, 'sliceRenderEvent').pipe( scan(scanFn, [null, null, null]), + shareReplay(1) ) this.sliceViewLoading0$ = this.sliceViewLoadingMain$ @@ -410,6 +387,12 @@ export class NehubaContainer implements OnInit, OnDestroy{ ? state.layers.findIndex(l => l.mixability === 'nonmixable') >= 0 : false) ) + + this.panelMode$ = this.store.pipe( + select('ngViewerState'), + select('panelMode'), + distinctUntilChanged(), + ) } get isMobile(){ @@ -426,6 +409,27 @@ export class NehubaContainer implements OnInit, OnDestroy{ ngOnInit(){ + /* each time a new viewer is initialised, take the first event to get the translation function */ + this.subscriptions.push( + this.newViewer$.pipe( + switchMap(() => pipeFromArray([...takeOnePipe])(fromEvent(this.elementRef.nativeElement, 'sliceRenderEvent'))) + ).subscribe((events)=>{ + for (const idx in [0,1,2]) { + const ev = events[idx] as CustomEvent + this.viewPanels[idx] = ev.target as HTMLElement + this.nanometersToOffsetPixelsFn[idx] = ev.detail.nanometersToOffsetPixels + } + }) + ) + + this.subscriptions.push( + this.newViewer$.pipe( + switchMapTo(fromEvent(this.elementRef.nativeElement, 'perpspectiveRenderEvent').pipe( + take(1) + )), + ).subscribe(ev => this.viewPanels[3] = ((ev as CustomEvent).target) as HTMLElement) + ) + this.subscriptions.push( combineLatest( this.store.pipe( @@ -472,6 +476,9 @@ export class NehubaContainer implements OnInit, OnDestroy{ } default: } + for (const panel of viewPanels){ + (panel as HTMLElement).classList.add('neuroglancer-panel') + } }) ) diff --git a/src/ui/nehubaContainer/nehubaContainer.style.css b/src/ui/nehubaContainer/nehubaContainer.style.css index 301c664de0d831b6e848e7f5af27422c27326749..2d9e1542749aa6d838e172434fd3205e6beda3d3 100644 --- a/src/ui/nehubaContainer/nehubaContainer.style.css +++ b/src/ui/nehubaContainer/nehubaContainer.style.css @@ -15,6 +15,11 @@ input[navigateInput] box-shadow: inset 0px 2px 2px 2px rgba(0,0,0,0.05); } +current-layout +{ + top: 0; + left: 0; +} div[landmarkMasterContainer] { @@ -66,7 +71,7 @@ hr } -div[landmarkMasterContainer] > div > [landmarkContainer] > div.loadingIndicator +div.loadingIndicator { left: auto; top: auto; @@ -75,6 +80,7 @@ div[landmarkMasterContainer] > div > [landmarkContainer] > div.loadingIndicator margin-right: 0.2em; margin-bottom: 0.2em; width: 100%; + position:absolute; height:2em; display: flex; flex-direction: row-reverse; diff --git a/src/ui/nehubaContainer/nehubaContainer.template.html b/src/ui/nehubaContainer/nehubaContainer.template.html index c453d302cb382720296e778641c7ef05465fab9f..80e34d02cbb0365eec08e9704694abc7a34f0ae4 100644 --- a/src/ui/nehubaContainer/nehubaContainer.template.html +++ b/src/ui/nehubaContainer/nehubaContainer.template.html @@ -4,75 +4,31 @@ <ui-splashscreen (contextmenu)="$event.stopPropagation();" *ngIf="!viewerLoaded"> </ui-splashscreen> -<div landmarkMasterContainer> +<!-- spatial landmarks overlay --> +<!-- loading indicator --> - <div> - <layout-floating-container pos00 landmarkContainer> - <nehuba-2dlandmark-unit *ngFor="let spatialData of (selectedPtLandmarks$ | async)" - (mouseenter)="handleMouseEnterLandmark(spatialData)" (mouseleave)="handleMouseLeaveLandmark(spatialData)" - [highlight]="spatialData.highlight ? spatialData.highlight : false" - [fasClass]="spatialData.type === 'userLandmark' ? 'fa-chevron-down' : 'fa-map-marker'" - [positionX]="getPositionX(0,spatialData)" [positionY]="getPositionY(0,spatialData)" - [positionZ]="getPositionZ(0,spatialData)"> - </nehuba-2dlandmark-unit> - - <div *ngIf="sliceViewLoading0$ | async" class="loadingIndicator"> - <div class="spinnerAnimationCircle"> - - </div> - </div> - </layout-floating-container> +<current-layout class="position-absolute w-100 h-100 d-block"> + <div class="w-100 h-100 position-relative" cell-i> + <ng-content *ngTemplateOutlet="overlayi"></ng-content> </div> - <div> - <layout-floating-container pos01 landmarkContainer> - <nehuba-2dlandmark-unit *ngFor="let spatialData of (selectedPtLandmarks$ | async)" - (mouseenter)="handleMouseEnterLandmark(spatialData)" (mouseleave)="handleMouseLeaveLandmark(spatialData)" - [highlight]="spatialData.highlight ? spatialData.highlight : false" - [fasClass]="spatialData.type === 'userLandmark' ? 'fa-chevron-down' : 'fa-map-marker'" - [positionX]="getPositionX(1,spatialData)" [positionY]="getPositionY(1,spatialData)" - [positionZ]="getPositionZ(1,spatialData)"> - </nehuba-2dlandmark-unit> - - <div *ngIf="sliceViewLoading1$ | async" class="loadingIndicator"> - <div class="spinnerAnimationCircle"> - - </div> - </div> - </layout-floating-container> + <div class="w-100 h-100 position-relative" cell-ii> + <ng-content *ngTemplateOutlet="overlayii"></ng-content> </div> - <div> - <layout-floating-container pos10 landmarkContainer> - <nehuba-2dlandmark-unit *ngFor="let spatialData of (selectedPtLandmarks$ | async)" - (mouseenter)="handleMouseEnterLandmark(spatialData)" (mouseleave)="handleMouseLeaveLandmark(spatialData)" - [highlight]="spatialData.highlight ? spatialData.highlight : false" - [fasClass]="spatialData.type === 'userLandmark' ? 'fa-chevron-down' : 'fa-map-marker'" - [positionX]="getPositionX(2,spatialData)" [positionY]="getPositionY(2,spatialData)" - [positionZ]="getPositionZ(2,spatialData)"> - </nehuba-2dlandmark-unit> - - <div *ngIf="sliceViewLoading2$ | async" class="loadingIndicator"> - <div class="spinnerAnimationCircle"> - - </div> - </div> - </layout-floating-container> + <div class="w-100 h-100 position-relative" cell-iii> + <ng-content *ngTemplateOutlet="overlayiii"></ng-content> </div> - <div> - <layout-floating-container pos11 landmarkContainer> - <div *ngIf="perspectiveViewLoading$ | async" class="loadingIndicator"> - <div class="spinnerAnimationCircle"></div> - <div perspectiveLoadingText> - {{ perspectiveViewLoading$ | async }} - </div> - </div> - </layout-floating-container> + <div class="w-100 h-100 position-relative" cell-iv> + <ng-content *ngTemplateOutlet="overlayiv"></ng-content> </div> -</div> +</current-layout> <layout-floating-container *ngIf="viewerLoaded && !isMobile"> <!-- StatusCard container--> - <ui-status-card [selectedTemplate]="selectedTemplate" [isMobile]="isMobile" - [onHoverSegmentName]="onHoverSegmentName$ | async" [nehubaViewer]="nehubaViewer"> + <ui-status-card + [selectedTemplate]="selectedTemplate" + [isMobile]="isMobile" + [onHoverSegmentName]="onHoverSegmentName$ | async" + [nehubaViewer]="nehubaViewer"> </ui-status-card> </layout-floating-container> @@ -80,7 +36,10 @@ </div> -<mobile-overlay *ngIf="isMobile && viewerLoaded" [tunableProperties]="tunableMobileProperties" +<!-- mobile nub, allowing for ooblique slicing in mobile --> +<mobile-overlay + *ngIf="true || isMobile && viewerLoaded" + [tunableProperties]="tunableMobileProperties" (deltaValue)="handleMobileOverlayEvent($event)"> <div class="base" delta> <div mobileObliqueGuide class="p-2 mb-4 shadow"> @@ -88,7 +47,9 @@ </div> </div> <div class="base" guide> - <div mobileObliqueGuide class="p-2 mb-4 shadow"> + <div + mobileObliqueGuide + class="p-2 mb-4 shadow"> <div> <i class="fas fa-arrows-alt-v"></i> oblique mode </div> @@ -97,7 +58,78 @@ </div> </div> </div> - <div (contextmenu)="$event.stopPropagation(); $event.preventDefaul();" mobileObliqueCtrl initiator> - <i class="fas fa-globe"></i> + <div + (contextmenu)="$event.stopPropagation(); $event.preventDefaul();" + [ngStyle]="panelMode$ | async | mobileControlNubStylePipe" + mobileObliqueCtrl + initiator> + <button mat-mini-fab color="primary"> + <i class="fas fa-globe"></i> + </button> </div> -</mobile-overlay> \ No newline at end of file +</mobile-overlay> + +<!-- overlay templates --> +<!-- inserted using ngTemplateOutlet --> +<ng-template #overlayi> + <layout-floating-container pos00 landmarkContainer> + <nehuba-2dlandmark-unit *ngFor="let spatialData of (selectedPtLandmarks$ | async)" + (mouseenter)="handleMouseEnterLandmark(spatialData)" (mouseleave)="handleMouseLeaveLandmark(spatialData)" + [highlight]="spatialData.highlight ? spatialData.highlight : false" + [fasClass]="spatialData.type === 'userLandmark' ? 'fa-chevron-down' : 'fa-map-marker'" + [positionX]="getPositionX(0,spatialData)" [positionY]="getPositionY(0,spatialData)" + [positionZ]="getPositionZ(0,spatialData)"> + </nehuba-2dlandmark-unit> + + <div *ngIf="sliceViewLoading0$ | async" class="loadingIndicator"> + <div class="spinnerAnimationCircle"> + + </div> + </div> + </layout-floating-container> +</ng-template> + +<ng-template #overlayii> + <layout-floating-container pos01 landmarkContainer> + <nehuba-2dlandmark-unit *ngFor="let spatialData of (selectedPtLandmarks$ | async)" + (mouseenter)="handleMouseEnterLandmark(spatialData)" (mouseleave)="handleMouseLeaveLandmark(spatialData)" + [highlight]="spatialData.highlight ? spatialData.highlight : false" + [fasClass]="spatialData.type === 'userLandmark' ? 'fa-chevron-down' : 'fa-map-marker'" + [positionX]="getPositionX(1,spatialData)" [positionY]="getPositionY(1,spatialData)" + [positionZ]="getPositionZ(1,spatialData)"> + </nehuba-2dlandmark-unit> + + <div *ngIf="sliceViewLoading1$ | async" class="loadingIndicator"> + <div class="spinnerAnimationCircle"> + + </div> + </div> + </layout-floating-container> +</ng-template> +<ng-template #overlayiii> + <layout-floating-container pos10 landmarkContainer> + <nehuba-2dlandmark-unit *ngFor="let spatialData of (selectedPtLandmarks$ | async)" + (mouseenter)="handleMouseEnterLandmark(spatialData)" (mouseleave)="handleMouseLeaveLandmark(spatialData)" + [highlight]="spatialData.highlight ? spatialData.highlight : false" + [fasClass]="spatialData.type === 'userLandmark' ? 'fa-chevron-down' : 'fa-map-marker'" + [positionX]="getPositionX(2,spatialData)" [positionY]="getPositionY(2,spatialData)" + [positionZ]="getPositionZ(2,spatialData)"> + </nehuba-2dlandmark-unit> + + <div *ngIf="sliceViewLoading2$ | async" class="loadingIndicator"> + <div class="spinnerAnimationCircle"> + + </div> + </div> + </layout-floating-container> +</ng-template> +<ng-template #overlayiv> + <layout-floating-container pos11 landmarkContainer> + <div *ngIf="perspectiveViewLoading$ | async" class="loadingIndicator"> + <div class="spinnerAnimationCircle"></div> + <div perspectiveLoadingText> + {{ perspectiveViewLoading$ | async }} + </div> + </div> + </layout-floating-container> +</ng-template> \ No newline at end of file diff --git a/src/ui/nehubaContainer/pipes/mobileControlNubStyle.pipe.ts b/src/ui/nehubaContainer/pipes/mobileControlNubStyle.pipe.ts new file mode 100644 index 0000000000000000000000000000000000000000..4566c470506588e39edc79f005843a24be80c748 --- /dev/null +++ b/src/ui/nehubaContainer/pipes/mobileControlNubStyle.pipe.ts @@ -0,0 +1,30 @@ +import { PipeTransform, Pipe } from "@angular/core"; +import { FOUR_PANEL, H_ONE_THREE, V_ONE_THREE, SINGLE_PANEL } from "src/services/state/ngViewerState.store"; + +@Pipe({ + name: 'mobileControlNubStylePipe' +}) + +export class MobileControlNubStylePipe implements PipeTransform{ + public transform(panelMode: string): any{ + switch (panelMode) { + case SINGLE_PANEL: + return { + top: '80%', + left: '95%' + } + case V_ONE_THREE: + case H_ONE_THREE: + return { + top: '66.66%', + left: '66.66%' + } + case FOUR_PANEL: + default: + return { + top: '50%', + left: '50%' + } + } + } +} \ No newline at end of file diff --git a/src/ui/ui.module.ts b/src/ui/ui.module.ts index f14ba244d7f14ab5f4ebf094378f5cc7b27fcfa3..52cedbda807d3d8a655e346495d87829fbf26b90 100644 --- a/src/ui/ui.module.ts +++ b/src/ui/ui.module.ts @@ -54,6 +54,8 @@ import { HorizontalOneThree } from "./config/layouts/h13/h13.component"; import { VerticalOneThree } from "./config/layouts/v13/v13.component"; import { SinglePanel } from "./config/layouts/single/single.component"; import { DragDropModule } from "@angular/cdk/drag-drop"; +import { CurrentLayout } from "./config/currentLayout/currentLayout.component"; +import { MobileControlNubStylePipe } from "./nehubaContainer/pipes/mobileControlNubStyle.pipe"; @NgModule({ @@ -101,6 +103,7 @@ import { DragDropModule } from "@angular/cdk/drag-drop"; HorizontalOneThree, VerticalOneThree, SinglePanel, + CurrentLayout, /* pipes */ GroupDatasetByRegion, @@ -116,6 +119,7 @@ import { DragDropModule } from "@angular/cdk/drag-drop"; FilterNameBySearch, TemplateParcellationsDecorationPipe, AppendtooltipTextPipe, + MobileControlNubStylePipe, /* directive */ DownloadDirective,