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

dist/vis.css

@@ -850,7 +850,7 @@ div.vis-network-configuration.button.hover{
     color:#ffffff;
 }
 
-div.vis-network-configuration.entree{
+div.vis-network-configuration.item{
     display:block;
     width:495px;
     height:25px;
@@ -859,19 +859,19 @@ div.vis-network-configuration.entree{
 }
 
 
-div.vis-network-configuration.entree.s2{
+div.vis-network-configuration.item.s2{
     left:10px;
     background-color: #f7f8fa;
     padding-left:5px;
     border-radius:3px;
 }
-div.vis-network-configuration.entree.s3{
+div.vis-network-configuration.item.s3{
     left:20px;
     background-color: #e4e9f0;
     padding-left:5px;
     border-radius:3px;
 }
-div.vis-network-configuration.entree.s4{
+div.vis-network-configuration.item.s4{
     left:30px;
     background-color: #cfd8e6;
     padding-left:5px;

examples/network/01_basic_usage.html

@@ -9,7 +9,6 @@
   <style type="text/css">
     #mynetwork {
       width: 600px;
-      margin:90px;
       height: 400px;
       border: 1px solid lightgray;
     }
@@ -45,7 +44,7 @@
     edges: edges
   };
   var options = {
-    interaction:{navigationButtons:true}
+    configure:'edges'
 //    edges:{
 //      shadow:true,
 //      shape:'dot'

lib/network/css/network-configuration.css

@@ -38,7 +38,7 @@ div.vis-network-configuration.button.hover{
     color:#ffffff;
 }
 
-div.vis-network-configuration.entree{
+div.vis-network-configuration.item{
     display:block;
     width:495px;
     height:25px;
@@ -47,19 +47,19 @@ div.vis-network-configuration.entree{
 }
 
 
-div.vis-network-configuration.entree.s2{
+div.vis-network-configuration.item.s2{
     left:10px;
     background-color: #f7f8fa;
     padding-left:5px;
     border-radius:3px;
 }
-div.vis-network-configuration.entree.s3{
+div.vis-network-configuration.item.s3{
     left:20px;
     background-color: #e4e9f0;
     padding-left:5px;
     border-radius:3px;
 }
-div.vis-network-configuration.entree.s4{
+div.vis-network-configuration.item.s4{
     left:30px;
     background-color: #cfd8e6;
     padding-left:5px;

lib/network/modules/ConfigurationSystem.js

@@ -85,11 +85,7 @@ class ConfigurationSystem {
           color: ['color','#848484'],
           highlight: ['color','#848484'],
           hover: ['color','#848484'],
-          inherit: {
-            enabled: true,
-            source: ['from', 'to'], // from / to
-            useGradients: false
-          },
+          inherit: ['from','to','both',true, false],
           opacity: [1, 0, 1, 0.05]
         },
         dashes: {
@@ -272,7 +268,7 @@ class ConfigurationSystem {
         config = this.actualOptions.configure;
       }
 
-      if (config === false) {
+      if (config !== false) {
         this._create(config);
       }
     }
@@ -679,30 +675,9 @@ class ConfigurationSystem {
       this._makeRange(arr, value, path);
       if (arr[0] !== value) {this.changedOptions.push({path:path, value:value});}
     }
-
-
   }
 
 
-  /**
-   * handle the string type of option.
-   * TODO: Not sure what to do with this
-   * @param optionName
-   * @param string
-   * @param value
-   * @param path
-   * @private
-   */
-  _handleString(string, value, path) {
-    if (string === 'string') {
-
-    }
-    else {
-      //this._makeLabel(optionName, path);
-      //console.log('string', string, value, path);
-    }
-  }
-
 
   /**
    * called to update the network with the new settings.
@@ -717,6 +692,11 @@ class ConfigurationSystem {
 
   _constructOptions(value,path, optionsObj = {}) {
     let pointer = optionsObj;
+
+    // when dropdown boxes can be string or boolean, we typecast it into correct types
+    value = value === 'true'  ? true  : value;
+    value = value === 'false' ? false : value;
+
     for (let i = 0; i < path.length; i++) {
       if (pointer[path[i]] === undefined) {
         pointer[path[i]] = {};

lib/network/modules/EdgesHandler.js

@@ -31,11 +31,7 @@ class EdgesHandler {
         color:'#848484',
         highlight:'#848484',
         hover: '#848484',
-        inherit: {
-          enabled: true,
-          source: 'from', // from / true
-          useGradients: false // release in 4.0
-        },
+        inherit: 'from',
         opacity:1.0
       },
       dashes:{

lib/network/modules/components/Edge.js

@@ -141,20 +141,20 @@ class Edge {
         parentOptions.color.color     = newOptions.color;
         parentOptions.color.highlight = newOptions.color;
         parentOptions.color.hover     = newOptions.color;
-        parentOptions.color.inherit.enabled = false;
+        parentOptions.color.inherit   = false;
       }
       else {
         let colorsDefined = false;
         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 (newOptions.color.inherit   !== undefined) {parentOptions.color.inherit   = newOptions.color.inherit;}
+        if (newOptions.color.opacity   !== undefined) {parentOptions.color.opacity   = Math.min(1,Math.max(0,newOptions.color.opacity));}
 
         if (newOptions.color.inherit === undefined && colorsDefined === true) {
-          parentOptions.color.inherit.enabled = false;
+          parentOptions.color.inherit = false;
         }
       }
-      util.mergeOptions(parentOptions.color, newOptions.color, 'inherit');
     }
   }
 

lib/network/modules/components/edges/util/EdgeBase.js

@@ -249,8 +249,9 @@ class EdgeBase {
   getColor(ctx) {
     let colorOptions = this.options.color;
 
-    if (colorOptions.inherit.enabled === true) {
-      if (colorOptions.inherit.useGradients === true) {
+    if (colorOptions.inherit !== false) {
+      // when this is a loop edge, just use the 'from' method
+      if (colorOptions.inherit === 'both' && this.from.id !== this.to.id) {
         let grd = ctx.createLinearGradient(this.from.x, this.from.y, this.to.x, this.to.y);
         let fromColor, toColor;
         fromColor = this.from.options.color.highlight.border;
@@ -274,7 +275,7 @@ class EdgeBase {
       }
 
       if (this.colorDirty === true) {
-        if (colorOptions.inherit.source === "to") {
+        if (colorOptions.inherit === "to") {
           this.color.highlight = this.to.options.color.highlight.border;
           this.color.hover = this.to.options.color.hover.border;
           this.color.color = util.overrideOpacity(this.to.options.color.border, colorOptions.opacity);