Add onRightClick to JavaScript lib Hypertree

Question

I'm currently working (a repo is here) on a Hypertree graph, which I want to use from the JavaScript InfoVis Toolkit. The issue is as follows: I added the specific events to the Hypertree, which are onClick and onRightClick.

 Events: {
          enable: true,
          onClick: function(node, eventInfo, e) {
              ht.controller.onComplete();
          },
          onRightClick: function(node, eventInfo, e) {
              ht.controller.onComplete();
          },
      },

Then I simply attached the veent handlers to the Hypertree labels, just modifying demo-code a little:

//Attach event handlers and add text to the
  //labels. This method is only triggered on label
  //creation
  onCreateLabel: function(domElement, node){
      domElement.innerHTML = node.name;

      $jit.util.addEvent(domElement, 'click', function () {
          ht.onRightClick(node.id, {
              onComplete: function() {
                  ht.controller.onComplete();
              }
          });
      });


      $jit.util.addEvent(domElement, 'rclick', function () {
          ht.onClick(node.id, {
              onComplete: function() {
                  ht.controller.onComplete();
              }
          });
      });
  },

That's pretty straight forward. The documentation for Hypertree events is in Options.Events.js. Now I load the page... and I have the left.clicks. But no right clicks... I want the RightClicks to move the graph and the onClicks to open a link from the DOM Element node. Can someone please give me a pointer here?

Best, Marius

Answer 1

$jit.util.addEvent(obj, type, fn) is a shortcut for obj.addEventListener(type, fn, false). So you are trying to bind to 'onrclick' event. But there is no such event in javascript. For detecting right click you just need to replace your 'rclick' to 'mouseup', and in callback you should check for button to be the right one. Here is the code:

$jit.util.addEvent(domElement, 'mouseup', function (event) {
   // detecting right button
   if (event.button != 2) {
       return;
   }
   ht.onClick(node.id, {
       onComplete: function() {
           ht.controller.onComplete();
       }
   });
});

Also you don't need to use Options.Events.js for this purpose, so you can remove that code