Skip to content
Snippets Groups Projects
Commit 5ea4996a authored by Xiao Gui's avatar Xiao Gui
Browse files

chore: add touch contrl

parent 5f66d5a8
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 16 additions and 2518 deletions
src/ui/nehubaContainer/nehubaContainer.component.ts deleted 100644 → 0
+ 0
− 1181
View file @ 5f66d5a8
This diff is collapsed.
src/ui/nehubaContainer/nehubaContainer.style.css deleted 100644 → 0
+ 0
− 182
View file @ 5f66d5a8
:host
{
width:100%;
height:100%;
position:relative;
}
atlas-layer-container
{
margin-bottom: 1em;
margin-left: 1em;
width: 30em;
height: 50em;
}
current-layout
{
top: 0;
left: 0;
/** z index of current layout has to be higher than that of layout-floating-container, or status container will cover panel control */
/** TODO decide which behaviour is more nature */
z-index: 6;
}
div.loadingIndicator
{
left: auto;
top: auto;
right: 0;
bottom: 0;
margin-right: 0.2em;
margin-bottom: 0.2em;
width: 100%;
position:absolute;
height:2em;
display: flex;
flex-direction: row-reverse;
}
div.loadingIndicator >>> div.spinnerAnimationCircle
{
font-size:150%;
}
[perspectiveLoadingText]
{
margin-right: 1em;
}
:host-context([darktheme="true"]) [perspectiveLoadingText]
{
color:rgba(255,255,255,0.8);
}
div#scratch-pad
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.overlay-btn-container
{
position: absolute;
bottom: 0;
right: 0;
}
/* if not mobile, then show on hover */
.opacity-crossfade
{
transition: opacity 170ms ease-in-out,
transform 250ms ease-in-out;
}
.opacity-crossfade
{
opacity: 0.0;
pointer-events: none;
}
.opacity-crossfade.onHover,
.opacity-crossfade:hover,
:host-context([ismobile="true"]) .opacity-crossfade.always-show-touchdevice
{
opacity: 1.0 !important;
pointer-events: all !important;
}
.screen-overlay
{
background-color: rgba(255, 255, 255, 0.7);
}
:host-context([darktheme="true"]) .screen-overlay
{
background-color: rgba(0, 0, 0, 0.7);
}
.feature-card
{
height: 20em;
max-height: 20em;
flex: 0 0 20em;
align-items: flex-start;
}
.region-populated .feature-card
{
height: 25em;
max-height: 25em;
flex: 0 0 25em;
align-items: flex-start;
}
.region-text-search-autocomplete-position
{
z-index: 10;
position: sticky;
top: 0.5rem;
}
.collapse-position
{
z-index: 10;
position: sticky;
bottom: 0.5rem;
}
.placeholder-region-detail
{
padding: 6rem 1rem 1rem 1rem;
}
.explore-btn
{
margin-top: 4.5rem;
width: 100%;
}
.modality-card-container
{
overflow-x: scroll;
}
.modality-card
{
width: 10em;
}
.spacer
{
height: 6rem;
}
.content-transclusion-top-left
{
margin-left: 3.5rem;
}
.tab-toggle
{
margin-left: -2rem;
padding-right: 0.75rem;
margin-right: 1rem;
text-align: right;
}
.accordion-icon
{
width:1.5rem;
}
.tab-toggle-container
{
margin-top: 1.5rem;
}
src/ui/nehubaContainer/nehubaContainer.template.html deleted 100644 → 0
+ 0
− 844
View file @ 5f66d5a8
This diff is collapsed.
src/viewerModule/module.ts
+ 0
− 305
View file @ 5ea4996a
......@@ -42,308 +42,3 @@ import { ViewerCmp } from "./viewerCmp/viewerCmp.component";
})
export class ViewerModule{}
/**
<ui-nehuba-container
class="z-index-10"
#uiNehubaContainer="uiNehubaContainer"
iav-mouse-hover
#iavMouseHoverEl="iavMouseHover"
[currentOnHoverObs$]="iavMouseHoverEl.currentOnHoverObs$"
[currentOnHover]="iavMouseHoverEl.currentOnHoverObs$ | async"
iav-captureClickListenerDirective
[iav-captureClickListenerDirective-captureDocument]="true"
(iav-captureClickListenerDirective-onUnmovedClick)="mouseClickDocument($event)"
(drag-drop)="localFileService.handleFileDrop($event)">
<!-- top right content transclusion -->
<div ui-nehuba-container-overlay-top-right class="d-inline-flex flex-row justify-content-end align-items-start z-index-6 position-absolute pe-none w-100 h-100">
<top-menu-cmp
class="mt-3 mr-2"
[parcellationIsSelected]="!!selectedParcellation"
[ismobile]="(media.mediaBreakPoint$ | async) > 3">
</top-menu-cmp>
<!-- atlas selector -->
<div *ngIf="uiNehubaContainer.viewerLoaded"
class="iv-custom-comp bg card m-2 mat-elevation-z2">
<atlas-dropdown-selector class="pe-all mt-2">
</atlas-dropdown-selector>
</div>
</div>
<!-- bottom left content transclusion -->
<div ui-nehuba-container-overlay-bottom-left class="d-inline-flex pe-none w-100 align-items-end m-2 mb-4">
<!-- only load atlas layer selector and chips if viewer is loaded -->
<ng-template [ngIf]="uiNehubaContainer.viewerLoaded && !(isStandaloneVolumes$ | async)">
<!-- Viewer Selector Container-->
<atlas-layer-selector
#alSelector="atlasLayerSelector"
class="pe-all"
(iav-outsideClick)="alSelector.selectorExpanded = false">
</atlas-layer-selector>
<mat-chip-list class="mb-2">
<!-- additional layer -->
<ng-container>
<ng-container *ngTemplateOutlet="currParcellationTmpl; context: { addParc: (selectedAdditionalLayers$ | async), parc: selectedParcellation }">
</ng-container>
</ng-container>
<!-- any selected region(s) -->
<ng-container>
<ng-container *ngTemplateOutlet="selectedRegionTmpl">
</ng-container>
</ng-container>
<!-- controls for iav volumes -->
<div class="hidden" iav-shown-previews #previews="iavShownPreviews"></div>
<ng-container *ngTemplateOutlet="selectedDatasetPreview; context: { layers: previews.iavAdditionalLayers$ | async | filterPreviewByType : [previews.FILETYPES.VOLUMES] }">
</ng-container>
</mat-chip-list>
<!-- current layer tmpl -->
<ng-template #currParcellationTmpl let-parc="parc" let-addParc="addParc">
<div [matMenuTriggerFor]="layerVersionMenu"
[matMenuTriggerData]="{ layerVersionMenuTrigger: layerVersionMenuTrigger }"
#layerVersionMenuTrigger="matMenuTrigger">
<ng-template [ngIf]="addParc.length > 0" [ngIfElse]="defaultParcTmpl">
<ng-container *ngFor="let p of addParc">
<ng-container *ngTemplateOutlet="chipTmpl; context: {
parcel: p,
selected: true,
dismissable: true,
onclick: layerVersionMenuTrigger.toggleMenu.bind(layerVersionMenuTrigger)
}">
</ng-container>
</ng-container>
</ng-template>
<ng-template #defaultParcTmpl>
<ng-container *ngTemplateOutlet="chipTmpl; context: {
parcel: parc,
selected: false,
dismissable: false,
onclick: layerVersionMenuTrigger.toggleMenu.bind(layerVersionMenuTrigger)
}">
</ng-container>
</ng-template>
</div>
</ng-template>
<!-- render parc templ -->
<ng-template #chipTmpl
let-parcel="parcel"
let-selected="selected"
let-dismissable="dismissable"
let-chipClass="class"
let-onclick="onclick">
<mat-chip class="pe-all position-relative z-index-2 d-inline-flex justify-content-between"
[ngClass]="chipClass"
(click)="onclick && onclick()"
[selected]="selected">
<span>
{{ parcel?.groupName ? (parcel?.groupName + ' - ') : '' }}{{ parcel && (parcel.displayName || parcel.name) }}
</span>
<!-- info icon -->
<ng-template [ngIf]="parcel?.originDatasets?.length > 0" [ngIfElse]="infoIconBasic">
<mat-icon
*ngFor="let ds of parcel.originDatasets"
fontSet="fas"
fontIcon="fa-info-circle"
iav-stop="click"
iav-dataset-show-dataset-dialog
[iav-dataset-show-dataset-dialog-kgid]="ds['kgId']"
[iav-dataset-show-dataset-dialog-kgschema]="ds['kgSchema']"
[iav-dataset-show-dataset-dialog-name]="parcel?.properties?.name"
[iav-dataset-show-dataset-dialog-description]="parcel?.properties?.description">
</mat-icon>
</ng-template>
<ng-template #infoIconBasic>
<mat-icon *ngIf="parcel?.properties?.name && parcel?.properties?.description"
fontSet="fas"
fontIcon="fa-info-circle"
iav-stop="click"
iav-dataset-show-dataset-dialog
[iav-dataset-show-dataset-dialog-name]="parcel.properties.name"
[iav-dataset-show-dataset-dialog-description]="parcel.properties.description">
</mat-icon>
</ng-template>
<!-- dismiss icon -->
<mat-icon
*ngIf="dismissable"
(click)="clearAdditionalLayer(parcel); $event.stopPropagation()"
fontSet="fas"
fontIcon="fa-times">
</mat-icon>
</mat-chip>
</ng-template>
<!-- layer version selector -->
<mat-menu #layerVersionMenu
class="bg-none box-shadow-none"
[hasBackdrop]="false">
<ng-template matMenuContent let-layerVersionMenuTrigger="layerVersionMenuTrigger">
<div (iav-outsideClick)="layerVersionMenuTrigger.closeMenu()">
<ng-container *ngFor="let parcVer of selectedLayerVersions$ | async">
<ng-container *ngTemplateOutlet="chipTmpl; context: {
parcel: parcVer,
selected: selectedParcellation && selectedParcellation['@id'] === parcVer['@id'],
dismissable: false,
class: 'w-100',
onclick: bindFns([
[ selectParcellation.bind(this), parcVer ],
[ layerVersionMenuTrigger.closeMenu.bind(layerVersionMenuTrigger) ]
])
}">
</ng-container>
<div class="mt-1"></div>
</ng-container>
</div>
</ng-template>
</mat-menu>
<ng-template #selectedRegionTmpl>
<!-- regions chip -->
<ng-template [ngIf]="selectedRegions$ | async" let-selectedRegions="ngIf">
<!-- if regions.length > 1 -->
<!-- use group chip -->
<ng-template [ngIf]="selectedRegions.length > 1" [ngIfElse]="singleRegionTmpl">
<mat-chip
color="primary"
selected
(click)="uiNehubaContainer.matDrawerMinor.open() && uiNehubaContainer.navSideDrawerMainSwitch.open()"
class="pe-all position-relative z-index-1 ml-8-n">
<span class="iv-custom-comp text text-truncate d-inline pl-4">
{{ CONST.MULTI_REGION_SELECTION }}
</span>
<mat-icon
(click)="clearSelectedRegions()"
fontSet="fas"
iav-stop="click"
fontIcon="fa-times">
</mat-icon>
</mat-chip>
</ng-template>
<!-- if reginos.lengt === 1 -->
<!-- use single region chip -->
<ng-template #singleRegionTmpl>
<ng-container *ngFor="let r of selectedRegions">
<!-- region chip for discrete map -->
<mat-chip
iav-region
(click)="uiNehubaContainer.matDrawerMinor.open() && uiNehubaContainer.navSideDrawerMainSwitch.open()"
[region]="r"
class="pe-all position-relative z-index-1 ml-8-n"
[ngClass]="{
'darktheme':regionDirective.rgbDarkmode === true,
'lighttheme': regionDirective.rgbDarkmode === false
}"
[style.backgroundColor]="regionDirective.rgbString"
#regionDirective="iavRegion">
<span class="iv-custom-comp text text-truncate d-inline pl-4">
{{ r.name }}
</span>
<mat-icon
class="iv-custom-comp text"
(click)="clearSelectedRegions()"
fontSet="fas"
iav-stop="click"
fontIcon="fa-times">
</mat-icon>
</mat-chip>
<!-- chips for previewing origin datasets/continous map -->
<ng-container *ngFor="let originDataset of (r.originDatasets || []); let index = index">
<div class="hidden"
iav-dataset-preview-dataset-file
[iav-dataset-preview-dataset-file-kgid]="originDataset.kgId"
[iav-dataset-preview-dataset-file-filename]="originDataset.filename"
#previewDirective="iavDatasetPreviewDatasetFile">
</div>
<mat-chip *ngIf="previewDirective.active"
(click)="uiNehubaContainer.matDrawerMinor.open() && uiNehubaContainer.navSideDrawerMainSwitch.open()"
class="pe-all position-relative ml-8-n">
<span class="pl-4">
{{ regionDirective.regionOriginDatasetLabels$ | async | renderViewOriginDatasetlabel : index }}
</span>
<mat-icon (click)="previewDirective.onClick()"
fontSet="fas"
iav-stop="click"
fontIcon="fa-times">
</mat-icon>
</mat-chip>
<mat-chip *ngFor="let key of clearViewKeys$ | async"
(click)="uiNehubaContainer.matDrawerMinor.open() && uiNehubaContainer.navSideDrawerMainSwitch.open()"
class="pe-all position-relative ml-8-n">
<span class="pl-4">
{{ key }}
</span>
<mat-icon (click)="unsetClearViewByKey(key)"
fontSet="fas"
iav-stop="click"
fontIcon="fa-times">
</mat-icon>
</mat-chip>
</ng-container>
</ng-container>
</ng-template>
</ng-template>
</ng-template>
<ng-template #selectedDatasetPreview let-layers="layers">
<ng-container *ngFor="let layer of layers">
<div class="hidden"
iav-dataset-preview-dataset-file
[iav-dataset-preview-dataset-file-kgid]="layer.datasetId"
[iav-dataset-preview-dataset-file-filename]="layer.filename"
#preview="iavDatasetPreviewDatasetFile">
</div>
<mat-chip class="pe-all"
(click)="uiNehubaContainer.matDrawerMinor.open() && uiNehubaContainer.navSideDrawerMainSwitch.open()">
{{ layer.file?.name || layer.filename || 'Unknown data preview' }}
<mat-icon fontSet="fas" fontIcon="fa-times"
(click)="preview.onClick()"
iav-stop="click">
</mat-icon>
</mat-chip>
</ng-container>
</ng-template>
</ng-template>
</div>
<!-- top left content transclusion -->
<div ui-nehuba-container-overlay-top-left class="d-inline-flex pe-none w-100 align-items-start m-2">
<ui-status-card
*ngIf="uiNehubaContainer.viewerLoaded"
class="pe-all muted-7"
[selectedTemplateName]="uiNehubaContainer?.selectedTemplate?.name"
[nehubaViewer]="uiNehubaContainer?.nehubaViewer">
</ui-status-card>
</div>
</ui-nehuba-container>
*/
\ No newline at end of file
src/viewerModule/nehuba/nehubaViewerGlue/nehubaViewerGlue.component.ts
+ 2
− 2
View file @ 5ea4996a
......@@ -18,7 +18,7 @@ import { IViewer, TViewerEvent } from "../../viewer.interface";
import { NehubaViewerUnit } from "../nehubaViewer/nehubaViewer.component";
import { NehubaViewerContainerDirective } from "../nehubaViewerInterface/nehubaViewerInterface.directive";
import { calculateSliceZoomFactor, getFourPanel, getHorizontalOneThree, getSinglePanel, getVerticalOneThree, NEHUBA_INSTANCE_INJTKN, scanSliceViewRenderFn, takeOnePipe } from "../util";
import { API_SERVICE_SET_VIEWER_HANDLE_TOKEN, IUserLandmark, TSetViewerHandle } from "src/atlasViewer/atlasViewer.apiService.service";
import { API_SERVICE_SET_VIEWER_HANDLE_TOKEN, TSetViewerHandle } from "src/atlasViewer/atlasViewer.apiService.service";
import { MouseHoverDirective } from "src/mouseoverModule";
interface INgLayerInterface {
......@@ -80,7 +80,7 @@ export class NehubaGlueCmp implements IViewer, OnChanges, OnDestroy{
public perspectiveViewLoading$: Observable<string|null>
public hoveredPanelIndices$: Observable<number>
private viewPanelWeakMap = new WeakMap<HTMLElement, number>()
private viewPanels: [HTMLElement, HTMLElement, HTMLElement, HTMLElement] = [null, null, null, null]
public viewPanels: [HTMLElement, HTMLElement, HTMLElement, HTMLElement] = [null, null, null, null]
private findPanelIndex = (panel: HTMLElement) => this.viewPanelWeakMap.get(panel)
public nanometersToOffsetPixelsFn: Array<(...arg) => any> = []
......
src/viewerModule/nehuba/nehubaViewerGlue/nehubaViewerGlue.template.html
+ 14
− 4
View file @ 5ea4996a
<div class="d-block"
iav-nehuba-viewer-container
iav-mouse-hover
(iavNehubaViewerContainerViewerLoading)="handleViewerLoadedEvent($event)">
<div class="d-block w-100 h-100"
(touchmove)="$event.preventDefault()"
iav-viewer-touch-interface
[iav-viewer-touch-interface-v-panels]="viewPanels"
[iav-viewer-touch-interface-vp-to-data]="iavContainer?.viewportToDatas"
[iav-viewer-touch-interface-ngviewer]="iavContainer?.nehubaViewerInstance?.nehubaViewer?.ngviewer"
[iav-viewer-touch-interface-nehuba-config]="selectedTemplate?.nehubaConfig">
<div class="d-block"
iav-nehuba-viewer-container
#iavContainer="iavNehubaViewerContainer"
iav-mouse-hover
(iavNehubaViewerContainerViewerLoading)="handleViewerLoadedEvent($event)">
</div>
</div>
<current-layout *ngIf="viewerLoaded$ | async" class="position-absolute w-100 h-100 d-block pe-none top-0 left-0">
......
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