Index: gm/rebaseline_server/static/diff_viewer.js |
diff --git a/gm/rebaseline_server/static/diff_viewer.js b/gm/rebaseline_server/static/diff_viewer.js |
deleted file mode 100644 |
index 3cb3a7c2cffecc82828edff30c35449ac07086e0..0000000000000000000000000000000000000000 |
--- 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; |
- } |
-} |