Make imageSlider range input use reactive variables instead of updating it manually. Add min/max zoom levels, remove unnecessary precision for Zoom

Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.html

@@ -1,5 +1,5 @@
 <template name="viewportOverlay">
-    <div class="imageViewerViewportOverlay noselect">
+    <div class="imageViewerViewportOverlay noselect {{#if gt numImages 1}}controlsVisible{{/if}}">
         {{ #unless tagDisplaySpecified }}
         <div class="topleft dicomTag">
             <div>{{formatPN patientName}}</div>
@@ -11,13 +11,13 @@
             <div>{{formatDA studyDate}} {{formatTM studyTime}}</div>
         </div>
         <div class="bottomright dicomTag">
-            <div>{{#if zoom}}Zoom: {{formatNumberPrecision zoom 2}}%{{/if}}</div>
+            <div>{{#if zoom}}Zoom: {{formatNumberPrecision zoom 0}}%{{/if}}</div>
             <div>{{compression}}</div>
             <div>{{wwwc}}</div>
         </div>
         <div class="bottomleft dicomTag">
             <div>{{#if seriesNumber}}Ser: {{seriesNumber}}{{/if}}</div>
-            <div>{{#if numImages}}Img: {{imageNumber}} ({{imageIndex}}/{{numImages}}){{/if}}</div>
+            <div>{{#if gt numImages 1}}Img: {{imageNumber}} ({{imageIndex}}/{{numImages}}){{/if}}</div>
             <div>{{#if frameRate}}{{frameRate}} FPS{{/if}}</div>
             <div>{{imageDimensions}}</div>
             <div>{{seriesDescription}}</div>
@@ -34,11 +34,11 @@
         </div>
         <div class="bottomright dicomTag">
             <div>{{#if seriesNumber}}Ser: {{seriesNumber}}{{/if}}</div>
-            <div>{{#if numImages}}Img: {{imageNumber}} ({{imageIndex}}/{{numImages}}){{/if}}</div>
+            <div>{{#if gt numImages 1}}Img: {{imageNumber}} ({{imageIndex}}/{{numImages}}){{/if}}</div>
             <div>{{#if frameRate}}{{frameRate}} FPS{{/if}}</div>
             <div>{{imageDimensions}}</div>
             <div>{{seriesDescription}}</div>
-            <div>{{#if zoom}}Zoom: {{formatNumberPrecision zoom 2}}%{{/if}}</div>
+            <div>{{#if zoom}}Zoom: {{formatNumberPrecision zoom 0}}%{{/if}}</div>
             <div>{{compression}}</div>
             <div>{{wwwc}}</div>
         </div>
@@ -54,15 +54,18 @@
         </div>
         <div class="bottomleft dicomTag">
             <div>{{#if seriesNumber}}Ser: {{seriesNumber}}{{/if}}</div>
-            <div>{{#if numImages}}Img: {{imageNumber}} ({{imageIndex}}/{{numImages}}){{/if}}</div>
+            <div>{{#if gt numImages 1}}Img: {{imageNumber}} ({{imageIndex}}/{{numImages}}){{/if}}</div>
             <div>{{#if frameRate}}{{frameRate}} FPS{{/if}}</div>
             <div>{{imageDimensions}}</div>
             <div>{{seriesDescription}}</div>
-            <div>{{#if zoom}}Zoom: {{formatNumberPrecision zoom 2}}%{{/if}}</div>
+            <div>{{#if zoom}}Zoom: {{formatNumberPrecision zoom 0}}%{{/if}}</div>
             <div>{{compression}}</div>
             <div>{{wwwc}}</div>
         </div>
         {{ /if }}
-        {{>imageControls}}
+
+        {{#if gt numImages 1}}
+        {{> imageControls imageIndex=imageIndex numImages=numImages}}
+        {{ /if }}
     </div>
 </template>

Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.js

@@ -219,9 +219,6 @@ Template.viewportOverlay.helpers({
     imageIndex: function() {
         return getInstance.call(this, 'index');
     },
-    numImages: function() {
-        return getSeries.call(this, 'numImages');
-    },
     imageIndex: function() {
         Session.get('CornerstoneNewImage' + this.viewportIndex);
         var stack = getStackDataIfNotEmpty(this.viewportIndex);

Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.styl

@@ -30,4 +30,8 @@ $viewportTagPadding = 20px
     
   .priorIndicator
     font-weight: bold
-    color: yellow
+    color: yellow
+    
+  &.controlsVisible
+    .topright, .bottomright
+      right: "calc(%s + 19px)" % $viewportTagPadding