Browse Source

added click and doubleclick events and extended events documentation

css_transitions
Alex de Mulder 10 years ago
parent
commit
683dad09df
3 changed files with 94 additions and 1 deletions
  1. +12
    -1
      dist/vis.js
  2. +71
    -0
      docs/graph.html
  3. +11
    -0
      src/graph/graphMixins/SelectionMixin.js

+ 12
- 1
dist/vis.js View File

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

+ 71
- 0
docs/graph.html View File

@ -1857,9 +1857,80 @@ graph.off('select', onSelect);
<td> <td>
<ul> <ul>
<li><code>nodes</code>: an array with the ids of the selected nodes</li> <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> </ul>
</td> </td>
</tr> </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> </table>

+ 11
- 0
src/graph/graphMixins/SelectionMixin.js View File

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

Loading…
Cancel
Save