|
|
@ -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> |
|
|
|
|
|
|
|
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> |
|
|
|
|