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

Implemented `activatable` support for Network

v3_develop
jos 10 years ago
parent
0808f0a891
commit
55e2004732
32 changed files with 24956 additions and 24472 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -0
      HISTORY.md
  2. +110
    -85
      dist/vis.css
  3. +24646
    -24305
      dist/vis.js
  4. +1
    -1
      dist/vis.min.css
  5. +8
    -0
      docs/network.html
  6. +1
    -0
      examples/network/01_basic_usage.html
  7. +1
    -0
      examples/network/02_random_nodes.html
  8. +1
    -0
      examples/network/03_images.html
  9. +1
    -0
      examples/network/04_shapes.html
  10. +1
    -0
      examples/network/05_social_network.html
  11. +1
    -0
      examples/network/06_groups.html
  12. +1
    -0
      examples/network/07_selections.html
  13. +1
    -0
      examples/network/08_mobile_friendly.html
  14. +1
    -0
      examples/network/09_sizing.html
  15. +1
    -0
      examples/network/10_multiline_text.html
  16. +1
    -0
      examples/network/11_custom_style.html
  17. +1
    -0
      examples/network/12_scalable_images.html
  18. +1
    -0
      examples/network/13_dashed_lines.html
  19. +1
    -0
      examples/network/14_dot_language.html
  20. +1
    -0
      examples/network/15_dot_language_playground.html
  21. +1
    -0
      examples/network/16_dynamic_data.html
  22. +1
    -0
      examples/network/17_network_info.html
  23. +76
    -75
      examples/network/18_fully_random_nodes_clustering.html
  24. +1
    -0
      examples/network/19_scale_free_graph_clustering.html
  25. +1
    -0
      examples/network/22_les_miserables.html
  26. +1
    -0
      examples/network/23_hierarchical_layout.html
  27. +1
    -0
      examples/network/24_hierarchical_layout_userdefined.html
  28. +1
    -0
      examples/network/25_physics_configuration.html
  29. +1
    -0
      examples/network/26_staticSmoothCurves.html
  30. +25
    -4
      lib/network/Network.js
  31. +57
    -1
      lib/shared/Activator.js
  32. +9
    -1
      lib/timeline/Core.js

+ 1
- 0
HISTORY.md View File

@ -17,6 +17,7 @@ http://visjs.org
- A fix in reading group properties for a node.
- Fixed physics solving stopping when a support node was not moving.
- Added localization support.
- Implemented option `activatable`.
### Graph2D

+ 110
- 85
dist/vis.css View File

@ -1,3 +1,18 @@
.vis .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Must be displayed above for example selected Timeline items */
z-index: 10;
}
.vis-active {
box-shadow: 0 0 10px #86d5f8;
}
.vis.timeline {
}
@ -129,8 +144,7 @@
position: absolute;
width: 100%;
height: 0;
left: 1px;
z-index: 1;
left: 0;
}
.vis.timeline .foreground .group {
@ -157,7 +171,9 @@
.vis.timeline .item.selected {
border-color: #FFC200;
background-color: #FFF785;
z-index: 999;
/* z-index must be higher than the z-index of custom time bar and current time bar */
z-index: 2;
}
.vis.timeline .editable .item.selected {
@ -233,7 +249,6 @@
left: -4px;
cursor: w-resize;
z-index: 10000;
}
.vis.timeline .item.range .drag-right {
@ -244,7 +259,6 @@
right: -4px;
cursor: e-resize;
z-index: 10001; /* a little higher z-index than .drag-left */
}
.vis.timeline .timeaxis {
@ -511,137 +525,148 @@
div.network-manipulationDiv {
border-width:0px;
border-bottom: 1px;
border-style:solid;
border-color: #d6d9d8;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #fcfcfc 48%, #fafafa 50%, #fcfcfc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(48%,#fcfcfc), color-stop(50%,#fafafa), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */
width: 600px;
height:30px;
z-index:10;
position:absolute;
border-width: 0;
border-bottom: 1px;
border-style:solid;
border-color: #d6d9d8;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #fcfcfc 48%, #fafafa 50%, #fcfcfc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(48%,#fcfcfc), color-stop(50%,#fafafa), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 30px;
}
div.network-manipulation-editMode {
height:30px;
z-index:10;
position:absolute;
margin-top:20px;
position:absolute;
left: 0;
top: 0;
height: 30px;
margin-top:20px;
}
div.network-manipulation-closeDiv {
height:30px;
width:30px;
z-index:11;
position:absolute;
margin-top:3px;
margin-left:590px;
background-position: 0px 0px;
background-repeat:no-repeat;
background-image: url("img/network/cross.png");
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position:absolute;
left: 0;
top: 0;
width: 30px;
height: 30px;
margin-top: 3px;
margin-left: 590px;
background-position: 0px 0px;
background-repeat: no-repeat;
background-image: url("img/network/cross.png");
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
span.network-manipulationUI {
font-family: verdana;
font-size: 12px;
-moz-border-radius: 15px;
border-radius: 15px;
display:inline-block;
background-position: 0px 0px;
background-repeat:no-repeat;
height:24px;
margin: -14px 0px 0px 10px;
vertical-align:middle;
cursor: pointer;
padding: 0px 8px 0px 8px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-family: verdana;
font-size: 12px;
-moz-border-radius: 15px;
border-radius: 15px;
display:inline-block;
background-position: 0px 0px;
background-repeat:no-repeat;
height:24px;
margin: -14px 0px 0px 10px;
vertical-align:middle;
cursor: pointer;
padding: 0px 8px 0px 8px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
span.network-manipulationUI:hover {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20);
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20);
}
span.network-manipulationUI:active {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50);
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50);
}
span.network-manipulationUI.back {
background-image: url("img/network/backIcon.png");
background-image: url("img/network/backIcon.png");
}
span.network-manipulationUI.none:hover {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
cursor: default;
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
cursor: default;
}
span.network-manipulationUI.none:active {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
}
span.network-manipulationUI.none {
padding: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
span.network-manipulationUI.notification{
margin: 2px;
font-weight: bold;
margin: 2px;
font-weight: bold;
}
span.network-manipulationUI.add {
background-image: url("img/network/addNodeIcon.png");
background-image: url("img/network/addNodeIcon.png");
}
span.network-manipulationUI.edit {
background-image: url("img/network/editIcon.png");
background-image: url("img/network/editIcon.png");
}
span.network-manipulationUI.edit.editmode {
background-color: #fcfcfc;
border-style:solid;
border-width:1px;
border-color: #cccccc;
background-color: #fcfcfc;
border-style:solid;
border-width:1px;
border-color: #cccccc;
}
span.network-manipulationUI.connect {
background-image: url("img/network/connectIcon.png");
background-image: url("img/network/connectIcon.png");
}
span.network-manipulationUI.delete {
background-image: url("img/network/deleteIcon.png");
background-image: url("img/network/deleteIcon.png");
}
/* top right bottom left */
span.network-manipulationLabel {
margin: 0px 0px 0px 23px;
line-height: 25px;
margin: 0px 0px 0px 23px;
line-height: 25px;
}
div.network-seperatorLine {
display:inline-block;
width:1px;
height:20px;
background-color: #bdbdbd;
margin: 5px 7px 0px 15px;
display:inline-block;
width:1px;
height:20px;
background-color: #bdbdbd;
margin: 5px 7px 0px 15px;
}
div.network-navigation_wrapper {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
div.network-navigation {
width:34px;
height:34px;
z-index:10;
-moz-border-radius: 17px;
border-radius: 17px;
position:absolute;

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


+ 1
- 1
dist/vis.min.css
File diff suppressed because it is too large
View File


+ 8
- 0
docs/network.html View File

@ -870,6 +870,14 @@ var options = {
<th>Description</th>
</tr>
<tr>
<td>activatable</td>
<td>boolean</td>
<td>false</td>
<td>When a Network is configured to be <code>activatable</code>, it will react to mouse, touch, and keyboard events only when active.
When active, a blue shadow border is displayed around the Network. The Network is set active by clicking on it, and is changed to inactive again by clicking outside the Network or by pressing the ESC key.</td>
</tr>
<tr>
<td><a href="#Physics">physics</a></td>
<td>Object</td>

+ 1
- 0
examples/network/01_basic_usage.html View File

@ -4,6 +4,7 @@
<title>Network | Basic usage</title>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {

+ 1
- 0
examples/network/02_random_nodes.html View File

@ -15,6 +15,7 @@
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var nodes = null;

+ 1
- 0
examples/network/03_images.html View File

@ -15,6 +15,7 @@
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var nodes = null;

+ 1
- 0
examples/network/04_shapes.html View File

@ -15,6 +15,7 @@
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var nodes = null;

+ 1
- 0
examples/network/05_social_network.html View File

@ -16,6 +16,7 @@
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var DIR = 'img/soft-scraps-icons/';

+ 1
- 0
examples/network/06_groups.html View File

@ -16,6 +16,7 @@
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var nodes = null;

+ 1
- 0
examples/network/07_selections.html View File

@ -4,6 +4,7 @@
<title>Network | Selections</title>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {

+ 1
- 0
examples/network/08_mobile_friendly.html View File

@ -22,6 +22,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var nodes = null;

+ 1
- 0
examples/network/09_sizing.html View File

@ -15,6 +15,7 @@
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var nodes = null;

+ 1
- 0
examples/network/10_multiline_text.html View File

@ -12,6 +12,7 @@
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function draw() {

+ 1
- 0
examples/network/11_custom_style.html View File

@ -15,6 +15,7 @@
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var nodes = null;

+ 1
- 0
examples/network/12_scalable_images.html View File

@ -15,6 +15,7 @@
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var DIR = 'img/soft-scraps-icons/';

+ 1
- 0
examples/network/13_dashed_lines.html View File

@ -15,6 +15,7 @@
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
// Called on page load

+ 1
- 0
examples/network/14_dot_language.html View File

@ -3,6 +3,7 @@
<title>Network | DOT Language</title>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="mynetwork"></div>

+ 1
- 0
examples/network/15_dot_language_playground.html View File

@ -4,6 +4,7 @@
<title>Network | DOT language playground</title>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {

+ 1
- 0
examples/network/16_dynamic_data.html View File

@ -54,6 +54,7 @@
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var nodes, edges, network;

+ 1
- 0
examples/network/17_network_info.html View File

@ -18,6 +18,7 @@
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var nodes = null;

+ 76
- 75
examples/network/18_fully_random_nodes_clustering.html View File

@ -1,95 +1,96 @@
<!doctype html>
<html>
<head>
<title>Network | Fully random nodes clustering</title>
<title>Network | Fully random nodes clustering</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<style type="text/css">
body {
font: 10pt sans;
}
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var nodes = null;
var edges = null;
var network = null;
<script type="text/javascript">
var nodes = null;
var edges = null;
var network = null;
function draw() {
nodes = [];
edges = [];
// randomly create some nodes and edges
var nodeCount = parseInt(document.getElementById('nodeCount').value);
function draw() {
nodes = [];
edges = [];
// randomly create some nodes and edges
var nodeCount = parseInt(document.getElementById('nodeCount').value);
for (var i = 0; i < nodeCount; i++) {
nodes.push({
id: i,
label: String(i)
});
}
for (var i = 0; i < nodeCount; i++) {
var from = i;
var to = i;
to = i;
while (to == i) {
to = Math.floor(Math.random() * (nodeCount));
}
edges.push({
from: from,
to: to
});
}
// create a network
var clusteringOn = document.getElementById('clustering').checked;
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
physics: {barnesHut:{springLength:120}}, // this is the correct way to set the length of the springs
clustering: {
enabled: clusteringOn
},
stabilize: false
};
network = new vis.Network(container, data, options);
// add event listeners
network.on('select', function(params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
});
for (var i = 0; i < nodeCount; i++) {
nodes.push({
id: i,
label: String(i)
});
}
for (var i = 0; i < nodeCount; i++) {
var from = i;
var to = i;
to = i;
while (to == i) {
to = Math.floor(Math.random() * (nodeCount));
}
</script>
edges.push({
from: from,
to: to
});
}
// create a network
var clusteringOn = document.getElementById('clustering').checked;
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
physics: {barnesHut:{springLength:120}}, // this is the correct way to set the length of the springs
clustering: {
enabled: clusteringOn
},
stabilize: false
};
network = new vis.Network(container, data, options);
// add event listeners
network.on('select', function(params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
});
}
</script>
</head>
<body onload="draw();">
<h2>Clustering - Fully random network</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows a fully randomly generated set of nodes and connected edges.
By clicking the checkbox you can turn clustering on and off. If you increase the number of nodes to
a value higher than 100, automatic clustering is used before the initial draw (assuming the checkbox is checked).
<br />
<br />
Clustering is done automatically when zooming out. When zooming in over the cluster, the cluster pops open. When the cluster is very big, a special instance
will be created and the cluster contents will only be simulated in there. Double click will also open a cluster.
<br />
<br />
Try values of 500 and 5000 with and without clustering. All thresholds can be changed to suit your dataset.
This example shows a fully randomly generated set of nodes and connected edges.
By clicking the checkbox you can turn clustering on and off. If you increase the number of nodes to
a value higher than 100, automatic clustering is used before the initial draw (assuming the checkbox is checked).
<br />
<br />
Clustering is done automatically when zooming out. When zooming in over the cluster, the cluster pops open. When the cluster is very big, a special instance
will be created and the cluster contents will only be simulated in there. Double click will also open a cluster.
<br />
<br />
Try values of 500 and 5000 with and without clustering. All thresholds can be changed to suit your dataset.
</div>
<br />
<form onsubmit="draw(); return false;">
<label for="nodeCount">Number of nodes:</label>
<input id="nodeCount" type="text" value="50" style="width: 50px;">
<label for="clustering">Enable Clustering:</label>
<input id="clustering" type="checkbox" onChange="draw()" checked="true">
<input type="submit" value="Go">
<label for="nodeCount">Number of nodes:</label>
<input id="nodeCount" type="text" value="50" style="width: 50px;">
<label for="clustering">Enable Clustering:</label>
<input id="clustering" type="checkbox" onChange="draw()" checked="true">
<input type="submit" value="Go">
</form>
<br>

+ 1
- 0
examples/network/19_scale_free_graph_clustering.html View File

@ -15,6 +15,7 @@
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var nodes = null;

+ 1
- 0
examples/network/22_les_miserables.html View File

@ -12,6 +12,7 @@
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function draw() {

+ 1
- 0
examples/network/23_hierarchical_layout.html View File

@ -15,6 +15,7 @@
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var nodes = null;

+ 1
- 0
examples/network/24_hierarchical_layout_userdefined.html View File

@ -15,6 +15,7 @@
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var nodes = null;

+ 1
- 0
examples/network/25_physics_configuration.html View File

@ -15,6 +15,7 @@
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var nodes = null;

+ 1
- 0
examples/network/26_staticSmoothCurves.html View File

@ -4,6 +4,7 @@
<title>Network | Static smooth curves</title>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {

+ 25
- 4
lib/network/Network.js View File

@ -13,6 +13,7 @@ var Node = require('./Node');
var Edge = require('./Edge');
var Popup = require('./Popup');
var MixinLoader = require('./mixins/MixinLoader');
var Activator = require('../shared/Activator');
var locales = require('./locales');
// Load custom shapes into CanvasRenderingContext2D
@ -545,14 +546,13 @@ Network.prototype.setData = function(data, disableStart) {
/**
* Set options
* @param {Object} options
* @param {Boolean} [initializeView] | set zoom and translation to default.
*/
Network.prototype.setOptions = function (options) {
if (options) {
var prop;
var fields = ['nodes','edges','smoothCurves','hierarchicalLayout','clustering','navigation','keyboard','dataManipulation',
'onAdd','onEdit','onEditEdge','onConnect','onDelete'
'onAdd','onEdit','onEditEdge','onConnect','onDelete','activatable'
];
util.selectiveNotDeepExtend(fields,this.constants, options);
util.selectiveNotDeepExtend(['color'],this.constants.nodes, options.nodes);
@ -648,6 +648,19 @@ Network.prototype.setOptions = function (options) {
}
}
if ('activatable' in options) {
if (options.activatable) {
this.activator = new Activator(this.frame);
this.activator.on('change', this._createKeyBinds.bind(this));
}
else {
if (this.activator) {
this.activator.destroy();
delete this.activator;
}
}
}
if (options.labels) {
throw new Error('Option "labels" is deprecated. Use options "locale" and "locales" instead.');
}
@ -686,7 +699,7 @@ Network.prototype._create = function () {
}
this.frame = document.createElement('div');
this.frame.className = 'network-frame';
this.frame.className = 'vis network-frame';
this.frame.style.position = 'relative';
this.frame.style.overflow = 'hidden';
@ -738,7 +751,7 @@ Network.prototype._createKeyBinds = function() {
this.mousetrap.reset();
if (this.constants.keyboard.enabled == true) {
if (this.constants.keyboard.enabled && this.isActive()) {
this.mousetrap.bind("up", this._moveUp.bind(me) , "keydown");
this.mousetrap.bind("up", this._yStopMoving.bind(me), "keyup");
this.mousetrap.bind("down", this._moveDown.bind(me) , "keydown");
@ -2223,4 +2236,12 @@ Network.prototype.focusOnNode = function (nodeId, zoomLevel) {
}
};
/**
* Returns true when the Timeline is active.
* @returns {boolean}
*/
Network.prototype.isActive = function () {
return !this.activator || this.activator.active;
};
module.exports = Network;

+ 57
- 1
lib/shared/Activator.js View File

@ -1,4 +1,5 @@
var mousetrap = require('mousetrap');
var Emitter = require('emitter-component');
var Hammer = require('../module/hammer');
var util = require('../util');
@ -27,14 +28,36 @@ function Activator(container) {
this.hammer = Hammer(this.dom.overlay, {prevent_default: false});
this.hammer.on('tap', this._onTapOverlay.bind(this));
// block all touch events (except tap)
var me = this;
var events = [
'touch', 'pinch',
'doubletap', 'hold',
'dragstart', 'drag', 'dragend',
'mousewheel', 'DOMMouseScroll' // DOMMouseScroll is needed for Firefox
];
events.forEach(function (event) {
me.hammer.on(event, function (event) {
event.stopPropagation();
});
});
// attach a tap event to the window, in order to deactivate when clicking outside the timeline
this.windowHammer = Hammer(window, {prevent_default: false});
this.windowHammer.on('tap', this.deactivate.bind(this));
this.windowHammer.on('tap', function (event) {
// deactivate when clicked outside the container
if (!_hasParent(event.target, container)) {
me.deactivate();
}
});
// mousetrap listener only bounded when active)
this.escListener = this.deactivate.bind(this);
}
// turn into an event emitter
Emitter(Activator.prototype);
// The currently active activator
Activator.current = null;
@ -66,6 +89,12 @@ Activator.prototype.activate = function () {
this.active = true;
this.dom.overlay.style.display = 'none';
util.addClassName(this.dom.container, 'vis-active');
this.emit('change');
this.emit('activate');
// ugly hack: bind ESC after emitting the events, as the Network rebinds all
// keyboard events on a 'change' event
mousetrap.bind('esc', this.escListener);
};
@ -78,12 +107,39 @@ Activator.prototype.deactivate = function () {
this.dom.overlay.style.display = '';
util.removeClassName(this.dom.container, 'vis-active');
mousetrap.unbind('esc', this.escListener);
this.emit('change');
this.emit('deactivate');
};
/**
* Handle a tap event: activate the container
* @param event
* @private
*/
Activator.prototype._onTapOverlay = function (event) {
// activate the container
this.activate();
event.stopPropagation();
};
/**
* Test whether the element has the requested parent element somewhere in
* its chain of parent nodes.
* @param {HTMLElement} element
* @param {HTMLElement} parent
* @returns {boolean} Returns true when the parent is found somewhere in the
* chain of parent nodes.
* @private
*/
function _hasParent(element, parent) {
while (element) {
if (element === parent) {
return true
}
element = element.parentNode;
}
return false;
}
module.exports = Activator;

+ 9
- 1
lib/timeline/Core.js View File

@ -114,7 +114,7 @@ Core.prototype._create = function (container) {
events.forEach(function (event) {
var listener = function () {
var args = [event].concat(Array.prototype.slice.call(arguments, 0));
if (!me.activator || me.activator.active) {
if (me.isActive()) {
me.emit.apply(me, args);
}
};
@ -206,6 +206,14 @@ Core.prototype.setOptions = function (options) {
this.redraw();
};
/**
* Returns true when the Timeline is active.
* @returns {boolean}
*/
Core.prototype.isActive = function () {
return !this.activator || this.activator.active;
};
/**
* Destroy the Core, clean up all DOM elements and event listeners.
*/

Write Preview
Loading…
Cancel
Save