OLD | NEW |
1 var MAX_SWAP_IMG_SIZE = 400; | 1 var MAX_SWAP_IMG_SIZE = 400; |
2 var MAGNIFIER_WIDTH = 200; | 2 var MAGNIFIER_WIDTH = 200; |
3 var MAGNIFIER_HEIGHT = 200; | 3 var MAGNIFIER_HEIGHT = 200; |
4 var MAGNIFIER_HALF_WIDTH = MAGNIFIER_WIDTH * 0.5; | 4 var MAGNIFIER_HALF_WIDTH = MAGNIFIER_WIDTH * 0.5; |
5 var MAGNIFIER_HALF_HEIGHT = MAGNIFIER_HEIGHT * 0.5; | 5 var MAGNIFIER_HALF_HEIGHT = MAGNIFIER_HEIGHT * 0.5; |
6 // TODO add support for a magnified scale factor | 6 // TODO add support for a magnified scale factor |
7 var MAGNIFIER_SCALE_FACTOR = 2.0; | 7 var MAGNIFIER_SCALE_FACTOR = 2.0; |
8 | 8 |
9 angular.module('diff_viewer', []). | 9 angular.module('diff_viewer', []). |
10 directive('imgCompare', function() { | 10 directive('imgCompare', function() { |
11 // Custom directive for comparing (3-way) images | 11 // Custom directive for comparing (3-way) images |
12 return { | 12 return { |
13 restrict: 'E', // The directive can be used as an element name | 13 restrict: 'E', // The directive can be used as an element name |
14 replace: true, // The directive replaces itself with the template | 14 replace: true, // The directive replaces itself with the template |
15 template: '<canvas/>', | 15 template: '<canvas/>', |
16 scope: true, | 16 scope: true, |
17 link: function(scope, elm, attrs, ctrl) { | 17 link: function(scope, elm, attrs, ctrl) { |
18 var image = new Image(); | 18 var image = new Image(); |
19 var canvas = elm[0]; | 19 var canvas = elm[0]; |
20 var ctx = canvas.getContext('2d'); | 20 var ctx = canvas.getContext('2d'); |
21 | 21 |
22 var magnifyContent = false; | 22 var magnifyContent = false; |
| 23 var maskCanvas = false; |
23 | 24 |
24 // When the type attribute changes, load the image and then render | 25 // When the type attribute changes, load the image and then render |
25 attrs.$observe('type', function(value) { | 26 attrs.$observe('type', function(value) { |
26 switch(value) { | 27 switch(value) { |
27 case "alphaMask": | 28 case "alphaMask": |
28 image.src = scope.record.differencePath; | 29 image.src = scope.record.differencePath; |
| 30 maskCanvas = true; |
29 break; | 31 break; |
30 case "baseline": | 32 case "baseline": |
31 image.src = scope.record.baselinePath; | 33 image.src = scope.record.baselinePath; |
32 magnifyContent = true; | 34 magnifyContent = true; |
33 break; | 35 break; |
34 case "test": | 36 case "test": |
35 image.src = scope.record.testPath; | 37 image.src = scope.record.testPath; |
36 magnifyContent = true; | 38 magnifyContent = true; |
37 break; | 39 break; |
38 default: | 40 default: |
39 console.log("Unknown type attribute on <img-compare>: " + va
lue); | 41 console.log("Unknown type attribute on <img-compare>: " + va
lue); |
40 return; | 42 return; |
41 } | 43 } |
42 | 44 |
43 image.onload = function() { | 45 image.onload = function() { |
44 // compute the scaled image width/height for image and canvas | 46 // compute the scaled image width/height for image and canvas |
45 var divisor = 1; | 47 var divisor = 1; |
46 // Make it so the maximum size of an image is MAX_SWAP_IMG_SIZ
E, | 48 // Make it so the maximum size of an image is MAX_SWAP_IMG_SIZ
E, |
47 // and the images are scaled down in halves. | 49 // and the images are scaled down in halves. |
48 while ((image.width / divisor) > MAX_SWAP_IMG_SIZE) { | 50 while ((image.width / divisor) > MAX_SWAP_IMG_SIZE) { |
49 divisor *= 2; | 51 divisor *= 2; |
50 } | 52 } |
51 | 53 |
52 scope.setImgScaleFactor(1 / divisor); | 54 scope.setImgScaleFactor(1 / divisor); |
53 | 55 |
54 // Set canvas to correct size | 56 // Set canvas to correct size |
55 canvas.width = image.width * scope.imgScaleFactor; | 57 canvas.width = image.width * scope.imgScaleFactor; |
56 canvas.height = image.height * scope.imgScaleFactor; | 58 canvas.height = image.height * scope.imgScaleFactor; |
57 | 59 |
| 60 // update the size for non-alphaMask canvas when loading basel
ine image |
| 61 if (!scope.maskSizeUpdated) { |
| 62 if (!maskCanvas) { |
| 63 scope.updateMaskCanvasSize({width: canvas.width, heigh
t: canvas.height}); |
| 64 } |
| 65 scope.maskCanvasSizeUpdated(true); |
| 66 } |
| 67 |
58 // render the image onto the canvas | 68 // render the image onto the canvas |
59 scope.renderImage(); | 69 scope.renderImage(); |
60 } | 70 } |
61 }); | 71 }); |
62 | 72 |
| 73 // when updatedMaskSize changes, update mask canvas size. |
| 74 scope.$watch('updatedMaskSize', function(updatedSize) { |
| 75 if (!maskCanvas) { |
| 76 return; |
| 77 } |
| 78 |
| 79 canvas.width = updatedSize.width; |
| 80 canvas.height = updatedSize.height; |
| 81 }); |
| 82 |
63 // When the magnify attribute changes, render the magnified rect at | 83 // When the magnify attribute changes, render the magnified rect at |
64 // the default zoom level. | 84 // the default zoom level. |
65 scope.$watch('magnifyCenter', function(magCenter) { | 85 scope.$watch('magnifyCenter', function(magCenter) { |
66 if (!magnifyContent) { | 86 if (!magnifyContent) { |
67 return; | 87 return; |
68 } | 88 } |
69 | 89 |
70 scope.renderImage(); | 90 scope.renderImage(); |
71 | 91 |
72 if (!magCenter) { | 92 if (!magCenter) { |
(...skipping 86 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
159 scope.setMagnifyCenter(undefined); | 179 scope.setMagnifyCenter(undefined); |
160 }; | 180 }; |
161 } | 181 } |
162 }; | 182 }; |
163 }); | 183 }); |
164 | 184 |
165 function ImageController($scope, $http, $location, $timeout, $parse) { | 185 function ImageController($scope, $http, $location, $timeout, $parse) { |
166 $scope.imgScaleFactor = 1.0; | 186 $scope.imgScaleFactor = 1.0; |
167 $scope.magnifierOn = false; | 187 $scope.magnifierOn = false; |
168 $scope.magnifyCenter = undefined; | 188 $scope.magnifyCenter = undefined; |
| 189 $scope.updatedMaskSize = undefined; |
| 190 $scope.maskSizeUpdated = false; |
169 | 191 |
170 $scope.setImgScaleFactor = function(scaleFactor) { | 192 $scope.setImgScaleFactor = function(scaleFactor) { |
171 $scope.imgScaleFactor = scaleFactor; | 193 $scope.imgScaleFactor = scaleFactor; |
172 } | 194 } |
173 | 195 |
174 $scope.setMagnifierState = function(magnifierOn) { | 196 $scope.setMagnifierState = function(magnifierOn) { |
175 $scope.magnifierOn = magnifierOn; | 197 $scope.magnifierOn = magnifierOn; |
176 } | 198 } |
177 | 199 |
178 $scope.setMagnifyCenter = function(magnifyCenter) { | 200 $scope.setMagnifyCenter = function(magnifyCenter) { |
179 $scope.magnifyCenter = magnifyCenter; | 201 $scope.magnifyCenter = magnifyCenter; |
180 } | 202 } |
| 203 |
| 204 $scope.updateMaskCanvasSize = function(updatedSize) { |
| 205 $scope.updatedMaskSize = updatedSize; |
| 206 } |
| 207 |
| 208 $scope.maskCanvasSizeUpdated = function(flag) { |
| 209 $scope.maskSizeUpdated = flag; |
| 210 } |
181 } | 211 } |
182 | 212 |
183 function DiffListController($scope, $http, $location, $timeout, $parse) { | 213 function DiffListController($scope, $http, $location, $timeout, $parse) { |
184 // Detect if we are running the web server version of the viewer. If so, we
set a flag and | 214 // Detect if we are running the web server version of the viewer. If so, we
set a flag and |
185 // enable some extra functionality of the website for rebaselining. | 215 // enable some extra functionality of the website for rebaselining. |
186 $scope.isDynamic = ($location.protocol() == "http" || $location.protocol() =
= "https"); | 216 $scope.isDynamic = ($location.protocol() == "http" || $location.protocol() =
= "https"); |
187 | 217 |
188 // Label each kind of differ for the sort buttons. | 218 // Label each kind of differ for the sort buttons. |
189 $scope.differs = [ | 219 $scope.differs = [ |
190 { | 220 { |
(...skipping 76 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
267 } | 297 } |
268 $http.post("/commit_rebaselines", { | 298 $http.post("/commit_rebaselines", { |
269 "rebaselines": rebaselines | 299 "rebaselines": rebaselines |
270 }).success(function(data) { | 300 }).success(function(data) { |
271 $scope.flashStatus(data.success); | 301 $scope.flashStatus(data.success); |
272 }).error(function() { | 302 }).error(function() { |
273 $scope.flashStatus(false); | 303 $scope.flashStatus(false); |
274 }); | 304 }); |
275 }; | 305 }; |
276 } | 306 } |
OLD | NEW |