| var MAX_SWAP_IMG_SIZE = 400; |
| var MAGNIFIER_WIDTH = 200; |
| var MAGNIFIER_HEIGHT = 200; |
| var MAGNIFIER_HALF_WIDTH = MAGNIFIER_WIDTH * 0.5; |
| var MAGNIFIER_HALF_HEIGHT = MAGNIFIER_HEIGHT * 0.5; |
| // TODO add support for a magnified scale factor |
| var MAGNIFIER_SCALE_FACTOR = 2.0; |
| |
| 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; |
| 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; |
| magnifyContent = true; |
| break; |
| case "test": |
| image.src = scope.record.testPath; |
| magnifyContent = true; |
| break; |
| default: |
| console.log("Unknown type attribute on <img-compare>: " + value); |
| return; |
| } |
| |
| 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; |
| |
| // 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) { |
| if (!magnifyContent) { |
| return; |
| } |
| |
| scope.renderImage(); |
| |
| if (!magCenter) { |
| return; |
| } |
| |
| var magX = magCenter.x - MAGNIFIER_HALF_WIDTH; |
| var magY = magCenter.y - MAGNIFIER_HALF_HEIGHT; |
| |
| var magMaxX = canvas.width - MAGNIFIER_WIDTH; |
| var magMaxY = canvas.height - MAGNIFIER_HEIGHT; |
| |
| var magRect = { x: Math.max(0, Math.min(magX, magMaxX)), |
| y: Math.max(0, Math.min(magY, magMaxY)), |
| width: MAGNIFIER_WIDTH, |
| height: MAGNIFIER_HEIGHT |
| }; |
| |
| var imgRect = { x: (magCenter.x / scope.imgScaleFactor) - MAGNIFIER_HALF_WIDTH, |
| y: (magCenter.y / scope.imgScaleFactor) - MAGNIFIER_HALF_HEIGHT, |
| width: MAGNIFIER_WIDTH, |
| height: MAGNIFIER_HEIGHT |
| }; |
| |
| // 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 = MAGNIFIER_WIDTH * scope.imgScaleFactor; |
| var scaledHeight = MAGNIFIER_HEIGHT * scope.imgScaleFactor; |
| 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 3 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.imgScaleFactor = 1.0; |
| $scope.magnifierOn = false; |
| $scope.magnifyCenter = undefined; |
| $scope.updatedMaskSize = undefined; |
| $scope.maskSizeUpdated = false; |
| |
| $scope.setImgScaleFactor = function(scaleFactor) { |
| $scope.imgScaleFactor = scaleFactor; |
| } |
| |
| $scope.setMagnifierState = function(magnifierOn) { |
| $scope.magnifierOn = magnifierOn; |
| } |
| |
| $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) { |
| // Detect if we are running the web server version of the viewer. If so, we set a flag and |
| // enable some extra functionality of the website for rebaselining. |
| $scope.isDynamic = ($location.protocol() == "http" || $location.protocol() == "https"); |
| |
| // Label each kind of differ for the sort buttons. |
| $scope.differs = [ |
| { |
| "title": "Different Pixels" |
| }, |
| { |
| "title": "Perceptual Difference" |
| } |
| ]; |
| |
| // Puts the records within AngularJS scope |
| $scope.records = SkPDiffRecords.records; |
| |
| // Keep track of the index of the last record to change so that shift clicking knows what range |
| // of records to apply the action to. |
| $scope.lastSelectedIndex = undefined; |
| |
| // Indicates which diff metric is used for sorting |
| $scope.sortIndex = 1; |
| |
| // Called by the sort buttons to adjust the metric used for sorting |
| $scope.setSortIndex = function(idx) { |
| $scope.sortIndex = idx; |
| |
| // Because the index of things has most likely changed, the ranges of shift clicking no |
| // longer make sense from the user's point of view. We reset it to avoid confusion. |
| $scope.lastSelectedIndex = undefined; |
| }; |
| |
| // A predicate for pulling out the number used for sorting |
| $scope.sortingDiffer = function(record) { |
| return record.diffs[$scope.sortIndex].result; |
| }; |
| |
| // Flash status indicator on the page, and then remove it so the style can potentially be |
| // reapplied later. |
| $scope.flashStatus = function(success) { |
| var flashStyle = success ? "success-flash" : "failure-flash"; |
| var flashDurationMillis = success ? 500 : 800; |
| |
| // Store the style in the record. The row will pick up the style this way instead of through |
| // index because index can change with sort order. |
| $scope.statusClass = flashStyle; |
| |
| // The animation cannot be repeated unless the class is removed the element. |
| $timeout(function() { |
| $scope.statusClass = ""; |
| }, flashDurationMillis); |
| }; |
| |
| $scope.selectedRebaseline = function(index, event) { |
| // Retrieve the records in the same order they are displayed. |
| var recordsInOrder = $parse("records | orderBy:sortingDiffer")($scope); |
| |
| // If the user is shift clicking, apply the last tick/untick to all elements in between this |
| // record, and the last one they ticked/unticked. |
| if (event.shiftKey && $scope.lastSelectedIndex !== undefined) { |
| var currentAction = recordsInOrder[index].isRebaselined; |
| var smallerIndex = Math.min($scope.lastSelectedIndex, index); |
| var largerIndex = Math.max($scope.lastSelectedIndex, index); |
| for (var recordIndex = smallerIndex; recordIndex <= largerIndex; recordIndex++) { |
| recordsInOrder[recordIndex].isRebaselined = currentAction; |
| } |
| $scope.lastSelectedIndex = index; |
| } |
| else |
| { |
| $scope.lastSelectedIndex = index; |
| } |
| |
| }; |
| |
| $scope.commitRebaselines = function() { |
| // Gather up all records that have the rebaseline set. |
| var rebaselines = []; |
| for (var recordIndex = 0; recordIndex < $scope.records.length; recordIndex++) { |
| if ($scope.records[recordIndex].isRebaselined) { |
| rebaselines.push($scope.records[recordIndex].testPath); |
| } |
| } |
| $http.post("/commit_rebaselines", { |
| "rebaselines": rebaselines |
| }).success(function(data) { |
| $scope.flashStatus(data.success); |
| }).error(function() { |
| $scope.flashStatus(false); |
| }); |
| }; |
| } |
