From 72fa6e84e5d5b031f71050445980ce465a09982a Mon Sep 17 00:00:00 2001
From: Xiao Gui <xgui3783@gmail.com>
Date: Fri, 26 Oct 2018 18:12:51 +0200
Subject: [PATCH] feat: obliquerotation mvp
---
.../widgetUnit/widgetService.service.ts | 5 +++
.../nehubaContainer.component.ts | 41 +++++++++++++++++++
.../nehubaContainer/nehubaContainer.style.css | 25 +++++++++++
.../nehubaContainer.template.html | 14 ++++++-
.../nehubaViewer/nehubaViewer.component.ts | 8 ++--
5 files changed, 87 insertions(+), 6 deletions(-)
diff --git a/src/atlasViewer/widgetUnit/widgetService.service.ts b/src/atlasViewer/widgetUnit/widgetService.service.ts
index fd51c11f6..be784e7cb 100644
--- a/src/atlasViewer/widgetUnit/widgetService.service.ts
+++ b/src/atlasViewer/widgetUnit/widgetService.service.ts
@@ -39,6 +39,11 @@ export class WidgetServices{
addNewWidget(guestComponentRef:ComponentRef<any>,options?:Partial<WidgetOptionsInterface>):ComponentRef<WidgetUnit>{
const component = this.widgetUnitFactory.create(this.injector)
const _option = getOption(options)
+
+ if(this.constantServce.mobile){
+ _option.state = 'docked'
+ }
+
_option.state === 'floating'
? this.floatingContainer.insert(component.hostView)
: _option.state === 'docked'
diff --git a/src/ui/nehubaContainer/nehubaContainer.component.ts b/src/ui/nehubaContainer/nehubaContainer.component.ts
index de7106099..65187a2d6 100644
--- a/src/ui/nehubaContainer/nehubaContainer.component.ts
+++ b/src/ui/nehubaContainer/nehubaContainer.component.ts
@@ -24,6 +24,8 @@ export class NehubaContainer implements OnInit, OnDestroy{
@ViewChild('[pos01]',{read:ElementRef}) topright : ElementRef
@ViewChild('[pos10]',{read:ElementRef}) bottomleft : ElementRef
@ViewChild('[pos11]',{read:ElementRef}) bottomright : ElementRef
+ @ViewChild('mobileObliqueCtrl', {read:ElementRef}) mobileObliqueCtrl : ElementRef
+ @ViewChild('mobileObliqueScreen', {read:ElementRef}) mobileObliqueScreen : ElementRef
private nehubaViewerFactory : ComponentFactory<NehubaViewerUnit>
@@ -550,6 +552,45 @@ export class NehubaContainer implements OnInit, OnDestroy{
}
// datasetViewerRegistry : Set<string> = new Set()
+ public showObliqueScreen : Observable<boolean>
+
+ ngAfterViewInit(){
+ if(this.isMobile){
+
+ this.showObliqueScreen = merge(
+ fromEvent(this.mobileObliqueCtrl.nativeElement, 'touchstart'),
+ fromEvent(this.mobileObliqueCtrl.nativeElement, 'touchend')
+ ).pipe(
+ map((ev:TouchEvent) => ev.touches.length === 1)
+ )
+
+ fromEvent(this.mobileObliqueCtrl.nativeElement, 'touchstart').pipe(
+ switchMap(() => fromEvent(this.mobileObliqueCtrl.nativeElement, 'touchmove').pipe(
+ takeUntil(fromEvent(this.mobileObliqueCtrl.nativeElement, 'touchend').pipe(
+ filter((ev:TouchEvent) => ev.touches.length === 0)
+ )),
+ map((ev:TouchEvent) => (ev.preventDefault(), ev.stopPropagation(), ev)),
+ filter((ev:TouchEvent) => ev.touches.length === 1),
+ map((ev:TouchEvent) => [ev.touches[0].screenX, ev.touches[0].screenY] ),
+
+ /* TODO reduce boiler plate, export */
+ scan((acc,curr) => acc.length < 2
+ ? acc.concat([curr])
+ : acc.slice(1).concat([curr]), []),
+ filter(isdouble => isdouble.length === 2),
+ map(double => ({
+ deltaX : double[1][0] - double[0][0],
+ deltaY : double[1][1] - double[0][1]
+ }))
+ ))
+ )
+ .subscribe(({deltaX, deltaY}) => {
+ const {navigationState} = this.nehubaViewer.nehubaViewer.ngviewer
+ navigationState.pose.rotateRelative(this.nehubaViewer.vec3([0, 1, 0]), -deltaX / 4.0 * Math.PI / 180.0)
+ navigationState.pose.rotateRelative(this.nehubaViewer.vec3([1, 0, 0]), deltaY / 4.0 * Math.PI / 180.0)
+ })
+ }
+ }
ngOnDestroy(){
this.subscriptions.forEach(s=>s.unsubscribe())
diff --git a/src/ui/nehubaContainer/nehubaContainer.style.css b/src/ui/nehubaContainer/nehubaContainer.style.css
index 19849a5fc..6b12b3bb9 100644
--- a/src/ui/nehubaContainer/nehubaContainer.style.css
+++ b/src/ui/nehubaContainer/nehubaContainer.style.css
@@ -142,4 +142,29 @@ div.loadingIndicator div.spinnerAnimationCircle
{
padding: 0 1em;
display:block;
+}
+
+div[mobileObliqueCtrl]
+{
+ font-size: 200%;
+ margin-top:-2.5rem;
+ margin-left:-2.5rem;
+ padding-left: 1rem;
+ padding-top: 1rem;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ pointer-events: all;
+}
+
+div[mobileObliqueScreen]
+{
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color:rgba(128,128,128,0.2);
+ transition: all 0.5s linear;
+ pointer-events: all;
}
\ No newline at end of file
diff --git a/src/ui/nehubaContainer/nehubaContainer.template.html b/src/ui/nehubaContainer/nehubaContainer.template.html
index 912fecbed..9153ddd3d 100644
--- a/src/ui/nehubaContainer/nehubaContainer.template.html
+++ b/src/ui/nehubaContainer/nehubaContainer.template.html
@@ -88,13 +88,14 @@
<layout-floating-container
*ngIf = "viewerLoaded">
+
+
<div statusCard>
<template-parcellation-citation-container desktopTemplateCitation *ngIf = "!isMobile">
-
</template-parcellation-citation-container>
- <hr *ngIf = "showCitation" />
+ <hr *ngIf = "showCitation && !isMobile" />
<div linksContainer>
<a href = "#" (click)="$event.preventDefault();statusPanelRealSpace = !statusPanelRealSpace">
@@ -128,4 +129,13 @@
</small>
</div>
</div>
+</layout-floating-container>
+<layout-floating-container *ngIf = "isMobile" [show] = "viewerLoaded">
+
+ <div *ngIf = "showObliqueScreen | async" #mobileObliqueScreen mobileObliqueScreen>
+
+ </div>
+ <div mobileObliqueCtrl #mobileObliqueCtrl>
+ <i class="glyphicon glyphicon-globe"></i>
+ </div>
</layout-floating-container>
\ No newline at end of file
diff --git a/src/ui/nehubaContainer/nehubaViewer/nehubaViewer.component.ts b/src/ui/nehubaContainer/nehubaViewer/nehubaViewer.component.ts
index f3558108e..608c1b758 100644
--- a/src/ui/nehubaContainer/nehubaViewer/nehubaViewer.component.ts
+++ b/src/ui/nehubaContainer/nehubaViewer/nehubaViewer.component.ts
@@ -318,9 +318,9 @@ export class NehubaViewerUnit implements AfterViewInit,OnDestroy{
position.changed.dispatch()
}else if(elementId === 3){
const {perspectiveNavigationState} = this.nehubaViewer.ngviewer
- perspectiveNavigationState.pose.rotateRelative(this.vec3([0, 1, 0]), -deltaX / 4.0 * Math.PI / 180.0);
- perspectiveNavigationState.pose.rotateRelative(this.vec3([1, 0, 0]), deltaY / 4.0 * Math.PI / 180.0);
- this.nehubaViewer.ngviewer.perspectiveNavigationState.changed.dispatch();
+ perspectiveNavigationState.pose.rotateRelative(this.vec3([0, 1, 0]), -deltaX / 4.0 * Math.PI / 180.0)
+ perspectiveNavigationState.pose.rotateRelative(this.vec3([1, 0, 0]), deltaY / 4.0 * Math.PI / 180.0)
+ this.nehubaViewer.ngviewer.perspectiveNavigationState.changed.dispatch()
}
})
)
@@ -503,7 +503,7 @@ export class NehubaViewerUnit implements AfterViewInit,OnDestroy{
}))
}
- private vec3(pos:[number,number,number]){
+ public vec3(pos:[number,number,number]){
return export_nehuba.vec3.fromValues(...pos)
}
--
GitLab