You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
140 lines
4.2 KiB
140 lines
4.2 KiB
<!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>
|
|
|
|
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>
|
|
|
|
|
|
<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>
|
|
|