othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip on react transition 3

Browse Source
This commit is contained in:
Erik Ziegler 2018-11-30 15:23:59 -05:00
parent f821ea2b80
commit 895fb01a02
8 changed files with 60 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
LesionTracker/client/components/viewer/viewer.styl
View File

@ -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

2
OHIFViewer/client/components/flexboxLayout/flexboxLayout.styl
View File

@ -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

1
Packages/ohif-viewerbase/client/components/viewer/CornerstoneViewport.css
View File

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

15
Packages/ohif-viewerbase/client/components/viewer/CornerstoneViewport.js
View File

@ -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 => {

8
Packages/ohif-viewerbase/client/components/viewer/GridLayout/GridLayout.js
View File

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

36
Packages/ohif-viewerbase/client/components/viewer/ViewerMain/ViewerMain.styl
View File

@ -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)

37
StandaloneViewer/StandaloneViewer/client/components/standaloneViewerMain/standaloneViewerMain.styl
View File

@ -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)

2
config/orthancDIMSE.json
View File

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