From c7c3af98efc71ca2111fa2f02217c8a30742302f Mon Sep 17 00:00:00 2001
From: Xiao Gui <xgui3783@gmail.com>
Date: Mon, 8 Oct 2018 16:16:24 +0200
Subject: [PATCH] feat: reworked mainside component.

---
 src/atlasViewer/atlasViewer.component.ts      | 20 ++++---------------
 src/atlasViewer/atlasViewer.template.html     |  4 ++--
 .../layoutsExample.template.html              |  1 -
 src/layouts/mainside/mainside.animation.ts    |  8 ++++----
 src/layouts/mainside/mainside.component.ts    |  9 +++++----
 src/layouts/mainside/mainside.template.html   |  2 +-
 6 files changed, 16 insertions(+), 28 deletions(-)

diff --git a/src/atlasViewer/atlasViewer.component.ts b/src/atlasViewer/atlasViewer.component.ts
index eeeba6a9c..1b3f2ecd0 100644
--- a/src/atlasViewer/atlasViewer.component.ts
+++ b/src/atlasViewer/atlasViewer.component.ts
@@ -419,7 +419,7 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
     }
 
     const colorBufferFloat = gl.getExtension('EXT_color_buffer_float')
-
+    
     if (!colorBufferFloat) {
 
       const detail = `Your browser does not support 
@@ -449,22 +449,10 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
       }) as NgLayerInterface)
   }
 
-  rafId : number | null
+  panelAnimationEnd(){
 
-  panelAnimationFlag(flag:boolean){
-    const redraw = ()=>{
-      if( this.nehubaContainer && this.nehubaContainer.nehubaViewer && this.nehubaContainer.nehubaViewer.nehubaViewer )
-        this.nehubaContainer.nehubaViewer.nehubaViewer.redraw()
-      this.rafId = requestAnimationFrame(()=>redraw())
-    }
-    if( flag ){
-      if(this.rafId)
-        cancelAnimationFrame(this.rafId)
-      this.rafId = requestAnimationFrame(()=>redraw())
-    }else{
-      cancelAnimationFrame(this.rafId)
-      this.rafId = null
-    }
+    if( this.nehubaContainer && this.nehubaContainer.nehubaViewer && this.nehubaContainer.nehubaViewer.nehubaViewer )
+      this.nehubaContainer.nehubaViewer.nehubaViewer.redraw()
   }
 
   toggleSidePanel(panelName:string){
diff --git a/src/atlasViewer/atlasViewer.template.html b/src/atlasViewer/atlasViewer.template.html
index 92b5f4e9d..dc3872882 100644
--- a/src/atlasViewer/atlasViewer.template.html
+++ b/src/atlasViewer/atlasViewer.template.html
@@ -2,8 +2,8 @@
 
   <layout-mainside
     [showSide] = "false"
-    [overlay] = "false"
-    (panelAnimationFlag) = "panelAnimationFlag($event)">
+    [animationFlag] = "false"
+    (panelAnimationEnd) = "panelAnimationEnd($event)">
     <div maincontent>
       <ui-nehuba-container>
       </ui-nehuba-container>
diff --git a/src/layouts/layoutsExample/layoutsExample.template.html b/src/layouts/layoutsExample/layoutsExample.template.html
index bb3f26847..479867efe 100644
--- a/src/layouts/layoutsExample/layoutsExample.template.html
+++ b/src/layouts/layoutsExample/layoutsExample.template.html
@@ -17,7 +17,6 @@
     <div class = "col-md-4">
       <div class = "well">
         <layout-mainside
-          [overlay] = "mainsideOverlay"
           [sideWidth] = "mainsideSideWidth"
           [showSide] = "mainsideShowSide">
 
diff --git a/src/layouts/mainside/mainside.animation.ts b/src/layouts/mainside/mainside.animation.ts
index e3a93afc4..1cf8e4a3f 100644
--- a/src/layouts/mainside/mainside.animation.ts
+++ b/src/layouts/mainside/mainside.animation.ts
@@ -7,19 +7,19 @@ export const mainSideAnimation = trigger('collapseSide',[
       'flex-basis' : '0px',
       'width' : '0px'
     }),
-    { params : { sideWidth : 0 } }
+    { params : { sideWidth : 0, animationTiming: 180 } }
   ),
   state('visible',
     style({
       'flex-basis' : '{{ sideWidth }}px',
       'width' : '{{ sideWidth }}px'
     }),
-    { params : { sideWidth : 300 } }
+    { params : { sideWidth : 300, animationTiming: 180 } }
   ),
   transition('collapsed => visible',[
-    animate('180ms ease-out')
+    animate('{{ animationTiming }}ms ease-out')
   ]),
   transition('visible => collapsed',[
-    animate('180ms ease-in')
+    animate('{{ animationTiming }}ms ease-in')
   ])
 ])
\ No newline at end of file
diff --git a/src/layouts/mainside/mainside.component.ts b/src/layouts/mainside/mainside.component.ts
index 83eeaf357..56824fbe8 100644
--- a/src/layouts/mainside/mainside.component.ts
+++ b/src/layouts/mainside/mainside.component.ts
@@ -14,12 +14,13 @@ import { mainSideAnimation } from "./mainside.animation";
 
 export class LayoutMainSide{
   @Input() showResizeSliver : boolean = true
-  @Input() overlay : boolean = false
   @Input() showSide : boolean = false
   @Input() sideWidth : number = 300
+  @Input() animationFlag : boolean = false
 
   @Output() panelShowStateChanged : EventEmitter<boolean> = new EventEmitter()
-  @Output() panelAnimationFlag : EventEmitter<boolean> = new EventEmitter()
+  @Output() panelAnimationStart : EventEmitter<boolean> = new EventEmitter()
+  @Output() panelAnimationEnd : EventEmitter<boolean> = new EventEmitter()
 
   togglePanelShow(){
     this.showSide = !this.showSide
@@ -27,10 +28,10 @@ export class LayoutMainSide{
   }
 
   animationStart(){
-    this.panelAnimationFlag.emit(true)
+    this.panelAnimationStart.emit(true)
   }
 
   animationEnd(){
-    this.panelAnimationFlag.emit(false)
+    this.panelAnimationEnd.emit(true)
   }
 }
\ No newline at end of file
diff --git a/src/layouts/mainside/mainside.template.html b/src/layouts/mainside/mainside.template.html
index e06cf1410..b3da941e8 100644
--- a/src/layouts/mainside/mainside.template.html
+++ b/src/layouts/mainside/mainside.template.html
@@ -8,7 +8,7 @@
     </ng-content>
   </div>
   <div 
-    [@collapseSide] = "{ value : showSide ? 'visible' : 'collapsed' , params : { sideWidth : sideWidth } }"
+    [@collapseSide] = "{ value : showSide ? 'visible' : 'collapsed' , params : { sideWidth : sideWidth, animationTiming : animationFlag ? 180 : 0 } }"
     (@collapseSide.start) = "animationStart()"
     (@collapseSide.done) = "animationEnd()"
     sidecontent>
-- 
GitLab