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
diff --git a/tools/skpdiff/diff_viewer.js b/tools/skpdiff/diff_viewer.js
index 06a864e..6be434b 100644
--- a/tools/skpdiff/diff_viewer.js
+++ b/tools/skpdiff/diff_viewer.js
@@ -20,12 +20,14 @@
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 @@
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 @@
$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 @@
$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) {