From 2359f3a72a4c0c9afda52ebd08d1d866fd6fb70e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Philipp=20Heindl?= <dude9177@gmail.com>
Date: Mon, 16 Feb 2015 11:36:45 +0100
Subject: [PATCH] Add ability to use icon fonts for nodes

Add the ability to use icon fonts for nodes such as FontAwesome
---
 lib/network/Node.js | 61 +++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 59 insertions(+), 2 deletions(-)

diff --git a/lib/network/Node.js b/lib/network/Node.js
index c29d93dc..2e8cae93 100644
--- a/lib/network/Node.js
+++ b/lib/network/Node.js
@@ -13,7 +13,7 @@ var util = require('../util');
  *                                              "database", "circle", "ellipse",
  *                                              "box", "image", "text", "dot",
  *                                              "star", "triangle", "triangleDown",
- *                                              "square"
+ *                                              "square", "icon"
  *                              {string} image  An image url
  *                              {string} title  An title text, can be HTML
  *                              {anytype} group A group name or number
@@ -154,7 +154,7 @@ Node.prototype.setProperties = function(properties, constants) {
 
   var fields = ['borderWidth','borderWidthSelected','shape','image','brokenImage','radius','fontColor',
     'fontSize','fontFace','fontFill','fontStrokeWidth','fontStrokeColor','group','mass','fontDrawThreshold',
-    'scaleFontWithValue','fontSizeMaxVisible','customScalingFunction'
+    'scaleFontWithValue','fontSizeMaxVisible','customScalingFunction','iconFontFace', 'icon', 'iconColor', 'iconSize'
   ];
   util.selectiveDeepExtend(fields, this.options, properties);
 
@@ -235,6 +235,7 @@ Node.prototype.setProperties = function(properties, constants) {
     case 'triangle':      this.draw = this._drawTriangle; this.resize = this._resizeShape; break;
     case 'triangleDown':  this.draw = this._drawTriangleDown; this.resize = this._resizeShape; break;
     case 'star':          this.draw = this._drawStar; this.resize = this._resizeShape; break;
+    case 'icon':          this.draw = this._drawIcon; this.resize = this._resizeIcon; break;
     default:              this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
   }
   // reset the size of the node, this can be changed
@@ -1011,7 +1012,63 @@ Node.prototype._drawText = function (ctx) {
   this.boundingBox.bottom = this.top + this.height;
 };
 
+Node.prototype._resizeIcon = function (ctx) {
+  if (!this.width) {
+    var margin = 5;
+    var textSize =
+    {
+      width: 1,
+      height: Number(this.options.iconSize) + 4
+    };
+    this.width = textSize.width + 2 * margin;
+    this.height = textSize.height + 2 * margin;
+
+    // scaling used for clustering
+    this.width += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
+    this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
+    this.options.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
+    this.growthIndicator = this.width - (textSize.width + 2 * margin);
+  }
+};
+
+Node.prototype._drawIcon = function (ctx) {
+  this._resizeIcon(ctx);
+  this.left = this.x - this.width / 2;
+  this.top = this.y - this.height / 2;
+  this._icon(ctx, this.options.icon, this.x, this.y);
+
+
+  this.boundingBox.top = this.y - this.options.iconSize/2;
+  this.boundingBox.left = this.x - this.options.iconSize/2;
+  this.boundingBox.right = this.x + this.options.iconSize/2;
+  this.boundingBox.bottom = this.y + this.options.iconSize/2;
 
+  if (this.label) {
+    this._label(ctx, this.label, this.x, this.y + this.height / 2, 'top', true);
+
+    this.boundingBox.left = Math.min(this.boundingBox.left, this.labelDimensions.left);
+    this.boundingBox.right = Math.max(this.boundingBox.right, this.labelDimensions.left + this.labelDimensions.width);
+    this.boundingBox.bottom = Math.max(this.boundingBox.bottom, this.boundingBox.bottom + this.labelDimensions.height);
+  }
+};
+
+Node.prototype._icon = function (ctx, icon, x, y) {
+  var relativeIconSize = Number(this.options.iconSize) * this.networkScale;
+  
+  if (icon && relativeIconSize > this.options.fontDrawThreshold - 1) {
+
+      var iconSize = Number(this.options.iconSize);
+
+      ctx.font = (this.selected ? "bold " : "") + iconSize + "px " + this.options.iconFontFace;
+
+      // draw icon
+      ctx.fillStyle = this.options.iconColor || "black";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText(icon, x, y);
+  }
+};
+  
 Node.prototype._label = function (ctx, text, x, y, align, baseline, labelUnderNode) {
   var relativeFontSize = Number(this.options.fontSize) * this.networkScale;
   if (text && relativeFontSize >= this.options.fontDrawThreshold - 1) {