gallery/interaction.js

   1 Gallery.register(
   2   'interaction',
   3   {
   4     name: 'Custom interaction models',
   5     title: 'title',
   6     setup: function(parent) {
   7       parent.innerHTML =
   8           "<table border='1'>" +
   9           "<tr><td>" +
  10           "<b>Default interaction model</b>" +
  11           "<div id='div_g' style='width:600px; height:300px;'></div>" +
  12           "</td><td>Zoom: click-drag<br/>Pan: shift-click-drag<br/>Restore zoom level: double-click<br/>" +
  13           "</td></tr>" +
  14           "<tr><td>" +
  15           "<b>No interaction model</b>" +
  16           "<div id='div_g2' style='width:600px; height:300px;'></div>" +
  17           "</td><td>Click and drag all you like, it won't do anything!" +
  18           "<div id='g2_console'></div>" +
  19           "</td></tr>" +
  20           "<tr><td>" +
  21           "<b>Custom interaction model</b>" +
  22           "<button id='restore3'>Restore Position</button>" +
  23           "<div id='div_g3' style='width:600px; height:300px;'></div>" +
  24           "</td><td>" +
  25           "Zoom in: double-click, scroll wheel<br/>" +
  26           "Zoom out: ctrl-double-click, scroll wheel<br/>" +
  27           "Standard Zoom: shift-click-drag" +
  28           "Standard Pan: click-drag<br/>" +
  29           "Restore zoom level: press button<br/>" +
  30           "</td></tr>" +
  31           "<tr><td>" +
  32           "<b>Fun model!</b>" +
  33           "<div id='div_g4' style='width:600px; height:300px;'></div>" +
  34           "</td><td>" +
  35           "Keep the mouse button pressed, and hover over all points" +
  36           "to mark them." +
  37           "</td></tr>" +
  38           "</table>";
  39
  40     },
  41     run: function() {
  42       // TODO(konigsberg): Add cleanup to remove callbacks.
  43       Dygraph.addEvent(document, "mousewheel", function() { lastClickedGraph = null; });
  44       Dygraph.addEvent(document, "click", function() { lastClickedGraph = null; });
  45       var g = new Dygraph(document.getElementById("div_g"),
  46            NoisyData, { errorBars : true });
  47       var s = document.getElementById("g2_console");
  48       var g2 = new Dygraph(document.getElementById("div_g2"),
  49            NoisyData,
  50            {
  51              errorBars : true,
  52              interactionModel: {}
  53            });
  54       var g3 = new Dygraph(document.getElementById("div_g3"),
  55            NoisyData, { errorBars : true, interactionModel : {
  56             'mousedown' : downV3,
  57             'mousemove' : moveV3,
  58             'mouseup' : upV3,
  59             'click' : clickV3,
  60             'dblclick' : dblClickV3,
  61             'mousewheel' : scrollV3
  62       }});
  63       document.getElementById("restore3").onclick = function() {
  64         restorePositioning(g3);
  65       }
  66       var g4 = new Dygraph(document.getElementById("div_g4"),
  67            NoisyData, { errorBars : true, drawPoints : true, interactionModel : {
  68             'mousedown' : downV4,
  69             'mousemove' : moveV4,
  70             'mouseup' : upV4,
  71             'dblclick' : dblClickV4,
  72            },
  73            underlayCallback : captureCanvas
  74       });
  75     }
  76   });