Updated circularImage node shape to render a circle, of the default radius, when images are loading or have failed to load

Fixed issue where  multi line labels for image and circularImage nodes would overlap the node

examples/network/34_circular_images.html

@@ -44,7 +44,8 @@
         {id: 11,  shape: 'circularImage', image: DIR + '11.png'},
         {id: 12,  shape: 'circularImage', image: DIR + '12.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
@@ -64,6 +65,7 @@
         {from: 11, to: 12},
         {from: 12, to: 13},
         {from: 13, to: 14},
+        {from: 14, to: 15}
       ];
 
       // create a network

lib/network/Node.js

@@ -557,7 +557,6 @@ Node.prototype._resizeImage = function (ctx) {
       this.growthIndicator = this.width - width;
     }
   }
-
 };
 
 Node.prototype._drawImageAtPosition = function (ctx) {
@@ -580,13 +579,17 @@ Node.prototype._drawImageAtPosition = function (ctx) {
 
 Node.prototype._drawImageLabel = function (ctx) {
   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 / labelDimensions.lineCount;
+      }
   }
+  
+  yLabel = this.y + offset;
 
   this._label(ctx, this.label, this.x, yLabel, undefined, 'hanging');
 };
@@ -610,7 +613,28 @@ Node.prototype._drawImage = 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) {
@@ -1053,10 +1077,10 @@ Node.prototype.getTextSize = function(ctx) {
       width = Math.max(width, ctx.measureText(lines[i]).width);
     }
 
-    return {"width": width, "height": height};
+    return {"width": width, "height": height, lineCount: lines.length};
   }
   else {
-    return {"width": 0, "height": 0};
+    return {"width": 0, "height": 0, lineCount: 0};
   }
 };