gallery/interaction-api.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
  66   if (!(event.offsetX && event.offsetY)){
  67     event.offsetX = event.layerX - event.target.offsetLeft;
  68     event.offsetY = event.layerY - event.target.offsetTop;
  69   }
  70
  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
  82 var lastClickedGraph = null;
  83
  84 function clickV3(event, g, context) {
  85   lastClickedGraph = g;
  86   Dygraph.cancelEvent(event);
  87 }
  88
  89 function scrollV3(event, g, context) {
  90   if (lastClickedGraph != g) {
  91     return;
  92   }
  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
  98   if (!(event.offsetX && event.offsetY)){
  99     event.offsetX = event.layerX - event.target.offsetLeft;
 100     event.offsetY = event.layerY - event.target.offsetTop;
 101   }
 102
 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.
 116 function 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
 137 var v4Active = false;
 138 var v4Canvas = null;
 139
 140 function 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
 146 var processed = [];
 147
 148 function moveV4(event, g, context) {
 149   var RANGE = 7;
 150
 151   if (v4Active) {
 152     var canvasx = Dygraph.pageX(event) - Dygraph.findPosX(g.graphDiv);
 153     var canvasy = Dygraph.pageY(event) - Dygraph.findPosY(g.graphDiv);
 154
 155     var rows = g.numRows();
 156     // Row layout:
 157     // [date, [val1, stdev1], [val2, stdev2]]
 158     for (var row = 0; row < rows; row++) {
 159       var date = g.getValue(row, 0);
 160       var x = g.toDomCoords(date, null)[0];
 161       var diff = Math.abs(canvasx - x);
 162       if (diff < RANGE) {
 163         for (var col = 1; col < 3; col++) {
 164           // TODO(konigsberg): these will throw exceptions as data is removed.
 165           var vals =  g.getValue(row, col);
 166           if (vals == null) { continue; }
 167           var val = vals[0];
 168           var y = g.toDomCoords(null, val)[1];
 169           var diff2 = Math.abs(canvasy - y);
 170           if (diff2 < RANGE) {
 171             var found = false;
 172             for (var i in processed) {
 173               var stored = processed[i];
 174               if(stored[0] == row && stored[1] == col) {
 175                 found = true;
 176                 break;
 177               }
 178             }
 179             if (!found) {
 180               processed.push([row, col]);
 181               drawV4(x, y);
 182             }
 183             return;
 184           }
 185         }
 186       }
 187     }
 188   }
 189 }
 190
 191 function upV4(event, g, context) {
 192   if (v4Active) {
 193     v4Active = false;
 194   }
 195 }
 196
 197 function dblClickV4(event, g, context) {
 198   restorePositioning(g);
 199 }
 200
 201 function drawV4(x, y) {
 202   var ctx = v4Canvas;
 203
 204   ctx.strokeStyle = "#000000";
 205   ctx.fillStyle = "#FFFF00";
 206   ctx.beginPath();
 207   ctx.arc(x,y,5,0,Math.PI*2,true);
 208   ctx.closePath();
 209   ctx.stroke();
 210   ctx.fill();
 211 }
 212
 213 function captureCanvas(canvas, area, g) {
 214   v4Canvas = canvas;
 215 }
 216
 217 function restorePositioning(g) {
 218   g.updateOptions({
 219     dateWindow: null,
 220     valueRange: null
 221   });
 222 }