Skip to content

Commit

Permalink
Merge pull request plotly#368 from plotly/rangeslider-speedup
Browse files Browse the repository at this point in the history 
Rangeslider speedup
  • Loading branch information
@mdtusz
mdtusz committed Mar 30, 2016
2 parents 4c676df + a718d15 commit c499b0f
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 53 deletions.
10 changes: 9 additions & 1 deletion src/components/rangeslider/create_slider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -224,7 +224,15 @@ module.exports = function createSlider(gd, minStart, maxStart) {
dataMin = min / width * range + rangeMin,
dataMax = max / width * range + rangeMin;

Plotly.relayout(gd, 'xaxis.range', [dataMin, dataMax]);
if(window.requestAnimationFrame) {
window.requestAnimationFrame(function() {
Plotly.relayout(gd, 'xaxis.range', [dataMin, dataMax]);
});
} else {
setTimeout(function() {
Plotly.relayout(gd, 'xaxis.range', [dataMin, dataMax]);
}, 16);
}
}


Expand Down
112 changes: 60 additions & 52 deletions test/jasmine/tests/range_slider_test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,89 +48,91 @@ describe('the range slider', function() {
expect(bg.getAttribute('stroke-width')).toBe('2');
});

it('should react to resizing the minimum handle', function() {
it('should react to resizing the minimum handle', function(done) {
var start = 85,
end = 140,
dataMinStart = rangeSlider.getAttribute('data-min'),
diff = end - start;

slide(start, 400, end, 400);
slide(start, 400, end, 400).then(function() {
var maskMin = children[2],
handleMin = children[5];

var maskMin = children[2],
handleMin = children[5];

expect(rangeSlider.getAttribute('data-min')).toEqual(String(+dataMinStart + diff));
expect(maskMin.getAttribute('width')).toEqual(String(diff));
expect(handleMin.getAttribute('transform')).toBe('translate(' + (diff - 3) + ')');
expect(rangeSlider.getAttribute('data-min')).toEqual(String(+dataMinStart + diff));
expect(maskMin.getAttribute('width')).toEqual(String(diff));
expect(handleMin.getAttribute('transform')).toBe('translate(' + (diff - 3) + ')');
}).then(done);
});

it('should react to resizing the maximum handle', function() {
it('should react to resizing the maximum handle', function(done) {
var start = 705,
end = 500,
dataMaxStart = rangeSlider.getAttribute('data-max'),
diff = end - start;

slide(start, 400, end, 400);

var maskMax = children[3],
handleMax = children[6];
slide(start, 400, end, 400).then(function() {
var maskMax = children[3],
handleMax = children[6];

expect(rangeSlider.getAttribute('data-max')).toEqual(String(+dataMaxStart + diff));
expect(maskMax.getAttribute('width')).toEqual(String(-diff));
expect(handleMax.getAttribute('transform')).toBe('translate(' + (+dataMaxStart + diff) + ')');
expect(rangeSlider.getAttribute('data-max')).toEqual(String(+dataMaxStart + diff));
expect(maskMax.getAttribute('width')).toEqual(String(-diff));
expect(handleMax.getAttribute('transform')).toBe('translate(' + (+dataMaxStart + diff) + ')');
}).then(done);
});

it('should react to moving the slidebox left to right', function() {
it('should react to moving the slidebox left to right', function(done) {
var start = 250,
end = 300,
dataMinStart = rangeSlider.getAttribute('data-min'),
diff = end - start;

slide(start, 400, end, 400);

var maskMin = children[2],
handleMin = children[5];
slide(start, 400, end, 400).then(function() {
var maskMin = children[2],
handleMin = children[5];

expect(rangeSlider.getAttribute('data-min')).toEqual(String(+dataMinStart + diff));
expect(maskMin.getAttribute('width')).toEqual(String(diff));
expect(handleMin.getAttribute('transform')).toEqual('translate(' + (+dataMinStart + diff - 3) + ')');
expect(rangeSlider.getAttribute('data-min')).toEqual(String(+dataMinStart + diff));
expect(maskMin.getAttribute('width')).toEqual(String(diff));
expect(handleMin.getAttribute('transform')).toEqual('translate(' + (+dataMinStart + diff - 3) + ')');
}).then(done);
});

it('should react to moving the slidebox right to left', function() {
it('should react to moving the slidebox right to left', function(done) {
var start = 300,
end = 250,
dataMaxStart = rangeSlider.getAttribute('data-max'),
diff = end - start;

slide(start, 400, end, 400);
slide(start, 400, end, 400).then(function() {
var maskMax = children[3],
handleMax = children[6];

expect(rangeSlider.getAttribute('data-max')).toEqual(String(+dataMaxStart + diff));
expect(maskMax.getAttribute('width')).toEqual(String(-diff));
expect(handleMax.getAttribute('transform')).toEqual('translate(' + (+dataMaxStart + diff) + ')');
}).then(done);

var maskMax = children[3],
handleMax = children[6];

expect(rangeSlider.getAttribute('data-max')).toEqual(String(+dataMaxStart + diff));
expect(maskMax.getAttribute('width')).toEqual(String(-diff));
expect(handleMax.getAttribute('transform')).toEqual('translate(' + (+dataMaxStart + diff) + ')');
});

it('should resize the main plot when rangeslider has moved', function() {
it('should resize the main plot when rangeslider has moved', function(done) {
var start = 300,
end = 400,
rangeDiff1 = gd._fullLayout.xaxis.range[1] - gd._fullLayout.xaxis.range[0];

slide(start, 400, end, 400);

var rangeDiff2 = gd._fullLayout.xaxis.range[1] - gd._fullLayout.xaxis.range[0];

expect(rangeDiff2).toBeLessThan(rangeDiff1);

start = 400;
end = 200;

slide(start, 400, end, 400);

var rangeDiff3 = gd._fullLayout.xaxis.range[1] - gd._fullLayout.xaxis.range[0];

expect(rangeDiff3).toBeLessThan(rangeDiff2);
rangeDiff1 = gd._fullLayout.xaxis.range[1] - gd._fullLayout.xaxis.range[0],
rangeDiff2,
rangeDiff3;

slide(start, 400, end, 400).then(function() {
rangeDiff2 = gd._fullLayout.xaxis.range[1] - gd._fullLayout.xaxis.range[0];
expect(rangeDiff2).toBeLessThan(rangeDiff1);
}).then(function() {
start = 400;
end = 200;

return slide(start, 400, end, 400);
}).then(function() {
rangeDiff3 = gd._fullLayout.xaxis.range[1] - gd._fullLayout.xaxis.range[0];
expect(rangeDiff3).toBeLessThan(rangeDiff2);
}).then(done);
});
});

Expand Down Expand Up @@ -310,8 +312,14 @@ describe('the range slider', function() {


function slide(fromX, fromY, toX, toY) {
mouseEvent('mousemove', fromX, fromY);
mouseEvent('mousedown', fromX, fromY);
mouseEvent('mousemove', toX, toY);
mouseEvent('mouseup', toX, toY);
return new Promise(function(resolve) {
mouseEvent('mousemove', fromX, fromY);
mouseEvent('mousedown', fromX, fromY);
mouseEvent('mousemove', toX, toY);
mouseEvent('mouseup', toX, toY);

setTimeout(function() {
return resolve();
}, 20);
});
}

0 comments on commit c499b0f

Please sign in to comment.