[Summary view] [Print] [Text view]

   1  /**
   2   * @requires javelin-stratcom
   3   *           javelin-behavior
   4   *           javelin-vector
   5   *           javelin-dom
   6   * @provides javelin-behavior-phabricator-gesture-example
   7   */
   8  
   9  JX.behavior('phabricator-gesture-example', function(config) {
  10  
  11    var strokes = [];
  12    var current = [];
  13  
  14    var root = JX.$(config.rootID);
  15  
  16    var canvas = JX.$N('canvas');
  17    var d = JX.Vector.getDim(root);
  18    canvas.width = d.x;
  19    canvas.height = d.y;
  20    root.appendChild(canvas);
  21  
  22    var cxt = canvas.getContext('2d');
  23    JX.Stratcom.listen(
  24      'gesture.swipe.end',
  25      null,
  26      function(e) {
  27        var stroke = get_stroke(e);
  28        strokes.push(stroke);
  29        current = [];
  30        redraw();
  31      });
  32  
  33    JX.Stratcom.listen(
  34      'gesture.swipe.move',
  35      null,
  36      function(e) {
  37        var stroke = get_stroke(e);
  38        current = [stroke];
  39        redraw();
  40      });
  41  
  42    JX.Stratcom.listen(
  43      'gesture.swipe.cancel',
  44      null,
  45      function() {
  46        current = [];
  47        redraw();
  48      });
  49  
  50    function get_stroke(e) {
  51      var data = e.getData();
  52      var p = JX.$V(root);
  53      return [
  54        data.p0.x - p.x,
  55        data.p0.y - p.y,
  56        data.p1.x - p.x,
  57        data.p1.y - p.y
  58      ];
  59    }
  60  
  61    function redraw() {
  62      cxt.fillStyle = '#dfdfdf';
  63      cxt.fillRect(0, 0, d.x, d.y);
  64  
  65      var s;
  66      var ii;
  67      for (ii = 0; ii < strokes.length; ii++) {
  68        s = strokes[ii];
  69        cxt.strokeStyle = 'rgba(0, 0, 0, 0.50)';
  70        cxt.beginPath();
  71          cxt.moveTo(s[0], s[1]);
  72          cxt.lineTo(s[2], s[3]);
  73        cxt.stroke();
  74      }
  75  
  76      for (ii = 0; ii < current.length; ii++) {
  77        s = current[ii];
  78        cxt.strokeStyle = 'rgba(255, 0, 0, 1)';
  79        cxt.beginPath();
  80          cxt.moveTo(s[0], s[1]);
  81          cxt.lineTo(s[2], s[3]);
  82        cxt.stroke();
  83      }
  84    }
  85  
  86    redraw();
  87  });