From 895fb01a0221124bac2e49dc3cc88a5ac4370b64 Mon Sep 17 00:00:00 2001 From: Erik Ziegler Date: Fri, 30 Nov 2018 15:23:59 -0500 Subject: [PATCH] wip on react transition 3 --- .../client/components/viewer/viewer.styl | 41 ++++++++----------- .../flexboxLayout/flexboxLayout.styl | 2 +- .../components/viewer/CornerstoneViewport.css | 1 + .../components/viewer/CornerstoneViewport.js | 15 ++++--- .../viewer/GridLayout/GridLayout.js | 8 +--- .../viewer/ViewerMain/ViewerMain.styl | 36 +++++++--------- .../standaloneViewerMain.styl | 37 +++++++---------- config/orthancDIMSE.json | 2 +- 8 files changed, 60 insertions(+), 82 deletions(-) diff --git a/LesionTracker/client/components/viewer/viewer.styl b/LesionTracker/client/components/viewer/viewer.styl index 13037282e..aa0e9dbfa 100644 --- a/LesionTracker/client/components/viewer/viewer.styl +++ b/LesionTracker/client/components/viewer/viewer.styl @@ -17,39 +17,34 @@ border: none !important outline: 0 !important // Prevent blue outline in Chrome - .removable - .imageViewerViewport - theme('border-bottom', '%s solid $uiBorderColor' % $uiBorderThickness) + .imageViewerViewport + theme('border-bottom', '%s solid $uiBorderColor' % $uiBorderThickness) - canvas - border-color: transparent - border-style: solid - border-width: 1px + canvas + border-color: transparent + border-style: solid + border-width: 1px &:not(:last-child) - .removable .imageViewerViewport theme('border-right', '%s solid $uiBorderColor' % $uiBorderThickness) &:first-child - .removable - .imageViewerViewport - theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness) + .imageViewerViewport + theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness) &.active - .removable - .imageViewerViewport - border-right: none !important + .imageViewerViewport + border-right: none !important - canvas - theme('border-color', '$uiBorderColorActive') + canvas + theme('border-color', '$uiBorderColorActive') .sidebar-left-open - #layoutManagerTarget - #imageViewerViewports - .viewportContainer - &:first-child - .removable - .imageViewerViewport - border-left: none + #imageViewerViewports + .viewportContainer + &:first-child + .removable + .imageViewerViewport + border-left: none diff --git a/OHIFViewer/client/components/flexboxLayout/flexboxLayout.styl b/OHIFViewer/client/components/flexboxLayout/flexboxLayout.styl index 5e960717a..1617f5875 100644 --- a/OHIFViewer/client/components/flexboxLayout/flexboxLayout.styl +++ b/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 diff --git a/Packages/ohif-viewerbase/client/components/viewer/CornerstoneViewport.css b/Packages/ohif-viewerbase/client/components/viewer/CornerstoneViewport.css index b66d1c38a..c8838e0ec 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/CornerstoneViewport.css +++ b/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 */ } diff --git a/Packages/ohif-viewerbase/client/components/viewer/CornerstoneViewport.js b/Packages/ohif-viewerbase/client/components/viewer/CornerstoneViewport.js index 0b6101b06..7197f5a83 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/CornerstoneViewport.js +++ b/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.setEndLoadHandler(this.doneLoadingHandler); + //loadHandlerManager.setStartLoadHandler(this.startLoadingHandler); + //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 => { diff --git a/Packages/ohif-viewerbase/client/components/viewer/GridLayout/GridLayout.js b/Packages/ohif-viewerbase/client/components/viewer/GridLayout/GridLayout.js index e238d061c..4d2478f30 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/GridLayout/GridLayout.js +++ b/Packages/ohif-viewerbase/client/components/viewer/GridLayout/GridLayout.js @@ -83,9 +83,7 @@ class GridLayout extends Component { }; const cornerstoneViewport = (data) => ( -
- -
+ ); const pluginViewport = (data) => ( @@ -107,10 +105,8 @@ class GridLayout extends Component { const layoutClass = `layout-${rows}-${columns}`; return ( -
-
+
{ viewports } -
) } diff --git a/Packages/ohif-viewerbase/client/components/viewer/ViewerMain/ViewerMain.styl b/Packages/ohif-viewerbase/client/components/viewer/ViewerMain/ViewerMain.styl index d0516b87c..4d60f87f9 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/ViewerMain/ViewerMain.styl +++ b/Packages/ohif-viewerbase/client/components/viewer/ViewerMain/ViewerMain.styl @@ -12,31 +12,23 @@ .viewerMain width: 100% height: 100% + transition(all 0.3s ease) - #layoutManagerTarget - width: 100% - height: 100% - transition(all 0.3s ease) + #imageViewerViewports + .viewportContainer + theme('border', '%s solid $uiBorderColorDark' % $viewportBorderThickness) + float: left + position: relative - #imageViewerViewports - .viewportContainer - theme('border', '%s solid $uiBorderColorDark' % $viewportBorderThickness) - float: left + outline: 0 // Prevent blue outline in Chrome + &:hover + &.active + &:hover.active outline: 0 // Prevent blue outline in Chrome - &:hover - &.active - &:hover.active - outline: 0 // Prevent blue outline in Chrome + &:hover + theme('border', '%s solid $uiBorderColor' % $viewportBorderThickness) - &:hover - theme('border', '%s solid $uiBorderColor' % $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 + &.active, &:hover.active + theme('border', '%s solid $uiBorderColorActive' % $viewportBorderThickness) diff --git a/StandaloneViewer/StandaloneViewer/client/components/standaloneViewerMain/standaloneViewerMain.styl b/StandaloneViewer/StandaloneViewer/client/components/standaloneViewerMain/standaloneViewerMain.styl index f7aec7c0d..3274ae1ad 100644 --- a/StandaloneViewer/StandaloneViewer/client/components/standaloneViewerMain/standaloneViewerMain.styl +++ b/StandaloneViewer/StandaloneViewer/client/components/standaloneViewerMain/standaloneViewerMain.styl @@ -3,33 +3,24 @@ .viewerMain width: 100% height: 100% + transition(all 0.3s ease) - #layoutManagerTarget - width: 100% - height: 100% - transition(all 0.3s ease) + #imageViewerViewports + padding-right: 0 !important // Top remove odd borders from non-existant right Sidebar - #imageViewerViewports - padding-right: 0 !important // Top remove odd borders from non-existant right Sidebar + .viewportContainer + theme('border', '%s solid $uiBorderColorDark' % $viewportBorderThickness) + float: left - .viewportContainer - theme('border', '%s solid $uiBorderColorDark' % $viewportBorderThickness) - float: left + outline: 0 // Prevent blue outline in Chrome + &:hover + &.active + &:hover.active outline: 0 // Prevent blue outline in Chrome - &:hover - &.active - &:hover.active - outline: 0 // Prevent blue outline in Chrome + &:hover + theme('border', '%s solid $uiBorderColor' % $viewportBorderThickness) - &:hover - theme('border', '%s solid $uiBorderColor' % $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 + &.active, &:hover.active + theme('border', '%s solid $uiBorderColorActive' % $viewportBorderThickness) diff --git a/config/orthancDIMSE.json b/config/orthancDIMSE.json index eeaafd64f..7f77cbcd6 100644 --- a/config/orthancDIMSE.json +++ b/config/orthancDIMSE.json @@ -37,7 +37,7 @@ "displaySetNavigationLoopOverSeries": false, "displaySetNavigationMultipleViewports": true, "autoPositionMeasurementsTextCallOuts": "TRLB", - "studyListDateFilterNumDays": 1 + "studyListDateFilterNumDays": 10000 } } }