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           "<h3>Default interaction model</h3>",
   9           "<div style='width:600px;'>",
  10           "  <p style='text-align:center;'>",
  11           "    Zoom: click-drag, Pan: shift-click-drag, Restore: double-click",
  12           "  </p>",
  13           "  <div id='div_g' style='width:600px; height:300px;'></div>",
  14           "</div>",
  15           "",
  16           "<h3>Empty interaction model</h3>",
  17           "<div style='width:600px;'>",
  18           "  <p style='text-align:center;'>",
  19           "    Click and drag all you like, it won't do anything!",
  20           "  </p>",
  21           "  <div id='div_g2' style='width:600px; height:300px;'></div>",
  22           "</div>",
  23           "<div id='g2_console'></div>", // what is this?
  24           "",
  25           "<h3>Custom interaction model</h3>",
  26           "<div style='width:600px;'>",
  27           "  <p style='text-align:center;'>",
  28           "    Zoom in: double-click, scroll wheel<br/>",
  29           "    Zoom out: ctrl-double-click, scroll wheel<br/>",
  30           "    Standard Zoom: shift-click-drag",
  31           "    Standard Pan: click-drag<br/>",
  32           "    Restore zoom level: press button<br/>",
  33           "  </p>",
  34           "  <button id='restore3'>Restore position</button>",
  35           "  <div id='div_g3' style='width:600px; height:300px;'></div>",
  36           "</div>",
  37           "<h3>Fun model!</h3>",
  38           "<div style='width:600px;'>",
  39           "  <p style='text-align:center;'>",
  40           "    Keep the mouse button pressed, and hover over all points",
  41           "    to mark them.",
  42           "  </p>",
  43           "  <div id='div_g4' style='width:600px; height:300px;'></div>",
  44           "</div>",
  45           ].join('\n');
  46
  47     },
  48     run: function() {
  49       // TODO(konigsberg): Add cleanup to remove callbacks.
  50       Dygraph.addEvent(document, "mousewheel", function() { lastClickedGraph = null; });
  51       Dygraph.addEvent(document, "click", function() { lastClickedGraph = null; });
  52       var g = new Dygraph(document.getElementById("div_g"),
  53            NoisyData, { errorBars : true });
  54       var s = document.getElementById("g2_console");
  55       var g2 = new Dygraph(document.getElementById("div_g2"),
  56            NoisyData,
  57            {
  58              errorBars : true,
  59              interactionModel: {}
  60            });
  61       var g3 = new Dygraph(document.getElementById("div_g3"),
  62            NoisyData, { errorBars : true, interactionModel : {
  63             'mousedown' : downV3,
  64             'mousemove' : moveV3,
  65             'mouseup' : upV3,
  66             'click' : clickV3,
  67             'dblclick' : dblClickV3,
  68             'mousewheel' : scrollV3
  69       }});
  70       document.getElementById("restore3").onclick = function() {
  71         restorePositioning(g3);
  72       }
  73       var g4 = new Dygraph(document.getElementById("div_g4"),
  74            NoisyData, { errorBars : true, drawPoints : true, interactionModel : {
  75             'mousedown' : downV4,
  76             'mousemove' : moveV4,
  77             'mouseup' : upV4,
  78             'dblclick' : dblClickV4,
  79            },
  80            underlayCallback : captureCanvas
  81       });
  82     }
  83   });