diff options
author | 2014-02-06 15:17:28 +0000 | |
---|---|---|
committer | 2014-02-06 15:17:28 +0000 | |
commit | 1c188ed9fa70e50db1471bdbf683135c39ea85be (patch) | |
tree | a163245eafdd46d27826c72a5ab29bd2c9b37c06 /gm/rebaseline_server/static/diff_viewer.js | |
parent | 940e3bac13291d95ffa811b233329196335fb3f4 (diff) |
rebaseline_server: get "image size" working again
BUG=skia:2134
NOTRY=True
R=rmistry@google.com
Author: epoger@google.com
Review URL: https://codereview.chromium.org/155973003
git-svn-id: http://skia.googlecode.com/svn/trunk@13343 2bbb7eff-a529-9590-31e7-b0007b416f81
Diffstat (limited to 'gm/rebaseline_server/static/diff_viewer.js')
-rw-r--r-- | gm/rebaseline_server/static/diff_viewer.js | 82 |
1 files changed, 40 insertions, 42 deletions
diff --git a/gm/rebaseline_server/static/diff_viewer.js b/gm/rebaseline_server/static/diff_viewer.js index cad83321fb..3cb3a7c2cf 100644 --- a/gm/rebaseline_server/static/diff_viewer.js +++ b/gm/rebaseline_server/static/diff_viewer.js @@ -1,9 +1,5 @@ -var MAX_SWAP_IMG_SIZE = 200; -var MAGNIFIER_WIDTH = 100; -var MAGNIFIER_HEIGHT = 100; -var MAGNIFIER_HALF_WIDTH = MAGNIFIER_WIDTH * 0.5; -var MAGNIFIER_HALF_HEIGHT = MAGNIFIER_HEIGHT * 0.5; -var MAGNIFIER_SCALE_FACTOR = 2.0; +// What portion of the image width will be taken up by the magnifier. +var MAGNIFIER_WIDTH_FACTOR = 0.66; angular.module('diff_viewer', []).directive('imgCompare', function() { // Custom directive for comparing (3-way) images @@ -18,9 +14,9 @@ angular.module('diff_viewer', []).directive('imgCompare', function() { var ctx = canvas.getContext('2d'); var magnifyContent = false; - // When the type attribute changes, load the image and then render + // When the type attribute changes, set magnifyContent appropriately. attrs.$observe('type', function(value) { - switch(value) { + switch(attrs.type) { case "differingPixelsInWhite": magnifyContent = true; break; @@ -36,26 +32,25 @@ angular.module('diff_viewer', []).directive('imgCompare', function() { console.log("Unknown type attribute on <img-compare>: " + value); return; } + }); + + // Reset ImageController's scale and render the image; + // we need to do this whenever attrs.src or attrs.width changes. + scope.setScaleAndRender = function() { + // compute the scaled image width/height for image and canvas + scope.setImgScale(image.width, attrs.width); + // Set canvas to correct size + canvas.width = image.width / scope.imgScaleDivisor; + canvas.height = image.height / scope.imgScaleDivisor; + + scope.renderImage(); + }; + attrs.$observe('src', function(value) { image.src = attrs.src; - image.onload = function() { - // compute the scaled image width/height for image and canvas - var divisor = 1; - // Make it so the maximum size of an image is MAX_SWAP_IMG_SIZE, - // and the images are scaled down in halves. - while ((image.width / divisor) > MAX_SWAP_IMG_SIZE) { - divisor *= 2; - } - - scope.setImgScaleFactor(1 / divisor); - - // Set canvas to correct size - canvas.width = image.width * scope.imgScaleFactor; - canvas.height = image.height * scope.imgScaleFactor; - - scope.renderImage(); - } + image.onload = scope.setScaleAndRender; }); + attrs.$observe('width', scope.setScaleAndRender); // When the magnify attribute changes, render the magnified rect at // the default zoom level. @@ -70,22 +65,22 @@ angular.module('diff_viewer', []).directive('imgCompare', function() { return; } - var magX = magCenter.x - MAGNIFIER_HALF_WIDTH; - var magY = magCenter.y - MAGNIFIER_HALF_HEIGHT; + var magX = magCenter.x - scope.magnifierHalfWidth; + var magY = magCenter.y - scope.magnifierHalfHeight; - var magMaxX = canvas.width - MAGNIFIER_WIDTH; - var magMaxY = canvas.height - MAGNIFIER_HEIGHT; + var magMaxX = canvas.width - scope.magnifierWidth; + var magMaxY = canvas.height - scope.magnifierHeight; var magRect = { x: Math.max(0, Math.min(magX, magMaxX)), y: Math.max(0, Math.min(magY, magMaxY)), - width: MAGNIFIER_WIDTH, - height: MAGNIFIER_HEIGHT + width: scope.magnifierWidth, + height: scope.magnifierHeight }; - var imgRect = { x: (magCenter.x / scope.imgScaleFactor) - MAGNIFIER_HALF_WIDTH, - y: (magCenter.y / scope.imgScaleFactor) - MAGNIFIER_HALF_HEIGHT, - width: MAGNIFIER_WIDTH, - height: MAGNIFIER_HEIGHT + var imgRect = { x: (magCenter.x * scope.imgScaleDivisor) - scope.magnifierHalfWidth, + y: (magCenter.y * scope.imgScaleDivisor) - scope.magnifierHalfHeight, + width: scope.magnifierWidth, + height: scope.magnifierHeight }; // draw the magnified image @@ -112,8 +107,8 @@ angular.module('diff_viewer', []).directive('imgCompare', function() { // compute a rect (x,y,width,height) that represents the bounding box for // the magnification effect scope.computeMagnifierOutline = function(event) { - var scaledWidth = MAGNIFIER_WIDTH * scope.imgScaleFactor; - var scaledHeight = MAGNIFIER_HEIGHT * scope.imgScaleFactor; + var scaledWidth = scope.magnifierWidth / scope.imgScaleDivisor; + var scaledHeight = scope.magnifierHeight / scope.imgScaleDivisor; return { x: event.offsetX - (scaledWidth * 0.5), y: event.offsetY - (scaledHeight * 0.5), @@ -160,12 +155,16 @@ angular.module('diff_viewer', []).directive('imgCompare', function() { }); function ImageController($scope, $http, $location, $timeout, $parse) { - $scope.imgScaleFactor = 1.0; + $scope.imgScaleDivisor = 1.0; $scope.magnifierOn = false; $scope.magnifyCenter = undefined; - $scope.setImgScaleFactor = function(scaleFactor) { - $scope.imgScaleFactor = scaleFactor; + $scope.setImgScale = function(srcImageWidth, displayWidth) { + $scope.imgScaleDivisor = srcImageWidth / displayWidth; + $scope.magnifierWidth = displayWidth * MAGNIFIER_WIDTH_FACTOR; + $scope.magnifierHeight = $scope.magnifierWidth; + $scope.magnifierHalfWidth = $scope.magnifierWidth / 2; + $scope.magnifierHalfHeight = $scope.magnifierHeight / 2; } $scope.setMagnifierState = function(magnifierOn) { @@ -173,7 +172,6 @@ function ImageController($scope, $http, $location, $timeout, $parse) { } $scope.setMagnifyCenter = function(magnifyCenter) { - $scope.magnifyCenter = magnifyCenter; + $scope.magnifyCenter = magnifyCenter; } } - |