@ -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,67 @@ 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 . 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 ) {
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 ) {