Please drag a stack here to view images.
diff --git a/Packages/ohif-viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js b/Packages/ohif-viewerbase/client/components/viewer/CornerstoneViewport/imageViewerViewport.js
similarity index 100%
rename from Packages/ohif-viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js
rename to Packages/ohif-viewerbase/client/components/viewer/CornerstoneViewport/imageViewerViewport.js
diff --git a/Packages/ohif-viewerbase/client/components/viewer/GridLayout/GridLayout.js b/Packages/ohif-viewerbase/client/components/viewer/GridLayout/GridLayout.js
index 4d2478f30..7a99f3018 100644
--- a/Packages/ohif-viewerbase/client/components/viewer/GridLayout/GridLayout.js
+++ b/Packages/ohif-viewerbase/client/components/viewer/GridLayout/GridLayout.js
@@ -2,7 +2,7 @@ import { Component } from 'react';
import React from 'react';
import PropTypes from 'prop-types';
import { OHIF } from 'meteor/ohif:core';
-import CornerstoneViewport from '../CornerstoneViewport.js';
+import CornerstoneViewport from '../CornerstoneViewport/CornerstoneViewport.js';
import './GridLayout.styl';
const TOP_CLASS = 'top';
diff --git a/Packages/ohif-viewerbase/client/components/viewer/ImageScrollbar.css b/Packages/ohif-viewerbase/client/components/viewer/ImageScrollbar.css
deleted file mode 100644
index 437a02aac..000000000
--- a/Packages/ohif-viewerbase/client/components/viewer/ImageScrollbar.css
+++ /dev/null
@@ -1,49 +0,0 @@
-@value globals: "../GlobalStyles.css";
-@value activeColor, imageSliderColor from globals;
-
-.scroll {
- position: absolute;
- top: 0;
- right: 0;
- width: 15px;
- height: 100%;
- z-index: 2;
-}
-
-.scroll .scroll-holder {
- position: relative;
- height: 100%;
-}
-
-.scroll > .scroll-holder > .imageSlider {
- transform: rotate(90deg);
- transform-origin: top left;
- position: absolute;
- width: 100%; /* Note: This width does not have an effect. */
- margin-left: 10px;
- -webkit-appearance: none;
- background-color: rgba(0, 0, 0, 0);
- outline: none;
-}
-
-input.imageSlider:focus {
- outline: none;
-}
-
-input.imageSlider::-moz-focus-outer {
- border: none;
-}
-
-input.imageSlider::-webkit-slider-thumb {
- cursor: -webkit-grab;
- background: imageSliderColor;
- -webkit-appearance: none;
- width: 45px;
- height: 20px;
- border-radius: 10px;
-}
-
-input.imageSlider::-webkit-slider-thumb:active {
- background: activeColor;
- cursor: -webkit-grabbing;
-}
diff --git a/Packages/ohif-viewerbase/client/components/viewer/ImageScrollbar.js b/Packages/ohif-viewerbase/client/components/viewer/ImageScrollbar/ImageScrollbar.js
similarity index 60%
rename from Packages/ohif-viewerbase/client/components/viewer/ImageScrollbar.js
rename to Packages/ohif-viewerbase/client/components/viewer/ImageScrollbar/ImageScrollbar.js
index 3d5f09f73..a7a74dab0 100644
--- a/Packages/ohif-viewerbase/client/components/viewer/ImageScrollbar.js
+++ b/Packages/ohif-viewerbase/client/components/viewer/ImageScrollbar/ImageScrollbar.js
@@ -1,13 +1,14 @@
import { Component } from 'react';
import React from 'react';
-import './ImageScrollbar.css';
import PropTypes from 'prop-types';
+import './ImageScrollbar.styl';
class ImageScrollbar extends Component {
constructor(props) {
super(props);
this.onChange = this.onChange.bind(this);
+ this.onKeyDown = this.onKeyDown.bind(this);
}
render() {
@@ -27,6 +28,7 @@ class ImageScrollbar extends Component {
step="1"
value={this.props.value}
onChange={this.onChange}
+ onKeyDown={this.onKeyDown}
/>
@@ -37,6 +39,25 @@ class ImageScrollbar extends Component {
const intValue = parseInt(event.target.value, 10);
this.props.onInputCallback(intValue);
}
+
+ onKeyDown(event) {
+ // We don't allow direct keyboard up/down input on the
+ // image sliders since the natural direction is reversed (0 is at the top)
+
+ // Store the KeyCodes in an object for readability
+ const keys = {
+ DOWN: 40,
+ UP: 38
+ };
+
+ if (event.which === keys.DOWN) {
+ OHIF.commands.run('scrollDown');
+ event.preventDefault();
+ } else if (event.which === keys.UP) {
+ OHIF.commands.run('scrollUp');
+ event.preventDefault();
+ }
+ }
}
ImageScrollbar.propTypes = {
diff --git a/Packages/ohif-viewerbase/client/components/viewer/imageControls/imageControls.styl b/Packages/ohif-viewerbase/client/components/viewer/ImageScrollbar/ImageScrollbar.styl
similarity index 99%
rename from Packages/ohif-viewerbase/client/components/viewer/imageControls/imageControls.styl
rename to Packages/ohif-viewerbase/client/components/viewer/ImageScrollbar/ImageScrollbar.styl
index 8eb4a372b..460cff602 100644
--- a/Packages/ohif-viewerbase/client/components/viewer/imageControls/imageControls.styl
+++ b/Packages/ohif-viewerbase/client/components/viewer/ImageScrollbar/ImageScrollbar.styl
@@ -8,14 +8,14 @@ $imageSliderBorder = none
$imageSliderWidth = 12px
$imageSliderHeight = 39px
-.imageControls
+.scroll
height: 100%
padding: 5px
position: absolute
right: 0
top: 0
- .scrollbar
+ .scroll-holder
height: calc(100% - 20px)
margin-top: 5px
position: relative
diff --git a/Packages/ohif-viewerbase/client/components/viewer/ToolContextMenu.css b/Packages/ohif-viewerbase/client/components/viewer/ToolContextMenu/ToolContextMenu.css
similarity index 100%
rename from Packages/ohif-viewerbase/client/components/viewer/ToolContextMenu.css
rename to Packages/ohif-viewerbase/client/components/viewer/ToolContextMenu/ToolContextMenu.css
diff --git a/Packages/ohif-viewerbase/client/components/viewer/ToolContextMenu.js b/Packages/ohif-viewerbase/client/components/viewer/ToolContextMenu/ToolContextMenu.js
similarity index 99%
rename from Packages/ohif-viewerbase/client/components/viewer/ToolContextMenu.js
rename to Packages/ohif-viewerbase/client/components/viewer/ToolContextMenu/ToolContextMenu.js
index 60cd3183e..de6e1f24b 100644
--- a/Packages/ohif-viewerbase/client/components/viewer/ToolContextMenu.js
+++ b/Packages/ohif-viewerbase/client/components/viewer/ToolContextMenu/ToolContextMenu.js
@@ -1,6 +1,5 @@
import { Component } from 'react';
import React from 'react';
-import './ViewportOverlay.css';
/*import * as cornerstone from 'cornerstone-core';
import * as cornerstoneTools from 'cornerstone-tools';*/
import { cornerstone, cornerstoneTools } from 'meteor/ohif:cornerstone';
diff --git a/Packages/ohif-viewerbase/client/components/viewer/toolContextMenu/toolContextMenu.js b/Packages/ohif-viewerbase/client/components/viewer/ToolContextMenu/toolContextMenu-blz.js
similarity index 100%
rename from Packages/ohif-viewerbase/client/components/viewer/toolContextMenu/toolContextMenu.js
rename to Packages/ohif-viewerbase/client/components/viewer/ToolContextMenu/toolContextMenu-blz.js
diff --git a/Packages/ohif-viewerbase/client/components/viewer/ViewportOverlay.css b/Packages/ohif-viewerbase/client/components/viewer/ViewportOverlay.css
deleted file mode 100644
index 6774e18f0..000000000
--- a/Packages/ohif-viewerbase/client/components/viewer/ViewportOverlay.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.ViewportOverlay {
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0px;
- left: 0px;
- z-index: 2;
-}
-
-.ViewportOverlay .overlay-element {
- position: absolute;
- color: lightblue;
- text-shadow: 1px 1px black;
-}
-
-.ViewportOverlay .overlay-element > span {
- display: block;
-}
-
-.ViewportOverlay .top-right {
- top: 10px;
- right: 25px; /* room for scrollbar */
-}
-
-.ViewportOverlay .top-left {
- top: 10px;
- left: 10px;
-}
-
-.ViewportOverlay .bottom-right {
- bottom: 10px;
- right: 30px;
-}
-
-.ViewportOverlay .bottom-left {
- bottom: 10px;
- left: 10px;
-}
diff --git a/Packages/ohif-viewerbase/client/components/viewer/ViewportOverlay.js b/Packages/ohif-viewerbase/client/components/viewer/ViewportOverlay/ViewportOverlay.js
similarity index 98%
rename from Packages/ohif-viewerbase/client/components/viewer/ViewportOverlay.js
rename to Packages/ohif-viewerbase/client/components/viewer/ViewportOverlay/ViewportOverlay.js
index 2cff973fa..39f31c01c 100644
--- a/Packages/ohif-viewerbase/client/components/viewer/ViewportOverlay.js
+++ b/Packages/ohif-viewerbase/client/components/viewer/ViewportOverlay/ViewportOverlay.js
@@ -1,7 +1,7 @@
import { Component } from 'react';
import React from 'react';
-import './ViewportOverlay.css';
import PropTypes from 'prop-types';
+import './ViewportOverlay.styl';
class ViewportOverlay extends Component {
render() {
diff --git a/Packages/ohif-viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.styl b/Packages/ohif-viewerbase/client/components/viewer/ViewportOverlay/ViewportOverlay.styl
similarity index 88%
rename from Packages/ohif-viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.styl
rename to Packages/ohif-viewerbase/client/components/viewer/ViewportOverlay/ViewportOverlay.styl
index 0ca7c9173..ed3fe101d 100644
--- a/Packages/ohif-viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.styl
+++ b/Packages/ohif-viewerbase/client/components/viewer/ViewportOverlay/ViewportOverlay.styl
@@ -8,40 +8,36 @@ $viewportTagPadding = 20px
.imageViewerViewportOverlay
theme('color', '$textSecondaryColor')
- .dicomTag
+ .overlay-element
position: absolute
font-weight: 400
text-shadow: 1px 1px black
pointer-events: none
- .topleft
+ .top-left
top: $viewportTagPadding
left: $viewportTagPadding
- .topcenter
+ .top-center
top: $viewportTagPadding
padding-top: $viewportTagPadding
width: 100%
text-align: center
- .topright
+ .top-right
top: $viewportTagPadding
right: $viewportTagPadding
text-align: right
- .bottomleft
+ .bottom-left
bottom: $viewportTagPadding
left: $viewportTagPadding
- .bottomright
+ .bottom-right
bottom: $viewportTagPadding
right: $viewportTagPadding
text-align: right
- .priorIndicator
- font-weight: bold
- color: yellow
-
&.controlsVisible
.topright, .bottomright
right: "calc(%s + 19px)" % $viewportTagPadding
diff --git a/Packages/ohif-viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.js b/Packages/ohif-viewerbase/client/components/viewer/ViewportOverlay/viewportOverlay-blz.js
similarity index 84%
rename from Packages/ohif-viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.js
rename to Packages/ohif-viewerbase/client/components/viewer/ViewportOverlay/viewportOverlay-blz.js
index d41fa7144..f80cfe136 100644
--- a/Packages/ohif-viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.js
+++ b/Packages/ohif-viewerbase/client/components/viewer/ViewportOverlay/viewportOverlay-blz.js
@@ -242,39 +242,4 @@ Template.viewportOverlay.helpers({
return stack.imageIds.length;
},
-
- prior() {
- // This helper is updated whenever a new image is displayed in the viewport
- Session.get('CornerstoneNewImage' + this.viewportIndex);
-
- if (!this.imageId) {
- return;
- }
-
- // @TypeSafeStudies
- // Make sure there are more than two studies loaded in the viewer
- const viewportStudies = OHIF.viewer.Studies.all();
- if (viewportStudies.length < 2) {
- return;
- }
-
- // Here we sort the collection in ascending order by study date, so
- // that we can obtain the oldest study as the first element of the array
- //
- // TODO= Find out if we should encode studyDate as a Date in the OHIF.viewer.Studies Collection
- const viewportStudiesArray = _.sortBy(viewportStudies, function(study) {
- return viewportOverlayUtils.formatDateTime(study.studyDate, study.studyTime);
- });
-
- // Get study data
- const study = cornerstone.metaData.get('study', this.imageId);
- if (!study) {
- return;
- }
-
- const oldestStudy = viewportStudiesArray[0];
- if (viewportOverlayUtils.formatDateTime(study.studyDate, study.studyTime) <= viewportOverlayUtils.formatDateTime(oldestStudy.studyDate, oldestStudy.studyTime)) {
- return 'Prior';
- }
- }
});
diff --git a/Packages/ohif-viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.html b/Packages/ohif-viewerbase/client/components/viewer/ViewportOverlay/viewportOverlay.html
similarity index 95%
rename from Packages/ohif-viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.html
rename to Packages/ohif-viewerbase/client/components/viewer/ViewportOverlay/viewportOverlay.html
index 590c90fac..67e7c5377 100644
--- a/Packages/ohif-viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.html
+++ b/Packages/ohif-viewerbase/client/components/viewer/ViewportOverlay/viewportOverlay.html
@@ -4,7 +4,6 @@
{{studyDescription}}
@@ -33,7 +32,6 @@
{{formatPN patientName}}
{{patientId}}
-
{{prior}}
{{studyDescription}}
{{formatDA studyDate}} {{formatTM studyTime}}
@@ -53,7 +51,6 @@
{{formatPN patientName}}
{{patientId}}
-
{{prior}}
{{studyDescription}}
{{formatDA studyDate}} {{formatTM studyTime}}
diff --git a/Packages/ohif-viewerbase/client/components/viewer/imageControls/imageControls.html b/Packages/ohif-viewerbase/client/components/viewer/imageControls/imageControls.html
deleted file mode 100644
index 0264889e4..000000000
--- a/Packages/ohif-viewerbase/client/components/viewer/imageControls/imageControls.html
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-
diff --git a/Packages/ohif-viewerbase/client/components/viewer/imageControls/imageControls.js b/Packages/ohif-viewerbase/client/components/viewer/imageControls/imageControls.js
deleted file mode 100644
index 8d05fe3de..000000000
--- a/Packages/ohif-viewerbase/client/components/viewer/imageControls/imageControls.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import { Template } from 'meteor/templating';
-import { $ } from 'meteor/jquery';
-import { _ } from 'meteor/underscore';
-import { OHIF } from 'meteor/ohif:core';
-import { setActiveViewport } from '../../../lib/setActiveViewport';
-import { switchToImageByIndex } from '../../../lib/switchToImageByIndex';
-
-import { Component } from 'react';
-import React from 'react';
-
-
-const slideTimeoutTime = 40;
-let slideTimeout;
-
-Template.imageControls.onRendered(() => {
- const instance = Template.instance();
-
- // Set the current imageSlider width to its parent's height
- // (because webkit is stupid and can't style vertical sliders)
- const $slider = instance.$('.imageSlider');
- const $viewport = $slider.closest('.imageViewerViewportOverlay').siblings('.imageViewerViewport');
-
- instance.handleResize = _.throttle(() => {
- const viewportHeight = $viewport.height();
- $slider.width(viewportHeight - 20);
- }, 150);
-
- instance.handleResize();
-
- $(window).on('resize', instance.handleResize);
-});
-
-Template.imageControls.onDestroyed(() => {
- const instance = Template.instance();
- if (instance.handleResize) {
- $(window).off('resize', instance.handleResize);
- }
-});
-
-Template.imageControls.events({
- 'rescale .scrollbar'(event, instance) {
- instance.handleResize();
- },
-
- 'keydown input[type=range]'(event) {
- // We don't allow direct keyboard up/down input on the
- // image sliders since the natural direction is reversed (0 is at the top)
-
- // Store the KeyCodes in an object for readability
- const keys = {
- DOWN: 40,
- UP: 38
- };
-
- if (event.which === keys.DOWN) {
- OHIF.commands.run('scrollDown');
- event.preventDefault();
- } else if (event.which === keys.UP) {
- OHIF.commands.run('scrollUp');
- event.preventDefault();
- }
- },
-
- 'input input[type=range], change input[type=range]'(event) {
- // Note that we throttle requests to prevent the
- // user's ultrafast scrolling from firing requests too quickly.
- clearTimeout(slideTimeout);
- slideTimeout = setTimeout(() => {
- // Using the slider in an inactive viewport
- // should cause that viewport to become active
- const $slider = $(event.currentTarget);
- const viewportContainer = $slider.parents('.viewportContainer');
- setActiveViewport(viewportContainer);
-
- // Subtract 1 here since the slider goes from 1 to N images
- // But the stack indexing starts at 0
- const newImageIdIndex = parseInt($slider.val(), 10) - 1;
- switchToImageByIndex(newImageIdIndex);
- }, slideTimeoutTime);
-
- return false;
- }
-});
diff --git a/Packages/ohif-viewerbase/client/components/viewer/index.js b/Packages/ohif-viewerbase/client/components/viewer/index.js
index a4211a478..8b2211e01 100644
--- a/Packages/ohif-viewerbase/client/components/viewer/index.js
+++ b/Packages/ohif-viewerbase/client/components/viewer/index.js
@@ -1,10 +1,11 @@
import ViewerMain from './ViewerMain/ViewerMain.js';
import GridLayout from './GridLayout/GridLayout.js';
import LoadingIndicator from './LoadingIndicator/LoadingIndicator.js';
-import CornerstoneViewport from './CornerstoneViewport.js';
-import ImageScrollbar from './ImageScrollbar.js';
-import ToolContextMenu from './ToolContextMenu.js';
-import ViewportOverlay from './ViewportOverlay.js';
+import CornerstoneViewport from './CornerstoneViewport/CornerstoneViewport.js';
+import ImageScrollbar from './ImageScrollbar/ImageScrollbar.js';
+import ToolContextMenu from './ToolContextMenu/ToolContextMenu.js';
+import ViewportOverlay from './ViewportOverlay/ViewportOverlay.js';
+import ViewportOrientationMarkers from './ViewportOrientationMarkers/ViewportOrientationMarkers.js';
const viewer = {
ViewerMain,
@@ -14,7 +15,6 @@ const viewer = {
ImageScrollbar,
ToolContextMenu,
ViewportOverlay,
- test: 'test2'
};
export default viewer;
diff --git a/Packages/ohif-viewerbase/package.js b/Packages/ohif-viewerbase/package.js
index 0882524ba..b70e5c3cd 100644
--- a/Packages/ohif-viewerbase/package.js
+++ b/Packages/ohif-viewerbase/package.js
@@ -121,26 +121,10 @@ Package.onUse(function(api) {
api.addFiles('client/components/studyBrowser/imageThumbnail/imageThumbnail.styl', 'client');
// Viewer components
- api.addFiles('client/components/viewer/imageViewerViewport/imageViewerViewport.html', 'client');
- api.addFiles('client/components/viewer/imageViewerViewport/imageViewerViewport.js', 'client');
- api.addFiles('client/components/viewer/imageViewerViewport/imageViewerViewport.styl', 'client');
-
api.addFiles('client/components/viewer/annotationDialogs/annotationDialogs.html', 'client');
api.addFiles('client/components/viewer/annotationDialogs/annotationDialogs.js', 'client');
api.addFiles('client/components/viewer/annotationDialogs/annotationDialogs.styl', 'client');
- api.addFiles('client/components/viewer/viewportOrientationMarkers/viewportOrientationMarkers.styl', 'client');
-
- api.addFiles('client/components/viewer/viewportOverlay/viewportOverlay.html', 'client');
- api.addFiles('client/components/viewer/viewportOverlay/viewportOverlay.js', 'client');
- api.addFiles('client/components/viewer/viewportOverlay/viewportOverlay.styl', 'client');
-
- api.addFiles('client/components/viewer/toolContextMenu/toolContextMenu.js', 'client');
-
- api.addFiles('client/components/viewer/imageControls/imageControls.html', 'client');
- api.addFiles('client/components/viewer/imageControls/imageControls.js', 'client');
- api.addFiles('client/components/viewer/imageControls/imageControls.styl', 'client');
-
api.addFiles('client/components/viewer/layoutButton/layoutButton.html', 'client');
api.addFiles('client/components/viewer/layoutButton/layoutButton.js', 'client');