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) {