Make fitToContainer pass the desired size, fixes #1065

The canvas size will now be the same for all layers, the offscreen 
canvas stays of the size of the data

src/app/application.js

@@ -457,7 +457,12 @@ dwv.App = function () {
   this.fitToContainer = function () {
     var layerGroup = stage.getActiveLayerGroup();
     if (layerGroup) {
-      layerGroup.fitToContainer(self.getLastImage().getGeometry());
+      var geometry = self.getLastImage().getGeometry();
+      var size = geometry.getSize().get2D();
+      var spacing = geometry.getSpacing().get2D();
+      var width = size.x * spacing.x;
+      var height = size.y * spacing.y;
+      layerGroup.fitToContainer({x: width, y: height});
       layerGroup.draw();
       // update style
       //style.setBaseScale(layerGroup.getBaseScale());
@@ -1243,7 +1248,27 @@ dwv.App = function () {
       }
     }
 
-    layerGroup.fitToContainer();
+    // fit to the maximum size
+    var maxSize = {x: 0, y: 0};
+    for (var i = 0; i < dataController.length(); ++i) {
+      var dc = dataController.get(i);
+      var geometry = dc.image.getGeometry();
+      var viewOrient = dwv.gui.getViewOrientation(
+        geometry,
+        layerGroup.getTargetOrientation()
+      );
+      var size = geometry.getSize(viewOrient).get2D();
+      var spacing = geometry.getSpacing(viewOrient).get2D();
+      var width = size.x * spacing.x;
+      if (width > maxSize.x) {
+        maxSize.x = width;
+      }
+      var height = size.y * spacing.y;
+      if (height > maxSize.y) {
+        maxSize.y = height;
+      }
+    }
+    layerGroup.fitToContainer(maxSize);
   }
 
 };

src/gui/drawLayer.js

@@ -151,18 +151,6 @@ dwv.gui.DrawLayer = function (containerDiv) {
     return containerDiv.id;
   };
 
-  /**
-   * Get the data full size, ie size * spacing.
-   *
-   * @returns {object} The full size as {x,y}.
-   */
-  this.getFullSize = function () {
-    return {
-      x: baseSize.x * baseSpacing.x,
-      y: baseSize.y * baseSpacing.y
-    };
-  };
-
   /**
    * Get the layer base size (without scale).
    *
@@ -302,19 +290,17 @@ dwv.gui.DrawLayer = function (containerDiv) {
    * Fit the layer to its parent container.
    *
    * @param {number} fitScale1D The 1D fit scale.
+   * @param {object} fitSize The fit size as {x,y}.
    */
-  this.fitToContainer = function (fitScale1D) {
+  this.fitToContainer = function (fitScale1D, fitSize) {
     // update fit scale
     fitScale = {
       x: fitScale1D * baseSpacing.x,
       y: fitScale1D * baseSpacing.y
     };
     // update konva
-    var fullSize = this.getFullSize();
-    var width = Math.floor(fullSize.x * fitScale1D);
-    var height = Math.floor(fullSize.y * fitScale1D);
-    konvaStage.setWidth(width);
-    konvaStage.setHeight(height);
+    konvaStage.setWidth(fitSize.x);
+    konvaStage.setHeight(fitSize.y);
     // reset scale
     this.setScale({x: 1, y: 1, z: 1});
   };

src/gui/layerGroup.js

@@ -470,24 +470,27 @@ dwv.gui.LayerGroup = function (containerDiv, groupId) {
   /**
    * Fit the display to the size of the container.
    * To be called once the image is loaded.
+   *
+   * @param {object} realSize 2D real size (in mm) to fit provided as {x,y}.
    */
-  this.fitToContainer = function () {
+  this.fitToContainer = function (realSize) {
     // check container size
     if (containerDiv.offsetWidth === 0 &&
       containerDiv.offsetHeight === 0) {
       throw new Error('Cannot fit to zero sized container.');
     }
     // find best fit
-    var fitScales = [];
-    for (var i = 0; i < layers.length; ++i) {
-      var fullSize = layers[i].getFullSize();
-      fitScales.push(containerDiv.offsetWidth / fullSize.x);
-      fitScales.push(containerDiv.offsetHeight / fullSize.y);
-    }
-    var fitScale = Math.min.apply(null, fitScales);
+    var fitScale = Math.min(
+      containerDiv.offsetWidth / realSize.x,
+      containerDiv.offsetHeight / realSize.y
+    );
+    var fitSize = {
+      x: Math.floor(realSize.x * fitScale),
+      y: Math.floor(realSize.y * fitScale)
+    };
     // apply to layers
     for (var j = 0; j < layers.length; ++j) {
-      layers[j].fitToContainer(fitScale);
+      layers[j].fitToContainer(fitScale, fitSize);
     }
   };
 

src/gui/viewLayer.js

@@ -205,18 +205,6 @@ dwv.gui.ViewLayer = function (containerDiv) {
     return containerDiv.id;
   };
 
-  /**
-   * Get the data full size, ie size * spacing.
-   *
-   * @returns {object} The full size as {x,y}.
-   */
-  this.getFullSize = function () {
-    return {
-      x: baseSize.x * baseSpacing.x,
-      y: baseSize.y * baseSpacing.y
-    };
-  };
-
   /**
    * Get the layer base size (without scale).
    *
@@ -435,6 +423,7 @@ dwv.gui.ViewLayer = function (containerDiv) {
     dataIndex = index;
 
     // create canvas
+    // (canvas size is set in fitToContainer)
     canvas = document.createElement('canvas');
     containerDiv.appendChild(canvas);
 
@@ -455,9 +444,6 @@ dwv.gui.ViewLayer = function (containerDiv) {
       throw new Error('Cannot create canvas ' + baseSize.x + ', ' + baseSize.y);
     }
 
-    // canvas sizes
-    canvas.width = baseSize.x;
-    canvas.height = baseSize.y;
     // off screen canvas
     offscreenCanvas = document.createElement('canvas');
     offscreenCanvas.width = baseSize.x;
@@ -474,17 +460,17 @@ dwv.gui.ViewLayer = function (containerDiv) {
    * Fit the layer to its parent container.
    *
    * @param {number} fitScale1D The 1D fit scale.
+   * @param {object} fitSize The fit size as {x,y}.
    */
-  this.fitToContainer = function (fitScale1D) {
+  this.fitToContainer = function (fitScale1D, fitSize) {
     // update fit scale
     fitScale = {
       x: fitScale1D * baseSpacing.x,
       y: fitScale1D * baseSpacing.y
     };
-    // update canvas
-    var fullSize = this.getFullSize();
-    var width = Math.floor(fullSize.x * fitScale1D);
-    var height = Math.floor(fullSize.y * fitScale1D);
+    // new canvas size
+    var width = fitSize.x;
+    var height = fitSize.y;
     if (!dwv.gui.canCreateCanvas(width, height)) {
       throw new Error('Cannot resize canvas ' + width + ', ' + height);
     }