Skip to content

Commit dd39941

Browse files
fouberfouber
committed
[UPD] clip capture
1 parent e5a7018 commit dd39941

File tree

3 files changed

+41
-24
lines changed

3 files changed

+41
-24
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "page-monitor",
3-
"version": "0.4.8",
3+
"version": "0.5.0",
44
"description": "monitor pages and diff the dom change with phantomjs",
55
"main": "index.js",
66
"scripts": {

‎phantomjs/highlight.js

+13-10
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
module.exports = function(token, diff, opt){
1+
module.exports = function(token, diff, lOffset, rOffset, opt){
22

33
/**
44
* console log debug message
@@ -32,9 +32,13 @@ module.exports = function(token, diff, opt){
3232
* @param {Object} options
3333
* @param {HTMLElement} container
3434
* @param {Boolean} useTitle
35+
* @param {Number} offsetX
36+
* @param {Number} offsetY
3537
* @returns {HTMLElement}
3638
*/
37-
function highlightElement(rect, options, container, useTitle){
39+
function highlightElement(rect, options, container, offsetX, offsetY, useTitle){
40+
offsetX = parseInt(offsetX || 0);
41+
offsetY = parseInt(offsetY || 0);
3842
var div = document.createElement('x-diff-div');
3943
div.style.position = 'absolute';
4044
div.style.display = 'block';
@@ -55,8 +59,8 @@ module.exports = function(token, diff, opt){
5559
div.style[key] = options[key];
5660
}
5761
}
58-
div.style.left = px(rect[0]);
59-
div.style.top = px(rect[1]);
62+
div.style.left = px(rect[0] - offsetX);
63+
div.style.top = px(rect[1] - offsetY);
6064
div.style.width = px(rect[2]);
6165
div.style.height = px(rect[3]);
6266
container.appendChild(div);
@@ -67,7 +71,7 @@ module.exports = function(token, diff, opt){
6771
var lenged = document.getElementById('legend');
6872
for(key in CHANGE_STYLE){
6973
if(CHANGE_STYLE.hasOwnProperty(key)){
70-
div = highlightElement([0, 0, 120, 18], CHANGE_STYLE[key], lenged, true);
74+
div = highlightElement([0, 0, 120, 18], CHANGE_STYLE[key], lenged, 0, 0, true);
7175
div.setAttribute('id', 's-' + key);
7276
div.style.position = 'static';
7377
div.style.margin = '5px 8px';
@@ -84,23 +88,22 @@ module.exports = function(token, diff, opt){
8488
style: 0,
8589
text: 0
8690
};
87-
8891
// highlight diffs
8992
diff.forEach(function(item){
9093
var node = item.node;
9194
var type = item.type;
9295
switch (type){
9396
case CHANGE_TYPE.ADD:
9497
count.add++;
95-
highlightElement(node.rect, CHANGE_STYLE.ADD, rContainer);
98+
highlightElement(node.rect, CHANGE_STYLE.ADD, rContainer, rOffset.x, rOffset.y);
9699
break;
97100
case CHANGE_TYPE.REMOVE:
98101
count.remove++;
99-
highlightElement(node.rect, CHANGE_STYLE.REMOVE, lContainer);
102+
highlightElement(node.rect, CHANGE_STYLE.REMOVE, lContainer, lOffset.x, lOffset.y);
100103
break;
101104
case CHANGE_TYPE.TEXT:
102105
count.text++;
103-
highlightElement(node.rect, CHANGE_STYLE.TEXT, rContainer);
106+
highlightElement(node.rect, CHANGE_STYLE.TEXT, rContainer, rOffset.x, rOffset.y);
104107
break;
105108
default :
106109
if(type & CHANGE_TYPE.STYLE){
@@ -109,7 +112,7 @@ module.exports = function(token, diff, opt){
109112
if(type & CHANGE_TYPE.TEXT){
110113
count.text++;
111114
}
112-
highlightElement(node.rect, CHANGE_STYLE.STYLE, rContainer);
115+
highlightElement(node.rect, CHANGE_STYLE.STYLE, rContainer, rOffset.x, rOffset.y);
113116
break;
114117
}
115118
});

‎phantomjs/index.js

+27-13
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ function settings(page, options){
6767
* @param {webpage} page
6868
* @param {Function} fn
6969
* @param {Array} args
70-
* @returns {Object}
70+
* @returns {object}
7171
*/
7272
function evaluate(page, fn, args){
7373
var type = typeof fn;
@@ -92,7 +92,7 @@ function evaluate(page, fn, args){
9292
/**
9393
* create webpage and bind events
9494
* @param {string} url
95-
* @param {Object} options
95+
* @param {object} options
9696
* @param {Function} onload
9797
*/
9898
function createPage(url, options, onload){
@@ -205,7 +205,7 @@ function createPage(url, options, onload){
205205

206206
/**
207207
* Constructor
208-
* @param {Object} options
208+
* @param {object} options
209209
* @constructor
210210
*/
211211
var M = function(options){
@@ -223,7 +223,7 @@ var M = function(options){
223223

224224
/**
225225
* get info of the latest save
226-
* @returns {Object|boolean}
226+
* @returns {object|boolean}
227227
*/
228228
M.prototype.getLatestTree = function(){
229229
if(fs.exists(this.latest)){
@@ -272,11 +272,12 @@ M.prototype.getRenderOptions = function(){
272272
* save capture
273273
* @param {webpage} page
274274
* @param {string} url
275-
* @param {string|Object} tree
275+
* @param {string|object} tree
276+
* @param {array} rect
276277
* @param {string|number} time
277278
* @returns {{time: number, dir: string, screenshot: string}}
278279
*/
279-
M.prototype.save = function(page, url, tree, time){
280+
M.prototype.save = function(page, url, tree, rect, time){
280281
time = time || Date.now();
281282
if(_.is(tree, 'Object')){
282283
tree = JSON.stringify(tree);
@@ -291,6 +292,12 @@ M.prototype.save = function(page, url, tree, time){
291292
var elem = document.documentElement;
292293
elem.style.backgroundColor = '#fff';
293294
});
295+
page.clipRect = {
296+
left: rect[0],
297+
top: rect[1],
298+
width: rect[2],
299+
height: rect[3]
300+
};
294301
page.render(screenshot, opt);
295302
fs.write(dir + '/' + TREE_FILENAME, tree);
296303
fs.write(dir + '/' + INFO_FILENAME, JSON.stringify({
@@ -314,9 +321,11 @@ M.prototype.save = function(page, url, tree, time){
314321
* @param {string|number} left
315322
* @param {string|number} right
316323
* @param {Array} diff
324+
* @param {Array} lOffset
325+
* @param {Array} rOffset
317326
* @param {Function} callback
318327
*/
319-
M.prototype.highlight = function(left, right, diff, callback){
328+
M.prototype.highlight = function(left, right, diff, lOffset, rOffset, callback){
320329
log('diff [' + left + '] width [' + right + ']');
321330
log('has [' + diff.length + '] changes');
322331
var render = this.getRenderOptions();
@@ -348,7 +357,7 @@ M.prototype.highlight = function(left, right, diff, callback){
348357
left: left,
349358
right: right,
350359
screenshot: dScreenshot,
351-
count: page.evaluate(highlight, self.token, diff, options.diff)
360+
count: page.evaluate(highlight, self.token, diff, lOffset, rOffset, options.diff)
352361
};
353362
setTimeout(function(){
354363
page.render(dScreenshot, render);
@@ -375,22 +384,25 @@ M.prototype.capture = function(url, needDiff){
375384
setTimeout(function(){ // delay
376385
log('walk tree');
377386
var right = page.evaluate(walk, self.token, options.walk); //walk tree
387+
var rect = right.rect;
378388
var json = JSON.stringify(right);
379389
var latest = self.getLatestTree();
380390
if(latest.content === json){
381391
log('no change');
382392
phantom.exit();
383393
} else if(latest === false || !needDiff) {
384-
self.save(page, url, json);
394+
self.save(page, url, json, rect);
385395
phantom.exit();
386396
} else {
387397
var left = JSON.parse(latest.content);
388398
right = JSON.parse(json);
389399
var ret = diff(left, right, options.diff);
390400
if(ret.length){
391401
var now = Date.now();
392-
var info = self.save(page, url, json, now);
393-
self.highlight(latest.time, now, ret, function(diff){
402+
var info = self.save(page, url, json, rect, now);
403+
var lOffset = { x: left.rect[0], y: left.rect[1] };
404+
var rOffset = { x: right.rect[0], y: right.rect[1] };
405+
self.highlight(latest.time, now, ret, lOffset, rOffset, function(diff){
394406
info.diff = diff;
395407
log(JSON.stringify(info), _.log.INFO);
396408
phantom.exit();
@@ -407,7 +419,7 @@ M.prototype.capture = function(url, needDiff){
407419
/**
408420
* get tree object by time
409421
* @param {string|number} time
410-
* @returns {Object|undefined}
422+
* @returns {object|undefined}
411423
*/
412424
M.prototype.getTree = function(time){
413425
var file = this.root + '/' + time + '/' + TREE_FILENAME;
@@ -429,7 +441,9 @@ M.prototype.diff = function(left, right){
429441
if(lTree && rTree){
430442
var ret = diff(lTree, rTree, options.diff);
431443
if(ret.length){
432-
self.highlight(left, right, ret, function(diff){
444+
var lOffset = { x: lTree.rect[0], y: lTree.rect[1] };
445+
var rOffset = { x: rTree.rect[0], y: rTree.rect[1] };
446+
self.highlight(left, right, ret, lOffset, rOffset, function(diff){
433447
var info = {diff: diff};
434448
log(JSON.stringify(info), _.log.INFO);
435449
phantom.exit();

0 commit comments

Comments
 (0)