Browse Source

Merge pull request #572 from brendon1982/develop

improved circular images
v3_develop
Alex 9 years ago
parent
commit
dfd88869ff
2 changed files with 40 additions and 12 deletions
  1. +3
    -1
      examples/network/34_circular_images.html
  2. +37
    -11
      lib/network/Node.js

+ 3
- 1
examples/network/34_circular_images.html View File

@ -44,7 +44,8 @@
{id: 11, shape: 'circularImage', image: DIR + '11.png'}, {id: 11, shape: 'circularImage', image: DIR + '11.png'},
{id: 12, shape: 'circularImage', image: DIR + '12.png'}, {id: 12, shape: 'circularImage', image: DIR + '12.png'},
{id: 13, shape: 'circularImage', image: DIR + '13.png'}, {id: 13, shape: 'circularImage', image: DIR + '13.png'},
{id: 14, shape: 'circularImage', image: DIR + '14.png'}
{id: 14, shape: 'circularImage', image: DIR + '14.png'},
{id: 15, label:"when images\nfail\nto load", shape: 'circularImage', image: DIR + 'missing.png', brokenImage: DIR + 'missingBrokenImage.png'}
]; ];
// create connetions between people // create connetions between people
@ -64,6 +65,7 @@
{from: 11, to: 12}, {from: 11, to: 12},
{from: 12, to: 13}, {from: 12, to: 13},
{from: 13, to: 14}, {from: 13, to: 14},
{from: 14, to: 15}
]; ];
// create a network // create a network

+ 37
- 11
lib/network/Node.js View File

@ -557,7 +557,6 @@ Node.prototype._resizeImage = function (ctx) {
this.growthIndicator = this.width - width; this.growthIndicator = this.width - width;
} }
} }
}; };
Node.prototype._drawImageAtPosition = function (ctx) { Node.prototype._drawImageAtPosition = function (ctx) {
@ -580,15 +579,21 @@ Node.prototype._drawImageAtPosition = function (ctx) {
Node.prototype._drawImageLabel = function (ctx) { Node.prototype._drawImageLabel = function (ctx) {
var yLabel; var yLabel;
if (this.imageObj.width != 0 ) {
yLabel = this.y + this.height / 2;
}
else {
// image still loading... just draw the label for now
yLabel = this.y;
var offset = 0;
if (this.height){
offset = this.height / 2;
var labelDimensions = this.getTextSize(ctx);
if (labelDimensions.lineCount >= 1){
offset += labelDimensions.height / 2;
offset += 3;
}
} }
yLabel = this.y + offset;
this._label(ctx, this.label, this.x, yLabel, undefined, 'hanging');
this._label(ctx, this.label, this.x, yLabel, undefined);
}; };
Node.prototype._drawImage = function (ctx) { Node.prototype._drawImage = function (ctx) {
@ -610,7 +615,28 @@ Node.prototype._drawImage = function (ctx) {
}; };
Node.prototype._resizeCircularImage = function (ctx) { Node.prototype._resizeCircularImage = function (ctx) {
this._resizeImage(ctx);
if(!this.imageObj.src || !this.imageObj.width || !this.imageObj.height){
if (!this.width) {
var diameter = this.options.radius * 2;
this.width = diameter;
this.height = diameter;
// scaling used for clustering
//this.width += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeWidthFactor;
//this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeHeightFactor;
this.options.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
this.growthIndicator = this.options.radius- 0.5*diameter;
this._swapToImageResizeWhenImageLoaded = true;
}
} else {
if (this._swapToImageResizeWhenImageLoaded){
this.width = 0;
this.height = 0;
delete this._swapToImageResizeWhenImageLoaded
}
this._resizeImage(ctx);
}
}; };
Node.prototype._drawCircularImage = function (ctx) { Node.prototype._drawCircularImage = function (ctx) {
@ -1053,10 +1079,10 @@ Node.prototype.getTextSize = function(ctx) {
width = Math.max(width, ctx.measureText(lines[i]).width); width = Math.max(width, ctx.measureText(lines[i]).width);
} }
return {"width": width, "height": height};
return {"width": width, "height": height, lineCount: lines.length};
} }
else { else {
return {"width": 0, "height": 0};
return {"width": 0, "height": 0, lineCount: 0};
} }
}; };

Loading…
Cancel
Save