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