aboutsummaryrefslogtreecommitdiffhomepage
path: root/gm/rebaseline_server/static/diff_viewer.js
diff options
context:
space:
mode:
Diffstat (limited to 'gm/rebaseline_server/static/diff_viewer.js')
-rw-r--r--gm/rebaseline_server/static/diff_viewer.js177
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;
- }
-}