Implement aces#293, allow for automatic resizing of volume display pa…

…nels when the browser window is resized.
rdvincent · May 30, 2016 · 296957a · 296957a
1 parent b9abdb8
commit 296957a
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 1 deletion.
diff --git a/examples/volume-viewer-demo.html b/examples/volume-viewer-demo.html
@@ -177,6 +177,7 @@
         </select>
         <span class="control-heading">Panel size:</span>
         <select id="panel-size">
+          <option value="-1">Auto</option>
           <option value="128">128</option>
           <option value="256" SELECTED>256</option>
           <option value="512">512</option>

diff --git a/examples/volume-viewer-demo.js b/examples/volume-viewer-demo.js
@@ -161,7 +161,21 @@ $(function() {
     $("#panel-size").change(function() {
       var size = parseInt($(this).val(), 10);
 
-      viewer.setPanelSize(size, size, { scale_image: true });
+      if (size < 0) {
+        viewer.setAutoResize(true, 'volume-controls');
+        $('#brainbrowser-wrapper').css("width", "90%");
+        $('#volume-viewer').css("width", "100%");
+        $('#brainbrowser').css("width", "100%");
+        viewer.doAutoResize();
+      }
+      else {
+        viewer.setAutoResize(false);
+        $('#brainbrowser-wrapper').css("width", "60em");
+        $('#volume-viewer').css("width", "");
+        $('#brainbrowser').css("width", "");
+        $('.volume-controls').css("width", "");
+        viewer.setPanelSize(size, size, { scale_image: true });
+      }
     });
 
     // Should cursors in all panels be synchronized?
@@ -292,6 +306,59 @@ $(function() {
         viewer.redrawVolumes();
       }
     });
+
+    /**
+     * @doc function
+     * @name viewer.setAutoResize
+     * @param {boolean} flag Whether we should auto-resize the views.
+     * @param {string} class_name The name of the class associated with volume
+     * controls.
+     *
+     * @description
+     * Enable or disable auto-resizing mode.
+     * ```js
+     * viewer.setAutoResize(true, 'volume-controls');
+     * ```
+     */
+    viewer.setAutoResize = function(flag, class_name) {
+      viewer.auto_resize = flag;
+      viewer.volume_control_class = class_name;
+    };
+
+    /**
+     * @doc function
+     * @name viewer.doAutoResize
+     * @description
+     * This function implements auto-resizing of the volume panels
+     * when the window itself is resized. It should therefore be invoked
+     * as part of a window resize notification.
+     */
+    viewer.doAutoResize = function() {
+      if (!viewer.auto_resize) {
+        return;
+      }
+      function getIntProperty(class_name, prop_name) {
+        return parseInt($(class_name).css(prop_name).replace('px', ''), 10);
+      }
+      /* Assumes at least three views or three volumes across.
+       */
+      var n = Math.max(viewer.volumes.length, 3);
+      var ml = getIntProperty('.slice-display', 'margin-left');
+      var mr = getIntProperty('.slice-display', 'margin-right');
+
+      var size = $('#' + viewer.dom_element.id).width() / n - (ml + mr);
+
+      viewer.setDefaultPanelSize(size, size);
+      viewer.setPanelSize(size, size, { scale_image: true });
+
+      if (viewer.volume_control_class) {
+        var pd = getIntProperty("." + viewer.volume_control_class, 'padding');
+        $("." + viewer.volume_control_class).width(size - pd * 2);
+      }
+    };
+
+    window.addEventListener('resize', viewer.doAutoResize, false);
+
     //////////////////////////////////
     // Per volume UI hooks go in here.
     //////////////////////////////////

diff --git a/src/brainbrowser/volume-viewer/lib/panel.js b/src/brainbrowser/volume-viewer/lib/panel.js
@@ -225,6 +225,7 @@
 
         if (scale_image) {
           panel.zoom = panel.zoom * ratio;
+          panel.default_zoom = panel.default_zoom * ratio;
           panel.image_center.x = width / 2;
           panel.image_center.y = height / 2;
           panel.updateVolumePosition();