Browse Source

Merge remote-tracking branch 'origin/v4' into v4

flowchartTest
Alex de Mulder 9 years ago
parent
commit
6d8974bda0
108 changed files with 15749 additions and 16592 deletions
  1. +2
    -2
      README.md
  2. +342
    -335
      dist/vis.css
  3. +13837
    -14618
      dist/vis.js
  4. +1
    -1
      dist/vis.min.css
  5. +6
    -6
      docs/timeline.html
  6. +4
    -4
      examples/graph2d/04_rightAxis.html
  7. +7
    -8
      examples/graph2d/05_bothAxis.html
  8. +347
    -347
      examples/graph2d/09_external_legend.html
  9. +7
    -7
      examples/graph2d/16_bothAxis_titles.html
  10. +11
    -9
      examples/network/01_basic_usage.html
  11. +0
    -3
      examples/network/09_sizing.html
  12. +2
    -3
      examples/network/20_navigation.html
  13. +10
    -10
      examples/timeline/12_custom_styling.html
  14. +9
    -9
      examples/timeline/15_item_class_names.html
  15. +1
    -1
      examples/timeline/18_range_overflow.html
  16. +2
    -2
      examples/timeline/25_background_areas.html
  17. +3
    -3
      examples/timeline/30_subgroups.html
  18. +5
    -5
      examples/timeline/32_grid_styling.html
  19. +16
    -2
      gulpfile.js
  20. +3
    -3
      lib/DOMutil.js
  21. +3
    -1
      lib/module/hammer.js
  22. +1
    -46
      lib/network/Network.js
  23. +148
    -147
      lib/network/css/network-colorpicker.css
  24. +1
    -1
      lib/network/css/network-configuration.css
  25. +32
    -27
      lib/network/css/network-manipulation.css
  26. +12
    -12
      lib/network/css/network-navigation.css
  27. +8
    -3
      lib/network/css/network-tooltip.css
  28. +30
    -6
      lib/network/modules/Canvas.js
  29. +7
    -11
      lib/network/modules/CanvasRenderer.js
  30. +1
    -5
      lib/network/modules/Clustering.js
  31. +56
    -48
      lib/network/modules/ConfigurationSystem.js
  32. +14
    -86
      lib/network/modules/EdgesHandler.js
  33. +78
    -59
      lib/network/modules/InteractionHandler.js
  34. +0
    -4
      lib/network/modules/LayoutEngine.js
  35. +13
    -19
      lib/network/modules/ManipulationSystem.js
  36. +15
    -18
      lib/network/modules/NodesHandler.js
  37. +0
    -4
      lib/network/modules/PhysicsEngine.js
  38. +65
    -66
      lib/network/modules/SelectionHandler.js
  39. +10
    -7
      lib/network/modules/View.js
  40. +20
    -26
      lib/network/modules/components/ColorPicker.js
  41. +68
    -52
      lib/network/modules/components/Edge.js
  42. +5
    -4
      lib/network/modules/components/NavigationHandler.js
  43. +73
    -47
      lib/network/modules/components/Node.js
  44. +8
    -47
      lib/network/modules/components/Popup.js
  45. +4
    -5
      lib/network/modules/components/edges/BezierEdgeDynamic.js
  46. +8
    -9
      lib/network/modules/components/edges/BezierEdgeStatic.js
  47. +3
    -4
      lib/network/modules/components/edges/StraightEdge.js
  48. +0
    -4
      lib/network/modules/components/edges/util/BezierEdgeBase.js
  49. +42
    -3
      lib/network/modules/components/edges/util/EdgeBase.js
  50. +0
    -0
      lib/network/modules/components/nodes/Cluster.js
  51. +10
    -6
      lib/network/modules/components/nodes/shapes/Box.js
  52. +0
    -3
      lib/network/modules/components/nodes/shapes/Circle.js
  53. +0
    -3
      lib/network/modules/components/nodes/shapes/CircularImage.js
  54. +7
    -3
      lib/network/modules/components/nodes/shapes/Database.js
  55. +0
    -3
      lib/network/modules/components/nodes/shapes/Diamond.js
  56. +0
    -3
      lib/network/modules/components/nodes/shapes/Dot.js
  57. +9
    -3
      lib/network/modules/components/nodes/shapes/Ellipse.js
  58. +0
    -3
      lib/network/modules/components/nodes/shapes/Empty.js
  59. +7
    -3
      lib/network/modules/components/nodes/shapes/Icon.js
  60. +0
    -3
      lib/network/modules/components/nodes/shapes/Image.js
  61. +0
    -3
      lib/network/modules/components/nodes/shapes/Square.js
  62. +0
    -3
      lib/network/modules/components/nodes/shapes/Star.js
  63. +5
    -3
      lib/network/modules/components/nodes/shapes/Text.js
  64. +0
    -3
      lib/network/modules/components/nodes/shapes/Triangle.js
  65. +0
    -3
      lib/network/modules/components/nodes/shapes/TriangleDown.js
  66. +13
    -3
      lib/network/modules/components/nodes/util/CircleImageBase.js
  67. +18
    -4
      lib/network/modules/components/nodes/util/NodeBase.js
  68. +7
    -3
      lib/network/modules/components/nodes/util/ShapeBase.js
  69. +0
    -4
      lib/network/modules/components/physics/BarnesHutSolver.js
  70. +0
    -4
      lib/network/modules/components/physics/CentralGravitySolver.js
  71. +0
    -4
      lib/network/modules/components/physics/HierarchicalRepulsionSolver.js
  72. +0
    -4
      lib/network/modules/components/physics/HierarchicalSpringSolver.js
  73. +0
    -4
      lib/network/modules/components/physics/RepulsionSolver.js
  74. +0
    -4
      lib/network/modules/components/physics/SpringSolver.js
  75. +41
    -42
      lib/network/modules/components/shared/Label.js
  76. +22
    -22
      lib/timeline/Core.js
  77. +0
    -3
      lib/timeline/DateUtil.js
  78. +0
    -6
      lib/timeline/Range.js
  79. +1
    -1
      lib/timeline/component/CurrentTime.js
  80. +5
    -7
      lib/timeline/component/CustomTime.js
  81. +9
    -9
      lib/timeline/component/DataAxis.js
  82. +6
    -6
      lib/timeline/component/GraphGroup.js
  83. +10
    -10
      lib/timeline/component/Group.js
  84. +7
    -10
      lib/timeline/component/ItemSet.js
  85. +2
    -2
      lib/timeline/component/Legend.js
  86. +1
    -1
      lib/timeline/component/LineGraph.js
  87. +8
    -8
      lib/timeline/component/TimeAxis.js
  88. +5
    -5
      lib/timeline/component/css/animation.css
  89. +1
    -1
      lib/timeline/component/css/currenttime.css
  90. +1
    -1
      lib/timeline/component/css/customtime.css
  91. +75
    -77
      lib/timeline/component/css/dataaxis.css
  92. +16
    -16
      lib/timeline/component/css/item.css
  93. +6
    -6
      lib/timeline/component/css/itemset.css
  94. +6
    -6
      lib/timeline/component/css/labelset.css
  95. +18
    -29
      lib/timeline/component/css/panel.css
  96. +16
    -16
      lib/timeline/component/css/pathStyles.css
  97. +8
    -8
      lib/timeline/component/css/timeaxis.css
  98. +10
    -1
      lib/timeline/component/css/timeline.css
  99. +1
    -4
      lib/timeline/component/graph2d_types/bar.js
  100. +4
    -7
      lib/timeline/component/graph2d_types/line.js

+ 2
- 2
README.md View File

@ -179,7 +179,7 @@ exports.Timeline = require('./lib/timeline/Timeline');
Install browserify globally via `[sudo] npm install -g browserify`, then create a custom bundle like:
browserify custom.js -t 6to5ify -o vis-custom.js -s vis
browserify custom.js -t babelify -o vis-custom.js -s vis
This will generate a custom bundle *vis-custom.js*, which exposes the namespace `vis` containing only `DataSet` and `Timeline`. The generated bundle can be minified with uglifyjs (installed globally with `[sudo] npm install -g uglify-js`):
@ -204,7 +204,7 @@ The custom bundle can now be loaded like:
The default bundle `vis.js` is standalone and includes external dependencies such as hammer.js and moment.js. When these libraries are already loaded by the application, vis.js does not need to include these dependencies itself too. To build a custom bundle of vis.js excluding moment.js and hammer.js, run browserify in the root of the project:
browserify index.js -t 6to5ify -o vis-custom.js -s vis -x moment -x hammerjs
browserify index.js -t babelify -o vis-custom.js -s vis -x moment -x hammerjs
This will generate a custom bundle *vis-custom.js*, which exposes the namespace `vis`, and has moment and hammerjs excluded. The generated bundle can be minified with uglifyjs:

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


+ 13837
- 14618
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


+ 6
- 6
docs/timeline.html View File

@ -1373,7 +1373,7 @@ To load a locale into the Timeline not supported by default, one can add a new l
<p>For example, to change the border and background color of all items, include the
following code inside the head of your html code or in a separate stylesheet.</p>
<pre class="prettyprint lang-html">&lt;style&gt;
.vis.timeline .item {
.vis-item {
border-color: orange;
background-color: yellow;
}
@ -1424,17 +1424,17 @@ To load a locale into the Timeline not supported by default, one can add a new l
<pre class="prettyprint lang-html">&lt;style&gt;
/* alternating column backgrounds */
.vis.timeline .timeaxis .grid.odd {
.vis-time-axis .grid.odd {
background: #f5f5f5;
}
/* gray background in weekends, white text color */
.vis.timeline .timeaxis .grid.saturday,
.vis.timeline .timeaxis .grid.sunday {
.vis-time-axis .vis-grid.saturday,
.vis-time-axis .vis-grid.sunday {
background: gray;
}
.vis.timeline .timeaxis .text.saturday,
.vis.timeline .timeaxis .text.sunday {
.vis-time-axis .vis-text.saturday,
.vis-time-axis .vis-text.sunday {
color: white;
}
&lt;/style&gt;

+ 4
- 4
examples/graph2d/04_rightAxis.html View File

@ -8,14 +8,14 @@
font-family: sans-serif;
}
.customStyle1 {
.custom-style1 {
fill: #0df200;
fill-opacity:0;
stroke-width:2px;
stroke: #0df200;
}
.customStyle2 {
.custom-style2 {
fill: #f23303;
fill-opacity:0;
stroke-width:2px;
@ -47,7 +47,7 @@
groups.add({
id: 0,
content: names[0],
className: 'customStyle1',
className: 'custom-style1',
options: {
drawPoints: {
style: 'square' // square, circle
@ -60,7 +60,7 @@
groups.add({
id: 1,
content: names[1],
className: 'customStyle2',
className: 'custom-style2',
options: {
style:'bar',
drawPoints: {style: 'circle',

+ 7
- 8
examples/graph2d/05_bothAxis.html View File

@ -8,27 +8,26 @@
font-family: sans-serif;
}
.customStyle1 {
.custom-style1 {
fill: #f2ea00;
fill-opacity:0;
stroke-width:2px;
stroke: #b3ab00;
}
.customStyle2 {
.custom-style2 {
fill: #00a0f2;
fill-opacity:0;
stroke-width:2px;
stroke: #050092;
}
.customStyle3 {
.custom-style3 {
fill: #00f201;
fill-opacity:0;
stroke-width:2px;
stroke: #029200;
}
path.customStyle3.fill {
path.custom-style3.vis-fill {
fill-opacity:0.5 !important;
stroke: none;
}
@ -57,7 +56,7 @@
groups.add({
id: 0,
content: names[0],
className: 'customStyle1',
className: 'custom-style1',
options: {
drawPoints: {
style: 'square' // square, circle
@ -70,7 +69,7 @@
groups.add({
id: 1,
content: names[1],
className: 'customStyle2',
className: 'custom-style2',
options: {
style:'bar',
drawPoints: {style: 'circle',
@ -90,7 +89,7 @@
groups.add({
id: 3,
content: names[3],
className: 'customStyle3',
className: 'custom-style3',
options: {
yAxisOrientation: 'right', // right, left
drawPoints: {

+ 347
- 347
examples/graph2d/09_external_legend.html View File

@ -1,366 +1,366 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | External legend Example</title>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
font-family: sans-serif;
}
.customStyle1 {
fill: #f2ea00;
fill-opacity:0;
stroke-width:2px;
stroke: #b3ab00;
}
.customStyle2 {
fill: #00a0f2;
fill-opacity:0;
stroke-width:2px;
stroke: #050092;
}
.customStyle3 {
fill: #00f201;
fill-opacity:0;
stroke-width:2px;
stroke: #029200;
}
path.customStyle3.fill {
fill-opacity:0.5 !important;
stroke: none;
}
.graphGroup0 {
fill:#4f81bd;
fill-opacity:0;
stroke-width:2px;
stroke: #4f81bd;
}
.graphGroup1 {
fill:#f79646;
fill-opacity:0;
stroke-width:2px;
stroke: #f79646;
}
.graphGroup2 {
fill: #8c51cf;
fill-opacity:0;
stroke-width:2px;
stroke: #8c51cf;
}
.graphGroup3 {
fill: #75c841;
fill-opacity:0;
stroke-width:2px;
stroke: #75c841;
}
.graphGroup4 {
fill: #ff0100;
fill-opacity:0;
stroke-width:2px;
stroke: #ff0100;
}
.graphGroup5 {
fill: #37d8e6;
fill-opacity:0;
stroke-width:2px;
stroke: #37d8e6;
}
.graphGroup6 {
fill: #042662;
fill-opacity:0;
stroke-width:2px;
stroke: #042662;
}
.graphGroup7 {
fill:#00ff26;
fill-opacity:0;
stroke-width:2px;
stroke: #00ff26;
}
.graphGroup8 {
fill:#ff00ff;
fill-opacity:0;
stroke-width:2px;
stroke: #ff00ff;
}
.graphGroup9 {
fill: #8f3938;
fill-opacity:0;
stroke-width:2px;
stroke: #8f3938;
}
.fill {
fill-opacity:0.1;
stroke: none;
}
.bar {
fill-opacity:0.5;
stroke-width:1px;
}
.point {
stroke-width:2px;
fill-opacity:1.0;
}
.legendBackground {
stroke-width:1px;
fill-opacity:0.9;
fill: #ffffff;
stroke: #c2c2c2;
}
.outline {
stroke-width:1px;
fill-opacity:1;
fill: #ffffff;
stroke: #e5e5e5;
}
.iconFill {
fill-opacity:0.3;
stroke: none;
}
div.descriptionContainer {
float:left;
height:30px;
width:160px;
padding-left:5px;
padding-right:5px;
line-height: 30px;
}
div.iconContainer {
float:left;
}
div.legendElementContainer {
display:inline-block;
width:200px;
height:30px;
border-style:solid;
border-width:1px;
border-color: #e0e0e0;
background-color: #ffffff;
margin:4px;
padding:4px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor:pointer;
}
div.legendElementContainer.hidden {
background-color: #d3e6ff;
}
svg.legendIcon {
width:30px;
height:30px;
}
div.externalLegend {
position:relative;
margin-left: -5px;
width: 900px;
}
</style>
<script src="../../dist/vis.js"></script>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<title>Graph2d | External legend Example</title>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
font-family: sans-serif;
}
.custom-style1 {
fill: #f2ea00;
fill-opacity:0;
stroke-width:2px;
stroke: #b3ab00;
}
.custom-style2 {
fill: #00a0f2;
fill-opacity:0;
stroke-width:2px;
stroke: #050092;
}
.custom-style3 {
fill: #00f201;
fill-opacity:0;
stroke-width:2px;
stroke: #029200;
}
path.custom-style3.fill {
fill-opacity:0.5 !important;
stroke: none;
}
.vis-graph-group0 {
fill:#4f81bd;
fill-opacity:0;
stroke-width:2px;
stroke: #4f81bd;
}
.vis-graph-group1 {
fill:#f79646;
fill-opacity:0;
stroke-width:2px;
stroke: #f79646;
}
.vis-graph-group2 {
fill: #8c51cf;
fill-opacity:0;
stroke-width:2px;
stroke: #8c51cf;
}
.vis-graph-group3 {
fill: #75c841;
fill-opacity:0;
stroke-width:2px;
stroke: #75c841;
}
.vis-graph-group4 {
fill: #ff0100;
fill-opacity:0;
stroke-width:2px;
stroke: #ff0100;
}
.vis-graph-group5 {
fill: #37d8e6;
fill-opacity:0;
stroke-width:2px;
stroke: #37d8e6;
}
.vis-graph-group6 {
fill: #042662;
fill-opacity:0;
stroke-width:2px;
stroke: #042662;
}
.vis-graph-group7 {
fill:#00ff26;
fill-opacity:0;
stroke-width:2px;
stroke: #00ff26;
}
.vis-graph-group8 {
fill:#ff00ff;
fill-opacity:0;
stroke-width:2px;
stroke: #ff00ff;
}
.vis-graph-group9 {
fill: #8f3938;
fill-opacity:0;
stroke-width:2px;
stroke: #8f3938;
}
.vis-fill {
fill-opacity:0.1;
stroke: none;
}
.vis-bar {
fill-opacity:0.5;
stroke-width:1px;
}
.vis-point {
stroke-width:2px;
fill-opacity:1.0;
}
.vis-legend-background {
stroke-width:1px;
fill-opacity:0.9;
fill: #ffffff;
stroke: #c2c2c2;
}
.vis-outline {
stroke-width:1px;
fill-opacity:1;
fill: #ffffff;
stroke: #e5e5e5;
}
.vis-icon-fill {
fill-opacity:0.3;
stroke: none;
}
div.description-container {
float:left;
height:30px;
width:160px;
padding-left:5px;
padding-right:5px;
line-height: 30px;
}
div.icon-container {
float:left;
}
div.legend-element-container {
display:inline-block;
width:200px;
height:30px;
border-style:solid;
border-width:1px;
border-color: #e0e0e0;
background-color: #ffffff;
margin:4px;
padding:4px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor:pointer;
}
div.legend-element-container.hidden {
background-color: #d3e6ff;
}
svg.legend-icon {
width:30px;
height:30px;
}
div.external-legend {
position:relative;
margin-left: -5px;
width: 900px;
}
</style>
<script src="../../dist/vis.js"></script>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<body>
<h2>Graph2d | External custom legend</h2>
<div style="width:800px; font-size:14px; text-align: justify;">
This example shows how to create an external custom legend using the getLegend function. We use normal JavaScript to show and hide the
groups by updating the dataset.
This example shows how to create an external custom legend using the getLegend function. We use normal JavaScript to show and hide the
groups by updating the dataset.
</div>
<br />
<div id="Legend" class="externalLegend"></div>
<div id="Legend" class="external-legend"></div>
<div id="visualization"></div>
<script type="text/javascript">
// create a dataSet with groups
var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
className: 'customStyle1',
options: {
drawPoints: {
style: 'square' // square, circle
},
shaded: {
orientation: 'bottom' // top, bottom
}
}});
groups.add({
id: 1,
content: names[1],
className: 'customStyle2',
options: {
style:'bar',
drawPoints: {style: 'circle',
size: 10
}
}});
groups.add({
id: 2,
content: names[2],
options: {
yAxisOrientation: 'right', // right, left
drawPoints: false
}
});
groups.add({
id: 3,
content: names[3],
className: 'customStyle3',
options: {
yAxisOrientation: 'right', // right, left
drawPoints: {
style: 'circle' // square, circle
},
shaded: {
orientation: 'top' // top, bottom
}
}});
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-12', y: 0 , group: 0},
{x: '2014-06-13', y: 30, group: 0},
{x: '2014-06-14', y: 10, group: 0},
{x: '2014-06-15', y: 15, group: 1},
{x: '2014-06-16', y: 30, group: 1},
{x: '2014-06-17', y: 10, group: 1},
{x: '2014-06-18', y: 15, group: 1},
{x: '2014-06-19', y: 52, group: 1},
{x: '2014-06-20', y: 10, group: 1},
{x: '2014-06-21', y: 20, group: 2},
{x: '2014-06-22', y: 600, group: 2},
{x: '2014-06-23', y: 100, group: 2},
{x: '2014-06-24', y: 250, group: 2},
{x: '2014-06-25', y: 300, group: 2},
{x: '2014-06-26', y: 200, group: 3},
{x: '2014-06-27', y: 600, group: 3},
{x: '2014-06-28', y: 1000, group: 3},
{x: '2014-06-29', y: 250, group: 3},
{x: '2014-06-30', y: 300, group: 3}
];
var dataset = new vis.DataSet(items);
var options = {
dataAxis: {showMinorLabels: false},
start: '2014-06-09',
end: '2014-07-03'
};
var graph2d = new vis.Graph2d(container, items, groups, options);
/**
* this function fills the external legend with content using the getLegend() function.
*/
function populateExternalLegend() {
var groupsData = groups.get();
var legendDiv = document.getElementById("Legend");
legendDiv.innerHTML = "";
// get for all groups:
for (var i = 0; i < groupsData.length; i++) {
// create divs
var containerDiv = document.createElement("div");
var iconDiv = document.createElement("div");
var descriptionDiv = document.createElement("div");
// give divs classes and Ids where necessary
containerDiv.className = 'legendElementContainer';
containerDiv.id = groupsData[i].id + "_legendContainer"
iconDiv.className = "iconContainer";
descriptionDiv.className = "descriptionContainer";
// get the legend for this group.
var legend = graph2d.getLegend(groupsData[i].id,30,30);
// append class to icon. All styling classes from the vis.css have been copied over into the head here to be able to style the
// icons with the same classes if they are using the default ones.
legend.icon.setAttributeNS(null, "class", "legendIcon");
// append the legend to the corresponding divs
iconDiv.appendChild(legend.icon);
descriptionDiv.innerHTML = legend.label;
// determine the order for left and right orientation
if (legend.orientation == 'left') {
descriptionDiv.style.textAlign = "left";
containerDiv.appendChild(iconDiv);
containerDiv.appendChild(descriptionDiv);
}
else {
descriptionDiv.style.textAlign = "right";
containerDiv.appendChild(descriptionDiv);
containerDiv.appendChild(iconDiv);
}
// append to the legend container div
legendDiv.appendChild(containerDiv);
// bind click event to this legend element.
containerDiv.onclick = toggleGraph.bind(this,groupsData[i].id);
}
// create a dataSet with groups
var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
className: 'custom-style1',
options: {
drawPoints: {
style: 'square' // square, circle
},
shaded: {
orientation: 'bottom' // top, bottom
}
}});
groups.add({
id: 1,
content: names[1],
className: 'custom-style2',
options: {
style:'bar',
drawPoints: {style: 'circle',
size: 10
}
}});
groups.add({
id: 2,
content: names[2],
options: {
yAxisOrientation: 'right', // right, left
drawPoints: false
}
/**
* This function switchs the visible option of the selected group on an off.
* @param groupId
*/
function toggleGraph(groupId) {
// get the container that was clicked on.
var container = document.getElementById(groupId + "_legendContainer")
// if visible, hide
if (graph2d.isGroupVisible(groupId) == true) {
groups.update({id:groupId, visible:false});
container.className = container.className + " hidden";
}
else { // if invisible, show
groups.update({id:groupId, visible:true});
container.className = container.className.replace("hidden","");
}
});
groups.add({
id: 3,
content: names[3],
className: 'custom-style3',
options: {
yAxisOrientation: 'right', // right, left
drawPoints: {
style: 'circle' // square, circle
},
shaded: {
orientation: 'top' // top, bottom
}
}});
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-12', y: 0 , group: 0},
{x: '2014-06-13', y: 30, group: 0},
{x: '2014-06-14', y: 10, group: 0},
{x: '2014-06-15', y: 15, group: 1},
{x: '2014-06-16', y: 30, group: 1},
{x: '2014-06-17', y: 10, group: 1},
{x: '2014-06-18', y: 15, group: 1},
{x: '2014-06-19', y: 52, group: 1},
{x: '2014-06-20', y: 10, group: 1},
{x: '2014-06-21', y: 20, group: 2},
{x: '2014-06-22', y: 600, group: 2},
{x: '2014-06-23', y: 100, group: 2},
{x: '2014-06-24', y: 250, group: 2},
{x: '2014-06-25', y: 300, group: 2},
{x: '2014-06-26', y: 200, group: 3},
{x: '2014-06-27', y: 600, group: 3},
{x: '2014-06-28', y: 1000, group: 3},
{x: '2014-06-29', y: 250, group: 3},
{x: '2014-06-30', y: 300, group: 3}
];
var dataset = new vis.DataSet(items);
var options = {
dataAxis: {showMinorLabels: false},
start: '2014-06-09',
end: '2014-07-03'
};
var graph2d = new vis.Graph2d(container, items, groups, options);
/**
* this function fills the external legend with content using the getLegend() function.
*/
function populateExternalLegend() {
var groupsData = groups.get();
var legendDiv = document.getElementById("Legend");
legendDiv.innerHTML = "";
// get for all groups:
for (var i = 0; i < groupsData.length; i++) {
// create divs
var containerDiv = document.createElement("div");
var iconDiv = document.createElement("div");
var descriptionDiv = document.createElement("div");
// give divs classes and Ids where necessary
containerDiv.className = 'legend-element-container';
containerDiv.id = groupsData[i].id + "_legendContainer"
iconDiv.className = "icon-container";
descriptionDiv.className = "description-container";
// get the legend for this group.
var legend = graph2d.getLegend(groupsData[i].id,30,30);
// append class to icon. All styling classes from the vis.css have been copied over into the head here to be able to style the
// icons with the same classes if they are using the default ones.
legend.icon.setAttributeNS(null, "class", "legend-icon");
// append the legend to the corresponding divs
iconDiv.appendChild(legend.icon);
descriptionDiv.innerHTML = legend.label;
// determine the order for left and right orientation
if (legend.orientation == 'left') {
descriptionDiv.style.textAlign = "left";
containerDiv.appendChild(iconDiv);
containerDiv.appendChild(descriptionDiv);
}
else {
descriptionDiv.style.textAlign = "right";
containerDiv.appendChild(descriptionDiv);
containerDiv.appendChild(iconDiv);
}
// append to the legend container div
legendDiv.appendChild(containerDiv);
// bind click event to this legend element.
containerDiv.onclick = toggleGraph.bind(this,groupsData[i].id);
}
}
/**
* This function switchs the visible option of the selected group on an off.
* @param groupId
*/
function toggleGraph(groupId) {
// get the container that was clicked on.
var container = document.getElementById(groupId + "_legendContainer")
// if visible, hide
if (graph2d.isGroupVisible(groupId) == true) {
groups.update({id:groupId, visible:false});
container.className = container.className + " hidden";
}
else { // if invisible, show
groups.update({id:groupId, visible:true});
container.className = container.className.replace("hidden","");
}
}
populateExternalLegend()
populateExternalLegend()
</script>
</body>

+ 7
- 7
examples/graph2d/16_bothAxis_titles.html View File

@ -8,27 +8,27 @@
font-family: sans-serif;
}
.customStyle1 {
.custom-style1 {
fill: #f2ea00;
fill-opacity:0;
stroke-width:2px;
stroke: #b3ab00;
}
.customStyle2 {
.custom-style2 {
fill: #00a0f2;
fill-opacity:0;
stroke-width:2px;
stroke: #050092;
}
.customStyle3 {
.custom-style3 {
fill: #00f201;
fill-opacity:0;
stroke-width:2px;
stroke: #029200;
}
path.customStyle3.fill {
path.custom-style3.vis-fill {
fill-opacity:0.5 !important;
stroke: none;
}
@ -88,7 +88,7 @@
groups.add({
id: 0,
content: names[0],
className: 'customStyle1',
className: 'custom-style1',
options: {
drawPoints: {
style: 'square' // square, circle
@ -101,7 +101,7 @@
groups.add({
id: 1,
content: names[1],
className: 'customStyle2',
className: 'custom-style2',
options: {
style:'bar',
drawPoints: {style: 'circle',
@ -121,7 +121,7 @@
groups.add({
id: 3,
content: names[3],
className: 'customStyle3',
className: 'custom-style3',
options: {
yAxisOrientation: 'right', // right, left
drawPoints: {

+ 11
- 9
examples/network/01_basic_usage.html View File

@ -9,24 +9,23 @@
<style type="text/css">
#mynetwork {
width: 600px;
margin:90px;
height: 400px;
border: 1px solid lightgray;
display:none;
}
</style>
<body>
<div id="mynetwork"></div>
<input type="button" onclick="document.getElementById('mynetwork').style.display='block'; network.view.zoomExtent({duration:0});" value="showdiv">
<script type="text/javascript">
// create an array with nodes
var nodes = [
{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'}
{id: 1, label: 'Node 1', value:3, title:'hello world'},
{id: 2, label: 'Node 2', value:1},
{id: 3, label: 'Node 3', value:5},
{id: 4, label: 'Node 4', value:3},
{id: 5, label: 'Node 5', value:2}
];
// create an array with edges
@ -46,9 +45,12 @@
edges: edges
};
var options = {
// configure: 'nodes',
interaction:{navigationButtons:true}
// edges:{
// shadow:true,
// shape:'dot'
// },
// physics:{stabilization:true}
nodes:{color:'red'}
}
var network = new vis.Network(container, data, options);
// network.setOptions({nodes:{color:'red'}})

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

@ -63,9 +63,6 @@
var options = {
nodes: {
shape: 'dot'
},
edges: {
color: '#97C2FC'
}
};
network = new vis.Network(container, data, options);

+ 2
- 3
examples/network/20_navigation.html View File

@ -10,6 +10,7 @@
#mynetwork {
width: 600px;
height: 600px;
margin:100px;
border: 1px solid lightgray;
}
table.legend_table {
@ -104,9 +105,7 @@
edges: edges
};
var options = {
stabilize: false,
navigation: true,
keyboard: true
interaction:{navigationButtons: true},
};
network = new vis.Network(container, data, options);

+ 10
- 10
examples/timeline/12_custom_styling.html View File

@ -7,14 +7,14 @@
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.vis.timeline.root {
.vis-timeline {
border: 2px solid purple;
font-family: purisa, 'comic sans', cursive;
font-size: 12pt;
background: #ffecea;
}
.vis.timeline .item {
.vis-item {
border-color: #F991A3;
background-color: pink;
font-size: 15pt;
@ -22,37 +22,37 @@
box-shadow: 5px 5px 20px rgba(128,128,128, 0.5);
}
.vis.timeline .item,
.vis.timeline .item.line {
.vis-item,
.vis-item.vis-line {
border-width: 3px;
}
.vis.timeline .item.dot {
.vis-item.vis-dot {
border-width: 10px;
border-radius: 10px;
}
.vis.timeline .item.selected {
.vis-item.vis-selected {
border-color: green;
background-color: lightgreen;
}
.vis.timeline .timeaxis .text {
.vis-time-axis .vis-text {
color: purple;
padding-top: 10px;
padding-left: 10px;
}
.vis.timeline .timeaxis .text.major {
.vis-time-axis .vis-text.vis-major {
font-weight: bold;
}
.vis.timeline .timeaxis .grid.minor {
.vis-time-axis .vis-grid.vis-minor {
border-width: 2px;
border-color: pink;
}
.vis.timeline .timeaxis .grid.major {
.vis-time-axis .vis-grid.vis-major {
border-width: 2px;
border-color: #F991A3;
}

+ 9
- 9
examples/timeline/15_item_class_names.html View File

@ -12,44 +12,44 @@
/* custom styles for individual items, load this after vis.css */
.vis.timeline .item.green {
.vis-item.green {
background-color: greenyellow;
border-color: green;
}
/* create a custom sized dot at the bottom of the red item */
.vis.timeline .item.red {
.vis-item.red {
background-color: red;
border-color: darkred;
color: white;
font-family: monospace;
box-shadow: 0 0 10px gray;
}
.vis.timeline .item.dot.red {
.vis-item.vis-dot.red {
border-radius: 10px;
border-width: 10px;
}
.vis.timeline .item.line.red {
.vis-item.vis-line.red {
border-width: 5px;
}
.vis.timeline .item.box.red {
.vis-item.vis-box.red {
border-radius: 0;
border-width: 2px;
font-size: 24pt;
font-weight: bold;
}
.vis.timeline .item.orange {
.vis-item.orange {
background-color: gold;
border-color: orange;
}
.vis.timeline .item.orange.selected {
.vis-item.vis-selected.orange {
/* custom colors for selected orange items */
background-color: orange;
border-color: orangered;
}
.vis.timeline .item.magenta {
.vis-item.magenta {
background-color: magenta;
border-color: purple;
color: white;
@ -57,7 +57,7 @@
/* our custom classes overrule the styles for selected events,
so lets define a new style for the selected events */
.vis.timeline .item.selected {
.vis-item.vis-selected {
background-color: white;
border-color: black;
color: black;

+ 1
- 1
examples/timeline/18_range_overflow.html View File

@ -11,7 +11,7 @@
font-family: sans-serif;
}
.vis.timeline .item.range {
.vis-item.vis-range {
overflow: visible;
}
</style>

+ 2
- 2
examples/timeline/25_background_areas.html View File

@ -9,10 +9,10 @@
font-size: 11pt;
}
.vis.timeline .item.background.negative {
.vis-item.vis-background.negative {
background-color: rgba(255, 0, 0, 0.2);
}
.vis.timeline .item.background.marker {
.vis-item.vis-background.marker {
border-left: 2px solid green;
}
</style>

+ 3
- 3
examples/timeline/30_subgroups.html View File

@ -9,13 +9,13 @@
font-size: 11pt;
}
.vis.timeline .item.background.negative {
.vis-item.vis-background.negative {
background-color: rgba(255, 0, 0, 0.2);
}
.vis.timeline .item.background.positive {
.vis-item.vis-background.positive {
background-color: rgba(105, 255, 98, 0.20);
}
.vis.timeline .item.background.marker {
.vis-item.vis-background.marker {
border-left: 2px solid green;
}
</style>

+ 5
- 5
examples/timeline/32_grid_styling.html View File

@ -12,17 +12,17 @@
}
/* alternating column backgrounds */
.vis.timeline .timeaxis .grid.odd {
.vis-time-axis .vis-grid.odd {
background: #f5f5f5;
}
/* gray background in weekends, white text color */
.vis.timeline .timeaxis .grid.saturday,
.vis.timeline .timeaxis .grid.sunday {
.vis-time-axis .vis-grid.saturday,
.vis-time-axis .vis-grid.sunday {
background: gray;
}
.vis.timeline .timeaxis .text.saturday,
.vis.timeline .timeaxis .text.sunday {
.vis-time-axis .vis-text.saturday,
.vis-time-axis .vis-text.sunday {
color: white;
}
</style>

+ 16
- 2
gulpfile.js View File

@ -45,7 +45,7 @@ var webpackConfig = {
},
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: '6to5-loader'}
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}
],
// exclude requires of moment.js language files
@ -53,6 +53,8 @@ var webpackConfig = {
},
plugins: [ bannerPlugin ],
cache: true
//debug: true,
//bail: true
};
var uglifyConfig = {
@ -75,7 +77,19 @@ gulp.task('bundle-js', ['clean'], function (cb) {
bannerPlugin.banner = createBanner();
compiler.run(function (err, stats) {
if (err) gutil.log(err);
if (err) {
gutil.log(err.toString());
}
// output soft errors
stats.compilation.errors.forEach(function (err) {
gutil.log(err);
});
if (err || stats.compilation.errors.length > 0) {
gutil.beep(); // TODO: this does not work on my system
}
cb();
});
});

+ 3
- 3
lib/DOMutil.js View File

@ -150,9 +150,9 @@ exports.drawPoint = function(x, y, group, JSONcontainer, svgContainer, labelObj)
}
if(group.options.drawPoints.styles !== undefined) {
point.setAttributeNS(null, "style", group.group.options.drawPoints.styles);
point.setAttributeNS(null, "style", 'vis-' + group.group.options.drawPoints.styles);
}
point.setAttributeNS(null, "class", group.className + " point");
point.setAttributeNS(null, "class", group.className + " vis-point");
//handle label
var label = exports.getSVGElement('text',JSONcontainer,svgContainer);
if (labelObj){
@ -168,7 +168,7 @@ exports.drawPoint = function(x, y, group, JSONcontainer, svgContainer, labelObj)
}
if (labelObj.className) {
label.setAttributeNS(null, "class", labelObj.className + " label");
label.setAttributeNS(null, "class", labelObj.className + " vis-label");
}

+ 3
- 1
lib/module/hammer.js View File

@ -3,7 +3,9 @@
if (typeof window !== 'undefined') {
var propagating = require('propagating-hammerjs');
var Hammer = window['Hammer'] || require('hammerjs');
module.exports = propagating(Hammer);
module.exports = propagating(Hammer, {
preventDefault: true
});
}
else {
module.exports = function () {

+ 1
- 46
lib/network/Network.js View File

@ -111,7 +111,7 @@ function Network (container, data, options) {
this.configurationSystem = new ConfigurationSystem(this);
// create the DOM elements
this.canvas.create();
this.canvas._create();
// apply options
this.setOptions(options);
@ -125,7 +125,6 @@ function Network (container, data, options) {
Emitter(Network.prototype);
/**
* Set options
* @param {Object} options
@ -338,24 +337,6 @@ Network.prototype._updateValueRange = function(obj) {
};
/**
* Scale the network
* @param {Number} scale Scaling factor 1.0 is unscaled
* @private
*/
Network.prototype._setScale = function(scale) {
this.body.view.scale = scale;
};
/**
* Get the current scale of the network
* @return {Number} scale Scaling factor 1.0 is unscaled
* @private
*/
Network.prototype._getScale = function() {
return this.body.view.scale;
};
/**
* Load the XY positions of the nodes into the dataset.
@ -418,24 +399,6 @@ Network.prototype.isActive = function () {
};
/**
* Sets the scale
* @returns {Number}
*/
Network.prototype.setScale = function () {
return this._setScale();
};
/**
* Returns the scale
* @returns {Number}
*/
Network.prototype.getScale = function () {
return this._getScale();
};
/**
* Check if a node is a cluster.
* @param nodeId
@ -451,14 +414,6 @@ Network.prototype.isCluster = function(nodeId) {
}
};
/**
* Returns the scale
* @returns {Number}
*/
Network.prototype.getCenterCoordinates = function () {
return this.DOMtoCanvas({x: 0.5 * this.frame.canvas.clientWidth, y: 0.5 * this.frame.canvas.clientHeight});
};
Network.prototype.getBoundingBox = function(nodeId) {
if (this.body.nodes[nodeId] !== undefined) {

+ 148
- 147
lib/network/css/network-colorpicker.css View File

@ -1,174 +1,175 @@
div.vis-network-colorPicker-frame {
position:absolute;
margin-top:-140px;
margin-left:30px;
width:293px;
height:425px;
padding: 10px;
border-radius:15px;
background-color:#ffffff;
display:none;
box-shadow: rgba(0,0,0,0.5) 0px 0px 10px 0px;
}
div.vis-network-colorPicker-arrowDiv {
position: absolute;
top:147px;
left:5px;
}
div.vis-network-colorPicker-arrowDiv:after, .vis-network-colorPicker-arrowDiv:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
div.vis-network-colorPicker-arrowDiv:after {
border-color: rgba(255, 255, 255, 0);
border-right-color: #ffffff;
border-width: 30px;
margin-top: -30px;
div.vis-color-picker {
position:absolute;
margin-top:-140px;
margin-left:30px;
width:293px;
height:425px;
padding: 10px;
border-radius:15px;
background-color:#ffffff;
display:none;
box-shadow: rgba(0,0,0,0.5) 0px 0px 10px 0px;
}
div.vis-color-picker div.vis-arrow {
position: absolute;
top:147px;
left:5px;
}
div.vis-color-picker div.vis-arrow:after,
div.vis-color-picker div.vis-arrow:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
div.vis-color-picker div.vis-arrow:after {
border-color: rgba(255, 255, 255, 0);
border-right-color: #ffffff;
border-width: 30px;
margin-top: -30px;
}
div.vis-color-picker div.vis-color {
position:absolute;
width: 289px;
height: 289px;
cursor: pointer;
}
div.vis-color-picker div.vis-brightness {
position: absolute;
top:313px;
}
div.vis-color-picker div.vis-opacity {
position:absolute;
top:350px;
}
div.vis-color-picker div.vis-selector {
position:absolute;
top:137px;
left:137px;
width:15px;
height:15px;
border-radius:15px;
border:1px solid #ffffff;
background: #4c4c4c; /* Old browsers */
background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* IE10+ */
background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
}
div.vis-network-colorPicker-color {
position:absolute;
width: 289px;
height: 289px;
cursor: pointer;
}
div.vis-network-colorPicker-brightness {
position: absolute;
top:313px;
}
div.vis-network-colorPicker-opacity {
position:absolute;
top:350px;
}
div.vis-network-colorPicker-selector{
position:absolute;
top:137px;
left:137px;
width:15px;
height:15px;
border-radius:15px;
border:1px solid #ffffff;
background: #4c4c4c; /* Old browsers */
background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* IE10+ */
background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
}
div.vis-network-colorPicker-newColor {
position:absolute;
width:140px;
height:20px;
border:1px solid rgba(0,0,0,0.1);
border-radius:5px;
top:380px;
left:159px;
text-align:right;
padding-right:2px;
font-size:10px;
color:rgba(0,0,0,0.4);
vertical-align:middle;
line-height:20px;
div.vis-color-picker div.vis-new-color {
position:absolute;
width:140px;
height:20px;
border:1px solid rgba(0,0,0,0.1);
border-radius:5px;
top:380px;
left:159px;
text-align:right;
padding-right:2px;
font-size:10px;
color:rgba(0,0,0,0.4);
vertical-align:middle;
line-height:20px;
}
div.vis-network-colorPicker-initialColor {
position:absolute;
width:140px;
height:20px;
border:1px solid rgba(0,0,0,0.1);
border-radius:5px;
top:380px;
left:10px;
text-align:left;
padding-left:2px;
font-size:10px;
color:rgba(0,0,0,0.4);
vertical-align:middle;
line-height:20px;
div.vis-color-picker div.vis-initial-color {
position:absolute;
width:140px;
height:20px;
border:1px solid rgba(0,0,0,0.1);
border-radius:5px;
top:380px;
left:10px;
text-align:left;
padding-left:2px;
font-size:10px;
color:rgba(0,0,0,0.4);
vertical-align:middle;
line-height:20px;
}
div.vis-network-colorPicker-label {
position:absolute;
width:300px;
left:10px;
div.vis-color-picker div.vis-label {
position:absolute;
width:300px;
left:10px;
}
div.vis-network-colorPicker-label.brightness {
top:300px;
div.vis-color-picker div.vis-label.vis-brightness {
top:300px;
}
div.vis-network-colorPicker-label.opacity {
top:338px;
div.vis-color-picker div.vis-label.vis-opacity {
top:338px;
}
div.vis-network-colorPicker-button {
position:absolute;
width:68px;
height:25px;
border-radius:10px;
vertical-align: middle;
text-align:center;
line-height: 25px;
top:410px;
border:2px solid #d9d9d9;
background-color: #f7f7f7;
cursor:pointer;
div.vis-color-picker div.vis-button {
position:absolute;
width:68px;
height:25px;
border-radius:10px;
vertical-align: middle;
text-align:center;
line-height: 25px;
top:410px;
border:2px solid #d9d9d9;
background-color: #f7f7f7;
cursor:pointer;
}
div.vis-network-colorPicker-button.cancel {
/*border:2px solid #ff4e33;*/
/*background-color: #ff7761;*/
left:5px;
div.vis-color-picker div.vis-button.vis-cancel {
/*border:2px solid #ff4e33;*/
/*background-color: #ff7761;*/
left:5px;
}
div.vis-network-colorPicker-button.load {
/*border:2px solid #a153e6;*/
/*background-color: #cb8dff;*/
left:82px;
div.vis-color-picker div.vis-button.vis-load {
/*border:2px solid #a153e6;*/
/*background-color: #cb8dff;*/
left:82px;
}
div.vis-network-colorPicker-button.apply {
/*border:2px solid #4588e6;*/
/*background-color: #82b6ff;*/
left:159px;
div.vis-color-picker div.vis-button.vis-apply {
/*border:2px solid #4588e6;*/
/*background-color: #82b6ff;*/
left:159px;
}
div.vis-network-colorPicker-button.save {
/*border:2px solid #45e655;*/
/*background-color: #6dff7c;*/
left:236px;
}
div.vis-color-picker div.vis-button.vis-save {
/*border:2px solid #45e655;*/
/*background-color: #6dff7c;*/
left:236px;
}
input.vis-network-configuration.range.colorPicker{
width: 290px;
height:20px;
div.vis-color-picker input.vis-range {
width: 290px;
height:20px;
}
input.vis-network-brightnessRange {
width: 289px !important;
/* TODO: is this redundant?
div.vis-color-picker input.vis-range-brightness {
width: 289px !important;
}
input.vis-network-saturationRange {
width: 289px !important;
}
div.vis-color-picker input.vis-saturation-range {
width: 289px !important;
}*/

+ 1
- 1
lib/network/css/network-configuration.css View File

@ -5,7 +5,7 @@ div.vis-network-configuration {
font-size:12px;
}
div.vis-network-configuration.optionContainer{
div.vis-network-configuration.vis-option-container{
display:block;
width:495px;
background-color: #ffffff;

+ 32
- 27
lib/network/css/network-manipulation.css View File

@ -1,4 +1,4 @@
div.network-manipulationDiv {
div.vis-network div.vis-manipulation {
border-width: 0;
border-bottom: 1px;
border-style:solid;
@ -19,14 +19,16 @@ div.network-manipulationDiv {
height: 30px;
}
div.network-manipulation-editMode {
div.vis-network div.vis-edit-mode {
position:absolute;
left: 0;
top: 15px;
height: 30px;
}
div.network-manipulation-closeDiv {
/* FIXME: shouldn't the vis-close button be a child of the vis-manipulation div? */
div.vis-network div.vis-close {
position:absolute;
right: 0;
top: 0;
@ -45,13 +47,14 @@ div.network-manipulation-closeDiv {
user-select: none;
}
div.network-manipulation-closeDiv:hover {
div.vis-network div.vis-close:hover {
opacity: 0.6;
}
div.network-manipulationUI {
position:relative;
top:-7px;
div.vis-network div.vis-manipulation div.vis-button,
div.vis-network div.vis-edit-mode div.vis-button {
position:relative;
top:-7px;
font-family: verdana;
font-size: 12px;
-moz-border-radius: 15px;
@ -72,72 +75,74 @@ div.network-manipulationUI {
user-select: none;
}
div.network-manipulationUI:hover {
div.vis-network div.vis-manipulation div.vis-button:hover {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20);
}
div.network-manipulationUI:active {
div.vis-network div.vis-manipulation div.vis-button:active {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50);
}
div.network-manipulationUI.back {
div.vis-network div.vis-manipulation div.vis-button.vis-back {
background-image: url("img/network/backIcon.png");
}
div.network-manipulationUI.none:hover {
div.vis-network div.vis-manipulation div.vis-button.vis-none:hover {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
cursor: default;
}
div.network-manipulationUI.none:active {
div.vis-network div.vis-manipulation div.vis-button.vis-none:active {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
}
div.network-manipulationUI.none {
div.vis-network div.vis-manipulation div.vis-button.vis-none {
padding: 0;
}
div.network-manipulationUI.notification{
div.vis-network div.vis-manipulation div.notification {
margin: 2px;
font-weight: bold;
}
div.network-manipulationUI.add {
div.vis-network div.vis-manipulation div.vis-button.vis-add {
background-image: url("img/network/addNodeIcon.png");
}
div.network-manipulationUI.edit {
div.vis-network div.vis-manipulation div.vis-button.vis-edit,
div.vis-network div.vis-edit-mode div.vis-button.vis-edit {
background-image: url("img/network/editIcon.png");
}
div.network-manipulationUI.edit.editmode {
div.vis-network div.vis-edit-mode div.vis-button.vis-edit.vis-edit-mode {
background-color: #fcfcfc;
border-style:solid;
border-width:1px;
border-color: #cccccc;
border: 1px solid #cccccc;
}
div.network-manipulationUI.connect {
div.vis-network div.vis-manipulation div.vis-button.vis-connect {
background-image: url("img/network/connectIcon.png");
}
div.network-manipulationUI.delete {
div.vis-network div.vis-manipulation div.vis-button.vis-delete {
background-image: url("img/network/deleteIcon.png");
}
/* top right bottom left */
div.network-manipulationLabel {
margin: 0px 0px 0px 23px;
div.vis-network div.vis-manipulation div.vis-label,
div.vis-network div.vis-edit-mode div.vis-label {
margin: 0 0 0 23px;
line-height: 25px;
}
div.network-seperatorLine {
div.vis-network div.vis-manipulation div.vis-separator-line {
display:inline-block;
width:1px;
height:20px;
background-color: #bdbdbd;
margin: 5px 7px 0px 15px;
margin: 5px 7px 0 15px;
}
/* TODO: is this redundant?
div.network-navigation_wrapper {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
}
*/

+ 12
- 12
lib/network/css/network-navigation.css View File

@ -1,4 +1,4 @@
div.network-navigation {
div.vis-network div.vis-navigation div.vis-button {
width:34px;
height:34px;
-moz-border-radius: 17px;
@ -16,45 +16,45 @@ div.network-navigation {
user-select: none;
}
div.network-navigation:hover {
box-shadow: 0px 0px 3px 3px rgba(56, 207, 21, 0.30);
div.vis-network div.vis-navigation div.vis-button:hover {
box-shadow: 0 0 3px 3px rgba(56, 207, 21, 0.30);
}
div.network-navigation:active {
box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95);
div.vis-network div.vis-navigation div.vis-button:active {
box-shadow: 0 0 1px 3px rgba(56, 207, 21, 0.95);
}
div.network-navigation.up {
div.vis-network div.vis-navigation div.vis-button.vis-up {
background-image: url("img/network/upArrow.png");
bottom:50px;
left:55px;
}
div.network-navigation.down {
div.vis-network div.vis-navigation div.vis-button.vis-down {
background-image: url("img/network/downArrow.png");
bottom:10px;
left:55px;
}
div.network-navigation.left {
div.vis-network div.vis-navigation div.vis-button.vis-left {
background-image: url("img/network/leftArrow.png");
bottom:10px;
left:15px;
}
div.network-navigation.right {
div.vis-network div.vis-navigation div.vis-button.vis-right {
background-image: url("img/network/rightArrow.png");
bottom:10px;
left:95px;
}
div.network-navigation.zoomIn {
div.vis-network div.vis-navigation div.vis-button.vis-zoomIn {
background-image: url("img/network/plus.png");
bottom:10px;
right:15px;
}
div.network-navigation.zoomOut {
div.vis-network div.vis-navigation div.vis-button.vis-zoomOut {
background-image: url("img/network/minus.png");
bottom:10px;
right:55px;
}
div.network-navigation.zoomExtends {
div.vis-network div.vis-navigation div.vis-button.vis-zoomExtends {
background-image: url("img/network/zoomExtends.png");
bottom:50px;
right:15px;

+ 8
- 3
lib/network/css/network-tooltip.css View File

@ -1,13 +1,18 @@
div.network-tooltip {
div.vis-network-tooltip {
position: absolute;
visibility: hidden;
padding: 5px;
white-space: nowrap;
font-family: verdana;
font-size:14px;
font-color:#000000;
background-color: #f5f4ed;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid;
border: 1px solid #808074;
box-shadow: 3px 3px 10px rgba(128, 128, 128, 0.5);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}

+ 30
- 6
lib/network/modules/Canvas.js View File

@ -13,6 +13,7 @@ let util = require('../../util');
class Canvas {
constructor(body) {
this.body = body;
this.pixelRatio = 1;
this.options = {};
this.defaultOptions = {
@ -21,6 +22,7 @@ class Canvas {
}
util.extend(this.options, this.defaultOptions);
// bind the events
this.body.emitter.once("resize", (obj) => {
if (obj.width !== 0) {
this.body.view.translation.x = obj.width * 0.5;
@ -31,28 +33,47 @@ class Canvas {
});
this.body.emitter.on("destroy", () => this.hammer.destroy());
// automatically adapt to a changing size of the browser.
window.onresize = () => {this.setSize(); this.body.emitter.emit("_redraw");};
this.pixelRatio = 1;
}
setOptions(options) {
if (options !== undefined) {
util.deepExtend(this.options, options);
if (options.width !== undefined) {this.options.width = this._prepareValue(options.width );}
if (options.height!== undefined) {this.options.height= this._prepareValue(options.height);}
}
}
create() {
_prepareValue(value) {
if (typeof value === 'number') {
return value + 'px';
}
else if (typeof value === 'string') {
if (value.indexOf('%') !== -1 || value.indexOf('px') !== -1) {
return value;
}
else if (value.indexOf('%') === -1) {
return value + 'px';
}
}
throw new Error('Could not use the value supplie for width or height:' + value);
}
/**
* Create the HTML
*/
_create() {
// remove all elements from the container element.
while (this.body.container.hasChildNodes()) {
this.body.container.removeChild(this.body.container.firstChild);
}
this.frame = document.createElement('div');
this.frame.className = 'vis network-frame';
this.frame.className = 'vis-network';
this.frame.style.position = 'relative';
this.frame.style.overflow = 'hidden';
this.frame.tabIndex = 900;
this.frame.tabIndex = 900; // tab index is required for keycharm to bind keystrokes to the div instead of the window
//////////////////////////////////////////////////////////////////
@ -132,6 +153,9 @@ class Canvas {
* or '30%')
*/
setSize(width = this.options.width, height = this.options.height) {
width = this._prepareValue(width);
height= this._prepareValue(height);
let emitEvent = false;
let oldWidth = this.frame.canvas.width;
let oldHeight = this.frame.canvas.height;

+ 7
- 11
lib/network/modules/CanvasRenderer.js View File

@ -1,7 +1,3 @@
/**
* Created by Alex on 26-Feb-15.
*/
if (typeof window !== 'undefined') {
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
@ -40,7 +36,7 @@ class CanvasRenderer {
this.body.emitter.on("_startRendering", () => {
this.renderRequests += 1;
this.renderingActive = true;
this.startRendering();
this._startRendering();
});
this.body.emitter.on("_stopRendering", () => {
this.renderRequests -= 1;
@ -63,14 +59,14 @@ class CanvasRenderer {
}
}
startRendering() {
_startRendering() {
if (this.renderingActive === true) {
if (!this.renderTimer) {
if (this.requiresTimeout === true) {
this.renderTimer = window.setTimeout(this.renderStep.bind(this), this.simulationInterval); // wait this.renderTimeStep milliseconds and perform the animation step function
this.renderTimer = window.setTimeout(this._renderStep.bind(this), this.simulationInterval); // wait this.renderTimeStep milliseconds and perform the animation step function
}
else {
this.renderTimer = window.requestAnimationFrame(this.renderStep.bind(this)); // wait this.renderTimeStep milliseconds and perform the animation step function
this.renderTimer = window.requestAnimationFrame(this._renderStep.bind(this)); // wait this.renderTimeStep milliseconds and perform the animation step function
}
}
}
@ -79,20 +75,20 @@ class CanvasRenderer {
}
}
renderStep() {
_renderStep() {
// reset the renderTimer so a new scheduled animation step can be set
this.renderTimer = undefined;
if (this.requiresTimeout === true) {
// this schedules a new simulation step
this.startRendering();
this._startRendering();
}
this._redraw();
if (this.requiresTimeout === false) {
// this schedules a new simulation step
this.startRendering();
this._startRendering();
}
}

+ 1
- 5
lib/network/modules/Clustering.js View File

@ -1,9 +1,5 @@
/**
* Created by Alex on 24-Feb-15.
*/
var util = require("../../util");
import Cluster from './components/nodes/cluster'
import Cluster from './components/nodes/Cluster'
class ClusterEngine {
constructor(body) {

+ 56
- 48
lib/network/modules/ConfigurationSystem.js View File

@ -1,13 +1,17 @@
/**
* Created by Alex on 3/26/2015.
*/
var util = require('../../util');
import ColorPicker from './components/ColorPicker'
/**
* The way this works is for all properties of this.possible options, you can supply the property name in any form to list the options.
* Boolean options are recognised as Boolean
* Number options should be written as array: [default value, min value, max value, stepsize]
* Colors should be written as array: ['color', '#ffffff']
* Strings with should be written as array: [option1, option2, option3, ..]
*
* The options are matched with their counterparts in each of the modules and the values used in the configuration are
*
*/
class ConfigurationSystem {
constructor(network) {
this.network = network;
@ -62,6 +66,12 @@ class ConfigurationSystem {
drawThreshold: [3, 0, 20, 1]
}
},
shadow:{
enabled: false,
size:[10, 0, 20, 1],
x:[5, -30, 30, 1],
y:[5, -30, 30, 1]
},
shape: ['ellipse', 'box', 'circle', 'database', 'diamond', 'dot', 'square', 'star', 'text', 'triangle', 'triangleDown'],
size: [25, 0, 200, 1]
},
@ -112,6 +122,12 @@ class ConfigurationSystem {
}
},
selfReferenceSize: [20, 0, 200, 1],
shadow:{
enabled: false,
size:[10, 0, 20, 1],
x:[5, -30, 30, 1],
y:[5, -30, 30, 1]
},
smooth: {
enabled: true,
dynamic: true,
@ -135,17 +151,8 @@ class ConfigurationSystem {
dragView: true,
zoomView: true,
hoverEnabled: false,
showNavigationIcons: false,
tooltip: {
delay: [300, 0, 1000, 25],
fontColor: ['color','#000000'],
fontSize: [14, 0, 40, 1], // px
fontFace: ['arial', 'verdana', 'tahoma'],
color: {
border: ['color','#666666'],
background: ['color','#FFFFC6']
}
},
navigationButtons: false,
tooltipDelay: [300, 0, 1000, 25],
keyboard: {
enabled: false,
speed: {x: [10, 0, 40, 1], y: [10, 0, 40, 1], zoom: [0.02, 0, 0.1, 0.005]},
@ -244,29 +251,30 @@ class ConfigurationSystem {
util.deepExtend(this.actualOptions.selection, this.network.selectionHandler.selection, true);
util.deepExtend(this.actualOptions.renderer, this.network.renderer.selection, true);
if (this.actualOptions.configurationContainer !== undefined) {
this.container = this.actualOptions.configurationContainer;
}
else {
this.container = this.network.body.container;
}
let config;
if (this.actualOptions.configure instanceof Array) {
this.container = this.network.body.container;
let config = true;
if (typeof this.actualOptions.configure === 'string') {
config = this.actualOptions.configure;
}
else if (this.actualOptions.configure instanceof Array) {
config = this.actualOptions.configure.join();
}
else if (typeof this.actualOptions.configure === 'string') {
config = this.actualOptions.configure;
else if (typeof this.actualOptions.configure === 'object') {
if (this.actualOptions.configure.container !== undefined) {
this.container = this.actualOptions.configure.container;
}
if (this.actualOptions.configure.filter !== undefined) {
config = this.actualOptions.configure.filter;
}
}
else if (typeof this.actualOptions.configure === 'boolean') {
config = this.actualOptions.configure;
}
else {
this._clean();
throw new Error('the option for configure has to be either a string, boolean or an array. Supplied:' + this.options.configure);
return;
if (config === false) {
this._create(config);
}
this._create(config);
}
}
@ -287,7 +295,7 @@ class ConfigurationSystem {
// linebreak between categories
if (counter > 0) {
this._makeEntree([]);
this._makeItem([]);
}
// a header for the category
this._makeHeader(option);
@ -307,7 +315,7 @@ class ConfigurationSystem {
generateButton.onmouseout = () => {generateButton.className = 'vis-network-configuration button';};
this.optionsContainer = document.createElement('div');
this.optionsContainer.className = 'vis-network-configuration optionContainer';
this.optionsContainer.className = 'vis-network-configuration vis-option-container';
this.domElements.push(this.optionsContainer);
this.domElements.push(generateButton);
@ -376,18 +384,18 @@ class ConfigurationSystem {
}
/**
* all option elements are wrapped in an entree
* all option elements are wrapped in an item
* @param path
* @param domElements
* @private
*/
_makeEntree(path,...domElements) {
let entree = document.createElement('div');
entree.className = 'vis-network-configuration entree s' + path.length;
_makeItem(path,...domElements) {
let item = document.createElement('div');
item.className = 'vis-network-configuration item s' + path.length;
domElements.forEach((element) => {
entree.appendChild(element);
item.appendChild(element);
});
this.domElements.push(entree);
this.domElements.push(item);
}
/**
@ -399,7 +407,7 @@ class ConfigurationSystem {
let div = document.createElement('div');
div.className = 'vis-network-configuration header';
div.innerHTML = name;
this._makeEntree([],div);
this._makeItem([],div);
}
/**
@ -454,7 +462,7 @@ class ConfigurationSystem {
select.onchange = function () {me._update(this.value, path);};
let label = this._makeLabel(path[path.length-1], path);
this._makeEntree(path, label, select);
this._makeItem(path, label, select);
}
@ -499,7 +507,7 @@ class ConfigurationSystem {
range.oninput = function () {input.value = this.value; };
let label = this._makeLabel(path[path.length-1], path);
this._makeEntree(path, label, range, input);
this._makeItem(path, label, range, input);
}
@ -533,7 +541,7 @@ class ConfigurationSystem {
checkbox.onchange = function() {me._update(this.checked, path)};
let label = this._makeLabel(path[path.length-1], path);
this._makeEntree(path, label, checkbox);
this._makeItem(path, label, checkbox);
}
@ -563,7 +571,7 @@ class ConfigurationSystem {
}
let label = this._makeLabel(path[path.length-1], path);
this._makeEntree(path,label, div);
this._makeItem(path,label, div);
}
@ -591,7 +599,7 @@ class ConfigurationSystem {
/**
* parse an object and draw the correct entrees
* parse an object and draw the correct items
* @param obj
* @param path
* @private
@ -628,7 +636,7 @@ class ConfigurationSystem {
let enabledValue = this._getValue(enabledPath);
if (enabledValue === true) {
let label = this._makeLabel(subObj, newPath, true);
this._makeEntree(newPath, label);
this._makeItem(newPath, label);
this._handleObject(item, newPath);
}
else {
@ -637,7 +645,7 @@ class ConfigurationSystem {
}
else {
let label = this._makeLabel(subObj, newPath, true);
this._makeEntree(newPath, label);
this._makeItem(newPath, label);
this._handleObject(item, newPath);
}
}

+ 14
- 86
lib/network/modules/EdgesHandler.js View File

@ -1,13 +1,9 @@
/**
* Created by Alex on 3/4/2015.
*/
var util = require("../../util");
var DataSet = require('../../DataSet');
var DataView = require('../../DataView');
import Edge from "./components/Edge"
import Edge from "./components/Edge"
import Label from "./components/shared/Label"
class EdgesHandler {
constructor(body, images, groups) {
@ -84,6 +80,12 @@ class EdgesHandler {
}
},
selfReferenceSize:20,
shadow:{
enabled: false,
size:10,
x:5,
y:5
},
smooth: {
enabled: true,
dynamic: true,
@ -93,7 +95,7 @@ class EdgesHandler {
title:undefined,
width: 1,
widthSelectionMultiplier: 2,
value:1
value: undefined
};
util.extend(this.options, this.defaultOptions);
@ -131,76 +133,11 @@ class EdgesHandler {
setOptions(options) {
if (options !== undefined) {
var fields = [
'font',
'from',
'hidden',
'hoverWidth',
'label',
'length',
'line',
'opacity',
'physics',
'selfReferenceSize',
'to',
'title',
'value',
'width',
'widthMin',
'widthMax',
'widthSelectionMultiplier'
];
util.selectiveExtend(fields, this.options, options);
util.mergeOptions(this.options, options, 'smooth');
util.mergeOptions(this.options, options, 'dashes');
// set the scaling options
if (options.scaling !== undefined) {
if (options.scaling.min !== undefined) {this.options.scaling.min = options.scaling.min;}
if (options.scaling.max !== undefined) {this.options.scaling.max = options.scaling.max;}
util.mergeOptions(this.options.scaling, options.scaling, 'label');
}
// hanlde multiple input cases for arrows
if (options.arrows !== undefined) {
if (typeof options.arrows === 'string') {
let arrows = options.arrows.toLowerCase();
if (arrows.indexOf("to") != -1) {this.options.arrows.to.enabled = true;}
if (arrows.indexOf("middle") != -1) {this.options.arrows.middle.enabled = true;}
if (arrows.indexOf("from") != -1) {this.options.arrows.from.enabled = true;}
}
else if (typeof options.arrows === 'object') {
util.mergeOptions(this.options.arrows, options.arrows, 'to');
util.mergeOptions(this.options.arrows, options.arrows, 'middle');
util.mergeOptions(this.options.arrows, options.arrows, 'from');
}
else {
throw new Error("The arrow options can only be an object or a string. Refer to the documentation. You used:" + JSON.stringify(options.arrows));
}
}
// use the parser from the Edge class to fill in all shorthand notations
Edge.parseOptions(this.options, options);
// hanlde multiple input cases for color
if (options.color !== undefined) {
if (util.isString(options.color)) {
util.assignAllKeys(this.options.color, options.color);
this.options.color.inherit.enabled = false;
}
else {
if (typeof options.color === 'object') {
let colorsDefined = false;
if (options.color.color !== undefined) {this.options.color.color = options.color.color; colorsDefined = true;}
if (options.color.highlight !== undefined) {this.options.color.highlight = options.color.highlight; colorsDefined = true;}
if (options.color.hover !== undefined) {this.options.color.hover = options.color.hover; colorsDefined = true;}
if (options.color.opacity !== undefined) {this.options.color.opacity = options.color.opacity;}
if (options.color.inherit === undefined && colorsDefined === true) {
this.options.color.inherit.enabled = false;
}
}
}
util.mergeOptions(this.options.color, options.color, 'inherit');
this.markAllEdgesAsDirty();
}
@ -215,18 +152,9 @@ class EdgesHandler {
}
// update fonts in all edges
if (options.font) {
if (typeof options.font === 'string') {
let optionsArray = options.font.split(" ");
this.options.font.size = optionsArray[0].replace("px",'');
this.options.font.face = optionsArray[1];
this.options.font.color = optionsArray[2];
}
else if (typeof options.font === 'object') {
this.options.font = util.bridgeObject(options.font);
}
this.options.font.size = Number(this.options.font.size);
if (options.font !== undefined) {
// use the parser from the Label class to fill in all shorthand notations
Label.parseOptions(this.options,options);
for (let edgeId in this.body.edges) {
if (this.body.edges.hasOwnProperty(edgeId)) {
this.body.edges[edgeId].updateLabelModule();

+ 78
- 59
lib/network/modules/InteractionHandler.js View File

@ -1,12 +1,7 @@
/**
* Created by Alex on 2/27/2015.
*
*/
let util = require('../../util');
import NavigationHandler from "./components/NavigationHandler"
import Popup from "./components/Popup"
import NavigationHandler from './components/NavigationHandler'
import Popup from './components/Popup'
class InteractionHandler {
constructor(body, canvas, selectionHandler) {
@ -44,17 +39,8 @@ class InteractionHandler {
dragView: true,
zoomView: true,
hoverEnabled: false,
showNavigationIcons: false,
tooltip: {
delay: 300,
fontColor: '#000000',
fontSize: 14, // px
fontFace: 'verdana',
color: {
border: '#666666',
background: '#FFFFC6'
}
},
navigationButtons: false,
tooltipDelay: 300,
keyboard: {
enabled: false,
speed: {x: 10, y: 10, zoom: 0.02},
@ -67,7 +53,7 @@ class InteractionHandler {
setOptions(options) {
if (options !== undefined) {
// extend all but the values in fields
let fields = ['keyboard','tooltip'];
let fields = ['keyboard'];
util.selectiveNotDeepExtend(fields,this.options, options);
// merge the keyboard options in.
@ -105,7 +91,7 @@ class InteractionHandler {
* @private
*/
onTouch(event) {
if (new Date().valueOf() - this.touchTime > 100) {
if (new Date().valueOf() - this.touchTime > 50) {
this.drag.pointer = this.getPointer(event.center);
this.drag.pinched = false;
this.pinch.scale = this.body.view.scale;
@ -121,14 +107,9 @@ class InteractionHandler {
onTap(event) {
let pointer = this.getPointer(event.center);
let previouslySelected = this.selectionHandler._getSelectedObjectCount() > 0;
let selected = this.selectionHandler.selectOnPoint(pointer);
this.checkSelectionChanges(pointer);
if (selected === true || (previouslySelected === true && selected === false)) { // select or unselect
this.body.emitter.emit('select', this.selectionHandler.getSelection());
}
this.selectionHandler._generateClickEvent("click",pointer);
this.selectionHandler._generateClickEvent('click',pointer);
}
@ -138,7 +119,7 @@ class InteractionHandler {
*/
onDoubleTap(event) {
let pointer = this.getPointer(event.center);
this.selectionHandler._generateClickEvent("doubleClick",pointer);
this.selectionHandler._generateClickEvent('doubleClick',pointer);
}
@ -150,13 +131,10 @@ class InteractionHandler {
onHold(event) {
let pointer = this.getPointer(event.center);
let selectionChanged = this.selectionHandler.selectAdditionalOnPoint(pointer);
this.checkSelectionChanges(pointer, true);
if (selectionChanged === true) { // select or longpress
this.body.emitter.emit('select', this.selectionHandler.getSelection());
}
this.selectionHandler._generateClickEvent("click",pointer);
this.selectionHandler._generateClickEvent('click',pointer);
this.selectionHandler._generateClickEvent('hold',pointer);
}
@ -166,7 +144,56 @@ class InteractionHandler {
* @private
*/
onRelease(event) {
this.body.emitter.emit("release",event)
if (new Date().valueOf() - this.touchTime > 10) {
let pointer = this.getPointer(event.center);
this.selectionHandler._generateClickEvent('release',pointer);
// to avoid double fireing of this event because we have two hammer instances. (on canvas and on frame)
this.touchTime = new Date().valueOf();
}
}
/**
*
* @param pointer
* @param add
*/
checkSelectionChanges(pointer, add = false) {
let previouslySelectedEdgeCount = this.selectionHandler._getSelectedEdgeCount();
let previouslySelectedNodeCount = this.selectionHandler._getSelectedNodeCount();
let previousSelection = this.selectionHandler.getSelection();
let selected;
if (add === true) {
selected = this.selectionHandler.selectAdditionalOnPoint(pointer);
}
else {
selected = this.selectionHandler.selectOnPoint(pointer);
}
let selectedEdges = this.selectionHandler._getSelectedEdgeCount();
let selectedNodes = this.selectionHandler._getSelectedNodeCount();
if (selectedNodes - previouslySelectedNodeCount > 0) { // node was selected
this.selectionHandler._generateClickEvent('selectNode',pointer);
selected = true;
}
else if (selectedNodes - previouslySelectedNodeCount < 0) { // node was deselected
this.selectionHandler._generateClickEvent('deselectNode',pointer, previousSelection);
selected = true;
}
if (selectedEdges - previouslySelectedEdgeCount > 0) { // node was selected
this.selectionHandler._generateClickEvent('selectEdge',pointer);
selected = true;
}
else if (selectedEdges - previouslySelectedEdgeCount < 0) { // node was deselected
this.selectionHandler._generateClickEvent('deselectEdge',pointer, previousSelection);
selected = true;
}
if (selected === true) { // select or unselect
this.selectionHandler._generateClickEvent('select',pointer);
}
}
@ -190,7 +217,7 @@ class InteractionHandler {
this.drag.translation = util.extend({},this.body.view.translation); // copy the object
this.drag.nodeId = undefined;
this.body.emitter.emit("dragStart", {nodeIds: this.selectionHandler.getSelection().nodes});
this.selectionHandler._generateClickEvent('dragStart',pointer);
if (node !== undefined && this.options.dragNodes === true) {
this.drag.nodeId = node.id;
@ -236,7 +263,7 @@ class InteractionHandler {
}
// remove the focus on node if it is focussed on by the focusOnNode
this.body.emitter.emit("unlockNode");
this.body.emitter.emit('unlockNode');
let pointer = this.getPointer(event.center);
let selection = this.drag.selection;
@ -259,7 +286,7 @@ class InteractionHandler {
});
// start the simulation of the physics
this.body.emitter.emit("startSimulation");
this.body.emitter.emit('startSimulation');
}
else {
// move the network
@ -273,7 +300,7 @@ class InteractionHandler {
let diffY = pointer.y - this.drag.pointer.y;
this.body.view.translation = {x:this.drag.translation.x + diffX, y:this.drag.translation.y + diffY};
this.body.emitter.emit("_redraw");
this.body.emitter.emit('_redraw');
}
}
}
@ -292,13 +319,12 @@ class InteractionHandler {
s.node.options.fixed.x = s.xFixed;
s.node.options.fixed.y = s.yFixed;
});
this.body.emitter.emit("startSimulation");
this.body.emitter.emit('startSimulation');
}
else {
this.body.emitter.emit("_requestRedraw");
this.body.emitter.emit('_requestRedraw');
}
this.body.emitter.emit("dragEnd", {nodeIds: this.selectionHandler.getSelection().nodes});
this.selectionHandler._generateClickEvent('dragEnd',pointer);
}
@ -361,13 +387,13 @@ class InteractionHandler {
this.drag.pointer.y = postScaleDragPointer.y;
}
this.body.emitter.emit("_requestRedraw");
this.body.emitter.emit('_requestRedraw');
if (scaleOld < scale) {
this.body.emitter.emit("zoom", {direction: "+"});
this.body.emitter.emit('zoom', {direction: '+'});
}
else {
this.body.emitter.emit("zoom", {direction: "-"});
this.body.emitter.emit('zoom', {direction: '-'});
}
}
}
@ -451,7 +477,7 @@ class InteractionHandler {
this.popupTimer = undefined;
}
if (!this.drag.dragging) {
this.popupTimer = setTimeout(() => this._checkShowPopup(pointer), this.options.tooltip.delay);
this.popupTimer = setTimeout(() => this._checkShowPopup(pointer), this.options.tooltipDelay);
}
}
@ -485,7 +511,7 @@ class InteractionHandler {
}
}
}
this.body.emitter.emit("_requestRedraw");
this.body.emitter.emit('_requestRedraw');
}
}
@ -511,7 +537,7 @@ class InteractionHandler {
let previousPopupObjId = this.popupObj === undefined ? undefined : this.popupObj.id;
let nodeUnderCursor = false;
let popupType = "node";
let popupType = 'node';
// check if a node is under the cursor.
if (this.popupObj === undefined) {
@ -554,7 +580,7 @@ class InteractionHandler {
if (overlappingEdges.length > 0) {
this.popupObj = edges[overlappingEdges[overlappingEdges.length - 1]];
popupType = "edge";
popupType = 'edge';
}
}
@ -562,7 +588,7 @@ class InteractionHandler {
// show popup message window
if (this.popupObj.id !== previousPopupObjId) {
if (this.popup === undefined) {
this.popup = new Popup(this.frame, this.options.tooltip);
this.popup = new Popup(this.canvas.frame);
}
this.popup.popupTargetType = popupType;
@ -591,14 +617,7 @@ class InteractionHandler {
* @private
*/
_checkHidePopup(pointer) {
let x = this.canvas._XconvertDOMtoCanvas(pointer.x);
let y = this.canvas._YconvertDOMtoCanvas(pointer.y);
let pointerObj = {
left: x,
top: y,
right: x,
bottom: y
};
let pointerObj = this.selectionHandler._pointerToPositionObject(pointer);
let stillOnObj = false;
if (this.popup.popupTargetType === 'node') {

+ 0
- 4
lib/network/modules/LayoutEngine.js View File

@ -1,7 +1,3 @@
/**
* Created by Alex on 3/3/2015.
*/
var util = require('../../util');
class LayoutEngine {

+ 13
- 19
lib/network/modules/ManipulationSystem.js View File

@ -375,9 +375,6 @@ class ManipulationSystem {
// Enable the GUI
this.guiEnabled = true;
// remove override
this.selectionHandler.forceSelectEdges = true;
this._createWrappers();
if (this.editMode === false) {
this._createEditButton();
@ -403,7 +400,7 @@ class ManipulationSystem {
// load the manipulator HTML elements. All styling done in css.
if (this.manipulationDiv === undefined) {
this.manipulationDiv = document.createElement('div');
this.manipulationDiv.className = 'network-manipulationDiv';
this.manipulationDiv.className = 'vis-manipulation';
if (this.editMode === true) {
this.manipulationDiv.style.display = "block";
}
@ -416,7 +413,7 @@ class ManipulationSystem {
// container for the edit button.
if (this.editModeDiv === undefined) {
this.editModeDiv = document.createElement('div');
this.editModeDiv.className = 'network-manipulation-editMode';
this.editModeDiv.className = 'vis-edit-mode';
if (this.editMode === true) {
this.editModeDiv.style.display = "none";
}
@ -430,7 +427,7 @@ class ManipulationSystem {
// container for the close div button
if (this.closeDiv === undefined) {
this.closeDiv = document.createElement('div');
this.closeDiv.className = 'network-manipulation-closeDiv';
this.closeDiv.className = 'vis-close';
this.closeDiv.style.display = this.manipulationDiv.style.display;
this.canvas.frame.appendChild(this.closeDiv);
}
@ -472,7 +469,7 @@ class ManipulationSystem {
// create the contents for the editMode button
let locale = this.options.locales[this.options.locale];
let button = this._createButton('editMode', 'network-manipulationUI edit editmode', locale['edit']);
let button = this._createButton('editMode', 'vis-button vis-edit vis-edit-mode', locale['edit']);
this.editModeDiv.appendChild(button);
// bind a hammer listener to the button, calling the function toggleEditMode.
@ -545,9 +542,6 @@ class ManipulationSystem {
this.manipulationDiv = undefined;
this.editModeDiv = undefined;
this.closeDiv = undefined;
// remove override
this.selectionHandler.forceSelectEdges = false;
}
@ -558,49 +552,49 @@ class ManipulationSystem {
*/
_createSeperator(index = 1) {
this.manipulationDOM['seperatorLineDiv' + index] = document.createElement('div');
this.manipulationDOM['seperatorLineDiv' + index].className = 'network-seperatorLine';
this.manipulationDOM['seperatorLineDiv' + index].className = 'vis-separator-line';
this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv' + index]);
}
// ---------------------- DOM functions for buttons --------------------------//
_createAddNodeButton(locale) {
let button = this._createButton('addNode', 'network-manipulationUI add', locale['addNode']);
let button = this._createButton('addNode', 'vis-button vis-add', locale['addNode']);
this.manipulationDiv.appendChild(button);
this._bindHammerToDiv(button, this.addNodeMode.bind(this));
}
_createAddEdgeButton(locale) {
let button = this._createButton('addEdge', 'network-manipulationUI connect', locale['addEdge']);
let button = this._createButton('addEdge', 'vis-button vis-connect', locale['addEdge']);
this.manipulationDiv.appendChild(button);
this._bindHammerToDiv(button, this.addEdgeMode.bind(this));
}
_createEditNodeButton(locale) {
let button = this._createButton('editNode', 'network-manipulationUI edit', locale['editNode']);
let button = this._createButton('editNode', 'vis-button vis-edit', locale['editNode']);
this.manipulationDiv.appendChild(button);
this._bindHammerToDiv(button, this.editNode.bind(this));
}
_createEditEdgeButton(locale) {
let button = this._createButton('editEdge', 'network-manipulationUI edit', locale['editEdge']);
let button = this._createButton('editEdge', 'vis-button vis-edit', locale['editEdge']);
this.manipulationDiv.appendChild(button);
this._bindHammerToDiv(button, this.editEdgeMode.bind(this));
}
_createDeleteButton(locale) {
let button = this._createButton('delete', 'network-manipulationUI delete', locale['del']);
let button = this._createButton('delete', 'vis-button vis-delete', locale['del']);
this.manipulationDiv.appendChild(button);
this._bindHammerToDiv(button, this.deleteSelected.bind(this));
}
_createBackButton(locale) {
let button = this._createButton('back', 'network-manipulationUI back', locale['back']);
let button = this._createButton('back', 'vis-button vis-back', locale['back']);
this.manipulationDiv.appendChild(button);
this._bindHammerToDiv(button, this.showManipulatorToolbar.bind(this));
}
_createButton(id, className, label, labelClassName = 'network-manipulationLabel') {
_createButton(id, className, label, labelClassName = 'vis-label') {
this.manipulationDOM[id+"Div"] = document.createElement('div');
this.manipulationDOM[id+"Div"].className = className;
this.manipulationDOM[id+"Label"] = document.createElement('div');
@ -612,7 +606,7 @@ class ManipulationSystem {
_createDescription(label) {
this.manipulationDiv.appendChild(
this._createButton('description', 'network-manipulationUI none', label)
this._createButton('description', 'vis-button vis-none', label)
);
}

+ 15
- 18
lib/network/modules/NodesHandler.js View File

@ -1,12 +1,9 @@
/**
* Created by Alex on 3/4/2015.
*/
var util = require("../../util");
var DataSet = require('../../DataSet');
var DataView = require('../../DataView');
import Node from "./components/Node";
import Node from "./components/Node";
import Label from "./components/shared/Label";
class NodesHandler {
constructor(body, images, groups, layoutEngine) {
@ -29,6 +26,7 @@ class NodesHandler {
this.defaultOptions = {
borderWidth: 1,
borderWidthSelected: undefined,
brokenImage:undefined,
color: {
border: '#2B7CE9',
background: '#97C2FC',
@ -71,7 +69,7 @@ class NodesHandler {
min: 10,
max: 30,
label: {
enabled: true,
enabled: false,
min: 14,
max: 30,
maxVisible: 30,
@ -87,9 +85,16 @@ class NodesHandler {
}
}
},
shadow:{
enabled: false,
size:10,
x:5,
y:5
},
shape: 'ellipse',
size: 25,
value: 1,
title: undefined,
value: undefined,
x: undefined,
y: undefined
};
@ -98,17 +103,8 @@ class NodesHandler {
}
setOptions(options) {
if (options) {
util.selectiveNotDeepExtend(['color'], this.options, options);
if (options.color) {
let parsedColor = util.parseColor(options.color);
if (parsedColor.border !== undefined) {this.options.color.border = parsedColor.border;}
if (parsedColor.background !== undefined) {this.options.color.background = parsedColor.background;}
if (parsedColor.highlight.border !== undefined) {this.options.color.highlight.border = parsedColor.highlight.border;}
if (parsedColor.highlight.background !== undefined) {this.options.color.highlight.background = parsedColor.highlight.background;}
if (parsedColor.hover.border !== undefined) {this.options.color.hover.border = parsedColor.hover.border;}
if (parsedColor.hover.background !== undefined) {this.options.color.hover.background = parsedColor.hover.background;}
}
if (options !== undefined) {
Node.parseOptions(this.options, options);
// update the shape in all nodes
if (options.shape !== undefined) {
@ -121,6 +117,7 @@ class NodesHandler {
// update the shape size in all nodes
if (options.font !== undefined) {
Label.parseOptions(this.options.font,options);
for (let nodeId in this.body.nodes) {
if (this.body.nodes.hasOwnProperty(nodeId)) {
this.body.nodes[nodeId].updateLabelModule();

+ 0
- 4
lib/network/modules/PhysicsEngine.js View File

@ -1,7 +1,3 @@
/**
* Created by Alex on 2/23/2015.
*/
import BarnesHutSolver from './components/physics/BarnesHutSolver';
import Repulsion from './components/physics/RepulsionSolver';
import HierarchicalRepulsion from './components/physics/HierarchicalRepulsionSolver';

+ 65
- 66
lib/network/modules/SelectionHandler.js View File

@ -1,16 +1,11 @@
/**
* Created by Alex on 2/27/2015.
*/
var Node = require("./components/Node");
var util = require('../../util');
let Node = require("./components/Node");
let util = require('../../util');
class SelectionHandler {
constructor(body, canvas) {
this.body = body;
this.canvas = canvas;
this.selectionObj = {nodes: [], edges: []};
this.forceSelectEdges = false;
this.options = {};
this.defaultOptions = {
@ -39,10 +34,10 @@ class SelectionHandler {
* @private
*/
selectOnPoint(pointer) {
var selected = false;
let selected = false;
if (this.options.select === true) {
this.unselectAll();
var obj = this.getNodeAt(pointer) || this.getEdgeAt(pointer);;
let obj = this.getNodeAt(pointer) || this.getEdgeAt(pointer);;
if (obj !== undefined) {
selected = this.selectObject(obj);
}
@ -52,9 +47,9 @@ class SelectionHandler {
}
selectAdditionalOnPoint(pointer) {
var selectionChanged = false;
let selectionChanged = false;
if (this.options.select === true) {
var obj = this.getNodeAt(pointer) || this.getEdgeAt(pointer);;
let obj = this.getNodeAt(pointer) || this.getEdgeAt(pointer);;
if (obj !== undefined) {
selectionChanged = true;
@ -71,19 +66,23 @@ class SelectionHandler {
return selectionChanged;
}
_generateClickEvent(eventType,pointer) {
var properties = this.getSelection();
_generateClickEvent(eventType, pointer, oldSelection) {
let properties = this.getSelection();
properties['pointer'] = {
DOM: {x: pointer.x, y: pointer.y},
canvas: this.canvas.DOMtoCanvas(pointer)
}
if (oldSelection !== undefined) {
properties['previousSelection'] = oldSelection;
}
this.body.emitter.emit(eventType, properties);
}
selectObject(obj) {
selectObject(obj, highlightEdges = this.options.selectConnectedEdges) {
if (obj !== undefined) {
if (obj instanceof Node) {
if (this.options.selectConnectedEdges === true || this.forceSelectEdges === true) {
if (highlightEdges === true) {
this._selectConnectedEdges(obj);
}
}
@ -110,8 +109,8 @@ class SelectionHandler {
* @private
*/
_getAllNodesOverlappingWith(object) {
var overlappingNodes = [];
var nodes = this.body.nodes;
let overlappingNodes = [];
let nodes = this.body.nodes;
for (let i = 0; i < this.body.nodeIndices.length; i++) {
let nodeId = this.body.nodeIndices[i];
if (nodes[nodeId].isOverlappingWith(object)) {
@ -130,7 +129,7 @@ class SelectionHandler {
* @private
*/
_pointerToPositionObject(pointer) {
var canvasPos = this.canvas.DOMtoCanvas(pointer);
let canvasPos = this.canvas.DOMtoCanvas(pointer);
return {
left: canvasPos.x - 1,
top: canvasPos.y + 1,
@ -149,8 +148,8 @@ class SelectionHandler {
*/
getNodeAt(pointer) {
// we first check if this is an navigation controls element
var positionObject = this._pointerToPositionObject(pointer);
var overlappingNodes = this._getAllNodesOverlappingWith(positionObject);
let positionObject = this._pointerToPositionObject(pointer);
let overlappingNodes = this._getAllNodesOverlappingWith(positionObject);
// if there are overlapping nodes, select the last one, this is the
// one which is drawn on top of the others
@ -170,7 +169,7 @@ class SelectionHandler {
* @private
*/
_getEdgesOverlappingWith(object, overlappingEdges) {
var edges = this.body.edges;
let edges = this.body.edges;
for (let i = 0; i < this.body.edgeIndices.length; i++) {
let edgeId = this.body.edgeIndices[i];
if (edges[edgeId].isOverlappingWith(object)) {
@ -187,7 +186,7 @@ class SelectionHandler {
* @private
*/
_getAllEdgesOverlappingWith(object) {
var overlappingEdges = [];
let overlappingEdges = [];
this._getEdgesOverlappingWith(object,overlappingEdges);
return overlappingEdges;
}
@ -202,8 +201,8 @@ class SelectionHandler {
* @private
*/
getEdgeAt(pointer) {
var positionObject = this._pointerToPositionObject(pointer);
var overlappingEdges = this._getAllEdgesOverlappingWith(positionObject);
let positionObject = this._pointerToPositionObject(pointer);
let overlappingEdges = this._getAllEdgesOverlappingWith(positionObject);
if (overlappingEdges.length > 0) {
return this.body.edges[overlappingEdges[overlappingEdges.length - 1]];
@ -266,12 +265,12 @@ class SelectionHandler {
* @private
*/
unselectAll() {
for(var nodeId in this.selectionObj.nodes) {
for(let nodeId in this.selectionObj.nodes) {
if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
this.selectionObj.nodes[nodeId].unselect();
}
}
for(var edgeId in this.selectionObj.edges) {
for(let edgeId in this.selectionObj.edges) {
if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
this.selectionObj.edges[edgeId].unselect();
}
@ -288,8 +287,8 @@ class SelectionHandler {
* @private
*/
_getSelectedNodeCount() {
var count = 0;
for (var nodeId in this.selectionObj.nodes) {
let count = 0;
for (let nodeId in this.selectionObj.nodes) {
if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
count += 1;
}
@ -304,7 +303,7 @@ class SelectionHandler {
* @private
*/
_getSelectedNode() {
for (var nodeId in this.selectionObj.nodes) {
for (let nodeId in this.selectionObj.nodes) {
if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
return this.selectionObj.nodes[nodeId];
}
@ -319,7 +318,7 @@ class SelectionHandler {
* @private
*/
_getSelectedEdge() {
for (var edgeId in this.selectionObj.edges) {
for (let edgeId in this.selectionObj.edges) {
if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
return this.selectionObj.edges[edgeId];
}
@ -335,8 +334,8 @@ class SelectionHandler {
* @private
*/
_getSelectedEdgeCount() {
var count = 0;
for (var edgeId in this.selectionObj.edges) {
let count = 0;
for (let edgeId in this.selectionObj.edges) {
if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
count += 1;
}
@ -352,13 +351,13 @@ class SelectionHandler {
* @private
*/
_getSelectedObjectCount() {
var count = 0;
for(var nodeId in this.selectionObj.nodes) {
let count = 0;
for(let nodeId in this.selectionObj.nodes) {
if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
count += 1;
}
}
for(var edgeId in this.selectionObj.edges) {
for(let edgeId in this.selectionObj.edges) {
if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
count += 1;
}
@ -373,12 +372,12 @@ class SelectionHandler {
* @private
*/
_selectionIsEmpty() {
for(var nodeId in this.selectionObj.nodes) {
for(let nodeId in this.selectionObj.nodes) {
if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
return false;
}
}
for(var edgeId in this.selectionObj.edges) {
for(let edgeId in this.selectionObj.edges) {
if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
return false;
}
@ -394,7 +393,7 @@ class SelectionHandler {
* @private
*/
_clusterInSelection() {
for(var nodeId in this.selectionObj.nodes) {
for(let nodeId in this.selectionObj.nodes) {
if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
if (this.selectionObj.nodes[nodeId].clusterSize > 1) {
return true;
@ -411,8 +410,8 @@ class SelectionHandler {
* @private
*/
_selectConnectedEdges(node) {
for (var i = 0; i < node.edges.length; i++) {
var edge = node.edges[i];
for (let i = 0; i < node.edges.length; i++) {
let edge = node.edges[i];
edge.select();
this._addToSelection(edge);
}
@ -425,8 +424,8 @@ class SelectionHandler {
* @private
*/
_hoverConnectedEdges(node) {
for (var i = 0; i < node.edges.length; i++) {
var edge = node.edges[i];
for (let i = 0; i < node.edges.length; i++) {
let edge = node.edges[i];
edge.hover = true;
this._addToHover(edge);
}
@ -440,8 +439,8 @@ class SelectionHandler {
* @private
*/
_unselectConnectedEdges(node) {
for (var i = 0; i < node.edges.length; i++) {
var edge = node.edges[i];
for (let i = 0; i < node.edges.length; i++) {
let edge = node.edges[i];
edge.unselect();
this._removeFromSelection(edge);
}
@ -495,8 +494,8 @@ class SelectionHandler {
* @return {{nodes: Array.<String>, edges: Array.<String>}} selection
*/
getSelection() {
var nodeIds = this.getSelectedNodes();
var edgeIds = this.getSelectedEdges();
let nodeIds = this.getSelectedNodes();
let edgeIds = this.getSelectedEdges();
return {nodes:nodeIds, edges:edgeIds};
}
@ -507,9 +506,9 @@ class SelectionHandler {
* selected nodes.
*/
getSelectedNodes() {
var idArray = [];
let idArray = [];
if (this.options.select === true) {
for (var nodeId in this.selectionObj.nodes) {
for (let nodeId in this.selectionObj.nodes) {
if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
idArray.push(nodeId);
}
@ -525,9 +524,9 @@ class SelectionHandler {
* selected nodes.
*/
getSelectedEdges() {
var idArray = [];
let idArray = [];
if (this.options.select === true) {
for (var edgeId in this.selectionObj.edges) {
for (let edgeId in this.selectionObj.edges) {
if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
idArray.push(edgeId);
}
@ -543,25 +542,25 @@ class SelectionHandler {
* selected nodes.
* @param {boolean} [highlightEdges]
*/
selectNodes(selection, highlightEdges) {
var i, iMax, id;
selectNodes(selection, highlightEdges = true) {
let i, id;
if (!selection || (selection.length === undefined))
throw 'Selection must be an array with ids';
// first unselect any selected node
this.unselectAll(true);
this.unselectAll();
for (i = 0, iMax = selection.length; i < iMax; i++) {
for (i = 0; i < selection.length; i++) {
id = selection[i];
var node = this.body.nodes[id];
let node = this.body.nodes[id];
if (!node) {
throw new RangeError('Node with id "' + id + '" not found');
}
this._selectObject(node,true,true,highlightEdges,true);
this.selectObject(node,highlightEdges);
}
this.redraw();
this.body.emitter.emit('_requestRedraw');
}
@ -571,24 +570,24 @@ class SelectionHandler {
* selected nodes.
*/
selectEdges(selection) {
var i, iMax, id;
let i, id;
if (!selection || (selection.length === undefined))
throw 'Selection must be an array with ids';
// first unselect any selected node
this.unselectAll(true);
// first unselect any selected objects
this.unselectAll();
for (i = 0, iMax = selection.length; i < iMax; i++) {
for (i = 0; i < selection.length; i++) {
id = selection[i];
var edge = this.body.edges[id];
let edge = this.body.edges[id];
if (!edge) {
throw new RangeError('Edge with id "' + id + '" not found');
}
this._selectObject(edge,true,true,false,true);
this.selectObject(edge);
}
this.redraw();
this.body.emitter.emit('_requestRedraw');
}
/**
@ -596,14 +595,14 @@ class SelectionHandler {
* @private
*/
updateSelection() {
for (var nodeId in this.selectionObj.nodes) {
for (let nodeId in this.selectionObj.nodes) {
if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
if (!this.body.nodes.hasOwnProperty(nodeId)) {
delete this.selectionObj.nodes[nodeId];
}
}
}
for (var edgeId in this.selectionObj.edges) {
for (let edgeId in this.selectionObj.edges) {
if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
if (!this.body.edges.hasOwnProperty(edgeId)) {
delete this.selectionObj.edges[edgeId];

+ 10
- 7
lib/network/modules/View.js View File

@ -1,7 +1,3 @@
/**
* Created by Alex on 26-Feb-15.
*/
var util = require('../../util');
class View {
@ -33,7 +29,6 @@ class View {
}
// zoomExtent
/**
* Find the center position of the network
* @private
@ -97,9 +92,8 @@ class View {
/**
* This function zooms out to fit all data on screen based on amount of nodes
* @param {Object}
* @param {Object} Options
* @param {Boolean} [initialZoom] | zoom based on fitted formula or range, true = fitted, default = false;
* @param {Boolean} [disableStart] | If true, start is not called.
*/
zoomExtent(options = {nodes:[]}, initialZoom = false) {
var range;
@ -327,6 +321,15 @@ class View {
};
getScale() {
return this.body.view.scale;
}
getPosition() {
return {x:this.body.view.translation.x, y:this.body.view.translation.y};
}
}
export default View;

lib/network/modules/components/colorPicker.js → lib/network/modules/components/ColorPicker.js View File

@ -1,7 +1,3 @@
/**
* Created by Alex on 3/27/2015.
*/
let Hammer = require('../../../module/hammer');
let hammerUtil = require('../../../hammerUtil');
let util = require('../../../util');
@ -301,14 +297,12 @@ class ColorPicker {
* @private
*/
_create() {
let visPrefix = 'vis-network-'
this.frame = document.createElement('div');
this.frame.className = visPrefix + 'colorPicker-frame';
this.frame.className = 'vis-color-picker';
this.colorPickerDiv = document.createElement('div');
this.colorPickerSelector = document.createElement('div');
this.colorPickerSelector.className = visPrefix + 'colorPicker-selector';
this.colorPickerSelector.className = 'vis-selector';
this.colorPickerDiv.appendChild(this.colorPickerSelector);
this.colorPickerCanvas = document.createElement('canvas');
@ -333,73 +327,73 @@ class ColorPicker {
this.colorPickerCanvas.getContext("2d").setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
}
this.colorPickerDiv.className = visPrefix + 'colorPicker-color';
this.colorPickerDiv.className = 'vis-color';
this.opacityDiv = document.createElement('div');
this.opacityDiv.className = visPrefix + 'colorPicker-opacity';
this.opacityDiv.className = 'vis-opacity';
this.brightnessDiv = document.createElement('div');
this.brightnessDiv.className = visPrefix + 'colorPicker-brightness';
this.brightnessDiv.className = 'vis-brightness';
this.arrowDiv = document.createElement('div');
this.arrowDiv.className = visPrefix + 'colorPicker-arrowDiv';
this.arrowDiv.className = 'vis-arrow';
this.opacityRange = document.createElement('input');
this.opacityRange.type = 'range';
this.opacityRange.min = '0';
this.opacityRange.max = '100';
this.opacityRange.value = '100';
this.opacityRange.className = visPrefix + 'configuration range colorPicker';
this.opacityRange.className = 'vis-range';
this.brightnessRange = document.createElement('input');
this.brightnessRange.type = 'range';
this.brightnessRange.min = '0';
this.brightnessRange.max = '100';
this.brightnessRange.value = '100';
this.brightnessRange.className = visPrefix + 'configuration range colorPicker';
this.brightnessRange.className = 'vis-range';
this.opacityDiv.appendChild(this.opacityRange);
this.brightnessDiv.appendChild(this.brightnessRange);
var me = this;
this.opacityRange.onchange = function () {me._setOpacity(this.value);}
this.opacityRange.oninput = function () {me._setOpacity(this.value);}
this.brightnessRange.onchange = function () {me._setBrightness(this.value);}
this.brightnessRange.oninput = function () {me._setBrightness(this.value);}
this.opacityRange.onchange = function () {me._setOpacity(this.value);};
this.opacityRange.oninput = function () {me._setOpacity(this.value);};
this.brightnessRange.onchange = function () {me._setBrightness(this.value);};
this.brightnessRange.oninput = function () {me._setBrightness(this.value);};
this.brightnessLabel = document.createElement("div");
this.brightnessLabel.className = visPrefix + "colorPicker-label brightness";
this.brightnessLabel.className = "vis-label vis-brightness";
this.brightnessLabel.innerHTML = 'brightness:';
this.opacityLabel = document.createElement("div");
this.opacityLabel.className = visPrefix + "colorPicker-label opacity";
this.opacityLabel.className = "vis-label vis-opacity";
this.opacityLabel.innerHTML = 'opacity:';
this.newColorDiv = document.createElement("div");
this.newColorDiv.className = visPrefix + "colorPicker-newColor";
this.newColorDiv.className = "vis-new-color";
this.newColorDiv.innerHTML = 'new';
this.initialColorDiv = document.createElement("div");
this.initialColorDiv.className = visPrefix + "colorPicker-initialColor";
this.initialColorDiv.className = "vis-initial-color";
this.initialColorDiv.innerHTML = 'initial';
this.cancelButton = document.createElement("div");
this.cancelButton.className = visPrefix + "colorPicker-button cancel";
this.cancelButton.className = "vis-button vis-cancel";
this.cancelButton.innerHTML = 'cancel';
this.cancelButton.onclick = this._hide.bind(this, false);
this.applyButton = document.createElement("div");
this.applyButton.className = visPrefix + "colorPicker-button apply";
this.applyButton.className = "vis-button vis-apply";
this.applyButton.innerHTML = 'apply';
this.applyButton.onclick = this._apply.bind(this);
this.saveButton = document.createElement("div");
this.saveButton.className = visPrefix + "colorPicker-button save";
this.saveButton.className = "vis-button vis-save";
this.saveButton.innerHTML = 'save';
this.saveButton.onclick = this._save.bind(this);
this.loadButton = document.createElement("div");
this.loadButton.className = visPrefix + "colorPicker-button load";
this.loadButton.className = "vis-button vis-load";
this.loadButton.innerHTML = 'load last';
this.loadButton.onclick = this._loadLast.bind(this);

+ 68
- 52
lib/network/modules/components/Edge.js View File

@ -1,10 +1,10 @@
var util = require('../../../util');
import Label from './unified/Label.js'
import Label from './shared/Label'
import BezierEdgeDynamic from './edges/BezierEdgeDynamic'
import BezierEdgeStatic from './edges/BezierEdgeStatic'
import StraightEdge from './edges/StraightEdge'
/**
* @class Edge
*
@ -32,12 +32,14 @@ class Edge {
this.id = undefined;
this.fromId = undefined;
this.toId = undefined;
this.value = undefined;
this.selected = false;
this.hover = false;
this.labelDirty = true;
this.colorDirty = true;
this.baseWidth = this.options.width;
this.baseFontSize = this.options.font.size;
this.from = undefined; // a node
this.to = undefined; // a node
@ -62,6 +64,24 @@ class Edge {
}
this.colorDirty = true;
Edge.parseOptions(this.options, options);
if (options.id !== undefined) {this.id = options.id;}
if (options.from !== undefined) {this.fromId = options.from;}
if (options.to !== undefined) {this.toId = options.to;}
if (options.title !== undefined) {this.title = options.title;}
// A node is connected when it has a from and to node that both exist in the network.body.nodes.
this.connect();
// update label Module
this.updateLabelModule();
let dataChanged = this.updateEdgeType();
return dataChanged;
}
static parseOptions(parentOptions, newOptions) {
var fields = [
'id',
'font',
@ -82,75 +102,67 @@ class Edge {
'widthMax',
'widthSelectionMultiplier'
];
util.selectiveDeepExtend(fields, this.options, options);
util.mergeOptions(this.options, options, 'smooth');
util.mergeOptions(this.options, options, 'dashes');
if (options.id !== undefined) {this.id = options.id;}
if (options.from !== undefined) {this.fromId = options.from;}
if (options.to !== undefined) {this.toId = options.to;}
if (options.title !== undefined) {this.title = options.title;}
if (options.value !== undefined) {this.value = options.value;}
// only deep extend the items in the field array. These do not have shorthand.
util.selectiveDeepExtend(fields, parentOptions, newOptions);
util.mergeOptions(parentOptions, newOptions, 'smooth');
util.mergeOptions(parentOptions, newOptions, 'dashes');
util.mergeOptions(parentOptions, newOptions, 'shadow');
// set the scaling options
if (options.scaling !== undefined) {
if (options.scaling.min !== undefined) {this.options.scaling.min = options.scaling.min;}
if (options.scaling.max !== undefined) {this.options.scaling.max = options.scaling.max;}
util.mergeOptions(this.options.scaling, options.scaling, 'label');
// set the scaling newOptions
if (newOptions.scaling !== undefined) {
if (newOptions.scaling.min !== undefined) {parentOptions.scaling.min = newOptions.scaling.min;}
if (newOptions.scaling.max !== undefined) {parentOptions.scaling.max = newOptions.scaling.max;}
util.mergeOptions(parentOptions.scaling, newOptions.scaling, 'label');
}
// hanlde multiple input cases for arrows
if (options.arrows !== undefined) {
if (typeof options.arrows === 'string') {
let arrows = options.arrows.toLowerCase();
if (arrows.indexOf("to") != -1) {this.options.arrows.to.enabled = true;}
if (arrows.indexOf("middle") != -1) {this.options.arrows.middle.enabled = true;}
if (arrows.indexOf("from") != -1) {this.options.arrows.from.enabled = true;}
if (newOptions.arrows !== undefined) {
if (typeof newOptions.arrows === 'string') {
let arrows = newOptions.arrows.toLowerCase();
if (arrows.indexOf("to") != -1) {parentOptions.arrows.to.enabled = true;}
if (arrows.indexOf("middle") != -1) {parentOptions.arrows.middle.enabled = true;}
if (arrows.indexOf("from") != -1) {parentOptions.arrows.from.enabled = true;}
}
else if (typeof options.arrows === 'object') {
util.mergeOptions(this.options.arrows, options.arrows, 'to');
util.mergeOptions(this.options.arrows, options.arrows, 'middle');
util.mergeOptions(this.options.arrows, options.arrows, 'from');
else if (typeof newOptions.arrows === 'object') {
util.mergeOptions(parentOptions.arrows, newOptions.arrows, 'to');
util.mergeOptions(parentOptions.arrows, newOptions.arrows, 'middle');
util.mergeOptions(parentOptions.arrows, newOptions.arrows, 'from');
}
else {
throw new Error("The arrow options can only be an object or a string. Refer to the documentation. You used:" + JSON.stringify(options.arrows));
throw new Error("The arrow newOptions can only be an object or a string. Refer to the documentation. You used:" + JSON.stringify(newOptions.arrows));
}
}
// hanlde multiple input cases for color
if (options.color !== undefined) {
if (util.isString(options.color)) {
util.assignAllKeys(this.options.color, options.color);
this.options.color.inherit.enabled = false;
if (newOptions.color !== undefined) {
if (util.isString(newOptions.color)) {
parentOptions.color.color = newOptions.color;
parentOptions.color.highlight = newOptions.color;
parentOptions.color.hover = newOptions.color;
parentOptions.color.inherit.enabled = false;
}
else {
let colorsDefined = false;
if (options.color.color !== undefined) {this.options.color.color = options.color.color; colorsDefined = true;}
if (options.color.highlight !== undefined) {this.options.color.highlight = options.color.highlight; colorsDefined = true;}
if (options.color.hover !== undefined) {this.options.color.hover = options.color.hover; colorsDefined = true;}
if (options.color.opacity !== undefined) {this.options.color.opacity = options.color.opacity;}
if (newOptions.color.color !== undefined) {parentOptions.color.color = newOptions.color.color; colorsDefined = true;}
if (newOptions.color.highlight !== undefined) {parentOptions.color.highlight = newOptions.color.highlight; colorsDefined = true;}
if (newOptions.color.hover !== undefined) {parentOptions.color.hover = newOptions.color.hover; colorsDefined = true;}
if (newOptions.color.opacity !== undefined) {parentOptions.color.opacity = newOptions.color.opacity;}
if (options.color.inherit === undefined && colorsDefined === true) {
this.options.color.inherit.enabled = false;
if (newOptions.color.inherit === undefined && colorsDefined === true) {
parentOptions.color.inherit.enabled = false;
}
}
util.mergeOptions(this.options.color, options.color, 'inherit');
util.mergeOptions(parentOptions.color, newOptions.color, 'inherit');
}
// A node is connected when it has a from and to node that both exist in the network.body.nodes.
this.connect();
// update label Module
this.updateLabelModule();
let dataChanged = this.updateEdgeType();
return dataChanged;
}
updateLabelModule() {
this.labelModule.setOptions(this.options);
if (this.labelModule.baseSize !== undefined) {
this.baseFontSize = this.labelModule.baseSize;
}
}
updateEdgeType() {
@ -250,7 +262,7 @@ class Edge {
* has been set.
*/
getTitle() {
return typeof this.title === "function" ? this.title() : this.title;
return this.title;
}
@ -269,7 +281,7 @@ class Edge {
* @return {Number} value
*/
getValue() {
return this.value;
return this.options.value;
}
@ -281,8 +293,8 @@ class Edge {
* @param total
*/
setValueRange(min, max, total) {
if (this.value !== undefined) {
var scale = this.options.scaling.customScalingFunction(min, max, total, this.value);
if (this.options.value !== undefined) {
var scale = this.options.scaling.customScalingFunction(min, max, total, this.options.value);
var widthDiff = this.options.scaling.max - this.options.scaling.min;
if (this.options.scaling.label.enabled === true) {
var fontDiff = this.options.scaling.label.max - this.options.scaling.label.min;
@ -290,6 +302,10 @@ class Edge {
}
this.options.width = this.options.scaling.min + scale * widthDiff;
}
else {
this.options.width = this.baseWidth;
this.options.font.size = this.baseFontSize;
}
}

+ 5
- 4
lib/network/modules/components/NavigationHandler.js View File

@ -31,7 +31,7 @@ class NavigationHandler {
}
create() {
if (this.options.showNavigationIcons === true) {
if (this.options.navigationButtons === true) {
if (this.iconsCreated === false) {
this.loadNavigationElements();
}
@ -78,11 +78,12 @@ class NavigationHandler {
var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','_zoomExtent'];
this.navigationDOM['wrapper'] = document.createElement('div');
this.navigationDOM['wrapper'].className = 'vis-navigation';
this.canvas.frame.appendChild(this.navigationDOM['wrapper']);
for (var i = 0; i < navigationDivs.length; i++) {
this.navigationDOM[navigationDivs[i]] = document.createElement('div');
this.navigationDOM[navigationDivs[i]].className = 'network-navigation ' + navigationDivs[i];
this.navigationDOM[navigationDivs[i]].className = 'vis-button vis-' + navigationDivs[i];
this.navigationDOM['wrapper'].appendChild(this.navigationDOM[navigationDivs[i]]);
var hammer = new Hammer(this.navigationDOM[navigationDivs[i]]);
@ -146,8 +147,8 @@ class NavigationHandler {
_moveDown() {this.body.view.translation.y -= this.options.keyboard.speed.y;}
_moveLeft() {this.body.view.translation.x += this.options.keyboard.speed.x;}
_moveRight(){this.body.view.translation.x -= this.options.keyboard.speed.x;}
_zoomIn() {this.body.view.scale += this.options.keyboard.speed.zoom;}
_zoomOut() {this.body.view.scale -= this.options.keyboard.speed.zoom;}
_zoomIn() {this.body.view.scale *= 1+this.options.keyboard.speed.zoom;}
_zoomOut() {this.body.view.scale /= 1+this.options.keyboard.speed.zoom;}
/**

+ 73
- 47
lib/network/modules/components/Node.js View File

@ -1,6 +1,6 @@
var util = require('../../../util');
import Label from './unified/Label'
import Label from './shared/Label'
import Box from './nodes/shapes/Box'
import Circle from './nodes/shapes/Circle'
@ -57,6 +57,8 @@ class Node {
// state options
this.x = undefined;
this.y = undefined;
this.baseSize = this.options.size;
this.baseFontSize = this.options.font.size;
this.predefinedPosition = false; // used to check if initial zoomExtent should just take the range or approximate
this.selected = false;
this.hover = false;
@ -107,28 +109,6 @@ class Node {
return;
}
var fields = [
'borderWidth',
'borderWidthSelected',
'brokenImage',
'customScalingFunction',
'font',
'hidden',
'icon',
'id',
'image',
'label',
'level',
'physics',
'shape',
'size',
'title',
'value',
'x',
'y'
];
util.selectiveDeepExtend(fields, this.options, options);
// basic options
if (options.id !== undefined) {this.id = options.id;}
@ -138,7 +118,10 @@ class Node {
if (options.x !== undefined) {this.x = options.x; this.predefinedPosition = true;}
if (options.y !== undefined) {this.y = options.y; this.predefinedPosition = true;}
if (options.value !== undefined) {this.value = options.value;}
if (options.size !== undefined) {this.baseSize = options.size;}
// this transforms all shorthands into fully defined options
Node.parseOptions(this.options,options);
// copy group options
if (typeof options.group === 'number' || (typeof options.group === 'string' && options.group != '')) {
@ -147,11 +130,8 @@ class Node {
// the color object needs to be completely defined. Since groups can partially overwrite the colors, we parse it again, just in case.
this.options.color = util.parseColor(this.options.color);
}
// individual shape options
if (options.color !== undefined) {
this.options.color = util.parseColor(options.color);
}
// load the images
if (this.options.image !== undefined && this.options.image != "") {
if (this.imagelist) {
this.imageObj = this.imagelist.load(this.options.image, this.options.brokenImage);
@ -161,31 +141,73 @@ class Node {
}
}
if (options.fixed !== undefined) {
if (typeof options.fixed === 'boolean') {
this.options.fixed.x = true;
this.options.fixed.y = true;
}
else {
if (options.fixed.x !== undefined && typeof options.fixed.x === 'boolean') {
this.options.fixed.x = options.fixed.x;
}
if (options.fixed.y !== undefined && typeof options.fixed.y === 'boolean') {
this.options.fixed.y = options.fixed.y;
}
}
}
this.updateShape();
this.updateLabelModule();
// reset the size of the node, this can be changed
this._reset();
}
/**
* This process all possible shorthands in the new options and makes sure that the parentOptions are fully defined.
* Static so it can also be used by the handler.
* @param parentOptions
* @param newOptions
*/
static parseOptions(parentOptions, newOptions) {
var fields = [
'borderWidth',
'borderWidthSelected',
'brokenImage',
'customScalingFunction',
'font',
'hidden',
'icon',
'id',
'image',
'label',
'level',
'physics',
'shape',
'size',
'title',
'value',
'x',
'y'
];
util.selectiveDeepExtend(fields, parentOptions, newOptions);
// merge the shadow options into the parent.
util.mergeOptions(parentOptions, newOptions, 'shadow');
// individual shape newOptions
if (newOptions.color !== undefined) {
let parsedColor = util.parseColor(newOptions.color);
util.fillIfDefined(parentOptions.color, parsedColor);
}
if (newOptions.fixed !== undefined) {
if (typeof newOptions.fixed === 'boolean') {
parentOptions.fixed.x = true;
parentOptions.fixed.y = true;
}
else {
if (newOptions.fixed.x !== undefined && typeof newOptions.fixed.x === 'boolean') {
parentOptions.fixed.x = newOptions.fixed.x;
}
if (newOptions.fixed.y !== undefined && typeof newOptions.fixed.y === 'boolean') {
parentOptions.fixed.y = newOptions.fixed.y;
}
}
}
}
updateLabelModule() {
this.labelModule.setOptions(this.options);
if (this.labelModule.baseSize !== undefined) {
this.baseFontSize = this.labelModule.baseSize;
}
}
updateShape() {
@ -276,7 +298,7 @@ class Node {
* has been set.
*/
getTitle() {
return typeof this.options.title === "function" ? this.options.title() : this.options.title;
return this.options.title;
}
@ -314,7 +336,7 @@ class Node {
* @return {Number} value
*/
getValue() {
return this.value;
return this.options.value;
}
@ -325,8 +347,8 @@ class Node {
* @param {Number} max
*/
setValueRange(min, max, total) {
if (this.value !== undefined) {
var scale = this.options.scaling.customScalingFunction(min, max, total, this.value);
if (this.options.value !== undefined) {
var scale = this.options.scaling.customScalingFunction(min, max, total, this.options.value);
var sizeDiff = this.options.scaling.max - this.options.scaling.min;
if (this.options.scaling.label.enabled === true) {
var fontDiff = this.options.scaling.label.max - this.options.scaling.label.min;
@ -334,6 +356,10 @@ class Node {
}
this.options.size = this.options.scaling.min + scale * sizeDiff;
}
else {
this.options.size = this.baseSize;
this.options.font.size = this.baseFontSize;
}
}

+ 8
- 47
lib/network/modules/components/Popup.js View File

@ -8,56 +8,17 @@
* backgroundColor, etc.
*/
class Popup {
constructor(container, x, y, text, style) {
if (container) {
this.container = container;
}
else {
this.container = document.body;
}
// x, y and text are optional, see if a style object was passed in their place
if (style === undefined) {
if (typeof x === "object") {
style = x;
x = undefined;
} else if (typeof text === "object") {
style = text;
text = undefined;
} else {
// for backwards compatibility, in case clients other than Network are creating Popup directly
style = {
fontColor: 'black',
fontSize: 14, // px
fontFace: 'verdana',
color: {
border: '#666',
background: '#FFFFC6'
}
}
}
}
constructor(container) {
this.container = container;
this.x = 0;
this.y = 0;
this.padding = 5;
this.hidden = false;
if (x !== undefined && y !== undefined) {
this.setPosition(x, y);
}
if (text !== undefined) {
this.setText(text);
}
// create the frame
this.frame = document.createElement('div');
this.frame.className = 'network-tooltip';
this.frame.style.color = style.fontColor;
this.frame.style.backgroundColor = style.color.background;
this.frame.style.borderColor = style.color.border;
this.frame.style.fontSize = style.fontSize + 'px';
this.frame.style.fontFamily = style.fontFace;
this.frame.className = 'vis-network-tooltip';
this.container.appendChild(this.frame);
}
@ -86,14 +47,14 @@ class Popup {
/**
* Show the popup window
* @param {boolean} show Optional. Show or hide the window
* @param {boolean} [doShow] Show or hide the window
*/
show(show) {
if (show === undefined) {
show = true;
show(doShow) {
if (doShow === undefined) {
doShow = true;
}
if (show === true) {
if (doShow === true) {
var height = this.frame.clientHeight;
var width = this.frame.clientWidth;
var maxHeight = this.frame.parentNode.clientHeight;

lib/network/modules/components/edges/bezierEdgeDynamic.js → lib/network/modules/components/edges/BezierEdgeDynamic.js View File

@ -1,12 +1,8 @@
/**
* Created by Alex on 3/20/2015.
*/
import BezierEdgeBase from './util/BezierEdgeBase'
class BezierEdgeDynamic extends BezierEdgeBase {
constructor(options, body, labelModule) {
this.via = undefined;
//this.via = undefined; // Here for completeness but not allowed to defined before super() is invoked.
super(options, body, labelModule); // --> this calls the setOptions below
}
@ -73,7 +69,10 @@ class BezierEdgeDynamic extends BezierEdgeBase {
ctx.beginPath();
ctx.moveTo(this.from.x, this.from.y);
ctx.quadraticCurveTo(this.via.x, this.via.y, this.to.x, this.to.y);
// draw shadow if enabled
this.enableShadow(ctx);
ctx.stroke();
this.disableShadow(ctx);
return this.via;
}

lib/network/modules/components/edges/bezierEdgeStatic.js → lib/network/modules/components/edges/BezierEdgeStatic.js View File

@ -1,7 +1,3 @@
/**
* Created by Alex on 3/20/2015.
*/
import BezierEdgeBase from './util/BezierEdgeBase'
class BezierEdgeStatic extends BezierEdgeBase {
@ -21,19 +17,22 @@ class BezierEdgeStatic extends BezierEdgeBase {
// draw a straight line
ctx.beginPath();
ctx.moveTo(this.from.x, this.from.y);
var via = this._getViaCoordinates();
let via = this._getViaCoordinates();
let returnValue = via;
// fallback to normal straight edges
if (via.x === undefined) {
ctx.lineTo(this.to.x, this.to.y);
ctx.stroke();
return undefined;
returnValue = undefined;
}
else {
ctx.quadraticCurveTo(via.x, via.y, this.to.x, this.to.y);
ctx.stroke();
return via;
}
// draw shadow if enabled
this.enableShadow(ctx);
ctx.stroke();
this.disableShadow(ctx);
return returnValue;
}
_getViaCoordinates() {

lib/network/modules/components/edges/straightEdge.js → lib/network/modules/components/edges/StraightEdge.js View File

@ -1,7 +1,3 @@
/**
* Created by Alex on 3/20/2015.
*/
import EdgeBase from './util/EdgeBase'
class StraightEdge extends EdgeBase {
@ -22,7 +18,10 @@ class StraightEdge extends EdgeBase {
ctx.beginPath();
ctx.moveTo(this.from.x, this.from.y);
ctx.lineTo(this.to.x, this.to.y);
// draw shadow if enabled
this.enableShadow(ctx);
ctx.stroke();
this.disableShadow(ctx);
return undefined;
}

+ 0
- 4
lib/network/modules/components/edges/util/BezierEdgeBase.js View File

@ -1,7 +1,3 @@
/**
* Created by Alex on 3/20/2015.
*/
import EdgeBase from './EdgeBase'
class BezierEdgeBase extends EdgeBase {

+ 42
- 3
lib/network/modules/components/edges/util/EdgeBase.js View File

@ -1,6 +1,3 @@
/**
* Created by Alex on 3/20/2015.
*/
let util = require("../../../../../util")
class EdgeBase {
@ -94,7 +91,13 @@ class EdgeBase {
ctx.moveTo(this.from.x, this.from.y);
ctx.lineTo(this.to.x, this.to.y);
}
// draw shadow if enabled
this.enableShadow(ctx);
ctx.stroke();
// disable shadows for other elements.
this.disableShadow(ctx);
}
return via;
}
@ -313,10 +316,16 @@ class EdgeBase {
* @private
*/
_circle(ctx, x, y, radius) {
// draw shadow if enabled
this.enableShadow(ctx);
// draw a circle
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
ctx.stroke();
// disable shadows for other elements.
this.disableShadow(ctx);
}
@ -442,7 +451,13 @@ class EdgeBase {
// draw arrow at the end of the line
length = (10 + 5 * this.options.width) * scaleFactor;
ctx.arrow(arrowPos.x, arrowPos.y, angle, length);
// draw shadow if enabled
this.enableShadow(ctx);
ctx.fill();
// disable shadows for other elements.
this.disableShadow(ctx);
ctx.stroke();
}
else {
@ -466,11 +481,35 @@ class EdgeBase {
// draw the arrowhead
let length = (10 + 5 * this.options.width) * scaleFactor;
ctx.arrow(point.x, point.y, angle, length);
// draw shadow if enabled
this.enableShadow(ctx);
ctx.fill();
// disable shadows for other elements.
this.disableShadow(ctx);
ctx.stroke();
}
}
enableShadow(ctx) {
if (this.options.shadow.enabled === true) {
ctx.shadowColor = 'rgba(0,0,0,0.5)';
ctx.shadowBlur = this.options.shadow.size;
ctx.shadowOffsetX = this.options.shadow.x;
ctx.shadowOffsetY = this.options.shadow.y;
}
}
disableShadow(ctx) {
if (this.options.shadow.enabled === true) {
ctx.shadowColor = 'rgba(0,0,0,0)';
ctx.shadowBlur = 0;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
}
}
}
export default EdgeBase;

lib/network/modules/components/nodes/cluster.js → lib/network/modules/components/nodes/Cluster.js View File


lib/network/modules/components/nodes/shapes/box.js → lib/network/modules/components/nodes/shapes/Box.js View File

@ -1,6 +1,3 @@
/**
* Created by Alex on 3/18/2015.
*/
'use strict';
import NodeBase from '../util/NodeBase'
@ -10,17 +7,17 @@ class Box extends NodeBase {
super(options,body,labelModule);
}
resize(ctx) {
resize(ctx, selected) {
if (this.width === undefined) {
var margin = 5;
var textSize = this.labelModule.getTextSize(ctx,this.selected);
var textSize = this.labelModule.getTextSize(ctx,selected);
this.width = textSize.width + 2 * margin;
this.height = textSize.height + 2 * margin;
}
}
draw(ctx, x, y, selected, hover) {
this.resize(ctx);
this.resize(ctx, selected);
this.left = x - this.width / 2;
this.top = y - this.height / 2;
@ -35,7 +32,14 @@ class Box extends NodeBase {
ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
ctx.roundRect(this.left, this.top, this.width, this.height, this.options.size);
// draw shadow if enabled
this.enableShadow(ctx);
ctx.fill();
// disable shadows for other elements.
this.disableShadow(ctx);
ctx.stroke();
this.boundingBox.top = this.top;

lib/network/modules/components/nodes/shapes/circle.js → lib/network/modules/components/nodes/shapes/Circle.js View File

@ -1,6 +1,3 @@
/**
* Created by Alex on 3/18/2015.
*/
'use strict';
import CircleImageBase from '../util/CircleImageBase'

lib/network/modules/components/nodes/shapes/circularImage.js → lib/network/modules/components/nodes/shapes/CircularImage.js View File

@ -1,6 +1,3 @@
/**
* Created by Alex on 3/18/2015.
*/
'use strict';

lib/network/modules/components/nodes/shapes/database.js → lib/network/modules/components/nodes/shapes/Database.js View File

@ -1,6 +1,3 @@
/**
* Created by Alex on 3/18/2015.
*/
'use strict';
import NodeBase from '../util/NodeBase'
@ -35,7 +32,14 @@ class Database extends NodeBase {
ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
ctx.database(x - this.width / 2, y - this.height * 0.5, this.width, this.height);
// draw shadow if enabled
this.enableShadow(ctx);
ctx.fill();
// disable shadows for other elements.
this.disableShadow(ctx);
ctx.stroke();
this.boundingBox.top = this.top;

+ 0
- 3
lib/network/modules/components/nodes/shapes/Diamond.js View File

@ -1,6 +1,3 @@
/**
* Created by Alex on 3/18/2015.
*/
'use strict';
import ShapeBase from '../util/ShapeBase'

lib/network/modules/components/nodes/shapes/dot.js → lib/network/modules/components/nodes/shapes/Dot.js View File

@ -1,6 +1,3 @@
/**
* Created by Alex on 3/18/2015.
*/
'use strict';
import ShapeBase from '../util/ShapeBase'

lib/network/modules/components/nodes/shapes/ellipse.js → lib/network/modules/components/nodes/shapes/Ellipse.js View File

@ -1,6 +1,3 @@
/**
* Created by Alex on 3/18/2015.
*/
'use strict';
import NodeBase from '../util/NodeBase'
@ -38,7 +35,14 @@ class Ellipse extends NodeBase {
ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
ctx.ellipse(this.left, this.top, this.width, this.height);
// draw shadow if enabled
this.enableShadow(ctx);
ctx.fill();
// disable shadows for other elements.
this.disableShadow(ctx);
ctx.stroke();
this.boundingBox.left = this.left;
@ -47,7 +51,9 @@ class Ellipse extends NodeBase {
this.boundingBox.right = this.left + this.width;
this.labelModule.draw(ctx, x, y, selected);
}
distanceToBorder(ctx, angle) {

lib/network/modules/components/nodes/shapes/empty.js → lib/network/modules/components/nodes/shapes/Empty.js View File

@ -1,6 +1,3 @@
/**
* Created by Alex on 3/18/2015.
*/
'use strict';
import NodeBase from '../util/NodeBase'

lib/network/modules/components/nodes/shapes/icon.js → lib/network/modules/components/nodes/shapes/Icon.js View File

@ -1,6 +1,3 @@
/**
* Created by Alex on 3/18/2015.
*/
'use strict';
import NodeBase from '../util/NodeBase'
@ -56,7 +53,14 @@ class Icon extends NodeBase {
ctx.fillStyle = this.options.icon.color || "black";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
// draw shadow if enabled
this.enableShadow(ctx);
ctx.fillText(this.options.icon.code, x, y);
// disable shadows for other elements.
this.disableShadow(ctx);
}
}

lib/network/modules/components/nodes/shapes/image.js → lib/network/modules/components/nodes/shapes/Image.js View File

@ -1,6 +1,3 @@
/**
* Created by Alex on 3/18/2015.
*/
'use strict';
import CircleImageBase from '../util/CircleImageBase'

lib/network/modules/components/nodes/shapes/square.js → lib/network/modules/components/nodes/shapes/Square.js View File

@ -1,6 +1,3 @@
/**
* Created by Alex on 3/18/2015.
*/
'use strict';
import ShapeBase from '../util/ShapeBase'

lib/network/modules/components/nodes/shapes/star.js → lib/network/modules/components/nodes/shapes/Star.js View File

@ -1,6 +1,3 @@
/**
* Created by Alex on 3/18/2015.
*/
'use strict';
import ShapeBase from '../util/ShapeBase'

lib/network/modules/components/nodes/shapes/text.js → lib/network/modules/components/nodes/shapes/Text.js View File

@ -1,6 +1,3 @@
/**
* Created by Alex on 3/18/2015.
*/
'use strict';
import NodeBase from '../util/NodeBase'
@ -24,8 +21,13 @@ class Text extends NodeBase {
this.left = x - this.width / 2;
this.top = y - this.height / 2;
// draw shadow if enabled
this.enableShadow(ctx);
this.labelModule.draw(ctx, x, y, selected || hover);
// disable shadows for other elements.
this.disableShadow(ctx);
this.boundingBox.top = this.top;
this.boundingBox.left = this.left;
this.boundingBox.right = this.left + this.width;

+ 0
- 3
lib/network/modules/components/nodes/shapes/Triangle.js View File

@ -1,6 +1,3 @@
/**
* Created by Alex on 3/18/2015.
*/
'use strict';
import ShapeBase from '../util/ShapeBase'

lib/network/modules/components/nodes/shapes/triangleDown.js → lib/network/modules/components/nodes/shapes/TriangleDown.js View File

@ -1,6 +1,3 @@
/**
* Created by Alex on 3/18/2015.
*/
'use strict';
import ShapeBase from '../util/ShapeBase'

+ 13
- 3
lib/network/modules/components/nodes/util/CircleImageBase.js View File

@ -1,6 +1,3 @@
/**
* Created by Alex on 3/19/2015.
*/
import NodeBase from '../util/NodeBase'
class CircleImageBase extends NodeBase {
@ -42,7 +39,14 @@ class CircleImageBase extends NodeBase {
ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
ctx.circle(x, y, size);
// draw shadow if enabled
this.enableShadow(ctx);
ctx.fill();
// disable shadows for other elements.
this.disableShadow(ctx);
ctx.stroke();
}
@ -50,7 +54,13 @@ class CircleImageBase extends NodeBase {
if (this.imageObj.width != 0) {
// draw the image
ctx.globalAlpha = 1.0;
// draw shadow if enabled
this.enableShadow(ctx);
ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
// disable shadows for other elements.
this.disableShadow(ctx);
}
}

+ 18
- 4
lib/network/modules/components/nodes/util/NodeBase.js View File

@ -1,7 +1,3 @@
/**
* Created by Alex on 3/19/2015.
*/
class NodeBase {
constructor(options, body, labelModule) {
this.body = body;
@ -23,6 +19,24 @@ class NodeBase {
Math.abs(this.width / 2 / Math.cos(angle)),
Math.abs(this.height / 2 / Math.sin(angle))) + borderWidth;
}
enableShadow(ctx) {
if (this.options.shadow.enabled === true) {
ctx.shadowColor = 'rgba(0,0,0,0.5)';
ctx.shadowBlur = this.options.shadow.size;
ctx.shadowOffsetX = this.options.shadow.x;
ctx.shadowOffsetY = this.options.shadow.y;
}
}
disableShadow(ctx) {
if (this.options.shadow.enabled === true) {
ctx.shadowColor = 'rgba(0,0,0,0)';
ctx.shadowBlur = 0;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
}
}
}
export default NodeBase;

+ 7
- 3
lib/network/modules/components/nodes/util/ShapeBase.js View File

@ -1,6 +1,3 @@
/**
* Created by Alex on 3/19/2015.
*/
import NodeBase from '../util/NodeBase'
class ShapeBase extends NodeBase {
@ -31,7 +28,14 @@ class ShapeBase extends NodeBase {
ctx.lineWidth = Math.min(this.width, ctx.lineWidth);
ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
ctx[shape](x, y, this.options.size);
// draw shadow if enabled
this.enableShadow(ctx);
ctx.fill();
// disable shadows for other elements.
this.disableShadow(ctx);
ctx.stroke();
this.boundingBox.top = y - this.options.size;

+ 0
- 4
lib/network/modules/components/physics/BarnesHutSolver.js View File

@ -1,7 +1,3 @@
/**
* Created by Alex on 2/23/2015.
*/
class BarnesHutSolver {
constructor(body, physicsBody, options) {
this.body = body;

+ 0
- 4
lib/network/modules/components/physics/CentralGravitySolver.js View File

@ -1,7 +1,3 @@
/**
* Created by Alex on 2/23/2015.
*/
class CentralGravitySolver {
constructor(body, physicsBody, options) {
this.body = body;

+ 0
- 4
lib/network/modules/components/physics/HierarchicalRepulsionSolver.js View File

@ -1,7 +1,3 @@
/**
* Created by Alex on 2/23/2015.
*/
class HierarchicalRepulsionSolver {
constructor(body, physicsBody, options) {
this.body = body;

+ 0
- 4
lib/network/modules/components/physics/HierarchicalSpringSolver.js View File

@ -1,7 +1,3 @@
/**
* Created by Alex on 2/25/2015.
*/
class HierarchicalSpringSolver {
constructor(body, physicsBody, options) {
this.body = body;

+ 0
- 4
lib/network/modules/components/physics/RepulsionSolver.js View File

@ -1,7 +1,3 @@
/**
* Created by Alex on 2/23/2015.
*/
class RepulsionSolver {
constructor(body, physicsBody, options) {
this.body = body;

+ 0
- 4
lib/network/modules/components/physics/SpringSolver.js View File

@ -1,7 +1,3 @@
/**
* Created by Alex on 2/23/2015.
*/
class SpringSolver {
constructor(body, physicsBody, options) {
this.body = body;

lib/network/modules/components/unified/label.js → lib/network/modules/components/shared/Label.js View File

@ -1,48 +1,47 @@
let util = require('../../../../util');
/**
* Created by Alex on 3/17/2015.
*/
class Label {
constructor(body,options) {
this.body = body;
this.fontOptions = {};
this.defaultOptions = {
color: '#343434',
size: 14, // px
face: 'arial',
background: 'none',
stroke: 0, // px
strokeColor: 'white',
align:'horizontal'
}
util.extend(this.fontOptions, this.defaultOptions);
this.baseSize = undefined;
this.setOptions(options);
this.size = {top: 0, left: 0, width: 0, height: 0, yLine: 0}; // could be cached
}
setOptions(options) {
this.options = options;
if (options.label !== undefined) {
this.labelDirty = true;
}
if (options.font) {
if (options.font !== undefined) {
Label.parseOptions(this.options.font,options);
if (typeof options.font === 'string') {
let optionsArray = options.font.split(" ");
this.fontOptions.size = optionsArray[0].replace("px",'');
this.fontOptions.face = optionsArray[1];
this.fontOptions.color = optionsArray[2];
this.baseSize = this.options.font.size;
}
else if (typeof options.font === 'object') {
this.fontOptions = util.bridgeObject(options.font);
if (options.font.size !== undefined) {
this.baseSize = options.font.size;
}
}
this.fontOptions.size = Number(this.fontOptions.size);
}
}
static parseOptions(parentOptions, newOptions) {
if (typeof newOptions.font === 'string') {
let newOptionsArray = newOptions.font.split(" ");
parentOptions.size = newOptionsArray[0].replace("px",'');
parentOptions.face = newOptionsArray[1];
parentOptions.color = newOptionsArray[2];
}
else if (typeof newOptions.font === 'object') {
util.fillIfDefined(parentOptions, newOptions.font);
}
parentOptions.size = Number(parentOptions.size);
}
/**
* Main function. This is called from anything that wants to draw a label.
@ -58,7 +57,7 @@ class Label {
return;
// check if we have to render the label
let viewFontSize = this.fontOptions.size * this.body.view.scale;
let viewFontSize = this.options.font.size * this.body.view.scale;
if (this.options.label && viewFontSize < this.options.scaling.label.drawThreshold - 1)
return;
@ -77,12 +76,12 @@ class Label {
* @private
*/
_drawBackground(ctx) {
if (this.fontOptions.background !== undefined && this.fontOptions.background !== "none") {
ctx.fillStyle = this.fontOptions.background;
if (this.options.font.background !== undefined && this.options.font.background !== "none") {
ctx.fillStyle = this.options.font.background;
let lineMargin = 2;
switch (this.fontOptions.align) {
switch (this.options.font.align) {
case 'middle':
ctx.fillRect(-this.size.width * 0.5, -this.size.height * 0.5, this.size.width, this.size.height);
break;
@ -108,7 +107,7 @@ class Label {
* @private
*/
_drawText(ctx, selected, x, y, baseline = 'middle') {
let fontSize = this.fontOptions.size;
let fontSize = this.options.font.size;
let viewFontSize = fontSize * this.body.view.scale;
// this ensures that there will not be HUGE letters on screen by setting an upper limit on the visible text size (regardless of zoomLevel)
if (viewFontSize >= this.options.scaling.label.maxVisible) {
@ -120,20 +119,20 @@ class Label {
[x, yLine] = this._setAlignment(ctx, x, yLine, baseline);
// configure context for drawing the text
ctx.font = (selected ? 'bold ' : '') + fontSize + "px " + this.fontOptions.face;
ctx.font = (selected ? 'bold ' : '') + fontSize + "px " + this.options.font.face;
ctx.fillStyle = fontColor;
ctx.textAlign = 'center';
// set the strokeWidth
if (this.fontOptions.stroke > 0) {
ctx.lineWidth = this.fontOptions.stroke;
if (this.options.font.stroke > 0) {
ctx.lineWidth = this.options.font.stroke;
ctx.strokeStyle = strokeColor;
ctx.lineJoin = 'round';
}
// draw the text
for (let i = 0; i < this.lineCount; i++) {
if (this.fontOptions.stroke > 0) {
if (this.options.font.stroke > 0) {
ctx.strokeText(this.lines[i], x, yLine);
}
ctx.fillText(this.lines[i], x, yLine);
@ -144,16 +143,16 @@ class Label {
_setAlignment(ctx, x, yLine, baseline) {
// check for label alignment (for edges)
// TODO: make alignment for nodes
if (this.fontOptions.align !== 'horizontal') {
if (this.options.font.align !== 'horizontal') {
x = 0;
yLine = 0;
let lineMargin = 2;
if (this.fontOptions.align === 'top') {
if (this.options.font.align === 'top') {
ctx.textBaseline = 'alphabetic';
yLine -= 2 * lineMargin; // distance from edge, required because we use alphabetic. Alphabetic has less difference between browsers
}
else if (this.fontOptions.align === 'bottom') {
else if (this.options.font.align === 'bottom') {
ctx.textBaseline = 'hanging';
yLine += 2 * lineMargin;// distance from edge, required because we use hanging. Hanging has less difference between browsers
}
@ -177,8 +176,8 @@ class Label {
* @private
*/
_getColor(viewFontSize) {
let fontColor = this.fontOptions.color || '#000000';
let strokeColor = this.fontOptions.strokeColor || '#ffffff';
let fontColor = this.options.font.color || '#000000';
let strokeColor = this.options.font.strokeColor || '#ffffff';
if (viewFontSize <= this.options.scaling.label.drawThreshold) {
let opacity = Math.max(0, Math.min(1, 1 - (this.options.scaling.label.drawThreshold - viewFontSize)));
fontColor = util.overrideOpacity(fontColor, opacity);
@ -197,7 +196,7 @@ class Label {
getTextSize(ctx, selected = false) {
let size = {
width: this._processLabel(ctx,selected),
height: this.fontOptions.size * this.lineCount,
height: this.options.font.size * this.lineCount,
lineCount: this.lineCount
};
return size;
@ -216,12 +215,12 @@ class Label {
if (this.labelDirty === true) {
this.size.width = this._processLabel(ctx,selected);
}
this.size.height = this.fontOptions.size * this.lineCount;
this.size.height = this.options.font.size * this.lineCount;
this.size.left = x - this.size.width * 0.5;
this.size.top = y - this.size.height * 0.5;
this.size.yLine = y + (1 - this.lineCount) * 0.5 * this.fontOptions.size;
this.size.yLine = y + (1 - this.lineCount) * 0.5 * this.options.font.size;
if (baseline === "hanging") {
this.size.top += 0.5 * this.fontOptions.size;
this.size.top += 0.5 * this.options.font.size;
this.size.top += 4; // distance from node, required because we use hanging. Hanging has less difference between browsers
this.size.yLine += 4; // distance from node
}
@ -244,7 +243,7 @@ class Label {
if (this.options.label !== undefined) {
lines = String(this.options.label).split('\n');
lineCount = lines.length;
ctx.font = (selected ? 'bold ' : '') + this.fontOptions.size + "px " + this.fontOptions.face;
ctx.font = (selected ? 'bold ' : '') + this.options.font.size + "px " + this.options.font.face;
width = ctx.measureText(lines[0]).width;
for (let i = 1; i < lineCount; i++) {
let lineWidth = ctx.measureText(lines[i]).width;

+ 22
- 22
lib/timeline/Core.js View File

@ -51,24 +51,24 @@ Core.prototype._create = function (container) {
this.dom.shadowTopRight = document.createElement('div');
this.dom.shadowBottomRight = document.createElement('div');
this.dom.root.className = 'vis timeline root';
this.dom.background.className = 'vispanel background';
this.dom.backgroundVertical.className = 'vispanel background vertical';
this.dom.backgroundHorizontal.className = 'vispanel background horizontal';
this.dom.centerContainer.className = 'vispanel center';
this.dom.leftContainer.className = 'vispanel left';
this.dom.rightContainer.className = 'vispanel right';
this.dom.top.className = 'vispanel top';
this.dom.bottom.className = 'vispanel bottom';
this.dom.left.className = 'content';
this.dom.center.className = 'content';
this.dom.right.className = 'content';
this.dom.shadowTop.className = 'shadow top';
this.dom.shadowBottom.className = 'shadow bottom';
this.dom.shadowTopLeft.className = 'shadow top';
this.dom.shadowBottomLeft.className = 'shadow bottom';
this.dom.shadowTopRight.className = 'shadow top';
this.dom.shadowBottomRight.className = 'shadow bottom';
this.dom.root.className = 'vis-timeline';
this.dom.background.className = 'vis-panel vis-background';
this.dom.backgroundVertical.className = 'vis-panel vis-background vis-vertical';
this.dom.backgroundHorizontal.className = 'vis-panel vis-background vis-horizontal';
this.dom.centerContainer.className = 'vis-panel vis-center';
this.dom.leftContainer.className = 'vis-panel vis-left';
this.dom.rightContainer.className = 'vis-panel vis-right';
this.dom.top.className = 'vis-panel vis-top';
this.dom.bottom.className = 'vis-panel vis-bottom';
this.dom.left.className = 'vis-content';
this.dom.center.className = 'vis-content';
this.dom.right.className = 'vis-content';
this.dom.shadowTop.className = 'vis-shadow vis-top';
this.dom.shadowBottom.className = 'vis-shadow vis-bottom';
this.dom.shadowTopLeft.className = 'vis-shadow vis-top';
this.dom.shadowBottomLeft.className = 'vis-shadow vis-bottom';
this.dom.shadowTopRight.className = 'vis-shadow vis-top';
this.dom.shadowBottomRight.className = 'vis-shadow vis-bottom';
this.dom.root.appendChild(this.dom.background);
this.dom.root.appendChild(this.dom.backgroundVertical);
@ -587,12 +587,12 @@ Core.prototype._redraw = function() {
// update class names
if (options.orientation == 'top') {
util.addClassName(dom.root, 'top');
util.removeClassName(dom.root, 'bottom');
util.addClassName(dom.root, 'vis-top');
util.removeClassName(dom.root, 'vis-bottom');
}
else {
util.removeClassName(dom.root, 'top');
util.addClassName(dom.root, 'bottom');
util.removeClassName(dom.root, 'vis-top');
util.addClassName(dom.root, 'vis-bottom');
}
// update root width and height options

+ 0
- 3
lib/timeline/DateUtil.js View File

@ -1,6 +1,3 @@
/**
* Created by Alex on 10/3/2014.
*/
var moment = require('../module/moment');

+ 0
- 6
lib/timeline/Range.js View File

@ -368,8 +368,6 @@ Range.prototype._onDragStart = function(event) {
if (this.body.dom.root) {
this.body.dom.root.style.cursor = 'move';
}
event.preventDefault();
};
/**
@ -421,8 +419,6 @@ Range.prototype._onDrag = function (event) {
end: new Date(this.end),
byUser: true
});
event.preventDefault();
};
/**
@ -565,8 +561,6 @@ Range.prototype._onPinch = function (event) {
this.startToFront = false; // revert to default
this.endToFront = true; // revert to default
event.preventDefault();
};
/**

+ 1
- 1
lib/timeline/component/CurrentTime.js View File

@ -37,7 +37,7 @@ CurrentTime.prototype = new Component();
*/
CurrentTime.prototype._create = function() {
var bar = document.createElement('div');
bar.className = 'currenttime';
bar.className = 'vis-current-time';
bar.style.position = 'absolute';
bar.style.top = '0px';
bar.style.height = '100%';

+ 5
- 7
lib/timeline/component/CustomTime.js View File

@ -64,7 +64,7 @@ CustomTime.prototype.setOptions = function(options) {
*/
CustomTime.prototype._create = function() {
var bar = document.createElement('div');
bar.className = 'customtime';
bar.className = 'vis-custom-time';
bar.style.position = 'absolute';
bar.style.top = '0px';
bar.style.height = '100%';
@ -83,9 +83,10 @@ CustomTime.prototype._create = function() {
this.hammer.on('panstart', this._onDragStart.bind(this));
this.hammer.on('panmove', this._onDrag.bind(this));
this.hammer.on('panend', this._onDragEnd.bind(this));
this.hammer.on('pan', function (event) {
event.preventDefault();
});
// TODO: cleanup
//this.hammer.on('pan', function (event) {
// event.preventDefault();
//});
};
/**
@ -162,7 +163,6 @@ CustomTime.prototype._onDragStart = function(event) {
this.eventParams.customTime = this.customTime;
event.stopPropagation();
event.preventDefault();
};
/**
@ -185,7 +185,6 @@ CustomTime.prototype._onDrag = function (event) {
});
event.stopPropagation();
event.preventDefault();
};
/**
@ -203,7 +202,6 @@ CustomTime.prototype._onDragEnd = function (event) {
});
event.stopPropagation();
event.preventDefault();
};
module.exports = CustomTime;

+ 9
- 9
lib/timeline/component/DataAxis.js View File

@ -285,7 +285,7 @@ DataAxis.prototype.redraw = function () {
var frame = this.dom.frame;
// update classname
frame.className = 'dataaxis';
frame.className = 'vis-data-axis';
// calculate character width and height
this._calculateCharSize();
@ -416,18 +416,18 @@ DataAxis.prototype._redrawLabels = function () {
var isMajor = step.isMajor();
if (this.options['showMinorLabels'] && isMajor == false || this.master == false && this.options['showMinorLabels'] == true) {
this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'yAxis minor', this.props.minorCharHeight);
this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'vis-y-axis vis-minor', this.props.minorCharHeight);
}
if (isMajor && this.options['showMajorLabels'] && this.master == true ||
this.options['showMinorLabels'] == false && this.master == false && isMajor == true) {
if (y >= 0) {
this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'yAxis major', this.props.majorCharHeight);
this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'vis-y-axis vis-major', this.props.majorCharHeight);
}
this._redrawLine(y, orientation, 'grid horizontal major', this.options.majorLinesOffset, this.props.majorLineWidth);
this._redrawLine(y, orientation, 'vis-grid vis-horizontal vis-major', this.options.majorLinesOffset, this.props.majorLineWidth);
}
else {
this._redrawLine(y, orientation, 'grid horizontal minor', this.options.minorLinesOffset, this.props.minorLineWidth);
this._redrawLine(y, orientation, 'vis-grid vis-horizontal vis-minor', this.options.minorLinesOffset, this.props.minorLineWidth);
}
if (this.master == true && step.current == 0) {
@ -554,7 +554,7 @@ DataAxis.prototype._redrawTitle = function (orientation) {
// Check if the title is defined for this axes
if (this.options.title[orientation] !== undefined && this.options.title[orientation].text !== undefined) {
var title = DOMutil.getDOMElement('div', this.DOMelements.title, this.dom.frame);
title.className = 'yAxis title ' + orientation;
title.className = 'vis-y-axis vis-title vis-' + orientation;
title.innerHTML = this.options.title[orientation].text;
// Add style - if provided
@ -589,7 +589,7 @@ DataAxis.prototype._calculateCharSize = function () {
if (!('minorCharHeight' in this.props)) {
var textMinor = document.createTextNode('0');
var measureCharMinor = document.createElement('div');
measureCharMinor.className = 'yAxis minor measure';
measureCharMinor.className = 'vis-y-axis vis-minor vis-measure';
measureCharMinor.appendChild(textMinor);
this.dom.frame.appendChild(measureCharMinor);
@ -602,7 +602,7 @@ DataAxis.prototype._calculateCharSize = function () {
if (!('majorCharHeight' in this.props)) {
var textMajor = document.createTextNode('0');
var measureCharMajor = document.createElement('div');
measureCharMajor.className = 'yAxis major measure';
measureCharMajor.className = 'vis-y-axis vis-major vis-measure';
measureCharMajor.appendChild(textMajor);
this.dom.frame.appendChild(measureCharMajor);
@ -615,7 +615,7 @@ DataAxis.prototype._calculateCharSize = function () {
if (!('titleCharHeight' in this.props)) {
var textTitle = document.createTextNode('0');
var measureCharTitle = document.createElement('div');
measureCharTitle.className = 'yAxis title measure';
measureCharTitle.className = 'vis-y-axis vis-title vis-measure';
measureCharTitle.appendChild(textTitle);
this.dom.frame.appendChild(measureCharTitle);

+ 6
- 6
lib/timeline/component/GraphGroup.js View File

@ -106,7 +106,7 @@ GraphGroup.prototype.setOptions = function(options) {
GraphGroup.prototype.update = function(group) {
this.group = group;
this.content = group.content || 'graph';
this.className = group.className || this.className || "graphGroup" + this.groupsUsingDefaultStyles[0] % 10;
this.className = group.className || this.className || 'vis-graph-group' + this.groupsUsingDefaultStyles[0] % 10;
this.visible = group.visible === undefined ? true : group.visible;
this.style = group.style;
this.setOptions(group.options);
@ -132,13 +132,13 @@ GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, icon
outline.setAttributeNS(null, "y", y - fillHeight);
outline.setAttributeNS(null, "width", iconWidth);
outline.setAttributeNS(null, "height", 2*fillHeight);
outline.setAttributeNS(null, "class", "outline");
outline.setAttributeNS(null, "class", "vis-outline");
if (this.options.style == 'line') {
path = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer);
path.setAttributeNS(null, "class", this.className);
if(this.style !== undefined) {
path.setAttributeNS(null, "style", this.style);
path.setAttributeNS(null, "style", 'vis-' + this.style);
}
path.setAttributeNS(null, "d", "M" + x + ","+y+" L" + (x + iconWidth) + ","+y+"");
@ -154,7 +154,7 @@ GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, icon
"L"+ (x + iconWidth) + "," + (y + fillHeight) +
"L"+ (x + iconWidth) + ","+y);
}
fillPath.setAttributeNS(null, "class", this.className + " iconFill");
fillPath.setAttributeNS(null, "class", this.className + " vis-icon-fill");
}
if (this.options.drawPoints.enabled == true) {
@ -168,8 +168,8 @@ GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, icon
var offset = Math.round((iconWidth - (2 * barWidth))/3);
DOMutil.drawBar(x + 0.5*barWidth + offset , y + fillHeight - bar1Height - 1, barWidth, bar1Height, this.className + ' bar', JSONcontainer, SVGcontainer);
DOMutil.drawBar(x + 1.5*barWidth + offset + 2, y + fillHeight - bar2Height - 1, barWidth, bar2Height, this.className + ' bar', JSONcontainer, SVGcontainer);
DOMutil.drawBar(x + 0.5*barWidth + offset , y + fillHeight - bar1Height - 1, barWidth, bar1Height, this.className + ' vis-bar', JSONcontainer, SVGcontainer);
DOMutil.drawBar(x + 1.5*barWidth + offset + 2, y + fillHeight - bar2Height - 1, barWidth, bar2Height, this.className + ' vis-bar', JSONcontainer, SVGcontainer);
}
};

+ 10
- 10
lib/timeline/component/Group.js View File

@ -47,30 +47,30 @@ function Group (groupId, data, itemSet) {
*/
Group.prototype._create = function() {
var label = document.createElement('div');
label.className = 'vlabel';
label.className = 'vis-label';
this.dom.label = label;
var inner = document.createElement('div');
inner.className = 'inner';
inner.className = 'vis-inner';
label.appendChild(inner);
this.dom.inner = inner;
var foreground = document.createElement('div');
foreground.className = 'group';
foreground.className = 'vis-group';
foreground['timeline-group'] = this;
this.dom.foreground = foreground;
this.dom.background = document.createElement('div');
this.dom.background.className = 'group';
this.dom.background.className = 'vis-group';
this.dom.axis = document.createElement('div');
this.dom.axis.className = 'group';
this.dom.axis.className = 'vis-group';
// create a hidden marker to detect when the Timelines container is attached
// to the DOM, or the style of a parent of the Timeline is changed from
// display:none is changed to visible.
this.dom.marker = document.createElement('div');
this.dom.marker.style.visibility = 'hidden'; // TODO: ask jos why this is not none?
this.dom.marker.style.visibility = 'hidden';
this.dom.marker.innerHTML = '?';
this.dom.background.appendChild(this.dom.marker);
};
@ -96,10 +96,10 @@ Group.prototype.setData = function(data) {
this.dom.label.title = data && data.title || '';
if (!this.dom.inner.firstChild) {
util.addClassName(this.dom.inner, 'hidden');
util.addClassName(this.dom.inner, 'vis-hidden');
}
else {
util.removeClassName(this.dom.inner, 'hidden');
util.removeClassName(this.dom.inner, 'vis-hidden');
}
// update className
@ -120,11 +120,11 @@ Group.prototype.setData = function(data) {
// update style
if (this.style) {
util.removeCssText(this.dom.label, this.style);
util.removeCssText(this.dom.label, 'vis-' + this.style);
this.style = null;
}
if (data && data.style) {
util.addCssText(this.dom.label, data.style);
util.addCssText(this.dom.label, 'vis-' + data.style);
this.style = data.style;
}
};

+ 7
- 10
lib/timeline/component/ItemSet.js View File

@ -146,30 +146,30 @@ ItemSet.types = {
*/
ItemSet.prototype._create = function(){
var frame = document.createElement('div');
frame.className = 'itemset';
frame.className = 'vis-itemset';
frame['timeline-itemset'] = this;
this.dom.frame = frame;
// create background panel
var background = document.createElement('div');
background.className = 'background';
background.className = 'vis-background';
frame.appendChild(background);
this.dom.background = background;
// create foreground panel
var foreground = document.createElement('div');
foreground.className = 'foreground';
foreground.className = 'vis-foreground';
frame.appendChild(foreground);
this.dom.foreground = foreground;
// create axis panel
var axis = document.createElement('div');
axis.className = 'axis';
axis.className = 'vis-axis';
this.dom.axis = axis;
// create labelset
var labelSet = document.createElement('div');
labelSet.className = 'labelset';
labelSet.className = 'vis-labelset';
this.dom.labelSet = labelSet;
// create ungrouped Group
@ -504,7 +504,7 @@ ItemSet.prototype.redraw = function() {
this.props.left = this.body.domProps.left.width + this.body.domProps.border.left;
// update class name
frame.className = 'itemset' + (editable ? ' editable' : '');
frame.className = 'vis-itemset' + (editable ? ' vis-editable' : '');
// reorder the groups (if needed)
resized = this._orderGroups() || resized;
@ -829,7 +829,7 @@ ItemSet.prototype._onUpdate = function(ids) {
else if (type == 'rangeoverflow') {
// TODO: deprecated since version 2.1.0 (or 3.0.0?). cleanup some day
throw new TypeError('Item type "rangeoverflow" is deprecated. Use css styling instead: ' +
'.vis.timeline .item.range .content {overflow: visible;}');
'.vis-item.vis-range .vis-item-content {overflow: visible;}');
}
else {
throw new TypeError('Unknown item type "' + type + '"');
@ -1167,7 +1167,6 @@ ItemSet.prototype._onDragStart = function (event) {
}
event.stopPropagation();
event.preventDefault();
}
};
@ -1177,8 +1176,6 @@ ItemSet.prototype._onDragStart = function (event) {
* @private
*/
ItemSet.prototype._onDrag = function (event) {
event.preventDefault();
if (this.touchParams.itemProps) {
var me = this;
var snap = this.options.snap || null;

+ 2
- 2
lib/timeline/component/Legend.js View File

@ -62,13 +62,13 @@ Legend.prototype.removeGroup = function(label) {
Legend.prototype._create = function() {
this.dom.frame = document.createElement('div');
this.dom.frame.className = 'legend';
this.dom.frame.className = 'vis-legend';
this.dom.frame.style.position = "absolute";
this.dom.frame.style.top = "10px";
this.dom.frame.style.display = "block";
this.dom.textArea = document.createElement('div');
this.dom.textArea.className = 'legendText';
this.dom.textArea.className = 'vis-legend-text';
this.dom.textArea.style.position = "relative";
this.dom.textArea.style.top = "0px";

+ 1
- 1
lib/timeline/component/LineGraph.js View File

@ -160,7 +160,7 @@ LineGraph.prototype = new Component();
*/
LineGraph.prototype._create = function(){
var frame = document.createElement('div');
frame.className = 'LineGraph';
frame.className = 'vis-line-graph';
this.dom.frame = frame;
// create svg element for graph drawing.

+ 8
- 8
lib/timeline/component/TimeAxis.js View File

@ -94,8 +94,8 @@ TimeAxis.prototype._create = function() {
this.dom.foreground = document.createElement('div');
this.dom.background = document.createElement('div');
this.dom.foreground.className = 'timeaxis foreground';
this.dom.background.className = 'timeaxis background';
this.dom.foreground.className = 'vis-time-axis vis-foreground';
this.dom.background.className = 'vis-time-axis vis-background';
};
/**
@ -300,7 +300,7 @@ TimeAxis.prototype._repaintMinorText = function (x, text, orientation, className
label.style.top = (orientation == 'top') ? (this.props.majorLabelHeight + 'px') : '0';
label.style.left = x + 'px';
label.className = 'text minor ' + className;
label.className = 'vis-text vis-minor ' + className;
//label.title = title; // TODO: this is a heavy operation
};
@ -326,7 +326,7 @@ TimeAxis.prototype._repaintMajorText = function (x, text, orientation, className
this.dom.majorTexts.push(label);
label.childNodes[0].nodeValue = text;
label.className = 'text major ' + className;
label.className = 'vis-text vis-major ' + className;
//label.title = title; // TODO: this is a heavy operation
label.style.top = (orientation == 'top') ? '0' : (this.props.minorLabelHeight + 'px');
@ -361,7 +361,7 @@ TimeAxis.prototype._repaintMinorLine = function (x, orientation, className) {
line.style.height = props.minorLineHeight + 'px';
line.style.left = (x - props.minorLineWidth / 2) + 'px';
line.className = 'grid vertical minor ' + className;
line.className = 'vis-grid vis-vertical vis-minor ' + className;
return line;
};
@ -394,7 +394,7 @@ TimeAxis.prototype._repaintMajorLine = function (x, orientation, className) {
line.style.left = (x - props.majorLineWidth / 2) + 'px';
line.style.height = props.majorLineHeight + 'px';
line.className = 'grid vertical major ' + className;
line.className = 'vis-grid vis-vertical vis-major ' + className;
return line;
};
@ -411,7 +411,7 @@ TimeAxis.prototype._calculateCharSize = function () {
// determine the char width and height on the minor axis
if (!this.dom.measureCharMinor) {
this.dom.measureCharMinor = document.createElement('DIV');
this.dom.measureCharMinor.className = 'text minor measure';
this.dom.measureCharMinor.className = 'vis-text vis-minor vis-measure';
this.dom.measureCharMinor.style.position = 'absolute';
this.dom.measureCharMinor.appendChild(document.createTextNode('0'));
@ -423,7 +423,7 @@ TimeAxis.prototype._calculateCharSize = function () {
// determine the char width and height on the major axis
if (!this.dom.measureCharMajor) {
this.dom.measureCharMajor = document.createElement('DIV');
this.dom.measureCharMajor.className = 'text major measure';
this.dom.measureCharMajor.className = 'vis-text vis-major vis-measure';
this.dom.measureCharMajor.style.position = 'absolute';
this.dom.measureCharMajor.appendChild(document.createTextNode('0'));

+ 5
- 5
lib/timeline/component/css/animation.css View File

@ -1,18 +1,18 @@
.vis.timeline.root {
.vis-timeline {
/*
-webkit-transition: height .4s ease-in-out;
transition: height .4s ease-in-out;
*/
}
.vis.timeline .vispanel {
.vis-panel {
/*
-webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
transition: height .4s ease-in-out, top .4s ease-in-out;
*/
}
.vis.timeline .axis {
.vis-axis {
/*
-webkit-transition: top .4s ease-in-out;
transition: top .4s ease-in-out;
@ -21,12 +21,12 @@
/* TODO: get animation working nicely
.vis.timeline .item {
.vis-item {
-webkit-transition: top .4s ease-in-out;
transition: top .4s ease-in-out;
}
.vis.timeline .item.line {
.vis-item.line {
-webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
transition: height .4s ease-in-out, top .4s ease-in-out;
}

+ 1
- 1
lib/timeline/component/css/currenttime.css View File

@ -1,4 +1,4 @@
.vis.timeline .currenttime {
.vis-current-time {
background-color: #FF7F6E;
width: 2px;
z-index: 1;

+ 1
- 1
lib/timeline/component/css/customtime.css View File

@ -1,4 +1,4 @@
.vis.timeline .customtime {
.vis-custom-time {
background-color: #6E94FF;
width: 2px;
cursor: move;

+ 75
- 77
lib/timeline/component/css/dataaxis.css View File

@ -1,105 +1,103 @@
.vis.timeline .vispanel.background.horizontal .grid.horizontal {
position: absolute;
width: 100%;
height: 0;
border-bottom: 1px solid;
.vis-panel.vis-background.vis-horizontal .vis-grid.vis-horizontal {
position: absolute;
width: 100%;
height: 0;
border-bottom: 1px solid;
}
.vis.timeline .vispanel.background.horizontal .grid.minor {
border-color: #e5e5e5;
.vis-panel.vis-background.vis-horizontal .vis-grid.vis-minor {
border-color: #e5e5e5;
}
.vis.timeline .vispanel.background.horizontal .grid.major {
border-color: #bfbfbf;
.vis-panel.vis-background.vis-horizontal .vis-grid.vis-major {
border-color: #bfbfbf;
}
.vis.timeline .dataaxis .yAxis.major {
width: 100%;
position: absolute;
color: #4d4d4d;
white-space: nowrap;
.vis-data-axis .vis-y-axis.vis-major {
width: 100%;
position: absolute;
color: #4d4d4d;
white-space: nowrap;
}
.vis.timeline .dataaxis .yAxis.major.measure{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border: 0px;
visibility: hidden;
width: auto;
.vis-data-axis .vis-y-axis.vis-major.vis-measure {
padding: 0;
margin: 0;
border: 0;
visibility: hidden;
width: auto;
}
.vis.timeline .dataaxis .yAxis.minor{
position: absolute;
width: 100%;
color: #bebebe;
white-space: nowrap;
.vis-data-axis .vis-y-axis.vis-minor {
position: absolute;
width: 100%;
color: #bebebe;
white-space: nowrap;
}
.vis.timeline .dataaxis .yAxis.minor.measure{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border: 0px;
visibility: hidden;
width: auto;
.vis-data-axis .vis-y-axis.vis-minor.vis-measure {
padding: 0;
margin: 0;
border: 0;
visibility: hidden;
width: auto;
}
.vis.timeline .dataaxis .yAxis.title{
position: absolute;
color: #4d4d4d;
white-space: nowrap;
bottom: 20px;
text-align: center;
.vis-data-axis .vis-y-axis.vis-title {
position: absolute;
color: #4d4d4d;
white-space: nowrap;
bottom: 20px;
text-align: center;
}
.vis.timeline .dataaxis .yAxis.title.measure{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
visibility: hidden;
width: auto;
.vis-data-axis .vis-y-axis.vis-title.vis-measure {
padding: 0;
margin: 0;
visibility: hidden;
width: auto;
}
.vis.timeline .dataaxis .yAxis.title.left {
bottom: 0px;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
.vis-data-axis .vis-y-axis.vis-title.vis-left {
bottom: 0;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.vis.timeline .dataaxis .yAxis.title.right {
bottom: 0px;
-webkit-transform-origin: right bottom;
-moz-transform-origin: right bottom;
-ms-transform-origin: right bottom;
-o-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
.vis-data-axis .vis-y-axis.vis-title.vis-right {
bottom: 0;
-webkit-transform-origin: right bottom;
-moz-transform-origin: right bottom;
-ms-transform-origin: right bottom;
-o-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.vis.timeline .legend {
background-color: rgba(247, 252, 255, 0.65);
padding: 5px;
border-color: #b3b3b3;
border-style:solid;
border-width: 1px;
box-shadow: 2px 2px 10px rgba(154, 154, 154, 0.55);
.vis-legend {
background-color: rgba(247, 252, 255, 0.65);
padding: 5px;
border: 1px solid #b3b3b3;
box-shadow: 2px 2px 10px rgba(154, 154, 154, 0.55);
}
.vis.timeline .legendText {
/*font-size: 10px;*/
white-space: nowrap;
display: inline-block
.vis-legend-text {
/*font-size: 10px;*/
white-space: nowrap;
display: inline-block
}

+ 16
- 16
lib/timeline/component/css/item.css View File

@ -1,5 +1,5 @@
.vis.timeline .item {
.vis-item {
position: absolute;
color: #1A1A1A;
border-color: #97B0F8;
@ -9,7 +9,7 @@
overflow: hidden;
}
.vis.timeline .item.selected {
.vis-item.vis-selected {
border-color: #FFC200;
background-color: #FFF785;
@ -17,25 +17,25 @@
z-index: 2;
}
.vis.timeline .editable .item.selected {
.vis-editable .vis-item.vis-selected {
cursor: move;
}
.vis.timeline .item.point.selected {
.vis-item.vis-point.vis-selected {
background-color: #FFF785;
}
.vis.timeline .item.box {
.vis-item.vis-box {
text-align: center;
border-style: solid;
border-radius: 2px;
}
.vis.timeline .item.point {
.vis-item.vis-point {
background: none;
}
.vis.timeline .item.dot {
.vis-item.vis-dot {
position: absolute;
padding: 0;
border-width: 4px;
@ -43,13 +43,13 @@
border-radius: 4px;
}
.vis.timeline .item.range {
.vis-item.vis-range {
border-style: solid;
border-radius: 2px;
box-sizing: border-box;
}
.vis.timeline .item.background {
.vis-item.background {
border: none;
background-color: rgba(213, 221, 246, 0.4);
box-sizing: border-box;
@ -57,20 +57,20 @@
margin: 0;
}
.vis.timeline .item.range .content {
.vis-item.vis-range .vis-item-content {
position: relative;
display: inline-block;
max-width: 100%;
}
.vis.timeline .item.background .content {
.vis-item.background .vis-item-content {
position: absolute;
display: inline-block;
max-width: 100%;
margin: 5px;
}
.vis.timeline .item.line {
.vis-item.vis-line {
padding: 0;
position: absolute;
width: 0;
@ -78,13 +78,13 @@
border-left-style: solid;
}
.vis.timeline .item .content {
.vis-item .vis-item-content {
white-space: nowrap;
box-sizing: border-box;
padding: 5px;
}
.vis.timeline .item .delete {
.vis-item .vis-delete {
background: url('img/timeline/delete.png') no-repeat top center;
position: absolute;
width: 24px;
@ -94,7 +94,7 @@
cursor: pointer;
}
.vis.timeline .item.range .drag-left {
.vis-item.vis-range .vis-drag-left {
position: absolute;
width: 24px;
height: 100%;
@ -104,7 +104,7 @@
cursor: w-resize;
}
.vis.timeline .item.range .drag-right {
.vis-item.vis-range .vis-drag-right {
position: absolute;
width: 24px;
height: 100%;

+ 6
- 6
lib/timeline/component/css/itemset.css View File

@ -1,5 +1,5 @@
.vis.timeline .itemset {
.vis-itemset {
position: relative;
padding: 0;
margin: 0;
@ -7,15 +7,15 @@
box-sizing: border-box;
}
.vis.timeline .itemset .background,
.vis.timeline .itemset .foreground {
.vis-itemset .vis-background,
.vis-itemset .vis-foreground {
position: absolute;
width: 100%;
height: 100%;
overflow: visible;
}
.vis.timeline .axis {
.vis-axis {
position: absolute;
width: 100%;
height: 0;
@ -23,12 +23,12 @@
z-index: 1;
}
.vis.timeline .foreground .group {
.vis-foreground .vis-group {
position: relative;
box-sizing: border-box;
border-bottom: 1px solid #bfbfbf;
}
.vis.timeline .foreground .group:last-child {
.vis-foreground .vis-group:last-child {
border-bottom: none;
}

+ 6
- 6
lib/timeline/component/css/labelset.css View File

@ -1,5 +1,5 @@
.vis.timeline .labelset {
.vis-labelset {
position: relative;
overflow: hidden;
@ -7,7 +7,7 @@
box-sizing: border-box;
}
.vis.timeline .labelset .vlabel {
.vis-labelset .vis-label {
position: relative;
left: 0;
top: 0;
@ -17,19 +17,19 @@
box-sizing: border-box;
}
.vis.timeline .labelset .vlabel {
.vis-labelset .vis-label {
border-bottom: 1px solid #bfbfbf;
}
.vis.timeline .labelset .vlabel:last-child {
.vis-labelset .vis-label:last-child {
border-bottom: none;
}
.vis.timeline .labelset .vlabel .inner {
.vis-labelset .vis-label .vis-inner {
display: inline-block;
padding: 5px;
}
.vis.timeline .labelset .vlabel .inner.hidden {
.vis-labelset .vis-label .vis-inner.vis-hidden {
padding: 0;
}

+ 18
- 29
lib/timeline/component/css/panel.css View File

@ -1,16 +1,5 @@
.vis.timeline.root {
position: relative;
border: 1px solid #bfbfbf;
overflow: hidden;
padding: 0;
margin: 0;
box-sizing: border-box;
}
.vis.timeline .vispanel {
.vis-panel {
position: absolute;
padding: 0;
@ -19,53 +8,53 @@
box-sizing: border-box;
}
.vis.timeline .vispanel.center,
.vis.timeline .vispanel.left,
.vis.timeline .vispanel.right,
.vis.timeline .vispanel.top,
.vis.timeline .vispanel.bottom {
.vis-panel.vis-center,
.vis-panel.vis-left,
.vis-panel.vis-right,
.vis-panel.vis-top,
.vis-panel.vis-bottom {
border: 1px #bfbfbf;
}
.vis.timeline .vispanel.center,
.vis.timeline .vispanel.left,
.vis.timeline .vispanel.right {
.vis-panel.vis-center,
.vis-panel.vis-left,
.vis-panel.vis-right {
border-top-style: solid;
border-bottom-style: solid;
overflow: hidden;
}
.vis.timeline .vispanel.center,
.vis.timeline .vispanel.top,
.vis.timeline .vispanel.bottom {
.vis-panel.vis-center,
.vis-panel.vis-top,
.vis-panel.vis-bottom {
border-left-style: solid;
border-right-style: solid;
}
.vis.timeline .background {
.vis-background {
overflow: hidden;
}
.vis.timeline .vispanel > .content {
.vis-panel > .vis-content {
position: relative;
}
.vis.timeline .vispanel .shadow {
.vis-panel .vis-shadow {
position: absolute;
width: 100%;
height: 1px;
box-shadow: 0 0 10px rgba(0,0,0,0.8);
/* TODO: find a nice way to ensure shadows are drawn on top of items
/* TODO: find a nice way to ensure vis-shadows are drawn on top of items
z-index: 1;
*/
}
.vis.timeline .vispanel .shadow.top {
.vis-panel .vis-shadow.vis-top {
top: -1px;
left: 0;
}
.vis.timeline .vispanel .shadow.bottom {
.vis-panel .vis-shadow.vis-bottom {
bottom: -1px;
left: 0;
}

+ 16
- 16
lib/timeline/component/css/pathStyles.css View File

@ -1,91 +1,91 @@
.vis.timeline .graphGroup0 {
.vis-graph-group0 {
fill:#4f81bd;
fill-opacity:0;
stroke-width:2px;
stroke: #4f81bd;
}
.vis.timeline .graphGroup1 {
.vis-graph-group1 {
fill:#f79646;
fill-opacity:0;
stroke-width:2px;
stroke: #f79646;
}
.vis.timeline .graphGroup2 {
.vis-graph-group2 {
fill: #8c51cf;
fill-opacity:0;
stroke-width:2px;
stroke: #8c51cf;
}
.vis.timeline .graphGroup3 {
.vis-graph-group3 {
fill: #75c841;
fill-opacity:0;
stroke-width:2px;
stroke: #75c841;
}
.vis.timeline .graphGroup4 {
.vis-graph-group4 {
fill: #ff0100;
fill-opacity:0;
stroke-width:2px;
stroke: #ff0100;
}
.vis.timeline .graphGroup5 {
.vis-graph-group5 {
fill: #37d8e6;
fill-opacity:0;
stroke-width:2px;
stroke: #37d8e6;
}
.vis.timeline .graphGroup6 {
.vis-graph-group6 {
fill: #042662;
fill-opacity:0;
stroke-width:2px;
stroke: #042662;
}
.vis.timeline .graphGroup7 {
.vis-graph-group7 {
fill:#00ff26;
fill-opacity:0;
stroke-width:2px;
stroke: #00ff26;
}
.vis.timeline .graphGroup8 {
.vis-graph-group8 {
fill:#ff00ff;
fill-opacity:0;
stroke-width:2px;
stroke: #ff00ff;
}
.vis.timeline .graphGroup9 {
.vis-graph-group9 {
fill: #8f3938;
fill-opacity:0;
stroke-width:2px;
stroke: #8f3938;
}
.vis.timeline .fill {
.vis-fill {
fill-opacity:0.1;
stroke: none;
}
.vis.timeline .bar {
.vis-bar {
fill-opacity:0.5;
stroke-width:1px;
}
.vis.timeline .point {
.vis-point {
stroke-width:2px;
fill-opacity:1.0;
}
.vis.timeline .legendBackground {
.vis-legend-background {
stroke-width:1px;
fill-opacity:0.9;
fill: #ffffff;
@ -93,14 +93,14 @@
}
.vis.timeline .outline {
.vis-outline {
stroke-width:1px;
fill-opacity:1;
fill: #ffffff;
stroke: #e5e5e5;
}
.vis.timeline .iconFill {
.vis-icon-fill {
fill-opacity:0.3;
stroke: none;
}

+ 8
- 8
lib/timeline/component/css/timeaxis.css View File

@ -1,15 +1,15 @@
.vis.timeline .timeaxis {
.vis-time-axis {
position: relative;
overflow: hidden;
}
.vis.timeline .timeaxis.foreground {
.vis-time-axis.vis-foreground {
top: 0;
left: 0;
width: 100%;
}
.vis.timeline .timeaxis.background {
.vis-time-axis.vis-background {
position: absolute;
top: 0;
left: 0;
@ -17,14 +17,14 @@
height: 100%;
}
.vis.timeline .timeaxis .text {
.vis-time-axis .vis-text {
position: absolute;
color: #4d4d4d;
padding: 3px;
white-space: nowrap;
}
.vis.timeline .timeaxis .text.measure {
.vis-time-axis .vis-text.vis-measure {
position: absolute;
padding-left: 0;
padding-right: 0;
@ -33,15 +33,15 @@
visibility: hidden;
}
.vis.timeline .timeaxis .grid.vertical {
.vis-time-axis .vis-grid.vis-vertical {
position: absolute;
border-left: 1px solid;
}
.vis.timeline .timeaxis .grid.minor {
.vis-time-axis .vis-grid.vis-minor {
border-color: #e5e5e5;
}
.vis.timeline .timeaxis .grid.major {
.vis-time-axis .vis-grid.vis-major {
border-color: #bfbfbf;
}

+ 10
- 1
lib/timeline/component/css/timeline.css View File

@ -1,2 +1,11 @@
.vis.timeline {
.vis-timeline {
position: relative;
border: 1px solid #bfbfbf;
overflow: hidden;
padding: 0;
margin: 0;
box-sizing: border-box;
}

+ 1
- 4
lib/timeline/component/graph2d_types/bar.js View File

@ -1,6 +1,3 @@
/**
* Created by Alex on 11/11/2014.
*/
var DOMutil = require('../../../DOMutil');
var Points = require('./points');
@ -112,7 +109,7 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) {
else if (group.options.barChart.align == 'right') {drawData.offset += 0.5*drawData.width;}
}
}
DOMutil.drawBar(combinedData[i].x + drawData.offset, combinedData[i].y - heightOffset, drawData.width, group.zeroPosition - combinedData[i].y, group.className + ' bar', framework.svgElements, framework.svg);
DOMutil.drawBar(combinedData[i].x + drawData.offset, combinedData[i].y - heightOffset, drawData.width, group.zeroPosition - combinedData[i].y, group.className + ' vis-bar', framework.svgElements, framework.svg);
// draw points
if (group.options.drawPoints.enabled == true) {
Points.draw([combinedData[i]], group, framework, drawData.offset);

+ 4
- 7
lib/timeline/component/graph2d_types/line.js View File

@ -1,6 +1,3 @@
/**
* Created by Alex on 11/11/2014.
*/
var DOMutil = require('../../../DOMutil');
var Points = require('./points');
@ -34,7 +31,7 @@ Line.prototype.draw = function (dataset, group, framework) {
path = DOMutil.getSVGElement('path', framework.svgElements, framework.svg);
path.setAttributeNS(null, "class", group.className);
if(group.style !== undefined) {
path.setAttributeNS(null, "style", group.style);
path.setAttributeNS(null, "style", 'vis-' + group.style);
}
// construct path from dataset
@ -55,11 +52,11 @@ Line.prototype.draw = function (dataset, group, framework) {
else {
dFill = 'M' + dataset[0].x + ',' + svgHeight + ' ' + d + 'L' + dataset[dataset.length - 1].x + ',' + svgHeight;
}
fillPath.setAttributeNS(null, "class", group.className + " fill");
fillPath.setAttributeNS(null, 'class', group.className + ' vis-fill');
if(group.options.shaded.style !== undefined) {
fillPath.setAttributeNS(null, "style", group.options.shaded.style);
fillPath.setAttributeNS(null, 'style', group.options.shaded.style);
}
fillPath.setAttributeNS(null, "d", dFill);
fillPath.setAttributeNS(null, 'd', dFill);
}
// copy properties to path for drawing.
path.setAttributeNS(null, 'd', 'M' + d);

Some files were not shown because too many files changed in this diff

Loading…
Cancel
Save