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