From 2cce3df19adc4bbda837d30f7f533938f579b478 Mon Sep 17 00:00:00 2001
From: "commit-bot@chromium.org"
 <commit-bot@chromium.org@2bbb7eff-a529-9590-31e7-b0007b416f81>
Date: Thu, 12 Dec 2013 14:55:45 +0000
Subject: [PATCH] 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
---
 tools/skpdiff/diff_viewer.js | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

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) {