Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(335)

Side by Side Diff: sky/tools/webkitpy/tool/servers/data/rebaselineserver/loupe.js

Issue 675343003: Prune a bunch of webkitpy. (Closed) Base URL: git@github.com:domokit/mojo.git@master
Patch Set: Created 6 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 /*
2 * Copyright (c) 2010 Google Inc. All rights reserved.
3 *
4 * Redistribution and use in source and binary forms, with or without
5 * modification, are permitted provided that the following conditions are
6 * met:
7 *
8 * * Redistributions of source code must retain the above copyright
9 * notice, this list of conditions and the following disclaimer.
10 * * Redistributions in binary form must reproduce the above
11 * copyright notice, this list of conditions and the following disclaimer
12 * in the documentation and/or other materials provided with the
13 * distribution.
14 * * Neither the name of Google Inc. nor the names of its
15 * contributors may be used to endorse or promote products derived from
16 * this software without specific prior written permission.
17 *
18 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
19 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
20 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
21 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
22 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
23 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
24 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
25 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
26 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
27 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
28 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
29 */
30
31 var LOUPE_MAGNIFICATION_FACTOR = 10;
32
33 function Loupe()
34 {
35 this._node = $('loupe');
36 this._currentCornerX = -1;
37 this._currentCornerY = -1;
38
39 var self = this;
40
41 function handleOutputClick(event) { self._handleOutputClick(event); }
42 $('expected-image').addEventListener('click', handleOutputClick);
43 $('actual-image').addEventListener('click', handleOutputClick);
44 $('diff-canvas').addEventListener('click', handleOutputClick);
45
46 function handleLoupeClick(event) { self._handleLoupeClick(event); }
47 $('expected-loupe').addEventListener('click', handleLoupeClick);
48 $('actual-loupe').addEventListener('click', handleLoupeClick);
49 $('diff-loupe').addEventListener('click', handleLoupeClick);
50
51 function hide(event) { self.hide(); }
52 $('loupe-close').addEventListener('click', hide);
53 }
54
55 Loupe.prototype._handleOutputClick = function(event)
56 {
57 // The -1 compensates for the border around the image/canvas.
58 this._showFor(event.offsetX - 1, event.offsetY - 1);
59 };
60
61 Loupe.prototype._handleLoupeClick = function(event)
62 {
63 var deltaX = Math.floor(event.offsetX/LOUPE_MAGNIFICATION_FACTOR);
64 var deltaY = Math.floor(event.offsetY/LOUPE_MAGNIFICATION_FACTOR);
65
66 this._showFor(
67 this._currentCornerX + deltaX, this._currentCornerY + deltaY);
68 }
69
70 Loupe.prototype.hide = function()
71 {
72 this._node.style.display = 'none';
73 };
74
75 Loupe.prototype._showFor = function(x, y)
76 {
77 this._fillFromImage(x, y, 'expected', $('expected-image'));
78 this._fillFromImage(x, y, 'actual', $('actual-image'));
79 this._fillFromCanvas(x, y, 'diff', $('diff-canvas'));
80
81 this._node.style.display = '';
82 };
83
84 Loupe.prototype._fillFromImage = function(x, y, type, sourceImage)
85 {
86 var tempCanvas = document.createElement('canvas');
87 tempCanvas.width = sourceImage.width;
88 tempCanvas.height = sourceImage.height;
89 var tempContext = tempCanvas.getContext('2d');
90
91 tempContext.drawImage(sourceImage, 0, 0);
92
93 this._fillFromCanvas(x, y, type, tempCanvas);
94 };
95
96 Loupe.prototype._fillFromCanvas = function(x, y, type, canvas)
97 {
98 var context = canvas.getContext('2d');
99 var sourceImageData =
100 context.getImageData(0, 0, canvas.width, canvas.height);
101
102 var targetCanvas = $(type + '-loupe');
103 var targetContext = targetCanvas.getContext('2d');
104 targetContext.fillStyle = 'rgba(255, 255, 255, 1)';
105 targetContext.fillRect(0, 0, targetCanvas.width, targetCanvas.height);
106
107 var sourceXOffset = (targetCanvas.width/LOUPE_MAGNIFICATION_FACTOR - 1)/2;
108 var sourceYOffset = (targetCanvas.height/LOUPE_MAGNIFICATION_FACTOR - 1)/2;
109
110 function readPixelComponent(x, y, component) {
111 var offset = (y * sourceImageData.width + x) * 4 + component;
112 return sourceImageData.data[offset];
113 }
114
115 for (var i = -sourceXOffset; i <= sourceXOffset; i++) {
116 for (var j = -sourceYOffset; j <= sourceYOffset; j++) {
117 var sourceX = x + i;
118 var sourceY = y + j;
119
120 var sourceR = readPixelComponent(sourceX, sourceY, 0);
121 var sourceG = readPixelComponent(sourceX, sourceY, 1);
122 var sourceB = readPixelComponent(sourceX, sourceY, 2);
123 var sourceA = readPixelComponent(sourceX, sourceY, 3)/255;
124 sourceA = Math.round(sourceA * 10)/10;
125
126 var targetX = (i + sourceXOffset) * LOUPE_MAGNIFICATION_FACTOR;
127 var targetY = (j + sourceYOffset) * LOUPE_MAGNIFICATION_FACTOR;
128 var colorString =
129 sourceR + ', ' + sourceG + ', ' + sourceB + ', ' + sourceA;
130 targetContext.fillStyle = 'rgba(' + colorString + ')';
131 targetContext.fillRect(
132 targetX, targetY,
133 LOUPE_MAGNIFICATION_FACTOR, LOUPE_MAGNIFICATION_FACTOR);
134
135 if (i == 0 && j == 0) {
136 $('loupe-coordinate').textContent = sourceX + ', ' + sourceY;
137 $(type + '-loupe-color').textContent = colorString;
138 }
139 }
140 }
141
142 this._currentCornerX = x - sourceXOffset;
143 this._currentCornerY = y - sourceYOffset;
144 };
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698