diff --git a/src/atlasViewer/widgetUnit/widgetService.service.ts b/src/atlasViewer/widgetUnit/widgetService.service.ts
index fd51c11f68104006af37313a847e8413be48b201..be784e7cb95c13d75f48f6e22e212cdc03e78d46 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 de71060992034ef26b695467d4b58ce54ad5a5d9..65187a2d6b0b1a46607f33179d7ddc55af8ca6c8 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 19849a5fcb923172dc20f4c988968e86a4e42d6a..6b12b3bb969276b7c57575f3b413cc1bac293bb5 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 912fecbedd0f2e563539a5e7534444a9768f19f6..9153ddd3d74ea7b1171c657744ff229479a9d7b5 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 f3558108ef82ad2e697fa6d49f8bdbbbfd86f677..608c1b758250fc67d7607a19a44391c3c93e4285 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)
}