diff --git a/dist/vis.js b/dist/vis.js index 8dfabea7..16f16703 100644 --- a/dist/vis.js +++ b/dist/vis.js @@ -25676,10 +25676,10 @@ return /******/ (function(modules) { // webpackBootstrap physics: true, hidden: false, icon: { - iconFontFace: undefined, //'FontAwesome', + fontFace: undefined, //'FontAwesome', code: undefined, //'\uf007', - iconSize: undefined, //50, - iconColor: undefined //'#aa00ff' + size: undefined, //50, + color: undefined //'#aa00ff' } }; @@ -27355,8 +27355,8 @@ return /******/ (function(modules) { // webpackBootstrap if (this.width === undefined) { var margin = 5; var iconSize = { - width: Number(this.options.icon.iconSize), - height: Number(this.options.icon.iconSize) + width: Number(this.options.icon.size), + height: Number(this.options.icon.size) }; this.width = iconSize.width + 2 * margin; this.height = iconSize.height + 2 * margin; @@ -27368,17 +27368,17 @@ return /******/ (function(modules) { // webpackBootstrap draw: { value: function draw(ctx, x, y, selected, hover) { this.resize(ctx); - this.options.icon.iconSize = this.options.icon.iconSize || 50; + this.options.icon.size = this.options.icon.size || 50; this.left = x - this.width * 0.5; this.top = y - this.height * 0.5; this._icon(ctx, x, y, selected); - this.boundingBox.top = y - this.options.icon.iconSize * 0.5; - this.boundingBox.left = x - this.options.icon.iconSize * 0.5; - this.boundingBox.right = x + this.options.icon.iconSize * 0.5; - this.boundingBox.bottom = y + this.options.icon.iconSize * 0.5; + this.boundingBox.top = y - this.options.icon.size * 0.5; + this.boundingBox.left = x - this.options.icon.size * 0.5; + this.boundingBox.right = x + this.options.icon.size * 0.5; + this.boundingBox.bottom = y + this.options.icon.size * 0.5; if (this.options.label !== undefined) { var iconTextSpacing = 5; @@ -27393,14 +27393,14 @@ return /******/ (function(modules) { // webpackBootstrap }, _icon: { value: function _icon(ctx, x, y, selected) { - var iconSize = Number(this.options.icon.iconSize); + var iconSize = Number(this.options.icon.size); var relativeIconSize = iconSize * this.body.view.scale; if (this.options.icon.code && relativeIconSize > this.options.scaling.label.drawThreshold - 1) { - ctx.font = (selected ? "bold " : "") + iconSize + "px " + this.options.icon.iconFontFace; + ctx.font = (selected ? "bold " : "") + iconSize + "px " + this.options.icon.fontFace; // draw icon - ctx.fillStyle = this.options.icon.iconColor || "black"; + ctx.fillStyle = this.options.icon.color || "black"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText(this.options.icon.code, x, y); diff --git a/examples/network/38_node_as_icon.html b/examples/network/38_node_as_icon.html index e306cb81..e02bd08f 100644 --- a/examples/network/38_node_as_icon.html +++ b/examples/network/38_node_as_icon.html @@ -21,17 +21,21 @@ groups: { usergroups: { shape: 'icon', - iconFontFace: 'FontAwesome', - icon: '\uf0c0', - iconSize: 50, - iconColor: '#57169a' + icon: { + fontFace: 'FontAwesome', + code: '\uf0c0', + size: 50, + color: '#57169a' + } }, users: { shape: 'icon', - iconFontFace: 'FontAwesome', - icon: '\uf007', - iconSize: 50, - iconColor: '#aa00ff' + icon: { + fontFace: 'FontAwesome', + code: '\uf007', + size: 50, + color: '#aa00ff' + } } } }; @@ -57,10 +61,12 @@ id: 5, label: 'Organisation 1', shape: 'icon', - iconFontFace: 'FontAwesome', - icon: '\uf1ad', - iconSize: 50, - iconColor: '#f0a30a' + icon: { + fontFace: 'FontAwesome', + code: '\uf1ad', + size: 50, + color: '#f0a30a' + } }]; // create an array with edges @@ -98,17 +104,21 @@ groups: { usergroups: { shape: 'icon', - iconFontFace: 'Ionicons', - icon: '\uf47c', - iconSize: 50, - iconColor: '#57169a' + icon: { + fontFace: 'Ionicons', + code: '\uf47c', + size: 50, + color: '#57169a' + } }, users: { shape: 'icon', - iconFontFace: 'Ionicons', - icon: '\uf47e', - iconSize: 50, - iconColor: '#aa00ff' + icon: { + fontFace: 'Ionicons', + code: '\uf47e', + size: 50, + color: '#aa00ff' + } } } }; @@ -134,10 +144,12 @@ id: 5, label: 'Organisation 1', shape: 'icon', - iconFontFace: 'Ionicons', - icon: '\uf276', - iconSize: 50, - iconColor: '#f0a30a' + icon: { + fontFace: 'Ionicons', + code: '\uf276', + size: 50, + color: '#f0a30a' + } }]; diff --git a/lib/network/modules/NodesHandler.js b/lib/network/modules/NodesHandler.js index ab1e82e1..f3c5171b 100644 --- a/lib/network/modules/NodesHandler.js +++ b/lib/network/modules/NodesHandler.js @@ -80,10 +80,10 @@ class NodesHandler { physics: true, hidden: false, icon: { - iconFontFace: undefined, //'FontAwesome', + fontFace: undefined, //'FontAwesome', code: undefined, //'\uf007', - iconSize: undefined, //50, - iconColor: undefined //'#aa00ff' + size: undefined, //50, + color: undefined //'#aa00ff' } }; diff --git a/lib/network/modules/components/nodes/icon.js b/lib/network/modules/components/nodes/icon.js index 230ad6d1..f16f7352 100644 --- a/lib/network/modules/components/nodes/icon.js +++ b/lib/network/modules/components/nodes/icon.js @@ -18,8 +18,8 @@ class Icon extends NodeUtil { if (this.width === undefined) { var margin = 5; var iconSize = { - width: Number(this.options.icon.iconSize), - height: Number(this.options.icon.iconSize) + width: Number(this.options.icon.size), + height: Number(this.options.icon.size) }; this.width = iconSize.width + 2 * margin; this.height = iconSize.height + 2 * margin; @@ -28,17 +28,17 @@ class Icon extends NodeUtil { draw(ctx, x, y, selected, hover) { this.resize(ctx); - this.options.icon.iconSize = this.options.icon.iconSize || 50; + this.options.icon.size = this.options.icon.size || 50; this.left = x - this.width * 0.5; this.top = y - this.height * 0.5; this._icon(ctx, x, y, selected); - this.boundingBox.top = y - this.options.icon.iconSize * 0.5; - this.boundingBox.left = x - this.options.icon.iconSize * 0.5; - this.boundingBox.right = x + this.options.icon.iconSize * 0.5; - this.boundingBox.bottom = y + this.options.icon.iconSize * 0.5; + this.boundingBox.top = y - this.options.icon.size * 0.5; + this.boundingBox.left = x - this.options.icon.size * 0.5; + this.boundingBox.right = x + this.options.icon.size * 0.5; + this.boundingBox.bottom = y + this.options.icon.size * 0.5; if (this.options.label !== undefined) { var iconTextSpacing = 5; @@ -50,14 +50,14 @@ class Icon extends NodeUtil { } _icon(ctx, x, y, selected) { - let iconSize = Number(this.options.icon.iconSize); + let iconSize = Number(this.options.icon.size); let relativeIconSize = iconSize * this.body.view.scale; if (this.options.icon.code && relativeIconSize > this.options.scaling.label.drawThreshold - 1) { - ctx.font = (selected ? "bold " : "") + iconSize + "px " + this.options.icon.iconFontFace; + ctx.font = (selected ? "bold " : "") + iconSize + "px " + this.options.icon.fontFace; // draw icon - ctx.fillStyle = this.options.icon.iconColor || "black"; + ctx.fillStyle = this.options.icon.color || "black"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText(this.options.icon.code, x, y);