added images with borders and updated the manipulation css

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?

dist/vis.js

@@ -5,7 +5,7 @@
  * A dynamic, browser-based visualization library.
  *
  * @version 4.8.3-SNAPSHOT
- * @date    2015-09-18
+ * @date    2015-09-21
  *
  * @license
  * Copyright (C) 2011-2015 Almende B.V, http://almende.com
@@ -27792,7 +27792,8 @@ return /******/ (function(modules) { // webpackBootstrap
         shapeProperties: {
           borderDashes: false, // only for borders
           borderRadius: 6, // only for box shape
-          useImageSize: false // only for image and circularImage shapes
+          useImageSize: false, // only for image and circularImage shapes
+          useBorderWithImage: false // only for image shape
         },
         size: 25,
         title: undefined,
@@ -30205,6 +30206,38 @@ return /******/ (function(modules) { // webpackBootstrap
         this.left = x - this.width / 2;
         this.top = y - this.height / 2;
 
+        if (this.options.shapeProperties.useBorderWithImage === true) {
+          var borderWidth = this.options.borderWidth;
+
+          var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
+
+          ctx.beginPath();
+
+          // setup the line properties.
+          ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;
+          ctx.lineWidth = selected ? selectionLineWidth : borderWidth;
+          ctx.lineWidth /= this.body.view.scale;
+          ctx.lineWidth = Math.min(this.width, ctx.lineWidth);
+
+          // set a fillstyle
+          ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
+
+          // draw a rectangle to form the border around. This rectangle is filled so the opacity of a picture (in future vis releases?) can be used to tint the image
+          ctx.rect(this.left - 0.5 * ctx.lineWidth, this.top - 0.5 * ctx.lineWidth, this.width + ctx.lineWidth, this.height + ctx.lineWidth);
+          ctx.fill();
+
+          //draw dashed border if enabled, save and restore is required for firefox not to crash on unix.
+          ctx.save();
+          this.enableBorderDashes(ctx);
+          //draw the border
+          ctx.stroke();
+          //disable dashed border for other elements
+          this.disableBorderDashes(ctx);
+          ctx.restore();
+
+          ctx.closePath();
+        }
+
         this._drawImageAtPosition(ctx);
 
         this._drawImageLabel(ctx, x, y, selected || hover);
@@ -41188,6 +41221,7 @@ return /******/ (function(modules) { // webpackBootstrap
         borderDashes: { boolean: boolean, array: array },
         borderRadius: { number: number },
         useImageSize: { boolean: boolean },
+        useBorderWithImage: { boolean: boolean },
         __type__: { object: object }
       },
       size: { number: number },

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>

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>

lib/network/css/network-manipulation.css

@@ -12,17 +12,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;
 }
 
@@ -53,8 +54,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;
@@ -63,8 +63,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;
@@ -130,11 +130,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?

lib/network/modules/NodesHandler.js

@@ -95,7 +95,8 @@ class NodesHandler {
       shapeProperties: {
         borderDashes: false, // only for borders
         borderRadius: 6,     // only for box shape
-        useImageSize: false  // only for image and circularImage shapes
+        useImageSize: false,  // only for image and circularImage shapes
+        useBorderWithImage: false  // only for image shape
       },
       size: 25,
       title: undefined,

lib/network/modules/components/nodes/shapes/Image.js

@@ -17,6 +17,41 @@ class Image extends CircleImageBase {
     this.left = x - this.width / 2;
     this.top = y - this.height / 2;
 
+    if (this.options.shapeProperties.useBorderWithImage === true) {
+      let borderWidth = this.options.borderWidth;
+
+      let selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
+
+      ctx.beginPath();
+
+      // setup the line properties.
+      ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;
+      ctx.lineWidth = (selected ? selectionLineWidth : borderWidth);
+      ctx.lineWidth /= this.body.view.scale;
+      ctx.lineWidth = Math.min(this.width, ctx.lineWidth);
+
+      // set a fillstyle
+      ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
+
+      // draw a rectangle to form the border around. This rectangle is filled so the opacity of a picture (in future vis releases?) can be used to tint the image
+      ctx.rect(this.left - 0.5 * ctx.lineWidth,
+        this.top - 0.5 * ctx.lineWidth,
+        this.width + ctx.lineWidth,
+        this.height + ctx.lineWidth);
+      ctx.fill();
+
+      //draw dashed border if enabled, save and restore is required for firefox not to crash on unix.
+      ctx.save();
+      this.enableBorderDashes(ctx);
+      //draw the border
+      ctx.stroke();
+      //disable dashed border for other elements
+      this.disableBorderDashes(ctx);
+      ctx.restore();
+
+      ctx.closePath();
+    }
+
     this._drawImageAtPosition(ctx);
 
     this._drawImageLabel(ctx, x, y, selected || hover);

lib/network/options.js

@@ -214,6 +214,7 @@ let allOptions = {
       borderDashes: { boolean, array },
       borderRadius: { number },
       useImageSize: { boolean },
+      useBorderWithImage: { boolean },
       __type__: { object }
     },
     size: { number },

test/networkTest.html

@@ -19,129 +19,42 @@
 <p>
     Create a simple network with some nodes and edges.
 </p>
-<div id="tools"><button onclick="addNodeFunc();">Add node</button></div>
+
 <div id="mynetwork"></div>
 
 <script type="text/javascript">
     // create an array with nodes
-    var network = null;
-    var nodes = null;
-    var edges = null;
-    var _counter = 0;
-
-    var initTest = function() {
-        console.log('initialized...');
-
-        var test = document.getElementById('mynetwork');
-        nodes = new vis.DataSet([
-            {id: 1, label: 'Node 1'},
-            {id: 2, label: 'Node 2'},
-            {id: 3, label: 'Node 3'},
-            {id: 4, label: 'Node 4'},
-            {id: 5, label: 'Node 5'}
-        ]);
-
-        // create an array with edges
-        edges = new vis.DataSet([
-            {from: 1, to: 3},
-            {from: 1, to: 2},
-            {from: 2, to: 4},
-            {from: 2, to: 5}
-        ]);
-
-        var data = {
-            nodes: nodes,
-            edges: edges
-        };
-
-        var config = {
-            locale: 'pl',
-            edges: {
-                labelHighlightBold: false,
-                smooth: {type: 'horizontal'},
-                arrows: {
-                    to: {enabled: true, scaleFactor: 0.5}
-                },
-                font: {
-                    color: 'black',
-                    strokeColor: 'white',
-                    size: 11,
-                    face: 'tahoma',
-                    strokeWidth: 2,
-                    align: 'top'
-                },
-                color: {
-                    highlight: '#EDB100'
-                }
-            },
-            nodes: {
-                borderWidth: 1,
-                shape: 'box',
-                shapeProperties: {borderRadius: 3},
-                color: {
-                    border: '#C10600',
-                    background: '#600300',
-                    highlight: {
-                        border: '#EDB100',
-                        background: '#A57400'
-                    }
-                },
-                font: '11px tahoma white',
-                scaling: {
-                    min: 2,
-                    max: 1,
-                    label: {enabled: false}
-                }
-            },
-            manipulation: {
-                enabled: false,
-                initiallyActive: false,
-                deleteEdge: false,
-                controlNodeStyle: {
-                    fixed: true,
-                    color: {
-                        border: '#000C7C',
-                        background: '#7280FF'
-                    }
-                }
-            },
-            interaction: {
-                zoomView: false,
-                selectConnectedEdges: false
-            },
-            physics: {
-                enabled: false, //propably this is problem, on true is ok o.o
-                adaptiveTimestep: false,
-                stabilization: {
-                    enabled: true,
-                    updateInterval: 10
-                },
-                barnesHut: {
-                    gravitationalConstant: -20000,
-                    centralGravity: 0.25,
-                    springLength: 50
-                }
-            }
-        };
-
-        network = new vis.Network(test, data, config);
-        _nodes = new vis.DataSet();
-        _triples = new vis.DataSet();
+    var nodes = new vis.DataSet([
+        {id: 1, label: 'Node 1'},
+        {id: 2, label: 'Node 2'},
+        {id: 3, label: 'Node 3'},
+        {id: 4, label: 'Node 4'},
+        {id: 5, label: 'Node 5'}
+    ]);
+
+    // create an array with edges
+    var edges = new vis.DataSet([
+        {from: 1, to: 3},
+        {from: 1, to: 2},
+        {from: 2, to: 4},
+        {from: 2, to: 5}
+    ]);
+
+    // create a network
+    var container = document.getElementById('mynetwork');
+    var data = {
+        nodes: nodes,
+        edges: edges
     };
-
-    var addNodeFunc = function() {
-        var pos = network.getViewPosition();
-        console.log(pos);
-
-        nodes.add(
-                {
-                    x: pos.x,
-                    y: pos.y
-                });
-    };
-
-    initTest()
+    var options = {manipulation:{
+        initiallyActive:true,
+        addNode: false,
+//        addEdge: false
+//        editNode: true
+    }};
+    var network = new vis.Network(container, data, options);
 </script>
 
+<script src="../googleAnalytics.js"></script>
 </body>
 </html>