From e70efcd0bb6389b647a9cbd1e0a7fc35ebdd8cca Mon Sep 17 00:00:00 2001
From: fsdavid <daviti1@mail.com>
Date: Fri, 3 May 2019 14:22:13 +0200
Subject: [PATCH] Export status card into separate component
---
.../nehubaContainer.component.ts | 84 -------------
.../nehubaContainer/nehubaContainer.style.css | 44 -------
.../nehubaContainer.template.html | 67 +---------
.../statusCard/statusCard.component.ts | 118 ++++++++++++++++++
.../statusCard/statusCard.style.css | 47 +++++++
.../statusCard/statusCard.template.html | 59 +++++++++
src/ui/ui.module.ts | 3 +
7 files changed, 233 insertions(+), 189 deletions(-)
create mode 100644 src/ui/nehubaContainer/statusCard/statusCard.component.ts
create mode 100644 src/ui/nehubaContainer/statusCard/statusCard.style.css
create mode 100644 src/ui/nehubaContainer/statusCard/statusCard.template.html
diff --git a/src/ui/nehubaContainer/nehubaContainer.component.ts b/src/ui/nehubaContainer/nehubaContainer.component.ts
index 9a5f81a7f..2e99ceb89 100644
--- a/src/ui/nehubaContainer/nehubaContainer.component.ts
+++ b/src/ui/nehubaContainer/nehubaContainer.component.ts
@@ -946,90 +946,6 @@ export class NehubaContainer implements OnInit, OnDestroy{
}
}
- /* related to info-card */
-
- statusPanelRealSpace : boolean = true
-
- get mouseCoord():string{
- return this.nehubaViewer ?
- this.statusPanelRealSpace ?
- this.nehubaViewer.mousePosReal ?
- Array.from(this.nehubaViewer.mousePosReal.map(n=> isNaN(n) ? 0 : n/1e6))
- .map(n=>n.toFixed(3)+'mm').join(' , ') :
- '0mm , 0mm , 0mm (mousePosReal not yet defined)' :
- this.nehubaViewer.mousePosVoxel ?
- this.nehubaViewer.mousePosVoxel.join(' , ') :
- '0 , 0 , 0 (mousePosVoxel not yet defined)' :
- '0 , 0 , 0 (nehubaViewer not defined)'
- }
-
- editingNavState : boolean = false
-
- textNavigateTo(string:string){
- if(string.split(/[\s|,]+/).length>=3 && string.split(/[\s|,]+/).slice(0,3).every(entry=>!isNaN(Number(entry.replace(/mm/,''))))){
- const pos = (string.split(/[\s|,]+/).slice(0,3).map((entry)=>Number(entry.replace(/mm/,''))*(this.statusPanelRealSpace ? 1000000 : 1)))
- this.nehubaViewer.setNavigationState({
- position : (pos as [number,number,number]),
- positionReal : this.statusPanelRealSpace
- })
- }else{
- console.log('input did not parse to coordinates ',string)
- }
- }
-
- navigationValue(){
- return this.nehubaViewer ?
- this.statusPanelRealSpace ?
- Array.from(this.nehubaViewer.navPosReal.map(n=> isNaN(n) ? 0 : n/1e6))
- .map(n=>n.toFixed(3)+'mm').join(' , ') :
- Array.from(this.nehubaViewer.navPosVoxel.map(n=> isNaN(n) ? 0 : n)).join(' , ') :
- `[0,0,0] (neubaViewer is undefined)`
- }
-
- get showCitation(){
- return this.selectedTemplate && this.selectedTemplate.properties && this.selectedTemplate.properties.publications && this.selectedTemplate.properties.publications.constructor === Array
- }
-
- resetNavigation({rotation: rotationFlag = false, position: positionFlag = false, zoom : zoomFlag = false} : {rotation: boolean, position: boolean, zoom: boolean}){
- const initialNgState = this.selectedTemplate.nehubaConfig.dataset.initialNgState
-
- const perspectiveZoom = initialNgState ? initialNgState.perspectiveZoom : undefined
- const perspectiveOrientation = initialNgState ? initialNgState.perspectiveOrientation : undefined
- const zoom = (zoomFlag
- && initialNgState
- && initialNgState.navigation
- && initialNgState.navigation.zoomFactor)
- || undefined
-
- const position = (positionFlag
- && initialNgState
- && initialNgState.navigation
- && initialNgState.navigation.pose
- && initialNgState.navigation.pose.position.voxelCoordinates
- && initialNgState.navigation.pose.position.voxelCoordinates)
- || undefined
-
- const orientation = rotationFlag
- ? [0,0,0,1]
- : undefined
-
- this.store.dispatch({
- type : CHANGE_NAVIGATION,
- navigation : Object.assign({},
- {
- perspectiveZoom,
- perspectiveOrientation,
- zoom,
- position,
- orientation
- },{
- positionReal : false,
- animation : {
-
- }
- })
- })
- }
}
export const identifySrcElement = (element:HTMLElement) => {
diff --git a/src/ui/nehubaContainer/nehubaContainer.style.css b/src/ui/nehubaContainer/nehubaContainer.style.css
index ce3d02047..129bf46d6 100644
--- a/src/ui/nehubaContainer/nehubaContainer.style.css
+++ b/src/ui/nehubaContainer/nehubaContainer.style.css
@@ -5,10 +5,6 @@
position:relative;
}
-div[textContainer]
-{
- padding-left:1em;
-}
input[navigateInput]
{
@@ -20,37 +16,6 @@ input[navigateInput]
}
-:host-context([darktheme=false]) input[navigateInput]
-{
- border:rgba(0,0,0,0.2) solid 1px;
-}
-
-:host-context([darktheme=true]) input[navigateInput]
-{
- border:rgba(255,255,255,0.2) solid 1px;
-}
-
-div[statusCard]
-{
- position:absolute;
- left:1em;
- bottom:1em;
- width : 20em;
- pointer-events: all;
-}
-
-:host-context([darktheme=false]) div[statusCard]
-{
- background-color:rgba(230,230,230,0.8);
-}
-
-:host-context([darktheme=true]) div[statusCard],
-:host-context([darktheme=true]) input
-{
- background-color:rgba(20,20,20,0.8);
- color : rgba(250,250,250,0.8);
-}
-
div[landmarkMasterContainer]
{
background:none;
@@ -86,10 +51,6 @@ div[landmarkMasterContainer] > div > [landmarkContainer] > div
margin-top:-1em;
}
-small[onHoverSegment]
-{
- margin-left:2em;
-}
[citationContainer]
{
@@ -104,11 +65,6 @@ hr
margin : 0.2em 2em;
}
-div[linksContainer]
-{
- display:inline-block;
- margin-left:1em;
-}
div[landmarkMasterContainer] > div > [landmarkContainer] > div.loadingIndicator
{
diff --git a/src/ui/nehubaContainer/nehubaContainer.template.html b/src/ui/nehubaContainer/nehubaContainer.template.html
index dbe225ff5..912caf023 100644
--- a/src/ui/nehubaContainer/nehubaContainer.template.html
+++ b/src/ui/nehubaContainer/nehubaContainer.template.html
@@ -87,67 +87,12 @@
</div>
<layout-floating-container *ngIf="viewerLoaded">
-
- <!-- TODO export status card to its own container -->
- <div statusCard>
-
- <hr *ngIf="showCitation && !isMobile" />
-
- <div linksContainer>
- <span>
- reset:
- </span>
- <a
- href="#"
- (click)="$event.preventDefault();resetNavigation({position:true})">
- position
- </a>
-
- <a
- href="#"
- (click)="$event.preventDefault();resetNavigation({rotation:true})">
- rotation
- </a>
-
- <a
- href="#"
- (click)="$event.preventDefault();resetNavigation({zoom:true})">
- zoom
- </a>
-
- <br />
- <span>
- space:
- </span>
-
- <a href="#" (click)="$event.preventDefault();statusPanelRealSpace=!statusPanelRealSpace">
- {{statusPanelRealSpace ? 'physical' : 'voxel'}}
- </a>
-
- </div>
-
- <br />
- <div textContainer>
- <small>Navigation: </small>
- <input
- (keydown.enter)="textNavigateTo(navigateInput.value)"
- (keydown.tab)="textNavigateTo(navigateInput.value)"
- [ngModel]="navigationValue()"
- spellcheck="false"
- #navigateInput
- navigateInput/>
-
- <br />
- <small *ngIf="!isMobile">Mouse: </small>
- <small *ngIf="!isMobile">
- {{ mouseCoord }}
- </small>
- <br *ngIf="!isMobile" />
- <small onHoverSegment>
- {{ onHoverSegmentName$ | async }}
- </small>
- </div>
- </div>
+ <!-- StatusCard container-->
+ <ui-status-card
+ [selectedTemplate] = "selectedTemplate"
+ [isMobile] = "isMobile"
+ [nehubaViewer] = "nehubaViewer">
+ </ui-status-card>
</layout-floating-container>
<div id="scratch-pad">
diff --git a/src/ui/nehubaContainer/statusCard/statusCard.component.ts b/src/ui/nehubaContainer/statusCard/statusCard.component.ts
new file mode 100644
index 000000000..ce6bbfa5e
--- /dev/null
+++ b/src/ui/nehubaContainer/statusCard/statusCard.component.ts
@@ -0,0 +1,118 @@
+import { Component, OnInit, Input } from "@angular/core";
+import { AtlasViewerConstantsServices } from "src/atlasViewer/atlasViewer.constantService.service";
+import { CHANGE_NAVIGATION, ViewerStateInterface } from "src/services/stateStore.service";
+import { Store } from "@ngrx/store";
+import { NehubaViewerUnit } from "../nehubaViewer/nehubaViewer.component";
+
+@Component({
+ selector : 'ui-status-card',
+ templateUrl : './statusCard.template.html',
+ styleUrls : ['./statusCard.style.css']
+ })
+export class StatusCardComponent implements OnInit {
+
+
+ @Input() selectedTemplate: any;
+ @Input() isMobile: boolean;
+ @Input() nehubaViewer: NehubaViewerUnit;
+
+
+ constructor(
+ private constantService : AtlasViewerConstantsServices,
+ private store : Store<ViewerStateInterface>,
+ ) {}
+
+ ngOnInit() {
+
+ }
+
+
+ statusPanelRealSpace : boolean = true
+
+ get mouseCoord():string{
+ return this.nehubaViewer ?
+ this.statusPanelRealSpace ?
+ this.nehubaViewer.mousePosReal ?
+ Array.from(this.nehubaViewer.mousePosReal.map(n=> isNaN(n) ? 0 : n/1e6))
+ .map(n=>n.toFixed(3)+'mm').join(' , ') :
+ '0mm , 0mm , 0mm (mousePosReal not yet defined)' :
+ this.nehubaViewer.mousePosVoxel ?
+ this.nehubaViewer.mousePosVoxel.join(' , ') :
+ '0 , 0 , 0 (mousePosVoxel not yet defined)' :
+ '0 , 0 , 0 (nehubaViewer not defined)'
+ }
+
+ editingNavState : boolean = false
+
+ textNavigateTo(string:string){
+ if(string.split(/[\s|,]+/).length>=3 && string.split(/[\s|,]+/).slice(0,3).every(entry=>!isNaN(Number(entry.replace(/mm/,''))))){
+ const pos = (string.split(/[\s|,]+/).slice(0,3).map((entry)=>Number(entry.replace(/mm/,''))*(this.statusPanelRealSpace ? 1000000 : 1)))
+ this.nehubaViewer.setNavigationState({
+ position : (pos as [number,number,number]),
+ positionReal : this.statusPanelRealSpace
+ })
+ }else{
+ console.log('input did not parse to coordinates ',string)
+ }
+ }
+
+ navigationValue(){
+ return this.nehubaViewer ?
+ this.statusPanelRealSpace ?
+ Array.from(this.nehubaViewer.navPosReal.map(n=> isNaN(n) ? 0 : n/1e6))
+ .map(n=>n.toFixed(3)+'mm').join(' , ') :
+ Array.from(this.nehubaViewer.navPosVoxel.map(n=> isNaN(n) ? 0 : n)).join(' , ') :
+ `[0,0,0] (neubaViewer is undefined)`
+ }
+
+
+ get showCitation(){
+ return this.selectedTemplate && this.selectedTemplate.properties && this.selectedTemplate.properties.publications && this.selectedTemplate.properties.publications.constructor === Array
+ }
+
+
+ resetNavigation({rotation: rotationFlag = false, position: positionFlag = false, zoom : zoomFlag = false} : {rotation: boolean, position: boolean, zoom: boolean}){
+ const initialNgState = this.selectedTemplate.nehubaConfig.dataset.initialNgState
+
+ const perspectiveZoom = initialNgState ? initialNgState.perspectiveZoom : undefined
+ const perspectiveOrientation = initialNgState ? initialNgState.perspectiveOrientation : undefined
+ const zoom = (zoomFlag
+ && initialNgState
+ && initialNgState.navigation
+ && initialNgState.navigation.zoomFactor)
+ || undefined
+
+ const position = (positionFlag
+ && initialNgState
+ && initialNgState.navigation
+ && initialNgState.navigation.pose
+ && initialNgState.navigation.pose.position.voxelCoordinates
+ && initialNgState.navigation.pose.position.voxelCoordinates)
+ || undefined
+
+ const orientation = rotationFlag
+ ? [0,0,0,1]
+ : undefined
+
+ this.store.dispatch({
+ type : CHANGE_NAVIGATION,
+ navigation : Object.assign({},
+ {
+ perspectiveZoom,
+ perspectiveOrientation,
+ zoom,
+ position,
+ orientation
+ },{
+ positionReal : false,
+ animation : {
+
+ }
+ })
+ })
+ }
+}
+
+
+
+
diff --git a/src/ui/nehubaContainer/statusCard/statusCard.style.css b/src/ui/nehubaContainer/statusCard/statusCard.style.css
new file mode 100644
index 000000000..b9d5cfb79
--- /dev/null
+++ b/src/ui/nehubaContainer/statusCard/statusCard.style.css
@@ -0,0 +1,47 @@
+div[statusCard]
+{
+ position:absolute;
+ left:1em;
+ bottom:1em;
+ width : 20em;
+ pointer-events: all;
+}
+
+:host-context([darktheme=false]) div[statusCard]
+{
+ background-color:rgba(230,230,230,0.8);
+}
+
+:host-context([darktheme=true]) div[statusCard],
+:host-context([darktheme=true]) input
+{
+ background-color:rgba(20,20,20,0.8);
+ color : rgba(250,250,250,0.8);
+}
+
+div[linksContainer]
+{
+ display:inline-block;
+ margin-left:1em;
+}
+
+div[textContainer]
+{
+ padding-left:1em;
+}
+
+small[onHoverSegment]
+{
+ margin-left:2em;
+}
+
+
+:host-context([darktheme=false]) input[navigateInput]
+{
+ border:rgba(0,0,0,0.2) solid 1px;
+}
+
+:host-context([darktheme=true]) input[navigateInput]
+{
+ border:rgba(255,255,255,0.2) solid 1px;
+}
\ No newline at end of file
diff --git a/src/ui/nehubaContainer/statusCard/statusCard.template.html b/src/ui/nehubaContainer/statusCard/statusCard.template.html
new file mode 100644
index 000000000..7a0c90fa5
--- /dev/null
+++ b/src/ui/nehubaContainer/statusCard/statusCard.template.html
@@ -0,0 +1,59 @@
+<div statusCard>
+
+ <hr *ngIf="showCitation && !isMobile" />
+
+ <div linksContainer>
+ <span>
+ reset:
+ </span>
+ <a
+ href="#"
+ (click)="$event.preventDefault();resetNavigation({position:true})">
+ position
+ </a>
+
+ <a
+ href="#"
+ (click)="$event.preventDefault();resetNavigation({rotation:true})">
+ rotation
+ </a>
+
+ <a
+ href="#"
+ (click)="$event.preventDefault();resetNavigation({zoom:true})">
+ zoom
+ </a>
+
+ <br />
+ <span>
+ space:
+ </span>
+
+ <a href="#" (click)="$event.preventDefault();statusPanelRealSpace=!statusPanelRealSpace">
+ {{statusPanelRealSpace ? 'physical' : 'voxel'}}
+ </a>
+
+ </div>
+
+ <br />
+ <div textContainer>
+ <small>Navigation: </small>
+ <input
+ (keydown.enter)="textNavigateTo(navigateInput.value)"
+ (keydown.tab)="textNavigateTo(navigateInput.value)"
+ [ngModel]="navigationValue()"
+ spellcheck="false"
+ #navigateInput
+ navigateInput/>
+
+ <br />
+ <small *ngIf="!isMobile">Mouse: </small>
+ <small *ngIf="!isMobile">
+ {{ mouseCoord }}
+ </small>
+ <br *ngIf="!isMobile" />
+ <small onHoverSegment>
+ {{ onHoverSegmentName$ | async }}
+ </small>
+ </div>
+ </div>
\ No newline at end of file
diff --git a/src/ui/ui.module.ts b/src/ui/ui.module.ts
index e01f63ed9..e1e80ad32 100644
--- a/src/ui/ui.module.ts
+++ b/src/ui/ui.module.ts
@@ -43,6 +43,7 @@ import { FilterNgLayer } from "src/util/pipes/filterNgLayer.pipe";
import { UtilModule } from "src/util/util.module";
import { RegionHierarchy } from "./regionHierachy/regionHierarchy.component";
import { FilterNameBySearch } from "./regionHierachy/filterNameBySearch.pipe";
+import { StatusCardComponent } from "./nehubaContainer/statusCard/statusCard.component";
@NgModule({
@@ -77,6 +78,8 @@ import { FilterNameBySearch } from "./regionHierachy/filterNameBySearch.pipe";
SigninModal,
RegionHierarchy,
+ StatusCardComponent,
+
/* pipes */
GroupDatasetByRegion,
filterRegionDataEntries,
--
GitLab