The default size of mask canvas is not appropriate. its height is too small: 150, while its width is 300. As a result, for non-alphaMask canvas who doesn't update the mask canvas size, this tool just magnify the upper part of 'Expected Image' as well as 'Actual Image' when user open view.html to show skpdiff_output.json in browser for many cases. The other part can't be shown because it is out of the mask canvas. This CL update non-alphaMask canvas size according to baseline canvas for each case, then the tool can magnify anywhere you want for the whole image when you click and move mouse on the mask canvas.

R=djsollen@google.com

Author: yunchao.he@intel.com

Review URL: https://codereview.chromium.org/105823010

git-svn-id: http://skia.googlecode.com/svn/trunk@12638 2bbb7eff-a529-9590-31e7-b0007b416f81

1 files changed, 30 insertions, 0 deletions

diff --git a/tools/skpdiff/diff_viewer.js b/tools/skpdiff/diff_viewer.js
index 06a864edf4..6be434b4db 100644
--- a/tools/skpdiff/diff_viewer.js
+++ b/tools/skpdiff/diff_viewer.js
@@ -20,12 +20,14 @@ directive('imgCompare', function() {
           var ctx = canvas.getContext('2d');
 
           var magnifyContent = false;
+          var maskCanvas = false;
 
           // When the type attribute changes, load the image and then render
           attrs.$observe('type', function(value) {
               switch(value) {
                 case "alphaMask":
                     image.src = scope.record.differencePath;
+                    maskCanvas = true;
                     break;
                 case "baseline":
                     image.src = scope.record.baselinePath;
@@ -55,11 +57,29 @@ directive('imgCompare', function() {
                   canvas.width = image.width * scope.imgScaleFactor;
                   canvas.height = image.height * scope.imgScaleFactor;
 
+                  // update the size for non-alphaMask canvas when loading baseline image
+                  if (!scope.maskSizeUpdated) {
+                      if (!maskCanvas) {
+                          scope.updateMaskCanvasSize({width: canvas.width, height: canvas.height});
+                      }
+                      scope.maskCanvasSizeUpdated(true);
+                  }
+
                   // render the image onto the canvas
                   scope.renderImage();
               }
           });
 
+          // when updatedMaskSize changes, update mask canvas size.
+          scope.$watch('updatedMaskSize', function(updatedSize) {
+              if (!maskCanvas) {
+                  return;
+              }
+
+              canvas.width = updatedSize.width;
+              canvas.height = updatedSize.height;
+          });
+
           // When the magnify attribute changes, render the magnified rect at
           // the default zoom level.
           scope.$watch('magnifyCenter', function(magCenter) {
@@ -166,6 +186,8 @@ function ImageController($scope, $http, $location, $timeout, $parse) {
   $scope.imgScaleFactor = 1.0;
   $scope.magnifierOn = false;
   $scope.magnifyCenter = undefined;
+  $scope.updatedMaskSize = undefined;
+  $scope.maskSizeUpdated = false;
 
   $scope.setImgScaleFactor = function(scaleFactor) {
     $scope.imgScaleFactor = scaleFactor;
@@ -178,6 +200,14 @@ function ImageController($scope, $http, $location, $timeout, $parse) {
   $scope.setMagnifyCenter = function(magnifyCenter) {
       $scope.magnifyCenter = magnifyCenter;
   }
+
+  $scope.updateMaskCanvasSize = function(updatedSize) {
+      $scope.updatedMaskSize = updatedSize;
+  }
+
+  $scope.maskCanvasSizeUpdated = function(flag) {
+      $scope.maskSizeUpdated = flag;
+  }
 }
 
 function DiffListController($scope, $http, $location, $timeout, $parse) {