wip on react transition 3

LesionTracker/client/components/viewer/viewer.styl

@@ -17,39 +17,34 @@
       border: none !important
       outline: 0 !important // Prevent blue outline in Chrome
 
-    .removable
+    .imageViewerViewport
-      .imageViewerViewport
+      theme('border-bottom', '%s solid $uiBorderColor' % $uiBorderThickness)
-        theme('border-bottom', '%s solid $uiBorderColor' % $uiBorderThickness)
 
-        canvas
+      canvas
-          border-color: transparent
+        border-color: transparent
-          border-style: solid
+        border-style: solid
-          border-width: 1px
+        border-width: 1px
 
     &:not(:last-child)
-    .removable
       .imageViewerViewport
         theme('border-right', '%s solid $uiBorderColor' % $uiBorderThickness)
 
     &:first-child
-      .removable
+      .imageViewerViewport
-        .imageViewerViewport
+        theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
-          theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
 
     &.active
-      .removable
+      .imageViewerViewport
-        .imageViewerViewport
+        border-right: none !important
-          border-right: none !important
 
-          canvas
+        canvas
-            theme('border-color', '$uiBorderColorActive')
+          theme('border-color', '$uiBorderColorActive')
 
 
 .sidebar-left-open
-  #layoutManagerTarget
+  #imageViewerViewports
-    #imageViewerViewports
+    .viewportContainer
-      .viewportContainer
+      &:first-child
-        &:first-child
+        .removable
-          .removable
+          .imageViewerViewport
-            .imageViewerViewport
+            border-left: none
-              border-left: none

OHIFViewer/client/components/flexboxLayout/flexboxLayout.styl

@@ -5,7 +5,7 @@
   flex: 1
   flex-flow: row nowrap
   align-items: stretch
-  height: 'calc(100% - %s)' % ($toolbarHeight + $topBarHeight)
+  height: 'calc(100% - %s)' % ($toolbarHeight)
   width: 100%
 
   .sidebarMenu

Packages/ohif-viewerbase/client/components/viewer/CornerstoneViewport.css

@@ -1,4 +1,5 @@
 .CornerstoneViewport {
   width: 100%;
   height: 100%;
+  position: relative; /*Necessary so that the viewportOverlay is on top of the viewports */
 }

Packages/ohif-viewerbase/client/components/viewer/CornerstoneViewport.js

@@ -54,6 +54,7 @@ class CornerstoneViewport extends Component {
 
     // Get stack from Stack Manager
     const stack = StackManager.findOrCreateStack(study, displaySet);
+    stack.currentImageIdIndex = 0;
 
     // TODO: Allow viewport as a prop
     this.state = {
@@ -61,7 +62,7 @@ class CornerstoneViewport extends Component {
       displaySetInstanceUid,
       imageId: stack.imageIds[0],
       viewportHeight: '100%',
-      isLoading: true,
+      isLoading: false,//true,
       imageScrollbarValue: 0,
       numImagesLoaded: 0
     };
@@ -87,10 +88,10 @@ class CornerstoneViewport extends Component {
     );
 
     this.loadHandlerTimeout = 25;
-    loadHandlerManager.setStartLoadHandler(this.startLoadingHandler);
+    //loadHandlerManager.setStartLoadHandler(this.startLoadingHandler);
-    loadHandlerManager.setEndLoadHandler(this.doneLoadingHandler);
+    //loadHandlerManager.setEndLoadHandler(this.doneLoadingHandler);
 
-    this.debouncedResize = _.debounce(() => {
+    this.debouncedResize = debounce(() => {
       cornerstone.resize(this.element, true);
 
       this.setState({
@@ -190,6 +191,8 @@ class CornerstoneViewport extends Component {
     this.setState({
       viewport
     });
+
+    debugger;
   }
 
   onNewImage() {
@@ -348,8 +351,6 @@ class CornerstoneViewport extends Component {
       this.setState({
         viewportHeight: `${this.element.clientHeight - 20}px`
       });
-
-      this.doneLoadingHandler();
     });
   }
 
@@ -450,6 +451,8 @@ class CornerstoneViewport extends Component {
         isTouchActive: true
       });
     }
+    
+    cornerstone.resize(this.element);
   }
 
   setActiveTool = activeTool => {

Packages/ohif-viewerbase/client/components/viewer/GridLayout/GridLayout.js

@@ -83,9 +83,7 @@ class GridLayout extends Component {
             };
 
             const cornerstoneViewport = (data) => (
-                <div className="removable">
+                <CornerstoneViewport viewportData={data}/>
-                    <CornerstoneViewport viewportData={data}/>
-                </div>
             );
 
             const pluginViewport = (data) => (
@@ -107,10 +105,8 @@ class GridLayout extends Component {
         const layoutClass = `layout-${rows}-${columns}`;
 
         return (
-            <div id='imageViewerViewports'>
+            <div id='imageViewerViewports' className={layoutClass}>
-                <div id='layoutManagerTarget' className={layoutClass}>
                 { viewports }
-                </div>
             </div>
         )
     }

Packages/ohif-viewerbase/client/components/viewer/ViewerMain/ViewerMain.styl

@@ -12,31 +12,23 @@
 .viewerMain
   width: 100%
   height: 100%
+  transition(all 0.3s ease)
 
-  #layoutManagerTarget
+  #imageViewerViewports
-    width: 100%
+    .viewportContainer
-    height: 100%
+      theme('border', '%s solid $uiBorderColorDark' % $viewportBorderThickness)
-    transition(all 0.3s ease)
+      float: left
+      position: relative
 
-    #imageViewerViewports
+      outline: 0 // Prevent blue outline in Chrome
-      .viewportContainer
-        theme('border', '%s solid $uiBorderColorDark' % $viewportBorderThickness)
-        float: left
 
+      &:hover
+      &.active
+      &:hover.active
         outline: 0 // Prevent blue outline in Chrome
 
-        &:hover
+      &:hover
-        &.active
+        theme('border', '%s solid $uiBorderColor' % $viewportBorderThickness)
-        &:hover.active
-          outline: 0 // Prevent blue outline in Chrome
 
-        &:hover
+      &.active, &:hover.active
-          theme('border', '%s solid $uiBorderColor' % $viewportBorderThickness)
+        theme('border', '%s solid $uiBorderColorActive' % $viewportBorderThickness)
-
-        &.active, &:hover.active
-          theme('border', '%s solid $uiBorderColorActive' % $viewportBorderThickness)
-
-        .removable
-          width: 100%
-          height: 100%
-          position: relative // Necessary so that the viewportOverlay is on top of the viewports

StandaloneViewer/StandaloneViewer/client/components/standaloneViewerMain/standaloneViewerMain.styl

@@ -3,33 +3,24 @@
 .viewerMain
   width: 100%
   height: 100%
+  transition(all 0.3s ease)
 
-  #layoutManagerTarget
+  #imageViewerViewports
-    width: 100%
+    padding-right: 0 !important // Top remove odd borders from non-existant right Sidebar
-    height: 100%
-    transition(all 0.3s ease)
 
-    #imageViewerViewports
+    .viewportContainer
-      padding-right: 0 !important // Top remove odd borders from non-existant right Sidebar
+      theme('border', '%s solid $uiBorderColorDark' % $viewportBorderThickness)
+      float: left
 
-      .viewportContainer
+      outline: 0 // Prevent blue outline in Chrome
-        theme('border', '%s solid $uiBorderColorDark' % $viewportBorderThickness)
-        float: left
 
+      &:hover
+      &.active
+      &:hover.active
         outline: 0 // Prevent blue outline in Chrome
 
-        &:hover
+      &:hover
-        &.active
+        theme('border', '%s solid $uiBorderColor' % $viewportBorderThickness)
-        &:hover.active
-          outline: 0 // Prevent blue outline in Chrome
 
-        &:hover
+      &.active, &:hover.active
-          theme('border', '%s solid $uiBorderColor' % $viewportBorderThickness)
+        theme('border', '%s solid $uiBorderColorActive' % $viewportBorderThickness)
-
-        &.active, &:hover.active
-          theme('border', '%s solid $uiBorderColorActive' % $viewportBorderThickness)
-
-        .removable
-          width: 100%
-          height: 100%
-          position: relative // Necessary so that the viewportOverlay is on top of the viewports

config/orthancDIMSE.json

@@ -37,7 +37,7 @@
         "displaySetNavigationLoopOverSeries": false,
         "displaySetNavigationMultipleViewports": true,
         "autoPositionMeasurementsTextCallOuts": "TRLB",
-        "studyListDateFilterNumDays": 1
+        "studyListDateFilterNumDays": 10000
     }
   }
 }