bugfix: statuspanel goto pos voxel flag ineffective (#619) (#620)

* bugfix: statuspanel goto pos voxel flag ineffective

* [skip ci] release notes

docs/releases/v2.2.5.md

+# v2.2.5
+
+28 July 2020
+
+## Bugfixes
+
+- Fixed status panel voxel/real toggle ineffective bug (Thanks to Dr El Mysteryo)

src/ui/nehubaContainer/statusCard/statusCard.component.spec.ts

+import { async, TestBed } from "@angular/core/testing"
+import { CommonModule } from "@angular/common"
+import { AngularMaterialModule } from "src/ui/sharedModules/angularMaterial.module"
+import { StatusCardComponent } from "./statusCard.component"
+import { Directive, Component } from "@angular/core"
+import { of } from "rxjs"
+import { ShareModule } from "src/share"
+import { StateModule } from "src/state"
+import { provideMockStore } from "@ngrx/store/testing"
+import { By } from "@angular/platform-browser"
+import { MatSlideToggle } from "@angular/material/slide-toggle"
+import { NoopAnimationsModule } from "@angular/platform-browser/animations"
+import { FormsModule, ReactiveFormsModule } from "@angular/forms"
+
+@Directive({
+  selector: '[iav-auth-authState]',
+  exportAs: 'iavAuthAuthState'
+})
+
+class MockIavAuthState{
+  user$ = of(null)
+}
+
+@Component({
+  selector: 'signin-modal',
+  template: '',
+})
+
+class MockSigninModal{}
+
+describe('> statusCard.component.ts', () => {
+  describe('> StatusCardComponent', () => {
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        imports: [
+          CommonModule,
+          AngularMaterialModule,
+          ShareModule,
+          StateModule,
+          FormsModule,
+          ReactiveFormsModule,
+          NoopAnimationsModule,
+        ],
+        declarations: [
+          StatusCardComponent,
+          MockIavAuthState,
+          MockSigninModal,
+        ],
+        providers: [
+          provideMockStore({
+            initialState: {
+              viewerState: {
+                fetchedTemplates: []
+              }
+            }
+          })
+        ]
+      }).compileComponents()
+    }))
+    it('> can be instantiated', () => {
+      const fixture = TestBed.createComponent(StatusCardComponent)
+      expect(fixture.debugElement.nativeElement).toBeTruthy()
+    })
+
+    it('> toggle can be found', () => {
+      
+      const fixture = TestBed.createComponent(StatusCardComponent)
+      fixture.detectChanges()
+      const slider = fixture.debugElement.query( By.directive(MatSlideToggle) )
+      expect(slider).toBeTruthy()
+    })
+
+    it('> toggling voxel/real toggle also toggles statusPanelRealSpace flag', () => {
+
+      const fixture = TestBed.createComponent(StatusCardComponent)
+      fixture.detectChanges()
+      const prevFlag = fixture.componentInstance.statusPanelRealSpace
+      const sliderEl = fixture.debugElement.query( By.directive(MatSlideToggle) )
+      const slider = sliderEl.injector.get(MatSlideToggle)
+      slider.toggle()
+      fixture.detectChanges()
+      expect(fixture.componentInstance.statusPanelRealSpace).toEqual(!prevFlag)
+    })
+
+    describe('> textNavigationTo', () => {
+      it('> takes into account of statusPanelRealSpace panel', () => {
+        const fixture = TestBed.createComponent(StatusCardComponent)
+        fixture.detectChanges()
+        const setNavigationStateSpy = jasmine.createSpy('setNavigationState')
+        fixture.componentInstance.nehubaViewer = {
+          setNavigationState: setNavigationStateSpy
+        } as any
+
+        fixture.componentInstance.statusPanelRealSpace = true
+        fixture.componentInstance.textNavigateTo('1, 0, 0')
+        expect(setNavigationStateSpy).toHaveBeenCalledWith({
+          position: [1e6, 0, 0],
+          positionReal: true
+        })
+
+        fixture.componentInstance.statusPanelRealSpace = false
+        fixture.componentInstance.textNavigateTo('1, 0, 0')
+        expect(setNavigationStateSpy).toHaveBeenCalledWith({
+          position: [1, 0, 0],
+          positionReal: false
+        })
+      })
+    })
+  })
+})

src/ui/nehubaContainer/statusCard/statusCard.component.ts

@@ -8,6 +8,7 @@ import { distinctUntilChanged, shareReplay, map, filter, startWith } from "rxjs/
 import { MatBottomSheet } from "@angular/material/bottom-sheet";
 import { MatDialog } from "@angular/material/dialog";
 import { ARIA_LABELS } from 'common/constants'
+import { FormControl } from "@angular/forms";
 
 @Component({
   selector : 'ui-status-card',
@@ -55,6 +56,12 @@ export class StatusCardComponent implements OnInit, OnChanges{
         this.selectedTemplateRoot = template.find(t => t.name === this.selectedTemplateName)
       })
     )
+
+    this.subscriptions.push(
+      this.statusPanelFormCtrl.valueChanges.subscribe(val => {
+        this.statusPanelRealSpace = val
+      })
+    )
   }
 
   ngOnChanges() {
@@ -94,8 +101,11 @@ export class StatusCardComponent implements OnInit, OnChanges{
     )
   }
 
-  public statusPanelRealSpace$ = new BehaviorSubject(true)
-  public statusPanelRealSpace: boolean = true
+  statusPanelFormCtrl = new FormControl(true, [])
+  public statusPanelRealSpace = true
+  public statusPanelRealSpace$ = this.statusPanelFormCtrl.valueChanges.pipe(
+    startWith(true)
+  )
 
   public textNavigateTo(string: string) {
     if (string.split(/[\s|,]+/).length >= 3 && string.split(/[\s|,]+/).slice(0, 3).every(entry => !isNaN(Number(entry.replace(/mm/, ''))))) {

src/ui/nehubaContainer/statusCard/statusCard.template.html

@@ -38,8 +38,7 @@
       </span>
 
       <mat-slide-toggle
-        [checked]="statusPanelRealSpace$ | async"
-        (change)="statusPanelRealSpace$.next($event.checked)"
+        [formControl]="statusPanelFormCtrl"
         class="pl-2 pr-2">
       </mat-slide-toggle>