Browse Source

Add ability to use icon fonts for nodes

Add the ability to use icon fonts for nodes such as FontAwesome
v3_develop
René Philipp Heindl 9 years ago
parent
commit
2359f3a72a
1 changed files with 59 additions and 2 deletions
  1. +59
    -2
      lib/network/Node.js

+ 59
- 2
lib/network/Node.js View File

@ -13,7 +13,7 @@ var util = require('../util');
* "database", "circle", "ellipse", * "database", "circle", "ellipse",
* "box", "image", "text", "dot", * "box", "image", "text", "dot",
* "star", "triangle", "triangleDown", * "star", "triangle", "triangleDown",
* "square"
* "square", "icon"
* {string} image An image url * {string} image An image url
* {string} title An title text, can be HTML * {string} title An title text, can be HTML
* {anytype} group A group name or number * {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', var fields = ['borderWidth','borderWidthSelected','shape','image','brokenImage','radius','fontColor',
'fontSize','fontFace','fontFill','fontStrokeWidth','fontStrokeColor','group','mass','fontDrawThreshold', 'fontSize','fontFace','fontFill','fontStrokeWidth','fontStrokeColor','group','mass','fontDrawThreshold',
'scaleFontWithValue','fontSizeMaxVisible','customScalingFunction'
'scaleFontWithValue','fontSizeMaxVisible','customScalingFunction','iconFontFace', 'icon', 'iconColor', 'iconSize'
]; ];
util.selectiveDeepExtend(fields, this.options, properties); 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 'triangle': this.draw = this._drawTriangle; this.resize = this._resizeShape; break;
case 'triangleDown': this.draw = this._drawTriangleDown; 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 '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; default: this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
} }
// reset the size of the node, this can be changed // 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; 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) { Node.prototype._label = function (ctx, text, x, y, align, baseline, labelUnderNode) {
var relativeFontSize = Number(this.options.fontSize) * this.networkScale; var relativeFontSize = Number(this.options.fontSize) * this.networkScale;
if (text && relativeFontSize >= this.options.fontDrawThreshold - 1) { if (text && relativeFontSize >= this.options.fontDrawThreshold - 1) {

Loading…
Cancel
Save