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;