diff --git a/docs/network.html b/docs/network.html
index d1c2e9af..dfbac7e0 100644
--- a/docs/network.html
+++ b/docs/network.html
@@ -1009,7 +1009,6 @@ mySize = minSize + diff * scale;
'white'
The color of the label stroke.
-
shape
string
@@ -1018,7 +1017,7 @@ mySize = minSize + diff * scale;
Choose from
ellipse
(default), circle
, box
,
database
, image
, circularImage
, label
, dot
,
- star
, triangle
, triangleDown
, and square
.
+ star
, triangle
, triangleDown
, square
and icon
.
In case of image
and circularImage
, a property with name image
must
@@ -1095,6 +1094,30 @@ mySize = minSize + diff * scale;
The maximum radius for a scaled node. Only applicable to shapes dot
,
star
, triangle
, triangleDown
, and square
. This only does something if you supply a value.
+
+ iconFontFace
+ String
+ undefined
+ Font face for icons, for example FontAwesome
or Ionicon
.You have to link to the css defining the font by yourself (see Examples)
+
+
+ icon
+ String
+ undefined
+ Unicode of the icon f.e. \uf0c0
(user-icon in FontAwesome)
+
+
+ iconSize
+ Number
+ 50
+ Size of the icon
+
+
+ color
+ String
+ black
+ Color of the icon
+
diff --git a/examples/network/38_node_as_icon.html b/examples/network/38_node_as_icon.html
new file mode 100644
index 00000000..9c117651
--- /dev/null
+++ b/examples/network/38_node_as_icon.html
@@ -0,0 +1,168 @@
+
+
+
+
+
+ Network | node as icon
+
+
+
+
+
+
+
+
+
+
+
+ Use FontAwesome-icons for node
+
+
+ Use Ionicons-icons for node
+
+
+
+
+
+
diff --git a/examples/network/index.html b/examples/network/index.html
index 13de6942..a44be6d0 100644
--- a/examples/network/index.html
+++ b/examples/network/index.html
@@ -49,6 +49,7 @@
35_label_stroke.html
36_HTML_in_Nodes.html
37_label_alignment.html
+ 38_node_as_icon.html
graphviz_gallery.html
diff --git a/lib/network/Node.js b/lib/network/Node.js
index c29d93dc..e2270121 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,67 @@ 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.options.iconSize = this.options.iconSize || 50;
+ this.options.iconSize = this.options.iconSize || 50;
+
+ 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) {