How do I detect when a node with a custom renderer is clicked or hovered over in sigma.js?
<p>I am using <strong>sigma.js</strong> and have a custom node renderer that draws a node as a rectangle. Inside the rectangles are more shapes (basically just more rectangles and some text). I am also using the <em>dragNodes</em> plugin. </p>

<p>Right now, when a user wants to click on a node or drag it around the canvas, the user must go to the top left coordinate. However, the rectangle (the outermost one encompassing all the shapes inside it) represents the whole node. How do I modify my code to specify the dimensions of a node?</p>

<p>Also, although not shown in the code, if a user clicks inside a node rectangle (on one of the inner rectangles), I also want that to be detected and have a callback. Is this possible?</p>

<p>An example demonstrating my problem is <strong><a href="http://plnkr.co/edit/mHZKBJdvKQXjlye1Z7fR" rel="nofollow">shown here</a></strong>:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

  &lt;head&gt;
    &lt;script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/1.1.0/sigma.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://rawgit.com/jacomyal/sigma.js/master/plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="style.css" /&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      $(document).ready(function() {
        console.log('ready');

        var g = { nodes: [], edges: [] };
        g.nodes.push({
          id: 'n1',
          label: 'node1',
          type: 'rtype',
          x: Math.random(),
          y: Math.random(),
          size: 1,
          color: '#666'
        });
        g.nodes.push({
          id: 'n2',
          label: 'node2',
          type: 'rtype',
          x: Math.random(),
          y: Math.random(),
          size: 1,
          color: '#666'
        });

        sigma.renderers.def = sigma.renderers.canvas;
        sigma.canvas.labels.rtype = function(node, context, settings) { };
        sigma.canvas.nodes.rtype = function(node, context, settings) {
          var prefix = settings('prefix') || '';
          var size = node[prefix + 'size'];
          var x = node[prefix + 'x'],
              y = node[prefix + 'y'];

          context.strokeStyle = 'rgb(0,0,0)';
          context.strokeRect(x, y, 200, 200);
        };
        sigma.canvas.drawLabels = true;

        var s = new sigma({
          graph: g,
          container: 'graph-container'
        });

        var dragListener = sigma.plugins.dragNodes(s, s.renderers[0]);
      });
    &lt;/script&gt;
  &lt;/head&gt;

  &lt;body&gt;
    &lt;div id="container"&gt;
      &lt;style&gt;
        #graph-container {
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          position: absolute;
        }
      &lt;/style&gt;
      &lt;div id="graph-container"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;

&lt;/html&gt;
</code></pre>