From 2359f3a72a4c0c9afda52ebd08d1d866fd6fb70e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ren=C3=A9=20Philipp=20Heindl?= Date: Mon, 16 Feb 2015 11:36:45 +0100 Subject: [PATCH 1/4] 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) { From 158309edbf0c420ddbf411ffd356f13933f4cb84 Mon Sep 17 00:00:00 2001 From: Rene Heindl Date: Mon, 16 Feb 2015 13:47:47 +0100 Subject: [PATCH 2/4] Added Examples for Icons --- examples/network/38_node_as_icon.html | 113 ++++++++++++++++++++++++++ examples/network/index.html | 1 + 2 files changed, 114 insertions(+) create mode 100644 examples/network/38_node_as_icon.html diff --git a/examples/network/38_node_as_icon.html b/examples/network/38_node_as_icon.html new file mode 100644 index 00000000..5cbbb2aa --- /dev/null +++ b/examples/network/38_node_as_icon.html @@ -0,0 +1,113 @@ + + +
+ +Network | node as icon + + + + + + + +
+ + +

Use FontAwesome-icons for node

+
+

Use Ionicons-icons for node

+
+ + + + + \ No newline at end of file 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

From 7b3fc2fd2cb5ca987e9be5df33b942fda3b78254 Mon Sep 17 00:00:00 2001 From: Rene Heindl Date: Mon, 16 Feb 2015 14:00:47 +0100 Subject: [PATCH 3/4] Updated Examples --- examples/network/38_node_as_icon.html | 263 ++++++++++++++++---------- 1 file changed, 159 insertions(+), 104 deletions(-) diff --git a/examples/network/38_node_as_icon.html b/examples/network/38_node_as_icon.html index 5cbbb2aa..9c117651 100644 --- a/examples/network/38_node_as_icon.html +++ b/examples/network/38_node_as_icon.html @@ -1,113 +1,168 @@ - + -
- -Network | node as icon - - - + + + Network | node as icon - - -
+ + + + + + + -

Use FontAwesome-icons for node

-
-

Use Ionicons-icons for node

-
- - + }; + + // create an array with nodes + var nodesIO = [{ + 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', + iconFontFace: 'Ionicons', + icon: '\uf276', + iconSize: 50, + iconColor: '#f0a30a' + }]; + + // create a network + var containerIO = document.getElementById('mynetworkIO'); + var dataIO = { + nodes: nodesIO, + edges: edges + }; + + var networkIO = new vis.Network(containerIO, dataIO, optionsIO); + }) + - \ No newline at end of file + + From a4b0b93f56e01e6e11d513dd55b92a3b0a4f645e Mon Sep 17 00:00:00 2001 From: Rene Heindl Date: Mon, 16 Feb 2015 14:23:36 +0100 Subject: [PATCH 4/4] Added documentation and default values --- docs/network.html | 27 +++++++++++++++++++++++++-- lib/network/Node.js | 4 ++++ 2 files changed, 29 insertions(+), 2 deletions(-) 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/lib/network/Node.js b/lib/network/Node.js index 2e8cae93..e2270121 100644 --- a/lib/network/Node.js +++ b/lib/network/Node.js @@ -1033,6 +1033,10 @@ Node.prototype._resizeIcon = function (ctx) { 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);