feat(node): add force weight option (#141)

* feat(node): add force weight option This solves issues with Font Awesome 5 which doesn't work unless the weight is bold. Size difference is used to indicate selected status if weight is forced. * chore(examples): add Font Awesome 5 example * chore(docs): add node icon weight docs
visjs · Oct 1, 2019 · bf34d2a · bf34d2a
1 parent 120d543
commit bf34d2a
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 11 deletions.
diff --git a/docs/network/nodes.html b/docs/network/nodes.html
@@ -158,6 +158,7 @@ <h3>Options</h3>
     icon: {
       face: 'FontAwesome',
       code: undefined,
+      weight: undefined,
       size: 50,  //50,
       color:'#2B7CE9'
     },
@@ -721,6 +722,18 @@ <h3>Options</h3>
             <td><code>'#2B7CE9'</code></td>
             <td>The color of the icon.</td>
         </tr>
+        <tr parent="icon" class="hidden">
+            <td class="indent">icon.weight</td>
+            <td>Number or String</td>
+            <td><code>undefined</code></td>
+            <td>
+              This allows for weight to be forced regardless of selection
+              status. For example Font Awesome 5 doesn't work properly unless
+              weight is forced to <code>'bold'</code> or <code>700</code>. If
+              this option is set then selection is indicated by bigger size
+              instead of bold font face.
+            </td>
+        </tr>
         <tr>
             <td>id</td>
             <td>String</td>

diff --git a/examples/network/nodeStyles/icons.html b/examples/network/nodeStyles/icons.html
@@ -11,10 +11,12 @@
   <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
 
   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.1/css/all.css">
   <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
 
   <style>
-    #mynetworkFA,
+    #mynetworkFA4,
+    #mynetworkFA5,
     #mynetworkIO {
       height: 300px;
       width: 700px;
@@ -29,9 +31,9 @@
   <script language="JavaScript">
     function draw() {
       /*
-       * Example for FontAwesome
+       * Example for FontAwesome 4
        */
-      var optionsFA = {
+      var optionsFA4 = {
         groups: {
           usergroups: {
             shape: 'icon',
@@ -55,7 +57,7 @@
       };
 
       // create an array with nodes
-      var nodesFA = [{
+      var nodesFA4 = [{
         id: 1,
         label: 'User 1',
         group: 'users'
@@ -102,13 +104,98 @@
       }];
 
       // create a network
-      var containerFA = document.getElementById('mynetworkFA');
-      var dataFA = {
-        nodes: nodesFA,
+      var containerFA4 = document.getElementById('mynetworkFA4');
+      var dataFA4 = {
+        nodes: nodesFA4,
         edges: edges
       };
 
-      var networkFA = new vis.Network(containerFA, dataFA, optionsFA);
+      var networkFA4 = new vis.Network(containerFA4, dataFA4, optionsFA4);
+
+      /*
+       * Example for FontAwesome 5
+       */
+      var optionsFA5 = {
+        groups: {
+          usergroups: {
+            shape: 'icon',
+            icon: {
+              face: "'Font Awesome 5 Free'",
+              weight: "bold", // Font Awesome 5 doesn't work properly unless bold.
+              code: '\uf0c0',
+              size: 50,
+              color: '#57169a'
+            }
+          },
+          users: {
+            shape: 'icon',
+            icon: {
+              face: "'Font Awesome 5 Free'",
+              weight: "bold", // Font Awesome 5 doesn't work properly unless bold.
+              code: '\uf007',
+              size: 50,
+              color: '#aa00ff'
+            }
+          }
+        }
+      };
+
+      // create an array with nodes
+      var nodesFA5 = [{
+        id: 1,
+        label: 'User 1',
+        group: 'users'
+      }, {
+        id: 2,
+        label: 'User 2',
+        group: 'users'
+      }, {
+        id: 3,
+        label: 'Usergroup 1',
+        group: 'usergroups'
+      }, {
+        id: 4,
+        label: 'Usergroup 2',
+        group: 'usergroups'
+      }, {
+        id: 5,
+        label: 'Organisation 1',
+        shape: 'icon',
+        icon: {
+          face: "'Font Awesome 5 Free'",
+          weight: "bold", // Font Awesome 5 doesn't work properly unless bold.
+          code: '\uf1ad',
+          size: 50,
+          color: '#f0a30a'
+        }
+      }];
+
+      // create an array with edges
+      var edges = [{
+        from: 1,
+        to: 3
+      }, {
+        from: 1,
+        to: 4
+      }, {
+        from: 2,
+        to: 4
+      }, {
+        from: 3,
+        to: 5
+      }, {
+        from: 4,
+        to: 5
+      }];
+
+      // create a network
+      var containerFA5 = document.getElementById('mynetworkFA5');
+      var dataFA5 = {
+        nodes: nodesFA5,
+        edges: edges
+      };
+
+      var networkFA5 = new vis.Network(containerFA5, dataFA5, optionsFA5);
 
       /*
        * Example for Ionicons
@@ -187,8 +274,11 @@
 </p>
 
 <h2>
-  <i class="fa fa-flag"></i> Use FontAwesome-icons for nodes</h2>
-<div id="mynetworkFA"></div>
+  <i class="fa fa-flag"></i> Use FontAwesome-icons 4 for nodes</h2>
+<div id="mynetworkFA4"></div>
+<h2>
+  <i class="fa fa-flag"></i> Use FontAwesome-icons 5 for nodes</h2>
+<div id="mynetworkFA5"></div>
 <h2>
   <i class="ion ion-ionic"></i> Use Ionicons-icons for nodes</h2>
 <div id="mynetworkIO"></div>

diff --git a/lib/network/modules/components/nodes/shapes/Icon.js b/lib/network/modules/components/nodes/shapes/Icon.js
@@ -94,7 +94,19 @@ class Icon extends NodeBase {
     let iconSize = Number(this.options.icon.size);
 
     if (this.options.icon.code !== undefined) {
-      ctx.font = (selected ? "bold " : "") + iconSize + "px " + this.options.icon.face;
+      ctx.font = [
+        this.options.icon.weight != null
+          ? this.options.icon.weight
+          : selected
+          ? "bold"
+          : "",
+        // If the weight is forced (for example to make Font Awesome 5 work
+        // properly) substitute slightly bigger size for bold font face.
+        (this.options.icon.weight != null && selected ? 5 : 0) +
+          iconSize +
+          "px",
+        this.options.icon.face
+      ].join(" ");
 
       // draw icon
       ctx.fillStyle = this.options.icon.color || "black";

diff --git a/lib/network/options.js b/lib/network/options.js
@@ -289,6 +289,7 @@ let allOptions = {
       code: { string },  //'\uf007',
       size: { number },  //50,
       color: { string },
+      weight: { string, number },
       __type__: { object }
     },
     id: { string, number },

diff --git a/types/network/Network.d.ts b/types/network/Network.d.ts
@@ -849,6 +849,7 @@ export interface NodeOptions {
     code?: string,
     size?: number,  // 50,
     color?: string,
+    weight?: number | string,
   };
 
   image?: string | Image;