Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit c499b0f

Browse filesBrowse files
mdtuszmdtusz
committed
Merge pull request plotly#368 from plotly/rangeslider-speedup
Rangeslider speedup
2 parents 4c676df + a718d15 commit c499b0f
Copy full SHA for c499b0f

File tree

Expand file treeCollapse file tree

2 files changed

+69
-53
lines changed
Filter options
Expand file treeCollapse file tree

2 files changed

+69
-53
lines changed

‎src/components/rangeslider/create_slider.js

Copy file name to clipboardExpand all lines: src/components/rangeslider/create_slider.js
+9-1Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,15 @@ module.exports = function createSlider(gd, minStart, maxStart) {
224224
dataMin = min / width * range + rangeMin,
225225
dataMax = max / width * range + rangeMin;
226226

227-
Plotly.relayout(gd, 'xaxis.range', [dataMin, dataMax]);
227+
if(window.requestAnimationFrame) {
228+
window.requestAnimationFrame(function() {
229+
Plotly.relayout(gd, 'xaxis.range', [dataMin, dataMax]);
230+
});
231+
} else {
232+
setTimeout(function() {
233+
Plotly.relayout(gd, 'xaxis.range', [dataMin, dataMax]);
234+
}, 16);
235+
}
228236
}
229237

230238

‎test/jasmine/tests/range_slider_test.js

Copy file name to clipboardExpand all lines: test/jasmine/tests/range_slider_test.js
+60-52Lines changed: 60 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -48,89 +48,91 @@ describe('the range slider', function() {
4848
expect(bg.getAttribute('stroke-width')).toBe('2');
4949
});
5050

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

57-
slide(start, 400, end, 400);
57+
slide(start, 400, end, 400).then(function() {
58+
var maskMin = children[2],
59+
handleMin = children[5];
5860

59-
var maskMin = children[2],
60-
handleMin = children[5];
61-
62-
expect(rangeSlider.getAttribute('data-min')).toEqual(String(+dataMinStart + diff));
63-
expect(maskMin.getAttribute('width')).toEqual(String(diff));
64-
expect(handleMin.getAttribute('transform')).toBe('translate(' + (diff - 3) + ')');
61+
expect(rangeSlider.getAttribute('data-min')).toEqual(String(+dataMinStart + diff));
62+
expect(maskMin.getAttribute('width')).toEqual(String(diff));
63+
expect(handleMin.getAttribute('transform')).toBe('translate(' + (diff - 3) + ')');
64+
}).then(done);
6565
});
6666

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

73-
slide(start, 400, end, 400);
74-
75-
var maskMax = children[3],
76-
handleMax = children[6];
73+
slide(start, 400, end, 400).then(function() {
74+
var maskMax = children[3],
75+
handleMax = children[6];
7776

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

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

89-
slide(start, 400, end, 400);
90-
91-
var maskMin = children[2],
92-
handleMin = children[5];
89+
slide(start, 400, end, 400).then(function() {
90+
var maskMin = children[2],
91+
handleMin = children[5];
9392

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

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

105-
slide(start, 400, end, 400);
105+
slide(start, 400, end, 400).then(function() {
106+
var maskMax = children[3],
107+
handleMax = children[6];
108+
109+
expect(rangeSlider.getAttribute('data-max')).toEqual(String(+dataMaxStart + diff));
110+
expect(maskMax.getAttribute('width')).toEqual(String(-diff));
111+
expect(handleMax.getAttribute('transform')).toEqual('translate(' + (+dataMaxStart + diff) + ')');
112+
}).then(done);
106113

107-
var maskMax = children[3],
108-
handleMax = children[6];
109114

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

115-
it('should resize the main plot when rangeslider has moved', function() {
117+
it('should resize the main plot when rangeslider has moved', function(done) {
116118
var start = 300,
117119
end = 400,
118-
rangeDiff1 = gd._fullLayout.xaxis.range[1] - gd._fullLayout.xaxis.range[0];
119-
120-
slide(start, 400, end, 400);
121-
122-
var rangeDiff2 = gd._fullLayout.xaxis.range[1] - gd._fullLayout.xaxis.range[0];
123-
124-
expect(rangeDiff2).toBeLessThan(rangeDiff1);
125-
126-
start = 400;
127-
end = 200;
128-
129-
slide(start, 400, end, 400);
130-
131-
var rangeDiff3 = gd._fullLayout.xaxis.range[1] - gd._fullLayout.xaxis.range[0];
132-
133-
expect(rangeDiff3).toBeLessThan(rangeDiff2);
120+
rangeDiff1 = gd._fullLayout.xaxis.range[1] - gd._fullLayout.xaxis.range[0],
121+
rangeDiff2,
122+
rangeDiff3;
123+
124+
slide(start, 400, end, 400).then(function() {
125+
rangeDiff2 = gd._fullLayout.xaxis.range[1] - gd._fullLayout.xaxis.range[0];
126+
expect(rangeDiff2).toBeLessThan(rangeDiff1);
127+
}).then(function() {
128+
start = 400;
129+
end = 200;
130+
131+
return slide(start, 400, end, 400);
132+
}).then(function() {
133+
rangeDiff3 = gd._fullLayout.xaxis.range[1] - gd._fullLayout.xaxis.range[0];
134+
expect(rangeDiff3).toBeLessThan(rangeDiff2);
135+
}).then(done);
134136
});
135137
});
136138

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

311313

312314
function slide(fromX, fromY, toX, toY) {
313-
mouseEvent('mousemove', fromX, fromY);
314-
mouseEvent('mousedown', fromX, fromY);
315-
mouseEvent('mousemove', toX, toY);
316-
mouseEvent('mouseup', toX, toY);
315+
return new Promise(function(resolve) {
316+
mouseEvent('mousemove', fromX, fromY);
317+
mouseEvent('mousedown', fromX, fromY);
318+
mouseEvent('mousemove', toX, toY);
319+
mouseEvent('mouseup', toX, toY);
320+
321+
setTimeout(function() {
322+
return resolve();
323+
}, 20);
324+
});
317325
}

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.