diff options
Diffstat (limited to 'gm/rebaseline_server/static/diff_viewer.js')
-rw-r--r-- | gm/rebaseline_server/static/diff_viewer.js | 177 |
1 files changed, 0 insertions, 177 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; - } -} |