Network: Fix handling of multi-fonts

lib/network/modules/EdgesHandler.js

@@ -1,9 +1,7 @@
 var util = require("../../util");
 var DataSet = require('../../DataSet');
 var DataView = require('../../DataView');
-
 var Edge = require("./components/Edge").default;
-var Label = require("./components/shared/Label").default;
 
 /**
  * Handler for Edges
@@ -31,7 +29,7 @@ class EdgesHandler {
     this.options = {};
     this.defaultOptions = {
       arrows: {
-        to:     {enabled: false, scaleFactor:1, type: 'arrow'}, // boolean / {arrowScaleFactor:1} / {enabled: false, arrowScaleFactor:1}
+        to:     {enabled: false, scaleFactor:1, type: 'arrow'},// boolean / {arrowScaleFactor:1} / {enabled: false, arrowScaleFactor:1}
         middle: {enabled: false, scaleFactor:1, type: 'arrow'},
         from:   {enabled: false, scaleFactor:1, type: 'arrow'}
       },
@@ -193,7 +191,6 @@ class EdgesHandler {
    * @param {Object} options
    */
   setOptions(options) {
-    this.edgeOptions = options;
     if (options !== undefined) {
       // use the parser from the Edge class to fill in all shorthand notations
       Edge.parseOptions(this.options, options, true, this.defaultOptions, true);
@@ -210,8 +207,6 @@ class EdgesHandler {
 
       // update fonts in all edges
       if (options.font !== undefined) {
-        // use the parser from the Label class to fill in all shorthand notations
-        Label.parseOptions(this.options.font, options);
         for (let edgeId in this.body.edges) {
           if (this.body.edges.hasOwnProperty(edgeId)) {
             this.body.edges[edgeId].updateLabelModule();
@@ -383,17 +378,7 @@ class EdgesHandler {
    * @returns {Edge}
    */
   create(properties) {
-    // It is not at all clear why all these separate options should be passed:
-    //
-    // - this.edgeOptions is set in setOptions()
-    //   the value of which is also added to this.options with parseOptions() 
-    // - this.defaultOptions has been added to this.options with util.extend() in ctor
-    //
-    // So, in theory, this.options should be enough.
-    // The only reason I can think of for this, is that precedence is important.
-    // TODO: make unit tests for this, to check if edgeOptions and defaultOptions are redundant
-    //
-    return new Edge(properties, this.body, this.options, this.defaultOptions, this.edgeOptions)
+    return new Edge(properties, this.body, this.options, this.defaultOptions)
   }
 
   /**

lib/network/modules/Groups.js

@@ -75,14 +75,17 @@ class Groups {
   }
 
   /**
-   * get group options of a groupname. If groupname is not found, a new group
-   * is added.
-   * @param {*} groupname        Can be a number, string, Date, etc.
-   * @return {Object} group      The created group, containing all group options
+   * Get group options of a groupname.
+   * If groupname is not found, a new group may be created.
+   *
+   * @param {*}       groupname     Can be a number, string, Date, etc.
+   * @param {boolean} [shouldCreate=true] If true, create a new group
+   * @return {Object} The found or created group
    */
-  get(groupname) {
+  get(groupname, shouldCreate = true) {
     let group = this.groups[groupname];
-    if (group === undefined) {
+
+    if (group === undefined && shouldCreate) {
       if (this.options.useDefaultGroups === false && this.groupsArray.length > 0) {
         // create new group
         let index = this.groupIndex % this.groupsArray.length;

lib/network/modules/NodesHandler.js

@@ -1,9 +1,8 @@
 let util = require("../../util");
 let DataSet = require('../../DataSet');
 let DataView = require('../../DataView');
-
 var Node = require("./components/Node").default;
-var Label = require("./components/shared/Label").default;
+
 
 /**
  * Handler for Nodes
@@ -30,7 +29,6 @@ class NodesHandler {
       remove: (event, params) => { this.remove(params.items); }
     };
 
-    this.options = {};
     this.defaultOptions = {
       borderWidth: 1,
       borderWidthSelected: 2,
@@ -144,7 +142,7 @@ class NodesHandler {
       throw 'Internal error: mass in defaultOptions of NodesHandler may not be zero or negative';
     }
 
-    util.extend(this.options, this.defaultOptions);
+    this.options = util.bridgeObject(this.defaultOptions);
 
     this.bindEventListeners();
   }
@@ -174,7 +172,6 @@ class NodesHandler {
    * @param {Object} options
    */
   setOptions(options) {
-    this.nodeOptions = options;
     if (options !== undefined) {
       Node.parseOptions(this.options, options);
 
@@ -189,7 +186,6 @@ class NodesHandler {
 
       // update the font 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();
@@ -359,7 +355,7 @@ class NodesHandler {
    * @returns {*}
    */
   create(properties, constructorClass = Node) {
-    return new constructorClass(properties, this.body, this.images, this.groups, this.options, this.defaultOptions, this.nodeOptions)
+    return new constructorClass(properties, this.body, this.images, this.groups, this.options, this.defaultOptions)
   }
 
 

lib/network/modules/components/Edge.js

@@ -16,21 +16,18 @@ class Edge {
    * @param {Object} body           shared state from Network instance
    * @param {Object} globalOptions  options from the EdgesHandler instance
    * @param {Object} defaultOptions default options from the EdgeHandler instance. Value and reference are constant
-   * @param {Object} edgeOptions    option values specific for edges.
    */
-  constructor(options, body, globalOptions, defaultOptions, edgeOptions) {
+  constructor(options, body, globalOptions, defaultOptions) {
     if (body === undefined) {
       throw new Error("No body provided");
     }
 
     // Since globalOptions is constant in values as well as reference,
     // Following needs to be done only once.
 
-
     this.options = util.bridgeObject(globalOptions);
     this.globalOptions = globalOptions;
     this.defaultOptions = defaultOptions;
-    this.edgeOptions = edgeOptions;
     this.body = body;
 
     // initialize variables
@@ -84,12 +81,11 @@ class Edge {
       options.value = parseFloat(options.value);
     }
 
-    let pile = [options, this.options, this.edgeOptions, this.defaultOptions];
+    let pile = [options, this.options, this.defaultOptions];
     this.chooser = ComponentUtil.choosify('edge', pile);
 
     // update label Module
     this.updateLabelModule(options);
-    this.labelModule.propagateFonts(this.edgeOptions, options, this.defaultOptions);
 
     let dataChanged = this.updateEdgeType();
 
@@ -134,7 +130,9 @@ class Edge {
       'to',
       'title',
       'value',
-      'width'
+      'width',
+      'font',
+      'chosen'
     ];
 
     // only deep extend the items in the field array. These do not have shorthand.
@@ -228,11 +226,7 @@ class Edge {
       parentOptions.color = util.bridgeObject(globalOptions.color); // set the object back to the global options
     }
 
-    // handle the font settings
-    if (newOptions.font !== undefined && newOptions.font !== null) {
-      Label.parseOptions(parentOptions.font, newOptions);
-    }
-    else if (allowDeletion === true && newOptions.font === null) {
+    if (allowDeletion === true && newOptions.font === null) {
       parentOptions.font = util.bridgeObject(globalOptions.font); // set the object back to the global options
     }
   }
@@ -321,7 +315,13 @@ class Edge {
    * @param {Object} options
    */
   updateLabelModule(options) {
-    let pile = [options, this.edgeOptions, this.defaultOptions];
+    let pile = [
+      options,
+      this.options,
+      this.globalOptions,  // Currently set global edge options
+      this.defaultOptions
+    ];
+
     this.labelModule.update(this.options, pile);
 
     if (this.labelModule.baseSize !== undefined) {

lib/network/modules/components/Node.js

@@ -32,29 +32,22 @@ class Node {
    *                              {string} label  Text label for the node
    *                              {number} x      Horizontal position of the node
    *                              {number} y      Vertical position of the node
-   *                              {string} shape  Node shape, available:
-   *                                              "database", "circle", "ellipse",
-   *                                              "box", "image", "text", "dot",
-   *                                              "star", "triangle", "triangleDown",
-   *                                              "square", "icon"
+   *                              {string} shape  Node shape
    *                              {string} image  An image url
-   *                              {string} title  An title text, can be HTML
+   *                              {string} title  A title text, can be HTML
    *                              {anytype} group A group name or number
-   * @param {Object} body
-   * @param {Network.Images} imagelist    A list with images. Only needed
-   *                                      when the node has an image
-   * @param {Groups} grouplist            A list with groups. Needed for
-   *                                      retrieving group options
-   * @param {Object} globalOptions        An object with default values for
-   *                                      example for the color
-   * @param {Object} defaultOptions
-   * @param {Object} nodeOptions
+   *
+   * @param {Object} body               Shared state of current network instance
+   * @param {Network.Images} imagelist  A list with images. Only needed when the node has an image
+   * @param {Groups} grouplist          A list with groups. Needed for retrieving group options
+   * @param {Object} globalOptions      Current global node options; these serve as defaults for the node instance
+   * @param {Object} defaultOptions     Global default options for nodes; note that this is also the prototype
+   *                                    for parameter `globalOptions`.
    */
-  constructor(options, body, imagelist, grouplist, globalOptions, defaultOptions, nodeOptions) {
+  constructor(options, body, imagelist, grouplist, globalOptions, defaultOptions) {
     this.options = util.bridgeObject(globalOptions);
     this.globalOptions = globalOptions;
     this.defaultOptions = defaultOptions;
-    this.nodeOptions = nodeOptions;
     this.body = body;
 
     this.edges = []; // all edges connected to this node
@@ -136,24 +129,15 @@ class Node {
     if (options.size !== undefined)  {this.baseSize = options.size;}
     if (options.value !== undefined) {options.value = parseFloat(options.value);}
 
-    // copy group options
-    if (typeof options.group === 'number' || (typeof options.group === 'string' && options.group != '')) {
-      var groupObj = this.grouplist.get(options.group);
-      util.deepExtend(this.options, groupObj);
-      // 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);
-    }
-
     // this transforms all shorthands into fully defined options
-    Node.parseOptions(this.options, options, true, this.globalOptions);
+    Node.parseOptions(this.options, options, true, this.globalOptions, this.grouplist);
 
     let pile = [options, this.options, this.defaultOptions];
     this.chooser = ComponentUtil.choosify('node', pile);
 
     this._load_images();
     this.updateLabelModule(options);
     this.updateShape(currentShape);
-    this.labelModule.propagateFonts(this.nodeOptions, options, this.defaultOptions);
 
     return (options.hidden !== undefined || options.physics !== undefined);
   }
@@ -199,6 +183,43 @@ class Node {
   }
 
 
+  /**
+   * Copy group option values into the node options.
+   *
+   * The group options override the global node options, so the copy of group options
+   *  must happen *after* the global node options have been set.
+   *
+   * This method must also be called also if the global node options have changed and the group options did not.
+   *
+   * @param {Object} parentOptions
+   * @param {Object} newOptions  new values for the options, currently only passed in for check
+   * @param {Object} groupList
+   */
+  static updateGroupOptions(parentOptions, newOptions, groupList) {
+    if (groupList === undefined) return;  // No groups, nothing to do
+
+    var group = parentOptions.group;
+
+    // paranoia: the selected group is already merged into node options, check.
+    if (newOptions !== undefined && newOptions.group !== undefined && group !== newOptions.group) {
+      throw new Error("updateGroupOptions: group values in options don't match.");
+    }
+
+    var hasGroup = (typeof group === 'number' || (typeof group === 'string' && group != ''));
+    if (!hasGroup) return;  // current node has no group, no need to merge
+
+    var groupObj = groupList.get(group);
+
+    // Skip merging of group font options into parent; these are required to be distinct for labels
+    // TODO: It might not be a good idea either to merge the rest of the options, investigate this. 
+    util.selectiveNotDeepExtend(['font'], parentOptions, groupObj);
+
+    // the color object needs to be completely defined.
+    // Since groups can partially overwrite the colors, we parse it again, just in case.
+    parentOptions.color = util.parseColor(parentOptions.color);
+  }
+
+
   /**
    * 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.
@@ -207,12 +228,13 @@ class Node {
    * @param {Object} newOptions
    * @param {boolean} [allowDeletion=false]
    * @param {Object} [globalOptions={}]
+   * @param {Object} [groupList]
    * @static
    */
-  static parseOptions(parentOptions, newOptions, allowDeletion = false, globalOptions = {}) {
+  static parseOptions(parentOptions, newOptions, allowDeletion = false, globalOptions = {}, groupList) {
+
     var fields = [
       'color',
-      'font',
       'fixed',
       'shadow'
     ];
@@ -248,14 +270,12 @@ class Node {
       }
     }
 
-    // handle the font options
-    if (newOptions.font !== undefined && newOptions.font !== null) {
-      Label.parseOptions(parentOptions.font, newOptions);
-    }
-    else if (allowDeletion === true && newOptions.font === null) {
+    if (allowDeletion === true && newOptions.font === null) {
       parentOptions.font =  util.bridgeObject(globalOptions.font); // set the object back to the global options
     }
 
+    Node.updateGroupOptions(parentOptions, newOptions, groupList);
+
     // handle the scaling options, specifically the label part
     if (newOptions.scaling !== undefined) {
       util.mergeOptions(parentOptions.scaling, newOptions.scaling, 'label', globalOptions.scaling);
@@ -319,7 +339,27 @@ class Node {
     if (this.options.label === undefined || this.options.label === null) {
       this.options.label = '';
     }
-    let pile = [options, this.nodeOptions, this.defaultOptions];
+
+    Node.updateGroupOptions(this.options, options, this.grouplist);
+
+    //
+    // Note:The prototype chain for this.options is:
+    //
+    // this.options ->    NodesHandler.options    -> NodesHandler.defaultOptions
+    //                 (also: this.globalOptions)
+    //
+    // Note that the prototypes are mentioned explicitly in the pile list below;
+    // WE DON'T WANT THE ORDER OF THE PROTOTYPES!!!! At least, not for font handling of labels.
+    // This is a good indication that the prototype usage of options is deficient.
+    //
+    var currentGroup = this.grouplist.get(this.options.group, false);
+    let pile = [
+      options,             // new options
+      this.options,        // current node options, see comment above for prototype
+      currentGroup,        // group options, if any
+      this.globalOptions,  // Currently set global node options
+      this.defaultOptions  // Default global node options
+    ];
     this.labelModule.update(this.options, pile);
 
     if (this.labelModule.baseSize !== undefined) {

lib/network/modules/components/nodes/Cluster.js

@@ -14,9 +14,10 @@ class Cluster extends Node {
    * @param {Array.<HTMLImageElement>}imagelist
    * @param {Array} grouplist
    * @param {Object} globalOptions
+   * @param {Object} defaultOptions     Global default options for nodes
    */
-  constructor(options, body, imagelist, grouplist, globalOptions) {
-    super(options, body, imagelist, grouplist, globalOptions);
+  constructor(options, body, imagelist, grouplist, globalOptions, defaultOptions) {
+    super(options, body, imagelist, grouplist, globalOptions, defaultOptions);
 
     this.isCluster = true;
     this.containedNodes = {};