added click and doubleclick events and extended events documentation

dist/vis.js

@@ -5,7 +5,7 @@
  * A dynamic, browser-based visualization library.
  *
  * @version 0.6.0-SNAPSHOT
- * @date    2014-02-25
+ * @date    2014-02-26
  *
  * @license
  * Copyright (C) 2011-2014 Almende B.V, http://almende.com
@@ -14920,16 +14920,19 @@ var SelectionMixin = {
     var node = this._getNodeAt(pointer);
     if (node != null) {
       this._selectObject(node,false);
+      this.emit("clickNode", this.getSelection());
     }
     else {
       var edge = this._getEdgeAt(pointer);
       if (edge != null) {
         this._selectObject(edge,false);
+        this.emit("clickEdge", this.getSelection());
       }
       else {
         this._unselectAll();
       }
     }
+    this.emit("click", this.getSelection());
     this._redraw();
   },
 
@@ -14942,12 +14945,20 @@ var SelectionMixin = {
    */
   _handleDoubleTap : function(pointer) {
     var node = this._getNodeAt(pointer);
+    var selection = this.getSelection();
     if (node != null && node !== undefined) {
       // we reset the areaCenter here so the opening of the node will occur
       this.areaCenter =  {"x" : this._canvasToX(pointer.x),
                           "y" : this._canvasToY(pointer.y)};
       this.openCluster(node);
+      this.emit("doubleClickNode", selection);
     }
+    else {
+      if (this._getSelectedEdgeCount() == 1) {
+        this.emit("doubleClickEdge", selection);
+      }
+    }
+    this.emit("doubleClick", selection);
   },
 
 

docs/graph.html

@@ -1857,9 +1857,80 @@ graph.off('select', onSelect);
     <td>
       <ul>
         <li><code>nodes</code>: an array with the ids of the selected nodes</li>
+        <li><code>edges</code>: an array with the ids of the selected edges</li>
       </ul>
     </td>
   </tr>
+    <tr>
+        <td>click</td>
+        <td>Fired after the user clicks or taps on a touchscreen.</td>
+        <td>
+            <ul>
+                <li><code>nodes</code>: an array with the ids of the selected nodes</li>
+                <li><code>edges</code>: an array with the ids of the selected edges</li>
+            </ul>
+        </td>
+    </tr>
+    <tr>
+        <td>clickNode</td>
+        <td>Fired after the user clicks on a node or taps a node on a touchscreen.</td>
+        <td>
+            <ul>
+                <li><code>nodes</code>: an array with the ids of the selected nodes</li>
+                <li><code>edges</code>: an array with the ids of the selected edges</li>
+            </ul>
+        </td>
+    </tr>
+    <tr>
+        <td>clickEdge</td>
+        <td>Fired after the user clicks on an edge or taps an edge on a touchscreen.</td>
+        <td>
+            <ul>
+                <li><code>nodes</code>: an array with the ids of the selected nodes</li>
+                <li><code>edges</code>: an array with the ids of the selected edges</li>
+            </ul>
+        </td>
+    </tr>
+    <tr>
+        <td>doubleClick</td>
+        <td>Fired after the user double clicks or double taps on a touchscreen.</td>
+        <td>
+            <ul>
+                <li><code>nodes</code>: an array with the ids of the selected nodes</li>
+                <li><code>edges</code>: an array with the ids of the selected edges</li>
+            </ul>
+        </td>
+    </tr>
+    <tr>
+        <td>doubleClickEdge</td>
+        <td>Fired after the user double clicks on an edge or double taps an edge on a touchscreen.</td>
+        <td>
+            <ul>
+                <li><code>nodes</code>: an array with the ids of the selected nodes</li>
+                <li><code>edges</code>: an array with the ids of the selected edges</li>
+            </ul>
+        </td>
+    </tr>
+    <tr>
+        <td>doubleClickNode</td>
+        <td>Fired after the user double clicks on a node or double taps a node on a touchscreen.</td>
+        <td>
+        <ul>
+            <li><code>nodes</code>: an array with the ids of the selected nodes</li>
+            <li><code>edges</code>: an array with the ids of the selected edges</li>
+        </ul>
+        </td>
+    </tr>
+    <tr>
+        <td>frameResize</td>
+        <td>Fired when the size of the canvas has been updated (not neccecarily changed) by the setSize() function or by the setOptions() function.</td>
+        <td>
+            <ul>
+                <li><code>width</code>: the new width of the canvas</li>
+                <li><code>height</code>: the new height of the canvas</li>
+            </ul>
+        </td>
+    </tr>
 </table>
 
 

src/graph/graphMixins/SelectionMixin.js

@@ -392,16 +392,19 @@ var SelectionMixin = {
     var node = this._getNodeAt(pointer);
     if (node != null) {
       this._selectObject(node,false);
+      this.emit("clickNode", this.getSelection());
     }
     else {
       var edge = this._getEdgeAt(pointer);
       if (edge != null) {
         this._selectObject(edge,false);
+        this.emit("clickEdge", this.getSelection());
       }
       else {
         this._unselectAll();
       }
     }
+    this.emit("click", this.getSelection());
     this._redraw();
   },
 
@@ -414,12 +417,20 @@ var SelectionMixin = {
    */
   _handleDoubleTap : function(pointer) {
     var node = this._getNodeAt(pointer);
+    var selection = this.getSelection();
     if (node != null && node !== undefined) {
       // we reset the areaCenter here so the opening of the node will occur
       this.areaCenter =  {"x" : this._canvasToX(pointer.x),
                           "y" : this._canvasToY(pointer.y)};
       this.openCluster(node);
+      this.emit("doubleClickNode", selection);
     }
+    else {
+      if (this._getSelectedEdgeCount() == 1) {
+        this.emit("doubleClickEdge", selection);
+      }
+    }
+    this.emit("doubleClick", selection);
   },