Added image scrollbar to viewports (LT-20)

2015-12-10 12:01:06 +01:00 · 2015-12-10 12:01:06 +01:00 · bde599ed7b
commit bde599ed7b
parent 5a2ebfab0b
9 changed files with 193 additions and 4 deletions
--- 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);
 };
--- a/Packages/viewerbase/client/components/viewer/imageControls/imageControls.html
+++ b/Packages/viewerbase/client/components/viewer/imageControls/imageControls.html
@ -0,0 +1,7 @@
+<template name="imageControls">
+    <div class="imageControls">
+        <div id="scrollbar">
+            <input id="imageSlider" type="range" min="1" val="1"/>
+        </div>
+    </div>
+</template>
--- a/Packages/viewerbase/client/components/viewer/imageControls/imageControls.js
+++ 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);
+    }
+});
--- a/Packages/viewerbase/client/components/viewer/imageControls/imageControls.styl
+++ 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)
--- 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
--- a/Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.html
+++ b/Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.html
@ -21,5 +21,6 @@
            <div>{{imageDimensions}}</div>
            <div>{{seriesDescription}}</div>
        </div>
+        {{>imageControls}}
    </div>
 </template>
--- 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
--- 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 = {
--- 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');