Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit f43fe64

Browse files
alexcjohnsonalexcjohnson
committed
break up graph_interact
1 parent dc5cb63 commit f43fe64

File tree

12 files changed

+983
-880
lines changed

12 files changed

+983
-880
lines changed

‎src/components/annotations/index.js

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212
var Plotly = require('../../plotly');
1313
var d3 = require('d3');
1414
var isNumeric = require('fast-isnumeric');
15+
var setCursor = require('../../lib/setcursor');
16+
var dragElement = require('../dragelement');
1517

1618
var annotations = module.exports = {};
1719

@@ -583,7 +585,7 @@ annotations.draw = function(gd, index, opt, value) {
583585
annx0,
584586
anny0;
585587

586-
Plotly.Fx.dragElement({
588+
dragElement.init({
587589
element: arrowdrag.node(),
588590
prepFn: function() {
589591
annx0 = Number(ann.attr('x'));
@@ -641,7 +643,7 @@ annotations.draw = function(gd, index, opt, value) {
641643
y0,
642644
update;
643645

644-
Plotly.Fx.dragElement({
646+
dragElement.init({
645647
element: ann.node(),
646648
prepFn: function() {
647649
x0 = Number(ann.attr('x'));
@@ -662,7 +664,7 @@ annotations.draw = function(gd, index, opt, value) {
662664
var widthFraction = options._xsize / gs.w,
663665
xLeft = options.x + options._xshift / gs.w - widthFraction / 2;
664666

665-
update[annbase + '.x'] = Plotly.Fx.dragAlign(xLeft + dx / gs.w,
667+
update[annbase + '.x'] = dragElement.align(xLeft + dx / gs.w,
666668
widthFraction, 0, 1, options.xanchor);
667669
}
668670

@@ -671,11 +673,11 @@ annotations.draw = function(gd, index, opt, value) {
671673
var heightFraction = options._ysize / gs.h,
672674
yBottom = options.y - options._yshift / gs.h - heightFraction / 2;
673675

674-
update[annbase + '.y'] = Plotly.Fx.dragAlign(yBottom - dy / gs.h,
676+
update[annbase + '.y'] = dragElement.align(yBottom - dy / gs.h,
675677
heightFraction, 0, 1, options.yanchor);
676678
}
677679
if(!xa || !ya) {
678-
csr = Plotly.Fx.dragCursors(
680+
csr = dragElement.cursor(
679681
xa ? 0.5 : update[annbase + '.x'],
680682
ya ? 0.5 : update[annbase + '.y'],
681683
options.xanchor, options.yanchor
@@ -694,10 +696,10 @@ annotations.draw = function(gd, index, opt, value) {
694696
x1 + ',' + y1 + ')'
695697
});
696698

697-
Plotly.Fx.setCursor(ann, csr);
699+
setCursor(ann, csr);
698700
},
699701
doneFn: function(dragged) {
700-
Plotly.Fx.setCursor(ann);
702+
setCursor(ann);
701703
if(dragged) {
702704
Plotly.relayout(gd, update);
703705
var notesBox = document.querySelector('.js-notes-box-panel');

‎src/components/colorbar/draw.js

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,9 @@ var d3 = require('d3');
1414
var Plotly = require('../../plotly');
1515
var Plots = require('../../plots/plots');
1616
var Axes = require('../../plots/cartesian/axes');
17-
var Fx = require('../../plots/cartesian/graph_interact');
17+
var dragElement = require('../dragelement');
1818
var Lib = require('../../lib');
19+
var setCursor = require('../../lib/setcursor');
1920
var Drawing = require('../drawing');
2021
var Color = require('../color');
2122
var Titles = require('../titles');
@@ -462,29 +463,29 @@ module.exports = function draw(gd, id) {
462463
xf,
463464
yf;
464465

465-
Fx.dragElement({
466+
dragElement.init({
466467
element: container.node(),
467468
prepFn: function() {
468469
t0 = container.attr('transform');
469-
Fx.setCursor(container);
470+
setCursor(container);
470471
},
471472
moveFn: function(dx, dy) {
472473
var gs = gd._fullLayout._size;
473474

474475
container.attr('transform',
475476
t0+' ' + 'translate('+dx+','+dy+')');
476477

477-
xf = Fx.dragAlign(xLeftFrac + (dx/gs.w), thickFrac,
478+
xf = dragElement.align(xLeftFrac + (dx/gs.w), thickFrac,
478479
0, 1, opts.xanchor);
479-
yf = Fx.dragAlign(yBottomFrac - (dy/gs.h), lenFrac,
480+
yf = dragElement.align(yBottomFrac - (dy/gs.h), lenFrac,
480481
0, 1, opts.yanchor);
481482

482-
var csr = Fx.dragCursors(xf, yf,
483+
var csr = dragElement.cursor(xf, yf,
483484
opts.xanchor, opts.yanchor);
484-
Fx.setCursor(container, csr);
485+
setCursor(container, csr);
485486
},
486487
doneFn: function(dragged) {
487-
Fx.setCursor(container);
488+
setCursor(container);
488489

489490
if(dragged && xf!==undefined && yf!==undefined) {
490491
var idNum = id.substr(2),

‎src/components/dragelement/align.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/**
2+
* Copyright 2012-2016, Plotly, Inc.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the MIT license found in the
6+
* LICENSE file in the root directory of this source tree.
7+
*/
8+
9+
10+
'use strict';
11+
12+
13+
// for automatic alignment on dragging, <1/3 means left align,
14+
// >2/3 means right, and between is center. Pick the right fraction
15+
// based on where you are, and return the fraction corresponding to
16+
// that position on the object
17+
module.exports = function align(v, dv, v0, v1, anchor) {
18+
var vmin = (v - v0) / (v1 - v0),
19+
vmax = vmin + dv / (v1 - v0),
20+
vc = (vmin + vmax) / 2;
21+
22+
// explicitly specified anchor
23+
if(anchor === 'left' || anchor === 'bottom') return vmin;
24+
if(anchor === 'center' || anchor === 'middle') return vc;
25+
if(anchor === 'right' || anchor === 'top') return vmax;
26+
27+
// automatic based on position
28+
if(vmin < (2/3) - vc) return vmin;
29+
if(vmax > (4/3) - vc) return vmax;
30+
return vc;
31+
};

‎src/components/dragelement/cursor.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/**
2+
* Copyright 2012-2016, Plotly, Inc.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the MIT license found in the
6+
* LICENSE file in the root directory of this source tree.
7+
*/
8+
9+
10+
'use strict';
11+
12+
var Lib = require('../../lib');
13+
14+
15+
// set cursors pointing toward the closest corner/side,
16+
// to indicate alignment
17+
// x and y are 0-1, fractions of the plot area
18+
var cursorset = [['sw-resize','s-resize','se-resize'],
19+
['w-resize','move','e-resize'],
20+
['nw-resize','n-resize','ne-resize']];
21+
module.exports = function getCursor(x,y,xanchor,yanchor) {
22+
if(xanchor==='left') x=0;
23+
else if(xanchor==='center') x=1;
24+
else if(xanchor==='right') x=2;
25+
else x = Lib.constrain(Math.floor(x*3),0,2);
26+
27+
if(yanchor==='bottom') y=0;
28+
else if(yanchor==='middle') y=1;
29+
else if(yanchor==='top') y=2;
30+
else y = Lib.constrain(Math.floor(y*3),0,2);
31+
32+
return cursorset[y][x];
33+
};

‎src/components/dragelement/index.js

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
/**
2+
* Copyright 2012-2016, Plotly, Inc.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the MIT license found in the
6+
* LICENSE file in the root directory of this source tree.
7+
*/
8+
9+
10+
'use strict';
11+
12+
var Plotly = require('../../plotly');
13+
var Lib = require('../../lib');
14+
15+
var constants = require('../../plots/cartesian/constants');
16+
17+
18+
/**
19+
* Abstracts click & drag interactions
20+
* @param {object} options with keys:
21+
* element (required) the DOM element to drag
22+
* prepFn (optional) function(event, startX, startY)
23+
* executed on mousedown
24+
* startX and startY are the clientX and clientY pixel position
25+
* of the mousedown event
26+
* moveFn (optional) function(dx, dy, dragged)
27+
* executed on move
28+
* dx and dy are the net pixel offset of the drag,
29+
* dragged is true/false, has the mouse moved enough to
30+
* constitute a drag
31+
* doneFn (optional) function(dragged, numClicks)
32+
* executed on mouseup, or mouseout of window since
33+
* we don't get events after that
34+
* dragged is as in moveFn
35+
* numClicks is how many clicks we've registered within
36+
* a doubleclick time
37+
*/
38+
var dragElement = module.exports = {};
39+
40+
dragElement.align = require('./align');
41+
dragElement.getCursor = require('./cursor');
42+
43+
var unhover = require('./unhover');
44+
dragElement.unhover = unhover.wrapped;
45+
dragElement.unhover_raw = unhover.raw;
46+
47+
dragElement.init = function init(options) {
48+
var gd = Lib.getPlotDiv(options.element) || {},
49+
numClicks = 1,
50+
DBLCLICKDELAY = constants.DBLCLICKDELAY,
51+
startX,
52+
startY,
53+
newMouseDownTime,
54+
dragCover,
55+
initialTarget;
56+
57+
if(!gd._mouseDownTime) gd._mouseDownTime = 0;
58+
59+
function onStart(e) {
60+
// make dragging and dragged into properties of gd
61+
// so that others can look at and modify them
62+
gd._dragged = false;
63+
gd._dragging = true;
64+
startX = e.clientX;
65+
startY = e.clientY;
66+
initialTarget = e.target;
67+
68+
newMouseDownTime = (new Date()).getTime();
69+
if(newMouseDownTime - gd._mouseDownTime < DBLCLICKDELAY) {
70+
// in a click train
71+
numClicks += 1;
72+
}
73+
else {
74+
// new click train
75+
numClicks = 1;
76+
gd._mouseDownTime = newMouseDownTime;
77+
}
78+
79+
if(options.prepFn) options.prepFn(e, startX, startY);
80+
81+
dragCover = coverSlip();
82+
83+
dragCover.onmousemove = onMove;
84+
dragCover.onmouseup = onDone;
85+
dragCover.onmouseout = onDone;
86+
87+
dragCover.style.cursor = window.getComputedStyle(options.element).cursor;
88+
89+
return Lib.pauseEvent(e);
90+
}
91+
92+
function onMove(e) {
93+
var dx = e.clientX - startX,
94+
dy = e.clientY - startY,
95+
minDrag = options.minDrag || constants.MINDRAG;
96+
97+
if(Math.abs(dx) < minDrag) dx = 0;
98+
if(Math.abs(dy) < minDrag) dy = 0;
99+
if(dx||dy) {
100+
gd._dragged = true;
101+
dragElement.unhover(gd);
102+
}
103+
104+
if(options.moveFn) options.moveFn(dx, dy, gd._dragged);
105+
106+
return Lib.pauseEvent(e);
107+
}
108+
109+
function onDone(e) {
110+
dragCover.onmousemove = null;
111+
dragCover.onmouseup = null;
112+
dragCover.onmouseout = null;
113+
Lib.removeElement(dragCover);
114+
115+
if(!gd._dragging) {
116+
gd._dragged = false;
117+
return;
118+
}
119+
gd._dragging = false;
120+
121+
// don't count as a dblClick unless the mouseUp is also within
122+
// the dblclick delay
123+
if((new Date()).getTime() - gd._mouseDownTime > DBLCLICKDELAY) {
124+
numClicks = Math.max(numClicks - 1, 1);
125+
}
126+
127+
if(options.doneFn) options.doneFn(gd._dragged, numClicks);
128+
129+
if(!gd._dragged) {
130+
var e2 = document.createEvent('MouseEvents');
131+
e2.initEvent('click', true, true);
132+
initialTarget.dispatchEvent(e2);
133+
}
134+
135+
finishDrag(gd);
136+
137+
gd._dragged = false;
138+
139+
return Lib.pauseEvent(e);
140+
}
141+
142+
options.element.onmousedown = onStart;
143+
options.element.style.pointerEvents = 'all';
144+
};
145+
146+
function coverSlip() {
147+
var cover = document.createElement('div');
148+
149+
cover.className = 'dragcover';
150+
var cStyle = cover.style;
151+
cStyle.position = 'fixed';
152+
cStyle.left = 0;
153+
cStyle.right = 0;
154+
cStyle.top = 0;
155+
cStyle.bottom = 0;
156+
cStyle.zIndex = 999999999;
157+
cStyle.background = 'none';
158+
159+
document.body.appendChild(cover);
160+
161+
return cover;
162+
}
163+
164+
function finishDrag(gd) {
165+
gd._dragging = false;
166+
if(gd._replotPending) Plotly.plot(gd);
167+
}

‎src/components/dragelement/unhover.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/**
2+
* Copyright 2012-2016, Plotly, Inc.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the MIT license found in the
6+
* LICENSE file in the root directory of this source tree.
7+
*/
8+
9+
10+
'use strict';
11+
12+
13+
var Events = require('../../lib/events');
14+
15+
16+
var unhover = module.exports = {};
17+
18+
19+
unhover.wrapped = function(gd, evt, subplot) {
20+
if(typeof gd === 'string') gd = document.getElementById(gd);
21+
// Important, clear any queued hovers
22+
if(gd._hoverTimer) {
23+
clearTimeout(gd._hoverTimer);
24+
gd._hoverTimer = undefined;
25+
}
26+
unhover.raw(gd,evt,subplot);
27+
};
28+
29+
30+
// remove hover effects on mouse out, and emit unhover event
31+
unhover.raw = function unhover_raw(gd, evt) {
32+
var fullLayout = gd._fullLayout;
33+
if(!evt) evt = {};
34+
if(evt.target &&
35+
Events.triggerHandler(gd, 'plotly_beforehover', evt) === false) {
36+
return;
37+
}
38+
fullLayout._hoverlayer.selectAll('g').remove();
39+
if(evt.target && gd._hoverdata) {
40+
gd.emit('plotly_unhover', {points: gd._hoverdata});
41+
}
42+
gd._hoverdata = undefined;
43+
};

0 commit comments

Comments
 (0)