modularize the display of diffs for skpdiff
R=djsollen@google.com
Review URL: https://codereview.chromium.org/18925004
git-svn-id: http://skia.googlecode.com/svn/trunk@10044 2bbb7eff-a529-9590-31e7-b0007b416f81
diff --git a/experimental/skpdiff/diff_viewer.js b/experimental/skpdiff/diff_viewer.js
index 338dbdf..700bf4b 100644
--- a/experimental/skpdiff/diff_viewer.js
+++ b/experimental/skpdiff/diff_viewer.js
@@ -1,4 +1,81 @@
-function DiffViewController($scope) {
+angular.module('diff_viewer', []).
+config(['$routeProvider', function($routeProvider) {
+ // Show the list of differences by default
+ $routeProvider.
+ otherwise({ templateUrl: '/diff_list.html', controller: DiffListController});
+}]).
+directive('swapImg', function() {
+ // Custom directive for showing an image that gets swapped my mouseover.
+ return {
+ restrict: 'E', // The directive can be used as an element name
+ replace: true, // The directive replaces itself with the template
+ template: '<canvas ng-mouseenter="swap()" ng-mouseleave="swap()"></canvas>',
+ scope: { // The attributes below are bound to the scope
+ leftSrc: '@',
+ rightSrc: '@',
+ side: '@'
+ },
+ link: function(scope, elm, attrs, ctrl) {
+ var leftImage = new Image();
+ var rightImage = new Image();
+ var ctx = elm[0].getContext('2d');
+
+ scope.render = function() {
+ var image;
+ if (scope.side == "left") {
+ image = leftImage;
+ } else {
+ image = rightImage;
+ }
+
+ // Make it so the maximum size of an image is 500, and the images are scaled
+ // down in halves.
+ var divisor = 1;
+ while ((image.width / divisor) > 500) {
+ divisor *= 2;
+ }
+
+ // Set canvas to correct size and draw the image into it
+ elm[0].width = image.width / divisor;
+ elm[0].height = image.height / divisor;
+ ctx.drawImage(image, 0, 0, elm[0].width, elm[0].height);
+ };
+
+ // When the leftSrc attribute changes, load the image and then rerender
+ attrs.$observe('leftSrc', function(value) {
+ leftImage.src = value;
+ leftImage.onload = function() {
+ if (scope.side == "left") {
+ scope.render();
+ }
+ };
+ });
+
+ // When the rightSrc attribute changes, load the image and then rerender
+ attrs.$observe('rightSrc', function(value) {
+ rightImage.src = value;
+ rightImage.onload = function() {
+ if (scope.side == "right") {
+ scope.render();
+ }
+ };
+ });
+
+ // Swap which side to draw onto the canvas and then rerender
+ scope.swap = function() {
+ if (scope.side == "left") {
+ scope.side = "right";
+ } else {
+ scope.side = "left";
+ }
+ scope.render();
+ };
+ }
+ };
+});
+
+function DiffListController($scope) {
+ // Label each kind of differ for the sort buttons.
$scope.differs = [
{
"title": "Different Pixels"
@@ -7,16 +84,20 @@
"title": "Perceptual Difference"
}
];
- $scope.sortIndex = 1;
+
+ // Puts the records within AngularJS scope
$scope.records = SkPDiffRecords.records;
- $scope.highlight = function(differName) {
- console.debug(differName);
- }
- $scope.setSortIndex = function(a) {
- $scope.sortIndex = a;
- }
- $scope.sortingDiffer = function(a) {
- console.debug($scope.sortIndex);
- return a.diffs[$scope.sortIndex].result;
- }
-}
\ No newline at end of file
+
+ // 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;
+ };
+
+ // A predicate for pulling out the number used for sorting
+ $scope.sortingDiffer = function(record) {
+ return record.diffs[$scope.sortIndex].result;
+ };
+}