Browse Source

Added CircularImage shape

v3_develop
Brendon Page 9 years ago
parent
commit
00649c2e32
1 changed files with 69 additions and 16 deletions
  1. +69
    -16
      lib/network/Node.js

+ 69
- 16
lib/network/Node.js View File

@ -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;

Loading…
Cancel
Save