|
@ -206,7 +206,7 @@ Node.prototype.setProperties = function(properties, constants) { |
|
|
|
|
|
|
|
|
this.radiusFixed = this.radiusFixed || (properties.radius !== undefined); |
|
|
this.radiusFixed = this.radiusFixed || (properties.radius !== undefined); |
|
|
|
|
|
|
|
|
if (this.options.shape == 'image') { |
|
|
|
|
|
|
|
|
if (this.options.shape === 'image' || this.options.shape === 'circularImage') { |
|
|
this.options.radiusMin = constants.nodes.widthMin; |
|
|
this.options.radiusMin = constants.nodes.widthMin; |
|
|
this.options.radiusMax = constants.nodes.widthMax; |
|
|
this.options.radiusMax = constants.nodes.widthMax; |
|
|
} |
|
|
} |
|
@ -219,6 +219,7 @@ Node.prototype.setProperties = function(properties, constants) { |
|
|
case 'ellipse': this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break; |
|
|
case 'ellipse': this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break; |
|
|
// TODO: add diamond shape
|
|
|
// TODO: add diamond shape
|
|
|
case 'image': this.draw = this._drawImage; this.resize = this._resizeImage; break; |
|
|
case 'image': this.draw = this._drawImage; this.resize = this._resizeImage; break; |
|
|
|
|
|
case 'circularImage': this.draw = this._drawCircularImage; this.resize = this._resizeCircularImage; break; |
|
|
case 'text': this.draw = this._drawText; this.resize = this._resizeText; break; |
|
|
case 'text': this.draw = this._drawText; this.resize = this._resizeText; break; |
|
|
case 'dot': this.draw = this._drawDot; this.resize = this._resizeShape; break; |
|
|
case 'dot': this.draw = this._drawDot; this.resize = this._resizeShape; break; |
|
|
case 'square': this.draw = this._drawSquare; this.resize = this._resizeShape; break; |
|
|
case 'square': this.draw = this._drawSquare; this.resize = this._resizeShape; break; |
|
@ -535,12 +536,7 @@ Node.prototype._resizeImage = function (ctx) { |
|
|
|
|
|
|
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
Node.prototype._drawImage = function (ctx) { |
|
|
|
|
|
this._resizeImage(ctx); |
|
|
|
|
|
this.left = this.x - this.width / 2; |
|
|
|
|
|
this.top = this.y - this.height / 2; |
|
|
|
|
|
|
|
|
|
|
|
var yLabel; |
|
|
|
|
|
|
|
|
Node.prototype._drawImageAtPosition = function (ctx) { |
|
|
if (this.imageObj.width != 0 ) { |
|
|
if (this.imageObj.width != 0 ) { |
|
|
// draw the shade
|
|
|
// draw the shade
|
|
|
if (this.clusterSize > 1) { |
|
|
if (this.clusterSize > 1) { |
|
@ -555,6 +551,13 @@ Node.prototype._drawImage = function (ctx) { |
|
|
// draw the image
|
|
|
// draw the image
|
|
|
ctx.globalAlpha = 1.0; |
|
|
ctx.globalAlpha = 1.0; |
|
|
ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height); |
|
|
ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height); |
|
|
|
|
|
} |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
Node.prototype._drawImageLabel = function (ctx) { |
|
|
|
|
|
var yLabel; |
|
|
|
|
|
if (this.imageObj.width != 0 ) { |
|
|
|
|
|
|
|
|
yLabel = this.y + this.height / 2; |
|
|
yLabel = this.y + this.height / 2; |
|
|
} |
|
|
} |
|
|
else { |
|
|
else { |
|
@ -562,18 +565,64 @@ Node.prototype._drawImage = function (ctx) { |
|
|
yLabel = this.y; |
|
|
yLabel = this.y; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
this._label(ctx, this.label, this.x, yLabel, undefined, "top"); |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
Node.prototype._drawImage = function (ctx) { |
|
|
|
|
|
this._resizeImage(ctx); |
|
|
|
|
|
this.left = this.x - this.width / 2; |
|
|
|
|
|
this.top = this.y - this.height / 2; |
|
|
|
|
|
|
|
|
|
|
|
this._drawImageAtPosition(ctx); |
|
|
|
|
|
|
|
|
this.boundingBox.top = this.top; |
|
|
this.boundingBox.top = this.top; |
|
|
this.boundingBox.left = this.left; |
|
|
this.boundingBox.left = this.left; |
|
|
this.boundingBox.right = this.left + this.width; |
|
|
this.boundingBox.right = this.left + this.width; |
|
|
this.boundingBox.bottom = this.top + this.height; |
|
|
this.boundingBox.bottom = this.top + this.height; |
|
|
|
|
|
|
|
|
this._label(ctx, this.label, this.x, yLabel, undefined, "top"); |
|
|
|
|
|
|
|
|
this._drawImageLabel(ctx); |
|
|
this.boundingBox.left = Math.min(this.boundingBox.left, this.labelDimensions.left); |
|
|
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.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); |
|
|
this.boundingBox.bottom = Math.max(this.boundingBox.bottom, this.boundingBox.bottom + this.labelDimensions.height); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
Node.prototype._resizeCircularImage = function (ctx) { |
|
|
|
|
|
this._resizeImage(ctx); |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
Node.prototype._drawCircularImage = function (ctx) { |
|
|
|
|
|
this._resizeCircularImage(ctx); |
|
|
|
|
|
|
|
|
|
|
|
this.left = this.x - this.width / 2; |
|
|
|
|
|
this.top = this.y - this.height / 2; |
|
|
|
|
|
|
|
|
|
|
|
var centerX = this.left + (this.width / 2); |
|
|
|
|
|
var centerY = this.top + (this.height / 2); |
|
|
|
|
|
var radius = Math.abs(this.height / 2); |
|
|
|
|
|
|
|
|
|
|
|
this._drawRawCircle(ctx, centerX, centerY, radius); |
|
|
|
|
|
|
|
|
|
|
|
ctx.save(); |
|
|
|
|
|
ctx.beginPath(); |
|
|
|
|
|
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, true); |
|
|
|
|
|
ctx.closePath(); |
|
|
|
|
|
ctx.clip(); |
|
|
|
|
|
|
|
|
|
|
|
this._drawImageAtPosition(ctx); |
|
|
|
|
|
|
|
|
|
|
|
ctx.restore(); |
|
|
|
|
|
|
|
|
|
|
|
this.boundingBox.top = this.y - this.options.radius; |
|
|
|
|
|
this.boundingBox.left = this.x - this.options.radius; |
|
|
|
|
|
this.boundingBox.right = this.x + this.options.radius; |
|
|
|
|
|
this.boundingBox.bottom = this.y + this.options.radius; |
|
|
|
|
|
|
|
|
|
|
|
this._drawImageLabel(ctx); |
|
|
|
|
|
|
|
|
|
|
|
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._resizeBox = function (ctx) { |
|
|
Node.prototype._resizeBox = function (ctx) { |
|
|
if (!this.width) { |
|
|
if (!this.width) { |
|
@ -702,15 +751,11 @@ Node.prototype._resizeCircle = function (ctx) { |
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
Node.prototype._drawCircle = function (ctx) { |
|
|
|
|
|
this._resizeCircle(ctx); |
|
|
|
|
|
this.left = this.x - this.width / 2; |
|
|
|
|
|
this.top = this.y - this.height / 2; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Node.prototype._drawRawCircle = function (ctx, x, y, radius) { |
|
|
var clusterLineWidth = 2.5; |
|
|
var clusterLineWidth = 2.5; |
|
|
var borderWidth = this.options.borderWidth; |
|
|
var borderWidth = this.options.borderWidth; |
|
|
var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth; |
|
|
var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ctx.strokeStyle = this.selected ? this.options.color.highlight.border : this.hover ? this.options.color.hover.border : this.options.color.border; |
|
|
ctx.strokeStyle = this.selected ? this.options.color.highlight.border : this.hover ? this.options.color.hover.border : this.options.color.border; |
|
|
|
|
|
|
|
|
// draw the outer border
|
|
|
// draw the outer border
|
|
@ -719,7 +764,7 @@ Node.prototype._drawCircle = function (ctx) { |
|
|
ctx.lineWidth *= this.networkScaleInv; |
|
|
ctx.lineWidth *= this.networkScaleInv; |
|
|
ctx.lineWidth = Math.min(this.width,ctx.lineWidth); |
|
|
ctx.lineWidth = Math.min(this.width,ctx.lineWidth); |
|
|
|
|
|
|
|
|
ctx.circle(this.x, this.y, this.options.radius+2*ctx.lineWidth); |
|
|
|
|
|
|
|
|
ctx.circle(x, y, radius+2*ctx.lineWidth); |
|
|
ctx.stroke(); |
|
|
ctx.stroke(); |
|
|
} |
|
|
} |
|
|
ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0); |
|
|
ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0); |
|
@ -727,9 +772,17 @@ Node.prototype._drawCircle = function (ctx) { |
|
|
ctx.lineWidth = Math.min(this.width,ctx.lineWidth); |
|
|
ctx.lineWidth = Math.min(this.width,ctx.lineWidth); |
|
|
|
|
|
|
|
|
ctx.fillStyle = this.selected ? this.options.color.highlight.background : this.hover ? this.options.color.hover.background : this.options.color.background; |
|
|
ctx.fillStyle = this.selected ? this.options.color.highlight.background : this.hover ? this.options.color.hover.background : this.options.color.background; |
|
|
ctx.circle(this.x, this.y, this.options.radius); |
|
|
|
|
|
|
|
|
ctx.circle(this.x, this.y, radius); |
|
|
ctx.fill(); |
|
|
ctx.fill(); |
|
|
ctx.stroke(); |
|
|
ctx.stroke(); |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
Node.prototype._drawCircle = function (ctx) { |
|
|
|
|
|
this._resizeCircle(ctx); |
|
|
|
|
|
this.left = this.x - this.width / 2; |
|
|
|
|
|
this.top = this.y - this.height / 2; |
|
|
|
|
|
|
|
|
|
|
|
this._drawRawCircle(ctx, this.x, this.y, this.options.radius); |
|
|
|
|
|
|
|
|
this.boundingBox.top = this.y - this.options.radius; |
|
|
this.boundingBox.top = this.y - this.options.radius; |
|
|
this.boundingBox.left = this.x - this.options.radius; |
|
|
this.boundingBox.left = this.x - this.options.radius; |
|
|