diff --git a/Packages/lesiontracker/lib/resizeViewportElements.js b/Packages/lesiontracker/lib/resizeViewportElements.js
index a71fe507c..16efe4b30 100644
--- a/Packages/lesiontracker/lib/resizeViewportElements.js
+++ b/Packages/lesiontracker/lib/resizeViewportElements.js
@@ -4,6 +4,20 @@ resizeViewportElements = function() {
var elements = $('.imageViewerViewport').not('.empty');
elements.each(function(index, element) {
cornerstone.resize(element, true);
+
+ // TODO= Refactor this into separate scrollbar resize function
+ var currentOverlay = $(element).siblings('.imageViewerViewportOverlay');
+ var imageControls = currentOverlay.find('.imageControls');
+ currentOverlay.find('.imageControls').height($(element).height());
+
+ // Set it's width to its parent's height
+ // (because webkit is stupid and can't style vertical sliders)
+ var scrollbar = currentOverlay.find('#scrollbar');
+ scrollbar.height(scrollbar.parent().height() - 20);
+
+ var currentImageSlider = currentOverlay.find('#imageSlider');
+ var overlayHeight = currentImageSlider.parent().height();
+ currentImageSlider.width(overlayHeight);
});
}, 1);
};
\ No newline at end of file
diff --git a/Packages/viewerbase/client/components/viewer/imageControls/imageControls.html b/Packages/viewerbase/client/components/viewer/imageControls/imageControls.html
new file mode 100644
index 000000000..8dd8ced6a
--- /dev/null
+++ b/Packages/viewerbase/client/components/viewer/imageControls/imageControls.html
@@ -0,0 +1,7 @@
+
+
+
\ No newline at end of file
diff --git a/Packages/viewerbase/client/components/viewer/imageControls/imageControls.js b/Packages/viewerbase/client/components/viewer/imageControls/imageControls.js
new file mode 100644
index 000000000..d64331723
--- /dev/null
+++ b/Packages/viewerbase/client/components/viewer/imageControls/imageControls.js
@@ -0,0 +1,14 @@
+Template.imageControls.events({
+ 'input #imageSlider': function(e) {
+ // Using the slider in an inactive viewport
+ // should cause that viewport to become active
+ var slider = $(e.currentTarget);
+ var newActiveElement = slider.parents().eq(2).siblings('.imageViewerViewport').get(0);
+ setActiveViewport(newActiveElement);
+
+ // Subtract 1 here since the slider goes from 1 to N images
+ // But the stack indexing starts at 0
+ var newImageIdIndex = parseInt(slider.val(), 10) - 1;
+ switchToImageByIndex(newImageIdIndex);
+ }
+});
diff --git a/Packages/viewerbase/client/components/viewer/imageControls/imageControls.styl b/Packages/viewerbase/client/components/viewer/imageControls/imageControls.styl
new file mode 100644
index 000000000..f90696f59
--- /dev/null
+++ b/Packages/viewerbase/client/components/viewer/imageControls/imageControls.styl
@@ -0,0 +1,103 @@
+.imageControls
+ position: absolute
+ top: 0
+ right: 0
+ height: 100%
+ padding: 5px
+
+ #scrollbar
+ margin-top: 5px
+ width: 31px
+
+ #imageSlider
+ height: 2px
+ position: absolute
+ left: 20px
+
+ -webkit-appearance: none
+
+ transform: rotate(90deg)
+ -webkit-transform: rotate(90deg)
+ -moz-transform :rotate(90deg)
+ -o-transform: rotate(90deg)
+ -ms-transform: rotate(90deg)
+
+ transform-origin: top left
+ -webkit-transform-origin: top left
+ -moz-transform-origin: top left
+ -o-transform-origin: top left
+ -ms-transform-origin: top left
+
+ // Remove focus highlights on range input
+ &:focus
+ outline: none
+ -moz-box-shadow: none
+ -webkit-box-shadow: none
+ box-shadow: none
+
+ // Remove focus border in Firefox
+ &::-moz-focus-outer
+ border: none
+
+ // --- Style the range track --- //
+ &::-webkit-slider-runnable-track
+ height: 2px
+ border: 2px solid #bdc3c7
+ background-color: darkgrey
+ z-index: 6
+
+ &::-moz-range-track
+ height: 1px
+ border: 1px solid #bdc3c7
+ background-color: darkgrey
+ z-index: 6
+
+ &::-ms-track
+ height: 2px
+ border: 1px solid #bdc3c7
+ background-color: darkgrey
+ z-index: 6
+
+ // Hide any fill IE tries to add
+ &::-ms-fill-lower
+ background: transparent
+
+ &::-ms-fill-upper
+ background: transparent
+
+ // --- Style the range thumb --- //
+ &::-webkit-slider-thumb
+ -webkit-appearance: none !important
+ background-color: rgb(169, 169, 169)
+ border: 2px solid rgb(169, 169, 169)
+ border-radius: 2px
+ height: 15px
+ width: 25px
+ cursor: pointer
+ margin-top: -7px
+
+ &:active
+ background-color: rgb(34, 126, 163)
+
+ &::-moz-range-thumb
+ background-color: rgb(169, 169, 169)
+ border: 2px solid rgb(169, 169, 169)
+ border-radius: 2px
+ height: 11px
+ width: 20px
+ cursor: pointer
+ z-index: 7
+
+ &:active
+ background-color: rgb(34, 126, 163)
+
+ &::-ms-thumb
+ background-color: rgb(169, 169, 169)
+ border: 2px solid rgb(169, 169, 169)
+ border-radius: 2px
+ height: 11px
+ width: 20px
+ cursor: pointer
+
+ &:active
+ background-color: rgb(34, 126, 163)
\ No newline at end of file
diff --git a/Packages/viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js b/Packages/viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js
index 7c1ad0f42..a05319b8b 100644
--- a/Packages/viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js
+++ b/Packages/viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js
@@ -74,8 +74,34 @@ function loadSeriesIntoViewport(data, templateData) {
imageIds: imageIds
};
+ // Show or hide the image scrollbar depending
+ // on the number of images in the stack
+ var currentOverlay = $(element).siblings('.imageViewerViewportOverlay');
+ var imageControls = currentOverlay.find('.imageControls');
+ currentOverlay.find('.imageControls').height($(element).height());
+
+ if (stack.imageIds.length === 1) {
+ imageControls.hide();
+ currentOverlay.find('.topright, .bottomright').css('right', '3px');
+ } else {
+ imageControls.show();
+ currentOverlay.find('.topright, .bottomright').css('right', '39px');
+
+ // Update the maximum value of the slider
+ var currentImageSlider = currentOverlay.find('#imageSlider');
+ currentImageSlider.attr('max', stack.imageIds.length);
+ currentImageSlider.val(1);
+
+ // Set it's width to its parent's height
+ // (because webkit is stupid and can't style vertical sliders)
+ var scrollbar = currentOverlay.find('#scrollbar');
+ scrollbar.height(scrollbar.parent().height() - 20);
+ var overlayHeight = currentImageSlider.parent().height();
+ currentImageSlider.width(overlayHeight);
+ }
+
// Get the current image ID for the stack that will be rendered
- var imageId = imageIds[stack.currentImageIdIndex];
+ imageId = imageIds[stack.currentImageIdIndex];
// Save the current image ID inside the template data so it can be
// retrieved from the template helpers
@@ -302,6 +328,28 @@ function loadSeriesIntoViewport(data, templateData) {
// Set a random value for the Session variable in order to trigger an overlay update
Session.set('CornerstoneNewImage' + viewportIndex, Random.id());
+ function OnStackScroll(e, eventData) {
+ // Get the element and stack data
+ var element = e.target;
+ var toolData = cornerstoneTools.getToolState(element, 'stack');
+ if (!toolData || !toolData.data || !toolData.data.length) {
+ return;
+ }
+
+ var stack = toolData.data[0];
+
+ // Update the imageSlider value
+ var currentOverlay = $(element).siblings('.imageViewerViewportOverlay');
+ var currentImageSlider = currentOverlay.find('#imageSlider');
+ currentImageSlider.val(stack.currentImageIdIndex + 1);
+ }
+
+ $(element).off('CornerstoneStackScroll', OnStackScroll);
+ if (stack.imageIds.length > 1) {
+ $(element).on('CornerstoneStackScroll', OnStackScroll);
+ }
+
+
// Define a function to trigger an event whenever a new viewport is being used
// This is used to update the value of the "active viewport", when the user interacts
// with a new viewport element
diff --git a/Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.html b/Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.html
index 7231f1939..52548f3a8 100644
--- a/Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.html
+++ b/Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.html
@@ -21,5 +21,6 @@
{{imageDimensions}}
{{seriesDescription}}
+ {{>imageControls}}
\ No newline at end of file
diff --git a/Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.styl b/Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.styl
index 4b9126b62..90a07335b 100644
--- a/Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.styl
+++ b/Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.styl
@@ -3,7 +3,7 @@
color: #e4ad00
line-height: 18px
display: none // Shown when an image is loaded
-
+
.dicomTag
pointer-events: none // Necessary for drag/drop through to cornerstone element below
position: absolute
diff --git a/Packages/viewerbase/lib/toolManager.js b/Packages/viewerbase/lib/toolManager.js
index 084b7cfdc..a5eb9e072 100644
--- a/Packages/viewerbase/lib/toolManager.js
+++ b/Packages/viewerbase/lib/toolManager.js
@@ -1,8 +1,6 @@
var activeTool = "wwwc";
var defaultTool = "wwwc";
-var alwaysEnabledTools = [];
-
var tools = {};
var toolDefaultStates = {
diff --git a/Packages/viewerbase/package.js b/Packages/viewerbase/package.js
index 1413606f1..c8f6493c7 100644
--- a/Packages/viewerbase/package.js
+++ b/Packages/viewerbase/package.js
@@ -80,6 +80,10 @@ Package.onUse(function (api) {
api.addFiles('client/components/viewer/viewportOverlay/viewportOverlay.js', 'client');
api.addFiles('client/components/viewer/viewportOverlay/viewportOverlay.styl', '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/layoutChooser/layoutChooser.html', 'client');
api.addFiles('client/components/viewer/layoutChooser/layoutChooser.js', 'client');
api.addFiles('client/components/viewer/layoutChooser/layoutChooser.styl', 'client');