tests/interaction.js

   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 //
   4 function 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
  13 function 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
  21 function 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.)
  32 function 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
  62 function 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%
  65   var percentages = offsetToPercentage(g, event.offsetX, event.offsetY);
  66   var xPct = percentages[0];
  67   var yPct = percentages[1];
  68
  69   if (event.ctrlKey) {
  70     zoom(g, -.25, xPct, yPct);
  71   } else {
  72     zoom(g, +.2, xPct, yPct);
  73   }
  74 }
  75
  76 var lastClickedGraph = null;
  77
  78 function clickV3(event, g, context) {
  79   lastClickedGraph = g;
  80   Dygraph.cancelEvent(event);
  81 }
  82
  83 function scrollV3(event, g, context) {
  84   if (lastClickedGraph != g) {
  85     return;
  86   }
  87   var normal = event.detail ? event.detail * -1 : event.wheelDelta / 40;
  88   // For me the normalized value shows 0.075 for one click. If I took
  89   // that verbatim, it would be a 7.5%.
  90   var percentage = normal / 50;
  91
  92   var percentages = offsetToPercentage(g, event.offsetX, event.offsetY);
  93   var xPct = percentages[0];
  94   var yPct = percentages[1];
  95
  96   zoom(g, percentage, xPct, yPct);
  97   Dygraph.cancelEvent(event);
  98 }
  99
 100 // Adjusts [x, y] toward each other by zoomInPercentage%
 101 // Split it so the left/bottom axis gets xBias/yBias of that change and
 102 // tight/top gets (1-xBias)/(1-yBias) of that change.
 103 //
 104 // If a bias is missing it splits it down the middle.
 105 function zoom(g, zoomInPercentage, xBias, yBias) {
 106   xBias = xBias || 0.5;
 107   yBias = yBias || 0.5;
 108   function adjustAxis(axis, zoomInPercentage, bias) {
 109     var delta = axis[1] - axis[0];
 110     var increment = delta * zoomInPercentage;
 111     var foo = [increment * bias, increment * (1-bias)];
 112     return [ axis[0] + foo[0], axis[1] - foo[1] ];
 113   }
 114   var yAxes = g.yAxisRanges();
 115   var newYAxes = [];
 116   for (var i = 0; i < yAxes.length; i++) {
 117     newYAxes[i] = adjustAxis(yAxes[i], zoomInPercentage, yBias);
 118   }
 119
 120   g.updateOptions({
 121     dateWindow: adjustAxis(g.xAxisRange(), zoomInPercentage, xBias),
 122     valueRange: newYAxes[0]
 123     });
 124 }
 125
 126 var v4Active = false;
 127 var v4Canvas = null;
 128
 129 function downV4(event, g, context) {
 130   context.initializeMouseDown(event, g, context);
 131   v4Active = true;
 132   moveV4(event, g, context); // in case the mouse went down on a data point.
 133 }
 134
 135 var processed = [];
 136
 137 function moveV4(event, g, context) {
 138   var RANGE = 7;
 139
 140   if (v4Active) {
 141     var canvasx = Dygraph.pageX(event) - Dygraph.findPosX(g.graphDiv);
 142     var canvasy = Dygraph.pageY(event) - Dygraph.findPosY(g.graphDiv);
 143
 144     var rows = g.numRows();
 145     // Row layout:
 146     // [date, [val1, stdev1], [val2, stdev2]]
 147     for (var row = 0; row < rows; row++) {
 148       var date = g.getValue(row, 0);
 149       var x = g.toDomCoords(date, null)[0];
 150       var diff = Math.abs(canvasx - x);
 151       if (diff < RANGE) {
 152         for (var col = 1; col < 3; col++) {
 153           // TODO(konigsberg): these will throw exceptions as data is removed.
 154           var vals =  g.getValue(row, col);
 155           if (vals == null) { continue; }
 156           var val = vals[0];
 157           var y = g.toDomCoords(null, val)[1];
 158           var diff2 = Math.abs(canvasy - y);
 159           if (diff2 < RANGE) {
 160             var found = false;
 161             for (var i in processed) {
 162               var stored = processed[i];
 163               if(stored[0] == row && stored[1] == col) {
 164                 found = true;
 165                 break;
 166               }
 167             }
 168             if (!found) {
 169               processed.push([row, col]);
 170               drawV4(x, y);
 171             }
 172             return;
 173           }
 174         }
 175       }
 176     }
 177   }
 178 }
 179
 180 function upV4(event, g, context) {
 181   if (v4Active) {
 182     v4Active = false;
 183   }
 184 }
 185
 186 function dblClickV4(event, g, context) {
 187   restorePositioning(g4);
 188 }
 189
 190 function drawV4(x, y) {
 191   var ctx = v4Canvas;
 192
 193   ctx.strokeStyle = "#000000";
 194   ctx.fillStyle = "#FFFF00";
 195   ctx.beginPath();
 196   ctx.arc(x,y,5,0,Math.PI*2,true);
 197   ctx.closePath();
 198   ctx.stroke();
 199   ctx.fill();
 200 }
 201
 202 function captureCanvas(canvas, area, g) {
 203   v4Canvas = canvas;
 204 }
 205
 206 function restorePositioning(g) {
 207   g.updateOptions({
 208     dateWindow: null,
 209     valueRange: null
 210   });
 211 }