Merge remote-tracking branch 'origin/gh-pages' into gh-pages

Conflicts:
	images/exampleScreenshots/network/nodeStyles/imagesWithBorders.png

dist/vis.css

@@ -903,17 +903,18 @@ div.vis-network div.vis-manipulation {
   background: linear-gradient(to bottom,  #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */
 
+  padding-top:4px;
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
-  height: 30px;
+  height: 28px;
 }
 
 div.vis-network div.vis-edit-mode {
   position:absolute;
   left: 0;
-  top: 15px;
+  top: 5px;
   height: 30px;
 }
 
@@ -944,8 +945,7 @@ div.vis-network div.vis-close:hover {
 
 div.vis-network div.vis-manipulation div.vis-button,
 div.vis-network div.vis-edit-mode div.vis-button {
-  position:relative;
-  top:-7px;
+  float:left;
   font-family: verdana;
   font-size: 12px;
   -moz-border-radius: 15px;
@@ -954,8 +954,8 @@ div.vis-network div.vis-edit-mode div.vis-button {
   background-position: 0px 0px;
   background-repeat:no-repeat;
   height:24px;
-  margin: 0px 0px 0px 10px;
-  vertical-align:middle;
+  margin-left: 10px;
+  /*vertical-align:middle;*/
   cursor: pointer;
   padding: 0px 8px 0px 8px;
   -webkit-touch-callout: none;
@@ -1021,11 +1021,12 @@ div.vis-network div.vis-edit-mode div.vis-label {
   line-height: 25px;
 }
 div.vis-network div.vis-manipulation div.vis-separator-line {
+  float:left;
   display:inline-block;
   width:1px;
-  height:20px;
+  height:21px;
   background-color: #bdbdbd;
-  margin: 5px 7px 0 15px;
+  margin: 0px 7px 0 15px; /*top right bottom left*/
 }
 
 /* TODO: is this redundant?

docs/network/index.html

@@ -964,8 +964,8 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
                 <td colspan="2"><span parent="clusterByHubsize" class="right-caret" id="method_getViewPosition"></span> getViewPosition()</td>
             </tr>
             <tr class="hidden" parent="clusterByHubsize">
-                <td class="midMethods">Returns: Number</td>
-                <td>Returns the current central focus point of the view.</td>
+                <td class="midMethods">Returns: Object</td>
+                <td>Returns the current central focus point of the view in the form: <code>{ x: {Number}, y: {Number} }</code></td>
             </tr>
 
             <tr class="collapsible toggle" onclick="toggleTable('methodTable','fit', this);">

docs/network/nodes.html

@@ -177,8 +177,10 @@ var options = {
     },
     shape: 'ellipse',
     shapeProperties: {
-      borderDashes: false, // only for shapes with a border
-      borderRadius: 6 // only for box shape
+      borderDashes: false, // only for borders
+      borderRadius: 6,     // only for box shape
+      useImageSize: false,  // only for image and circularImage shapes
+      useBorderWithImage: false  // only for image shape
     }
     size: 25,
     title: undefined,
@@ -644,6 +646,15 @@ mySize = minSize + diff * scale;
                 if this is set to true, the image cannot be scaled with the value option!</i>
             </td>
         </tr>
+        <tr parent="shapeProperties" class="hidden">
+            <td class="indent">shapeProperties.useBorderWithImage</td>
+            <td>Boolean</td>
+            <td><code>false</code></td>
+            <td>This property only applies to the <code>image</code> shape.
+                When true, the color object is used. A rectangle with the background color is
+                drawn behind it and it has a border. This means all border options are taken into account.
+            </td>
+        </tr>
         <tr>
             <td>size</td>
             <td>Number</td>

docs/timeline/index.html

@@ -1196,6 +1196,15 @@ document.getElementById('myTimeline').onclick = function (event) {
       </td>
     </tr>
 
+    <tr>
+      <td>setCustomTimeTitle(title [, id])</td>
+      <td>none</td>
+      <td>Adjust the title attribute of a custom time bar.
+        Parameter <code>title</code> is the string to be set as title. Use empty string to hide the title completely.
+        Parameter <code>id</code> is the id of the custom time bar, and is <code>undefined</code> by default.
+      </td>
+    </tr>
+
     <tr>
       <td>setData({<br>&nbsp;&nbsp;groups: groups,<br>&nbsp;&nbsp;items: items<br>})</td>
       <td>none</td>

examples/network/nodeStyles/imagesWithBorders.html

@@ -0,0 +1,105 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Images With Borders</title>
+
+  <style type="text/css">
+    body {
+      font: 10pt arial;
+    }
+    #mynetwork {
+      width: 800px;
+      height: 800px;
+      border: 1px solid lightgray;
+      background-color:#333333;
+    }
+  </style>
+
+  <script type="text/javascript" src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+
+  <script type="text/javascript"> 
+    var DIR = 'img/soft-scraps-icons/';
+
+    var nodes = null;
+    var edges = null;
+    var network = null;
+
+    // Called when the Visualization API is loaded.
+    function draw() {
+      // create people.
+      // value corresponds with the age of the person
+      var DIR = '../img/indonesia/';
+      nodes = [
+        {id: 1,  shape: 'image', image: DIR + '1.png'},
+        {id: 2,  shape: 'image', image: DIR + '2.png'},
+        {id: 3,  shape: 'image', image: DIR + '3.png'},
+        {id: 4,  shape: 'image', image: DIR + '4.png', label:"pictures by this guy!"},
+        {id: 5,  shape: 'image', image: DIR + '5.png'},
+        {id: 6,  shape: 'image', image: DIR + '6.png'},
+        {id: 7,  shape: 'image', image: DIR + '7.png'},
+        {id: 8,  shape: 'image', image: DIR + '8.png'},
+        {id: 9,  shape: 'image', image: DIR + '9.png'},
+        {id: 10, shape: 'image', image: DIR + '10.png'},
+        {id: 11, shape: 'image', image: DIR + '11.png'},
+        {id: 12, shape: 'image', image: DIR + '12.png'},
+        {id: 13, shape: 'image', image: DIR + '13.png'},
+        {id: 14, shape: 'image', image: DIR + '14.png'},
+        {id: 15, shape: 'image', image: DIR + 'missing.png', brokenImage: DIR + 'missingBrokenImage.png', label:"when images\nfail\nto load"},
+        {id: 16, shape: 'image', image: DIR + 'anotherMissing.png', brokenImage: DIR + '9.png', label:"fallback image in action"}
+      ];
+
+      // create connections between people
+      // value corresponds with the amount of contact between two people
+      edges = [
+        {from: 1, to: 2},
+        {from: 2, to: 3},
+        {from: 2, to: 4},
+        {from: 4, to: 5},
+        {from: 4, to: 10},
+        {from: 4, to: 6},
+        {from: 6, to: 7},
+        {from: 7, to: 8},
+        {from: 8, to: 9},
+        {from: 8, to: 10},
+        {from: 10, to: 11},
+        {from: 11, to: 12},
+        {from: 12, to: 13},
+        {from: 13, to: 14},
+        {from: 9, to: 16}
+      ];
+
+      // create a network
+      var container = document.getElementById('mynetwork');
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+      var options = {
+        nodes: {
+          borderWidth:4,
+          size:30,
+	      color: {
+            border: '#406897',
+            background: '#6AAFFF'
+          },
+          font:{color:'#eeeeee'},
+          shapeProperties: {
+            useBorderWithImage:true
+          }
+        },
+        edges: {
+          color: 'lightgray'
+        }
+      };
+      network = new vis.Network(container, data, options);
+    }
+  </script>
+  <script src="../../googleAnalytics.js"></script>
+</head>
+
+<body onload="draw()">
+
+<div id="mynetwork"></div>
+</body>
+</html>

featureRequests.html

@@ -196,6 +196,7 @@ Legend:
 <ul>
     <li class="normal">(<a href="https://github.com/almende/vis/issues/536" target="_blank">536</a>) Implement title support for tooltips. The title could be added to datapoints and shown in the tooltip.</li>
     <li class="normal">(<a href="https://github.com/almende/vis/issues/442" target="_blank">442</a>) Implement touch gestures for camera controls using hammer.js.</li>
+    <li class="normal">(<a href="https://github.com/almende/vis/issues/524" target="_blank">524</a>, <a href="https://github.com/almende/vis/issues/1005" target="_blank">1005</a>) Support for rendering multiple graphs in one Graph3d (possibly with different styles).</li>
 </ul>
 <h3 id="dataset-dataview">DataSet &amp; DataView</h3>
 <ul>

index.html

@@ -28,7 +28,7 @@
 
     <script src="./js/smooth-scroll.min.js"></script>
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.8.2/vis.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.js"></script>
 
     <script language="JavaScript">
         smoothScroll.init();
@@ -36,7 +36,7 @@
         function evalLinks() {
             if (typeof vis === 'undefined') {
                 console.log(document.getElementById("linkStatus"));
-                document.getElementById("linkStatus").innerHTML = "Note: The latest version (4.8.2) is not yet available on cdnjs, <a href='https://cdnjs.com/libraries/vis'>click here</a> to to pick the latest available version.<br />";
+                document.getElementById("linkStatus").innerHTML = "Note: The latest version (4.9.0) is not yet available on cdnjs, <a href='https://cdnjs.com/libraries/vis'>click here</a> to to pick the latest available version.<br />";
                 document.getElementById("cdn_vis").style.color = "rgb(150,150,150)";
                 document.getElementById("cdn_vis_css").style.color = "rgb(150,150,150)";
             }
@@ -210,13 +210,13 @@
                     <pre class="prettyprint">bower install vis</pre>
                     <h3>link from cdnjs.com</h3>
                     <p>
-                        <a id="cdn_vis" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.8.2/vis.min.js" target="_blank">vis.min.js</a> <br>
-                        <a id="cdn_vis_css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.8.2/vis.min.css" target="_blank">vis.min.css</a> <br>
+                        <a id="cdn_vis" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.js" target="_blank">vis.min.js</a> <br>
+                        <a id="cdn_vis_css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.css" target="_blank">vis.min.css</a> <br>
                         <span id="linkStatus"></span>
                     </p>
                     <h3>download</h3>
                     <p>
-                        <a href="download/vis.zip">vis.zip (version <span class="version">4.8.2</span>)</a>
+                        <a href="download/vis.zip">vis.zip (version <span class="version">4.9.0</span>)</a>
                     </p>
                 </div>
             </div>

network_examples.html

@@ -77,6 +77,7 @@
     <a class='exampleLink' href="examples/network/nodeStyles/HTMLInNodes.html">HTML in nodes</a><br />
     <a class='exampleLink' href="examples/network/nodeStyles/icons.html">icons (Fontawesome and Ionicons)</a><br />
     <a class='exampleLink' href="examples/network/nodeStyles/images.html">images</a><br />
+    <a class='exampleLink' href="examples/network/nodeStyles/imagesWithBorders.html">images with borders</a><br />
     <a class='exampleLink' href="examples/network/nodeStyles/circularImages.html">circular images</a><br />
     <a class='exampleLink' href="examples/network/nodeStyles/shadows.html">node shadows</a><br />
     <a class='exampleLink' href="examples/network/nodeStyles/shapes.html">node shapes</a><br />