Skip to content
This repository has been archived by the owner on Jul 29, 2019. It is now read-only.

Example for #1845 #2463

Merged
merged 1 commit into from
Dec 20, 2016
Merged

Example for #1845 #2463

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
140 changes: 140 additions & 0 deletions examples/network/other/cursorChange.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
<!doctype html>
<html>
<head>
<title>Network | Cursor Change</title>

<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />

<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>

<p>Here is a simple network with nodes and edges that demonstrates how to change the cursor on hover for nodes and edges.</p>
<p>Use the dropdowns and button below to change the cursor type bound to an event.</p>
<div>
Event Type -
<select id="eventType">
<option value="hoverNode">hoverNode</option>
<option value="blurNode">blurNode</option>
<option value="hoverEdge">hoverEdge</option>
<option value="blurEdge">blurEdge</option>
<option value="dragStart">dragStart</option>
<option value="dragging">dragging</option>
<option value="dragEnd">dragEnd</option>
</select>
&nbsp;
Cursor Type -
<select id="cursorType">
<option value="auto">auto</option>
<option value="default">default</option>
<option value="context-menu">context-menu</option>
<option value="help">help</option>
<option value="pointer">pointer</option>
<option value="progress">progress</option>
<option value="wait">wait</option>
<option value="cell">cell</option>
<option value="crosshair">crosshair</option>
<option value="text">text</option>
<option value="vertical-text">vertical-text</option>
<option value="alias">alias</option>
<option value="copy">copy</option>
<option value="move">move</option>
<option value="no-drop">no-drop</option>
<option value="not-allowed">not-allowed</option>
<option value="all-scroll">all-scroll</option>
<option value="col-resize">col-resize</option>
<option value="row-resize">row-resize</option>
<option value="n-resize">n-resize</option>
<option value="e-resize">e-resize</option>
<option value="w-resize">w-resize</option>
<option value="s-resize">s-resize</option>
<option value="ne-resize">ne-resize</option>
<option value="nw-resize">nw-resize</option>
<option value="se-resize">se-resize</option>
<option value="sw-resize">sw-resize</option>
<option value="ew-resize">ew-resize</option>
<option value="ns-resize">ns-resize</option>
<option value="nesw-resize">nesw-resize</option>
<option value="nwse-resize">nwse-resize</option>
<option value="zoom-in">zoom-in</option>
<option value="zoom-out">zoom-out</option>
<option value="grab">grab</option>
<option value="grabbing">grabbing</option>
</select>
&nbsp;

<button onClick="changeEventCursor(document.getElementById('eventType').value,document.getElementById('cursorType').value);">Change Cursor for Event</button>
</div>
<div id="mynetwork"></div>

<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
]);

// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5}
]);

// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {interaction:{hover:true}};
var network = new vis.Network(container, data, options);

//Get the canvas HTML element
var networkCanvas = document.getElementById("mynetwork").getElementsByTagName("canvas")[0]
function changeCursor(newCursorStyle){
networkCanvas.style.cursor = newCursorStyle;
}
function changeEventCursor(eventName,cursorType){
network.on(eventName, function() {
changeCursor(cursorType);
});
}
network.on('hoverNode', function () {
changeCursor('grab');
});
network.on('blurNode', function () {
changeCursor('default');
});
network.on('hoverEdge', function () {
changeCursor('grab');
});
network.on('blurEdge', function () {
changeCursor('default');
});
network.on('dragStart', function () {
changeCursor('grabbing');
});
network.on('dragging', function () {
changeCursor('grabbing');
});
network.on('dragEnd', function () {
changeCursor('grab');
});

</script>

</body>
</html>