jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

- Fixed hoverNode and blurNode events and added them to the docs.

flowchartTest
Alex de Mulder 9 years ago
parent
043f198860
commit
2fd1f4f923
6 changed files with 30614 additions and 30595 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -0
      HISTORY.md
  2. +30568
    -30565
      dist/vis.js
  3. +35
    -25
      docs/network/index.html
  4. +2
    -0
      docs/network/interaction.html
  5. +6
    -5
      lib/network/modules/SelectionHandler.js
  6. +2
    -0
      lib/network/options.js

+ 1
- 0
HISTORY.md View File

@ -20,6 +20,7 @@ http://visjs.org
- Removed depricated dynamic entree, allow any smooth curve style for hierarchical layout. - Removed depricated dynamic entree, allow any smooth curve style for hierarchical layout.
- Fixed bug with the moveTo and getViewPosition methods. - Fixed bug with the moveTo and getViewPosition methods.
- Fixed #861, brokenImage only working for one node if nodes have the same image. - Fixed #861, brokenImage only working for one node if nodes have the same image.
- Fixed hoverNode and blurNode events and added them to the docs.
### Graph2d & Timeline ### Graph2d & Timeline

+ 30568
- 30565
dist/vis.js
File diff suppressed because it is too large
View File


+ 35
- 25
docs/network/index.html View File

@ -1171,7 +1171,7 @@ var options = {
<tr class="subHeader"> <tr class="subHeader">
<td colspan="3">Events triggered by human interaction, selection, dragging etc.</td> <td colspan="3">Events triggered by human interaction, selection, dragging etc.</td>
</tr> </tr>
<tr class="">
<tr>
<td>click</td> <td>click</td>
<td> <td>
<pre class="code"> <pre class="code">
@ -1188,7 +1188,7 @@ var options = {
</td> </td>
<td>Fired when the user clicks the mouse or taps on a touchscreen device.</td> <td>Fired when the user clicks the mouse or taps on a touchscreen device.</td>
</tr> </tr>
<tr class="">
<tr>
<td>doubleClick</td> <td>doubleClick</td>
<td>same as <code>click</code>.</td> <td>same as <code>click</code>.</td>
<td>Fired when the user double clicks the mouse or double taps on a touchscreen device. Since a double <td>Fired when the user double clicks the mouse or double taps on a touchscreen device. Since a double
@ -1200,7 +1200,7 @@ var options = {
processing them. processing them.
</td> </td>
</tr> </tr>
<tr class="">
<tr>
<td>oncontext</td> <td>oncontext</td>
<td>same as <code>click</code>.</td> <td>same as <code>click</code>.</td>
<td>Fired when the user click on the canvas with the right mouse button. The right mouse button does not <td>Fired when the user click on the canvas with the right mouse button. The right mouse button does not
@ -1208,7 +1208,7 @@ var options = {
want. want.
</td> </td>
</tr> </tr>
<tr class="">
<tr>
<td>hold</td> <td>hold</td>
<td>same as <code>click</code>.</td> <td>same as <code>click</code>.</td>
<td>Fired when the user clicks and holds the mouse or taps and holds on a touchscreen device. A click <td>Fired when the user clicks and holds the mouse or taps and holds on a touchscreen device. A click
@ -1216,13 +1216,13 @@ var options = {
is also fired in this case. is also fired in this case.
</td> </td>
</tr> </tr>
<tr class="">
<tr>
<td>release</td> <td>release</td>
<td>same as <code>click</code>.</td> <td>same as <code>click</code>.</td>
<td>Fired after drawing on the canvas has been completed. Can be used to draw on top of the network. <td>Fired after drawing on the canvas has been completed. Can be used to draw on top of the network.
</td> </td>
</tr> </tr>
<tr class="">
<tr>
<td>select</td> <td>select</td>
<td>same as <code>click</code>.</td> <td>same as <code>click</code>.</td>
<td>Fired when the selection has changed by user action. This means a node or edge has been selected, <td>Fired when the selection has changed by user action. This means a node or edge has been selected,
@ -1230,17 +1230,17 @@ var options = {
to the selection or deselected. <b>All select events are only triggered on click and hold</b>. to the selection or deselected. <b>All select events are only triggered on click and hold</b>.
</td> </td>
</tr> </tr>
<tr class="">
<tr>
<td>selectNode</td> <td>selectNode</td>
<td>same as <code>click</code>.</td> <td>same as <code>click</code>.</td>
<td>Fired when a node has been selected by the user.</td> <td>Fired when a node has been selected by the user.</td>
</tr> </tr>
<tr class="">
<tr>
<td>selectEdge</td> <td>selectEdge</td>
<td>same as <code>click</code>.</td> <td>same as <code>click</code>.</td>
<td>Fired when a edge has been selected by the user.</td> <td>Fired when a edge has been selected by the user.</td>
</tr> </tr>
<tr class="">
<tr>
<td>deselectNode</td> <td>deselectNode</td>
<td><pre class="code"> <td><pre class="code">
{ {
@ -1264,7 +1264,7 @@ var options = {
list of nodes and edges that were selected before the last user event. list of nodes and edges that were selected before the last user event.
</td> </td>
</tr> </tr>
<tr class="">
<tr>
<td>deselectEdge</td> <td>deselectEdge</td>
<td>same as <code>deselectNode</code>.</td> <td>same as <code>deselectNode</code>.</td>
<td>Fired when a edge (or edges) has (or have) been deselected by the user. The previous selection is <td>Fired when a edge (or edges) has (or have) been deselected by the user. The previous selection is
@ -1272,32 +1272,42 @@ var options = {
list of nodes and edges that were selected before the last user event. list of nodes and edges that were selected before the last user event.
</td> </td>
</tr> </tr>
<tr class="">
<tr>
<td>dragStart</td> <td>dragStart</td>
<td>same as <code>click</code>.</td> <td>same as <code>click</code>.</td>
<td>Fired when starting a drag.</td> <td>Fired when starting a drag.</td>
</tr> </tr>
<tr class="">
<tr>
<td>dragging</td> <td>dragging</td>
<td>same as <code>click</code>.</td> <td>same as <code>click</code>.</td>
<td>Fired when dragging node(s) or the view.</td> <td>Fired when dragging node(s) or the view.</td>
</tr> </tr>
<tr class="">
<tr>
<td>dragEnd</td> <td>dragEnd</td>
<td>same as <code>click</code>.</td> <td>same as <code>click</code>.</td>
<td>Fired when the drag has finished.</td> <td>Fired when the drag has finished.</td>
</tr> </tr>
<tr class="">
<tr>
<td>hoverNode</td>
<td><code>{node: nodeId}</code></td>
<td>Fired interaction:{hover:true} and the mouse hovers over a node.</td>
</tr>
<tr>
<td>blurNode</td>
<td><code>{node: nodeId}</code></td>
<td>Fired interaction:{hover:true} and the mouse moved away from a node it was hovering over before.</td>
</tr>
<tr>
<td>zoom</td> <td>zoom</td>
<td><code>{direction:'+'/'-', scale: Number}</code></td> <td><code>{direction:'+'/'-', scale: Number}</code></td>
<td>Fired when the user zooms in or out. The properties tell you which direction the zoom is in. The scale is a number greater than 0, which is the same that you get with network.getScale().</td> <td>Fired when the user zooms in or out. The properties tell you which direction the zoom is in. The scale is a number greater than 0, which is the same that you get with network.getScale().</td>
</tr> </tr>
<tr class="">
<tr>
<td>showPopup</td> <td>showPopup</td>
<td><code>id of item corresponding to popup</code></td> <td><code>id of item corresponding to popup</code></td>
<td>Fired when the popup (tooltip) is shown.</td> <td>Fired when the popup (tooltip) is shown.</td>
</tr> </tr>
<tr class="">
<tr>
<td>hidePopup</td> <td>hidePopup</td>
<td>none</td> <td>none</td>
<td>Fired when the popup (tooltip) is hidden.</td> <td>Fired when the popup (tooltip) is hidden.</td>
@ -1305,14 +1315,14 @@ var options = {
<tr class="subHeader "> <tr class="subHeader ">
<td colspan="3">Events triggered the physics simulation. Can be used to trigger GUI updates.</td> <td colspan="3">Events triggered the physics simulation. Can be used to trigger GUI updates.</td>
</tr> </tr>
<tr class="">
<tr>
<td>startStabilizing</td> <td>startStabilizing</td>
<td>none</td> <td>none</td>
<td>Fired when stabilization starts. This is also the case when you drag a node and the physics <td>Fired when stabilization starts. This is also the case when you drag a node and the physics
simulation simulation
restarts to stabilize again. Stabilization does not neccesarily imply 'without showing'. restarts to stabilize again. Stabilization does not neccesarily imply 'without showing'.
</td> </td>
<tr class="">
<tr>
<td>stabilizationProgress</td> <td>stabilizationProgress</td>
<td> <td>
<pre class="code"> <pre class="code">
@ -1326,14 +1336,14 @@ var options = {
occurs in the 'hidden' stabilization. occurs in the 'hidden' stabilization.
</td> </td>
</tr> </tr>
<tr class="">
<tr>
<td>stabilizationIterationsDone</td> <td>stabilizationIterationsDone</td>
<td>none</td> <td>none</td>
<td>Fired when the 'hidden' stabilization finishes. This does not necessarily mean the network is <td>Fired when the 'hidden' stabilization finishes. This does not necessarily mean the network is
stabilized; it could also mean that the amount of iterations defined in the options has been stabilized; it could also mean that the amount of iterations defined in the options has been
reached. reached.
</td> </td>
<tr class="">
<tr>
<td>stabilized</td> <td>stabilized</td>
<td> <td>
<pre class="code"> <pre class="code">
@ -1350,7 +1360,7 @@ var options = {
<tr class="subHeader"> <tr class="subHeader">
<td colspan="3">Event triggered by the canvas.</td> <td colspan="3">Event triggered by the canvas.</td>
</tr> </tr>
<tr class="">
<tr>
<td>resize</td> <td>resize</td>
<td> <td>
<pre class="code"> <pre class="code">
@ -1376,21 +1386,21 @@ var options = {
canvas. canvas.
</td> </td>
</tr> </tr>
<tr class="">
<tr>
<td>initRedraw</td> <td>initRedraw</td>
<td>none</td> <td>none</td>
<td>Fired before the redrawing begins. The simulation step has completed at this point. Can be used to <td>Fired before the redrawing begins. The simulation step has completed at this point. Can be used to
move move
custom elements before starting drawing the new frame. custom elements before starting drawing the new frame.
</td> </td>
<tr class="">
<tr>
<td>beforeDrawing</td> <td>beforeDrawing</td>
<td><code>canvas context</code></td> <td><code>canvas context</code></td>
<td>Fired after the canvas has been cleared, scaled and translated to the viewing position but before <td>Fired after the canvas has been cleared, scaled and translated to the viewing position but before
all all
edges and nodes are drawn. Can be used to draw behind the network. edges and nodes are drawn. Can be used to draw behind the network.
</td> </td>
<tr class="">
<tr>
<td>afterDrawing</td> <td>afterDrawing</td>
<td><code>canvas context</code></td> <td><code>canvas context</code></td>
<td>Fired after drawing on the canvas has been completed. Can be used to draw on top of the network. <td>Fired after drawing on the canvas has been completed. Can be used to draw on top of the network.
@ -1399,7 +1409,7 @@ var options = {
<tr class="subHeader"> <tr class="subHeader">
<td colspan="3">Event triggered by the view module.</td> <td colspan="3">Event triggered by the view module.</td>
</tr> </tr>
<tr class="">
<tr>
<td>animationFinished</td> <td>animationFinished</td>
<td>none</td> <td>none</td>
<td>Fired when an animation is finished.</td> <td>Fired when an animation is finished.</td>

+ 2
- 0
docs/network/interaction.html View File

@ -86,6 +86,7 @@ var options = {
hideEdgesOnDrag: false, hideEdgesOnDrag: false,
hideNodesOnDrag: false, hideNodesOnDrag: false,
hover: false, hover: false,
hoverSelectedEdges: true,
keyboard: { keyboard: {
enabled: false, enabled: false,
speed: {x: 10, y: 10, zoom: 0.02}, speed: {x: 10, y: 10, zoom: 0.02},
@ -122,6 +123,7 @@ network.setOptions(options);
<tr><td>hideEdgesOnDrag</td> <td>Boolean</td> <td><code>false</code></td> <td>When true, the edges are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.</td></tr> <tr><td>hideEdgesOnDrag</td> <td>Boolean</td> <td><code>false</code></td> <td>When true, the edges are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.</td></tr>
<tr><td>hideNodesOnDrag</td> <td>Boolean</td> <td><code>false</code></td> <td>When true, the nodes are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.</td></tr> <tr><td>hideNodesOnDrag</td> <td>Boolean</td> <td><code>false</code></td> <td>When true, the nodes are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.</td></tr>
<tr><td>hover</td> <td>Boolean</td> <td><code>false</code></td> <td>When true, the nodes use their hover colors when the mouse moves over them.</td></tr> <tr><td>hover</td> <td>Boolean</td> <td><code>false</code></td> <td>When true, the nodes use their hover colors when the mouse moves over them.</td></tr>
<tr><td>hoverSelectedEdges</td> <td>Boolean</td> <td><code>true</code></td> <td>When true, on hovering over a node, it's connecting edges are highlighted.</td></tr>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','keyboard', this);"><td><span parent="keyboard" class="right-caret"></span> keyboard</td> <td>Object or Boolean</td> <td><code>Object</code></td> <td>When true, the keyboard shortcuts are enabled with the default settings. For further customization, you can supply an object.</td></tr> <tr class='toggle collapsible' onclick="toggleTable('optionTable','keyboard', this);"><td><span parent="keyboard" class="right-caret"></span> keyboard</td> <td>Object or Boolean</td> <td><code>Object</code></td> <td>When true, the keyboard shortcuts are enabled with the default settings. For further customization, you can supply an object.</td></tr>
<tr parent="keyboard" class="hidden"><td class="indent">keyboard.enabled</td> <td>Boolean</td> <td><code>false</code></td> <td>Toggle the usage of the keyboard shortcuts. If this option is not defined, it is set to true if any of the properties in this object are defined.</td></tr> <tr parent="keyboard" class="hidden"><td class="indent">keyboard.enabled</td> <td>Boolean</td> <td><code>false</code></td> <td>Toggle the usage of the keyboard shortcuts. If this option is not defined, it is set to true if any of the properties in this object are defined.</td></tr>
<tr parent="keyboard" class="hidden"><td class="indent">keyboard.speed.x</td> <td>Number</td> <td><code>1</code></td> <td>The speed at which the view moves in the x direction on pressing a key or pressing a navigation button.</td></tr> <tr parent="keyboard" class="hidden"><td class="indent">keyboard.speed.x</td> <td>Number</td> <td><code>1</code></td> <td>The speed at which the view moves in the x direction on pressing a key or pressing a navigation button.</td></tr>

+ 6
- 5
lib/network/modules/SelectionHandler.js View File

@ -13,7 +13,8 @@ class SelectionHandler {
this.defaultOptions = { this.defaultOptions = {
multiselect: false, multiselect: false,
selectable: true, selectable: true,
selectConnectedEdges: true
selectConnectedEdges: true,
hoverConnectedEdges: true
}; };
util.extend(this.options, this.defaultOptions); util.extend(this.options, this.defaultOptions);
@ -25,7 +26,7 @@ class SelectionHandler {
setOptions(options) { setOptions(options) {
if (options !== undefined) { if (options !== undefined) {
let fields = ['multiselect','selectable','selectConnectedEdges'];
let fields = ['multiselect','hoverConnectedEdges','selectable','selectConnectedEdges'];
util.selectiveDeepExtend(fields,this.options, options); util.selectiveDeepExtend(fields,this.options, options);
} }
} }
@ -495,7 +496,7 @@ class SelectionHandler {
this.blurObject(this.hoverObj.nodes[nodeId]); this.blurObject(this.hoverObj.nodes[nodeId]);
hoverChanged = true; hoverChanged = true;
} }
else if (object instanceof Node && object.id !== nodeId || object instanceof Edge || object === undefined) {
else if (object instanceof Node && object.id != nodeId || object instanceof Edge || object === undefined) {
this.blurObject(this.hoverObj.nodes[nodeId]); this.blurObject(this.hoverObj.nodes[nodeId]);
hoverChanged = true; hoverChanged = true;
delete this.hoverObj.nodes[nodeId]; delete this.hoverObj.nodes[nodeId];
@ -503,7 +504,7 @@ class SelectionHandler {
} }
} }
//// removing all edge hover highlights
// removing all edge hover highlights
for (let edgeId in this.hoverObj.edges) { for (let edgeId in this.hoverObj.edges) {
if (this.hoverObj.edges.hasOwnProperty(edgeId)) { if (this.hoverObj.edges.hasOwnProperty(edgeId)) {
this.hoverObj.edges[edgeId].hover = false; this.hoverObj.edges[edgeId].hover = false;
@ -520,7 +521,7 @@ class SelectionHandler {
this.body.emitter.emit("hoverNode", {node: object.id}); this.body.emitter.emit("hoverNode", {node: object.id});
} }
} }
if (object instanceof Node && this.options.selectConnectedEdges === true) {
if (object instanceof Node && this.options.hoverConnectedEdges === true) {
this._hoverConnectedEdges(object); this._hoverConnectedEdges(object);
} }
} }

+ 2
- 0
lib/network/options.js View File

@ -110,6 +110,7 @@ let allOptions = {
navigationButtons: {boolean}, navigationButtons: {boolean},
selectable: {boolean}, selectable: {boolean},
selectConnectedEdges: {boolean}, selectConnectedEdges: {boolean},
hoverConnectedEdges: {boolean},
tooltipDelay: {number}, tooltipDelay: {number},
zoomView: {boolean}, zoomView: {boolean},
__type__: {object} __type__: {object}
@ -415,6 +416,7 @@ let configureOptions = {
navigationButtons: false, navigationButtons: false,
selectable: true, selectable: true,
selectConnectedEdges: true, selectConnectedEdges: true,
hoverConnectedEdges: true,
tooltipDelay: [300, 0, 1000, 25], tooltipDelay: [300, 0, 1000, 25],
zoomView: true zoomView: true
}, },

Write Preview
Loading…
Cancel
Save