diff options
author | 2014-03-10 19:12:53 +0000 | |
---|---|---|
committer | 2014-03-10 19:12:53 +0000 | |
commit | 6e3ee3339c9f8869015085e470c6d5930b494411 (patch) | |
tree | 67acd3e4a275095955f0243f379e0b59ca6f3f96 | |
parent | 5865ec5f3a367e0398ba6c322916d12a08c5002b (diff) |
rebaseline_server: disable image magnifier, for huge UI speedup
BUG=skia:2248
NOTREECHECKS=True
NOTRY=True
R=rmistry@google.com
TBR=rmistry
Author: epoger@google.com
Review URL: https://codereview.chromium.org/193073003
git-svn-id: http://skia.googlecode.com/svn/trunk@13727 2bbb7eff-a529-9590-31e7-b0007b416f81
-rw-r--r-- | gm/rebaseline_server/static/diff_viewer.js | 177 | ||||
-rw-r--r-- | gm/rebaseline_server/static/loader.js | 2 | ||||
-rw-r--r-- | gm/rebaseline_server/static/view.html | 33 |
3 files changed, 15 insertions, 197 deletions
diff --git a/gm/rebaseline_server/static/diff_viewer.js b/gm/rebaseline_server/static/diff_viewer.js deleted file mode 100644 index 3cb3a7c2cf..0000000000 --- a/gm/rebaseline_server/static/diff_viewer.js +++ /dev/null @@ -1,177 +0,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 - return { - restrict: 'E', // The directive can be used as an element name - replace: true, // The directive replaces itself with the template - template: '<canvas/>', - scope: true, - link: function(scope, elm, attrs, ctrl) { - var image = new Image(); - var canvas = elm[0]; - var ctx = canvas.getContext('2d'); - var magnifyContent = false; - - // When the type attribute changes, set magnifyContent appropriately. - attrs.$observe('type', function(value) { - switch(attrs.type) { - case "differingPixelsInWhite": - magnifyContent = true; - break; - case "differencePerPixel": - break; - case "baseline": - magnifyContent = true; - break; - case "test": - magnifyContent = true; - break; - default: - 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 = scope.setScaleAndRender; - }); - attrs.$observe('width', scope.setScaleAndRender); - - // When the magnify attribute changes, render the magnified rect at - // the default zoom level. - scope.$watch('magnifyCenter', function(magCenter) { - if (!magnifyContent) { - return; - } - - scope.renderImage(); - - if (!magCenter) { - return; - } - - var magX = magCenter.x - scope.magnifierHalfWidth; - var magY = magCenter.y - scope.magnifierHalfHeight; - - 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: scope.magnifierWidth, - height: scope.magnifierHeight - }; - - 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 - ctx.clearRect(magRect.x, magRect.y, magRect.width, magRect.height); - ctx.drawImage(image, imgRect.x, imgRect.y, imgRect.width, imgRect.height, - magRect.x, magRect.y, magRect.width, magRect.height); - - // draw the outline rect - ctx.beginPath(); - ctx.rect(magRect.x, magRect.y, magRect.width, magRect.height); - ctx.lineWidth = 2; - ctx.strokeStyle = 'red'; - ctx.stroke(); - - }); - - // render the image to the canvas. This is often done every frame prior - // to any special effects (i.e. magnification). - scope.renderImage = function() { - ctx.clearRect(0, 0, canvas.width, canvas.height); - ctx.drawImage(image, 0, 0, canvas.width, canvas.height); - }; - - // compute a rect (x,y,width,height) that represents the bounding box for - // the magnification effect - scope.computeMagnifierOutline = function(event) { - 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), - width: scaledWidth, - height: scaledHeight - }; - }; - - // event handler for mouse events that triggers the magnification - // effect across the 4 images being compared. - scope.MagnifyDraw = function(event, startMagnify) { - if (startMagnify) { - scope.setMagnifierState(true); - } else if (!scope.magnifierOn) { - return; - } - - scope.renderImage(); - - // render the magnifier outline rect - var rect = scope.computeMagnifierOutline(event); - ctx.save(); - ctx.beginPath(); - ctx.rect(rect.x, rect.y, rect.width, rect.height); - ctx.lineWidth = 2; - ctx.strokeStyle = 'red'; - ctx.stroke(); - ctx.restore(); - - // update scope on baseline / test that will cause them to render - scope.setMagnifyCenter({x: event.offsetX, y: event.offsetY}); - }; - - // event handler that triggers the end of the magnification effect and - // resets all the canvases to their original state. - scope.MagnifyEnd = function(event) { - scope.renderImage(); - // update scope on baseline / test that will cause them to render - scope.setMagnifierState(false); - scope.setMagnifyCenter(undefined); - }; - } - }; -}); - -function ImageController($scope, $http, $location, $timeout, $parse) { - $scope.imgScaleDivisor = 1.0; - $scope.magnifierOn = false; - $scope.magnifyCenter = undefined; - - $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) { - $scope.magnifierOn = magnifierOn; - } - - $scope.setMagnifyCenter = function(magnifyCenter) { - $scope.magnifyCenter = magnifyCenter; - } -} diff --git a/gm/rebaseline_server/static/loader.js b/gm/rebaseline_server/static/loader.js index d82c2f74f0..bd3be2d408 100644 --- a/gm/rebaseline_server/static/loader.js +++ b/gm/rebaseline_server/static/loader.js @@ -5,7 +5,7 @@ */ var Loader = angular.module( 'Loader', - ['ConstantsModule', 'diff_viewer'] + ['ConstantsModule'] ); Loader.directive( diff --git a/gm/rebaseline_server/static/view.html b/gm/rebaseline_server/static/view.html index e55544d86c..61abcf0127 100644 --- a/gm/rebaseline_server/static/view.html +++ b/gm/rebaseline_server/static/view.html @@ -6,7 +6,6 @@ <title ng-bind="windowTitle"></title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script> <script src="constants.js"></script> - <script src="diff_viewer.js"></script> <script src="loader.js"></script> <link rel="stylesheet" href="view.css"> </head> @@ -275,7 +274,7 @@ </th> </tr> - <tr ng-repeat="imagePair in limitedImagePairs" ng-controller="ImageController" results-updated-callback-directive> + <tr ng-repeat="imagePair in limitedImagePairs" results-updated-callback-directive> <td> {{imagePair[constants.KEY__EXTRA_COLUMN_VALUES][constants.KEY__EXTRACOLUMN__RESULT_TYPE]}} <br> @@ -343,9 +342,9 @@ <td valign="bottom" width="{{imageSize}}"> <div ng-if="imagePair[constants.KEY__IMAGE_A_URL] != null"> <a href="{{imageSets[0][constants.KEY__IMAGESETS__BASE_URL]}}/{{imagePair[constants.KEY__IMAGE_A_URL]}}" target="_blank">View Image</a><br/> - <img-compare ng-if="showThumbnails" - type="baseline" width="{{imageSize}}" - src="{{imageSets[0][constants.KEY__IMAGESETS__BASE_URL]}}/{{imagePair[constants.KEY__IMAGE_A_URL]}}" /> + <img ng-if="showThumbnails" + width="{{imageSize}}" + src="{{imageSets[0][constants.KEY__IMAGESETS__BASE_URL]}}/{{imagePair[constants.KEY__IMAGE_A_URL]}}" /> </div> <div ng-show="imagePair[constants.KEY__IMAGE_A_URL] == null" style="text-align:center"> @@ -357,9 +356,9 @@ <td valign="bottom" width="{{imageSize}}"> <div ng-if="imagePair[constants.KEY__IMAGE_B_URL] != null"> <a href="{{imageSets[1][constants.KEY__IMAGESETS__BASE_URL]}}/{{imagePair[constants.KEY__IMAGE_B_URL]}}" target="_blank">View Image</a><br/> - <img-compare ng-if="showThumbnails" - type="test" width="{{imageSize}}" - src="{{imageSets[1][constants.KEY__IMAGESETS__BASE_URL]}}/{{imagePair[constants.KEY__IMAGE_B_URL]}}" /> + <img ng-if="showThumbnails" + width="{{imageSize}}" + src="{{imageSets[1][constants.KEY__IMAGESETS__BASE_URL]}}/{{imagePair[constants.KEY__IMAGE_B_URL]}}" /> </div> <div ng-show="imagePair[constants.KEY__IMAGE_B_URL] == null" style="text-align:center"> @@ -376,9 +375,9 @@ ({{imagePair[constants.KEY__DIFFERENCE_DATA][constants.KEY__DIFFERENCE_DATA__NUM_DIFF_PIXELS]}}) <br/> <a href="/static/generated-images/whitediffs/{{getImageDiffRelativeUrl(imagePair)}}" target="_blank">View Image</a><br/> - <img-compare ng-if="showThumbnails" - type="differingPixelsInWhite" width="{{imageSize}}" - src="/static/generated-images/whitediffs/{{getImageDiffRelativeUrl(imagePair)}}" /> + <img ng-if="showThumbnails" + width="{{imageSize}}" + src="/static/generated-images/whitediffs/{{getImageDiffRelativeUrl(imagePair)}}" /> </div> <div ng-show="!imagePair[constants.KEY__IS_DIFFERENT]" style="text-align:center"> @@ -395,14 +394,10 @@ {{imagePair[constants.KEY__DIFFERENCE_DATA][constants.KEY__DIFFERENCE_DATA__MAX_DIFF_PER_CHANNEL]}} <br/> <a href="/static/generated-images/diffs/{{getImageDiffRelativeUrl(imagePair)}}" target="_blank">View Image</a><br/> - <img-compare ng-if="showThumbnails" - ng-style="{backgroundColor: pixelDiffBgColor}" - type="differencePerPixel" width="{{imageSize}}" - src="/static/generated-images/diffs/{{getImageDiffRelativeUrl(imagePair)}}" - ng-mousedown="MagnifyDraw($event, true)" - ng-mousemove="MagnifyDraw($event, false)" - ng-mouseup="MagnifyEnd($event)" - ng-mouseleave="MagnifyEnd($event)" /> + <img ng-if="showThumbnails" + ng-style="{backgroundColor: pixelDiffBgColor}" + width="{{imageSize}}" + src="/static/generated-images/diffs/{{getImageDiffRelativeUrl(imagePair)}}"/> </div> <div ng-show="!imagePair[constants.KEY__IS_DIFFERENT]" style="text-align:center"> |