cleanup
[dygraphs.git] / tests / interaction.js
CommitLineData
be46943f
RK
1// Code for a variety of interaction models. Used in interaction.html, but split out from
2// that file so they can be tested in isolation.
3//
2c1befcb
RK
4function downV3(event, g, context) {
5 context.initializeMouseDown(event, g, context);
6 if (event.altKey || event.shiftKey) {
7 Dygraph.startZoom(event, g, context);
8 } else {
9 Dygraph.startPan(event, g, context);
10 }
11}
12
13function moveV3(event, g, context) {
14 if (context.isPanning) {
15 Dygraph.movePan(event, g, context);
16 } else if (context.isZooming) {
17 Dygraph.moveZoom(event, g, context);
18 }
19}
20
21function upV3(event, g, context) {
22 if (context.isPanning) {
23 Dygraph.endPan(event, g, context);
24 } else if (context.isZooming) {
25 Dygraph.endZoom(event, g, context);
26 }
27}
28
29// Take the offset of a mouse event on the dygraph canvas and
30// convert it to a pair of percentages from the bottom left.
31// (Not top left, bottom is where the lower value is.)
32function offsetToPercentage(g, offsetX, offsetY) {
33 // This is calculating the pixel offset of the leftmost date.
34 var xOffset = g.toDomCoords(g.xAxisRange()[0], null)[0];
35 var yar0 = g.yAxisRange(0);
36
37 // This is calculating the pixel of the higest value. (Top pixel)
38 var yOffset = g.toDomCoords(null, yar0[1])[1];
39
40 // x y w and h are relative to the corner of the drawing area,
41 // so that the upper corner of the drawing area is (0, 0).
42 var x = offsetX - xOffset;
43 var y = offsetY - yOffset;
44
45 // This is computing the rightmost pixel, effectively defining the
46 // width.
47 var w = g.toDomCoords(g.xAxisRange()[1], null)[0] - xOffset;
48
49 // This is computing the lowest pixel, effectively defining the height.
50 var h = g.toDomCoords(null, yar0[0])[1] - yOffset;
51
52 // Percentage from the left.
53 var xPct = w == 0 ? 0 : (x / w);
54 // Percentage from the top.
55 var yPct = h == 0 ? 0 : (y / h);
56
57 // The (1-) part below changes it from "% distance down from the top"
58 // to "% distance up from the bottom".
59 return [xPct, (1-yPct)];
60}
61
62function dblClickV3(event, g, context) {
63 // Reducing by 20% makes it 80% the original size, which means
64 // to restore to original size it must grow by 25%
417af431
JL
65
66 if (!(event.offsetX && event.offsetY)){
67 event.offsetX = event.layerX - event.target.offsetLeft;
68 event.offsetY = event.layerY - event.target.offsetTop;
69 }
70
2c1befcb
RK
71 var percentages = offsetToPercentage(g, event.offsetX, event.offsetY);
72 var xPct = percentages[0];
73 var yPct = percentages[1];
74
75 if (event.ctrlKey) {
76 zoom(g, -.25, xPct, yPct);
77 } else {
78 zoom(g, +.2, xPct, yPct);
79 }
80}
81
9d10bca3 82var lastClickedGraph = null;
fd556f34 83
9d10bca3
RK
84function clickV3(event, g, context) {
85 lastClickedGraph = g;
86 Dygraph.cancelEvent(event);
fd556f34
RK
87}
88
2c1befcb 89function scrollV3(event, g, context) {
9d10bca3 90 if (lastClickedGraph != g) {
fd556f34
RK
91 return;
92 }
2c1befcb
RK
93 var normal = event.detail ? event.detail * -1 : event.wheelDelta / 40;
94 // For me the normalized value shows 0.075 for one click. If I took
95 // that verbatim, it would be a 7.5%.
96 var percentage = normal / 50;
97
417af431
JL
98 if (!(event.offsetX && event.offsetY)){
99 event.offsetX = event.layerX - event.target.offsetLeft;
100 event.offsetY = event.layerY - event.target.offsetTop;
101 }
102
2c1befcb
RK
103 var percentages = offsetToPercentage(g, event.offsetX, event.offsetY);
104 var xPct = percentages[0];
105 var yPct = percentages[1];
106
107 zoom(g, percentage, xPct, yPct);
108 Dygraph.cancelEvent(event);
109}
110
111// Adjusts [x, y] toward each other by zoomInPercentage%
112// Split it so the left/bottom axis gets xBias/yBias of that change and
113// tight/top gets (1-xBias)/(1-yBias) of that change.
114//
115// If a bias is missing it splits it down the middle.
116function zoom(g, zoomInPercentage, xBias, yBias) {
117 xBias = xBias || 0.5;
118 yBias = yBias || 0.5;
119 function adjustAxis(axis, zoomInPercentage, bias) {
120 var delta = axis[1] - axis[0];
121 var increment = delta * zoomInPercentage;
122 var foo = [increment * bias, increment * (1-bias)];
123 return [ axis[0] + foo[0], axis[1] - foo[1] ];
124 }
125 var yAxes = g.yAxisRanges();
126 var newYAxes = [];
127 for (var i = 0; i < yAxes.length; i++) {
128 newYAxes[i] = adjustAxis(yAxes[i], zoomInPercentage, yBias);
129 }
130
131 g.updateOptions({
132 dateWindow: adjustAxis(g.xAxisRange(), zoomInPercentage, xBias),
133 valueRange: newYAxes[0]
134 });
135}
136
137var v4Active = false;
138var v4Canvas = null;
139
140function downV4(event, g, context) {
141 context.initializeMouseDown(event, g, context);
142 v4Active = true;
143 moveV4(event, g, context); // in case the mouse went down on a data point.
144}
145
146var processed = [];
147
148function moveV4(event, g, context) {
149 var RANGE = 7;
150
151 if (v4Active) {
464b5f50
DV
152 var graphPos = Dygraph.findPos(g.graphDiv);
153 var canvasx = Dygraph.pageX(event) - graphPos.x;
154 var canvasy = Dygraph.pageY(event) - graphPos.y;
2c1befcb
RK
155
156 var rows = g.numRows();
157 // Row layout:
158 // [date, [val1, stdev1], [val2, stdev2]]
159 for (var row = 0; row < rows; row++) {
160 var date = g.getValue(row, 0);
161 var x = g.toDomCoords(date, null)[0];
162 var diff = Math.abs(canvasx - x);
163 if (diff < RANGE) {
164 for (var col = 1; col < 3; col++) {
165 // TODO(konigsberg): these will throw exceptions as data is removed.
166 var vals = g.getValue(row, col);
167 if (vals == null) { continue; }
168 var val = vals[0];
169 var y = g.toDomCoords(null, val)[1];
170 var diff2 = Math.abs(canvasy - y);
171 if (diff2 < RANGE) {
172 var found = false;
173 for (var i in processed) {
174 var stored = processed[i];
175 if(stored[0] == row && stored[1] == col) {
176 found = true;
177 break;
9e9ca2eb 178 }
9e9ca2eb 179 }
2c1befcb
RK
180 if (!found) {
181 processed.push([row, col]);
182 drawV4(x, y);
183 }
184 return;
9e9ca2eb 185 }
9e9ca2eb
RK
186 }
187 }
2c1befcb
RK
188 }
189 }
190}
191
192function upV4(event, g, context) {
193 if (v4Active) {
194 v4Active = false;
195 }
196}
197
198function dblClickV4(event, g, context) {
7d783e00 199 restorePositioning(g);
2c1befcb
RK
200}
201
202function drawV4(x, y) {
203 var ctx = v4Canvas;
204
205 ctx.strokeStyle = "#000000";
206 ctx.fillStyle = "#FFFF00";
207 ctx.beginPath();
208 ctx.arc(x,y,5,0,Math.PI*2,true);
209 ctx.closePath();
210 ctx.stroke();
211 ctx.fill();
212}
213
214function captureCanvas(canvas, area, g) {
215 v4Canvas = canvas;
216}
217
218function restorePositioning(g) {
219 g.updateOptions({
220 dateWindow: null,
221 valueRange: null
222 });
223}