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

chore: isolate nehuba viewer CD

parent 760c5fa0
No related branches found
No related tags found
No related merge requests found
Showing
with 54 additions and 52 deletions
import { Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnDestroy, OnInit, Output } from "@angular/core";
import { ChangeDetectorRef, Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnDestroy, Output } from "@angular/core";
import { fromEvent, merge, Observable, of, Subscription } from "rxjs";
import { debounceTime, distinctUntilChanged, map, scan, switchMap } from "rxjs/operators";
import {MatSnackBar, MatSnackBarRef, SimpleSnackBar} from "@angular/material/snack-bar";
import { MatSnackBar, MatSnackBarRef, SimpleSnackBar } from "@angular/material/snack-bar";
@Directive({
selector: '[drag-drop-file]',
......@@ -20,7 +20,15 @@ export class DragDropFileDirective implements OnDestroy {
public transition = `opacity 300ms ease-in`
@HostBinding('style.opacity')
public opacity = null
public hostOpacity = null
get opacity() {
return this.hostOpacity
}
set opacity(val: number) {
this.hostOpacity = val
this.cdr.markForCheck()
}
public snackbarRef: MatSnackBarRef<SimpleSnackBar>
......@@ -55,7 +63,7 @@ export class DragDropFileDirective implements OnDestroy {
}
}
constructor(private snackBar: MatSnackBar, private el: ElementRef) {
constructor(private snackBar: MatSnackBar, private el: ElementRef, private cdr: ChangeDetectorRef) {
this.dragover$ = merge(
of(null),
fromEvent(this.el.nativeElement, 'drop'),
......
......@@ -28,6 +28,7 @@ import { MeshEffects } from "./mesh.effects/mesh.effects";
import { NehubaLayoutOverlayModule } from "./layoutOverlay";
import { NgAnnotationService } from "./annotation/service";
import { NgAnnotationEffects } from "./annotation/effects";
import { NehubaViewerContainer } from "./nehubaViewerInterface/nehubaViewerContainer.component";
@NgModule({
imports: [
......@@ -66,6 +67,7 @@ import { NgAnnotationEffects } from "./annotation/effects";
NehubaGlueCmp,
StatusCardComponent,
NgLayerCtrlCmp,
NehubaViewerContainer,
],
exports: [
NehubaViewerUnit,
......
......@@ -21,7 +21,6 @@ import { NehubaConfig, getParcNgId, getRegionLabelIndex } from "../config.servic
import { SET_MESHES_TO_LOAD } from "../constants";
import { annotation, atlasAppearance, atlasSelection, userInteraction } from "src/state";
import { linearTransform, TVALID_LINEAR_XFORM_DST, TVALID_LINEAR_XFORM_SRC } from "src/atlasComponents/sapi/core/space/interspaceLinearXform";
import { DragDropFileDirective } from 'src/dragDropFile/dragDrop.directive'
export const INVALID_FILE_INPUT = `Exactly one (1) file is required!`
......@@ -70,10 +69,8 @@ export class NehubaGlueCmp implements IViewer<'nehuba'>, OnDestroy, AfterViewIni
@ViewChild('layerCtrlTmpl', { static: true })
layerCtrlTmpl: TemplateRef<any>
@ViewChild(DragDropFileDirective, { static: true })
dragDropDirective: DragDropFileDirective
public ARIA_LABELS = ARIA_LABELS
public CONST = CONST
@ViewChild(NehubaViewerContainerDirective, { static: true })
public nehubaContainerDirective: NehubaViewerContainerDirective
......@@ -168,12 +165,6 @@ export class NehubaGlueCmp implements IViewer<'nehuba'>, OnDestroy, AfterViewIni
ngAfterViewInit(): void {
this.setupNehubaEvRelay()
/**
* TODO directly dynamic input binding does not seem to work ...
* even though static input binding works (i.e. [comp-input]="var" does not work, comp-input="value" works)
*
*/
if (this.dragDropDirective) this.dragDropDirective.snackText = CONST.NEHUBA_DRAG_DROP_TEXT
}
ngOnDestroy(): void {
......
<div class="nehuba-viewer-container-parent"
iav-viewer-touch-interface
(touchmove)="$event.preventDefault()"
[snackText]="CONST.NEHUBA_DRAG_DROP_TEXT"
(drag-drop-file)="handleFileDrop($event)">
<div class="sxplr-d-block"
iav-nehuba-viewer-container
#iavContainer="iavNehubaViewerContainer"
(iavNehubaViewerContainerViewerLoading)="handleViewerLoadedEvent($event)">
<sxplr-nehuba-viewer-container
class="sxplr-w-100 sxplr-h-100 sxplr-d-block"
(viewerLoaded)="handleViewerLoadedEvent($event)">
</sxplr-nehuba-viewer-container>
</div>
</div>
<nehuba-layout-overlay></nehuba-layout-overlay>
......
import { Component, EventEmitter, Output } from "@angular/core";
@Component({
selector: `sxplr-nehuba-viewer-container`,
templateUrl: `./nehubaViewerContainer.template.html`,
styleUrls: [`./nehubaViewerContainer.style.css`]
})
export class NehubaViewerContainer {
handleViewerLoadedEvent(flag: boolean) {
this.viewerLoaded.emit(flag)
}
@Output()
viewerLoaded = new EventEmitter()
}
<div
class="sxplr-d-block"
iav-nehuba-viewer-container
#iavContainer="iavNehubaViewerContainer"
(iavNehubaViewerContainerViewerLoading)="handleViewerLoadedEvent($event)">
</div>
\ No newline at end of file
import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { select, Store } from "@ngrx/store";
import { concat, Observable, of, Subscription } from 'rxjs';
import { concat, Observable, of } from 'rxjs';
import { atlasSelection } from 'src/state';
import { actions } from 'src/state/atlasSelection';
import { VALUES } from "common/constants"
......@@ -8,9 +8,9 @@ import { floatEquality } from "common/util"
import { filter, map } from 'rxjs/operators';
enum EnumClassicalView {
CORONAL="Coronal",
SAGITTAL="Sagittal",
AXIAL="Axial",
CORONAL = "Coronal",
SAGITTAL = "Sagittal",
AXIAL = "Axial",
}
const viewOrientations : Record<EnumClassicalView, number[][]> = {
......@@ -22,9 +22,10 @@ const viewOrientations : Record<EnumClassicalView, number[][]> = {
@Component({
selector: 'snap-perspective-orientation-cmp',
templateUrl: './snapPerspectiveOrientation.template.html',
styleUrls: ['./snapPerspectiveOrientation.style.sass']
styleUrls: ['./snapPerspectiveOrientation.style.sass'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class SnapPerspectiveOrientationCmp implements OnDestroy, OnInit {
export class SnapPerspectiveOrientationCmp {
public currentView: EnumClassicalView = null
public EnumClassicalView = EnumClassicalView
......@@ -56,7 +57,7 @@ export class SnapPerspectiveOrientationCmp implements OnDestroy, OnInit {
)
)
constructor(private store$: Store, private cdr: ChangeDetectorRef) {}
constructor(private store$: Store) {}
public set3DViewPoint(plane: EnumClassicalView) {
......@@ -72,19 +73,5 @@ export class SnapPerspectiveOrientationCmp implements OnDestroy, OnInit {
})
)
}
ngOnInit(): void {
this.subscriptions.push(
this.currentPersView$.subscribe(val => {
this.currentView = val
this.cdr.detectChanges()
})
)
}
ngOnDestroy(): void {
while(this.subscriptions.length) this.subscriptions.pop().unsubscribe()
}
private subscriptions: Subscription[] = []
private counter = 0
}
......@@ -11,7 +11,7 @@
<ng-template #btnTmpl let-orientation>
<button mat-button
[color]="currentView === orientation ? 'primary': 'default'"
[color]="(currentPersView$ | async) === orientation ? 'primary': 'default'"
(click)="set3DViewPoint(orientation)">
{{ orientation }}
</button>
......
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnInit, Optional } from "@angular/core";
import { ChangeDetectionStrategy, Component, OnInit } from "@angular/core";
import { select, Store } from "@ngrx/store";
import { merge, Observable, of, Subscription } from "rxjs";
import { merge, of, Subscription } from "rxjs";
import { pairwise, withLatestFrom} from "rxjs/operators";
import { NehubaViewerUnit } from "src/viewerModule/nehuba";
import { NEHUBA_INSTANCE_INJTKN } from "src/viewerModule/nehuba/util";
import { ARIA_LABELS } from 'common/constants'
import { actionSetAuxMeshes, selectorAuxMeshes } from "../../store";
import { FormBuilder, FormControl, FormGroup } from "@angular/forms";
......@@ -33,7 +31,6 @@ export class ViewerCtrlCmp implements OnInit{
if (val === this._removeOctantFlag) return
this._removeOctantFlag = val
this.setOctantRemoval(this._removeOctantFlag)
this.cdr.detectChanges()
}
public nehubaViewerPerspectiveOctantRemoval$ = this.store$.pipe(
......@@ -47,7 +44,6 @@ export class ViewerCtrlCmp implements OnInit{
)
ngOnInit(): void {
this.sub.push(
this.nehubaViewerPerspectiveOctantRemoval$.subscribe(
......@@ -73,7 +69,6 @@ export class ViewerCtrlCmp implements OnInit{
this.auxMeshesNamesSet.add(mesh.ngId)
this.auxMeshFormGroup.addControl(mesh['@id'], new FormControl(mesh.visible))
}
this.cdr.detectChanges()
}),
this.auxMeshFormGroup.valueChanges.pipe(
......@@ -98,7 +93,6 @@ export class ViewerCtrlCmp implements OnInit{
})
)
}
this.cdr.detectChanges()
})
)
}
......@@ -106,8 +100,6 @@ export class ViewerCtrlCmp implements OnInit{
constructor(
private store$: Store<any>,
private formBuilder: FormBuilder,
private cdr: ChangeDetectorRef,
@Optional() @Inject(NEHUBA_INSTANCE_INJTKN) private nehubaInst$: Observable<NehubaViewerUnit>,
){
}
......
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