Refactoring of Node Drawing (#3170)

* Consolidated common code for drawing in nodes

* Consolidated updateBoundingBox(), default version

* Setting bounding box margin in separate method

lib/network/modules/components/nodes/shapes/Box.js

@@ -22,33 +22,9 @@ class Box extends NodeBase {
     this.left = x - this.width / 2;
     this.top = y - this.height / 2;
 
-    ctx.strokeStyle = values.borderColor;
-    ctx.lineWidth = values.borderWidth;
-    ctx.lineWidth /= this.body.view.scale;
-    ctx.lineWidth = Math.min(this.width, ctx.lineWidth);
-
-    ctx.fillStyle = values.color;
-
+    this.initContextForDraw(ctx, values);
     ctx.roundRect(this.left, this.top, this.width, this.height, values.borderRadius);
-
-    // draw shadow if enabled
-    this.enableShadow(ctx, values);
-    // draw the background
-    ctx.fill();
-    // disable shadows for other elements.
-    this.disableShadow(ctx, values);
-
-    //draw dashed border if enabled, save and restore is required for firefox not to crash on unix.
-    ctx.save();
-    // if borders are zero width, they will be drawn with width 1 by default. This prevents that
-    if (values.borderWidth > 0) {
-      this.enableBorderDashes(ctx, values);
-      //draw the border
-      ctx.stroke();
-      //disable dashed border for other elements
-      this.disableBorderDashes(ctx, values);
-    }
-    ctx.restore();
+    this.performFill(ctx, values);
 
     this.updateBoundingBox(x, y, ctx, selected, hover);
     this.labelModule.draw(ctx, this.left + this.textSize.width / 2 + this.margin.left,
@@ -56,15 +32,10 @@ class Box extends NodeBase {
   }
 
   updateBoundingBox(x, y, ctx, selected, hover) {
-    this.resize(ctx, selected, hover);
-    this.left = x - this.width / 2;
-    this.top = y - this.height / 2;
+    this._updateBoundingBox(x, y, ctx, selected, hover);
 
     let borderRadius = this.options.shapeProperties.borderRadius; // only effective for box
-    this.boundingBox.left = this.left - borderRadius;
-    this.boundingBox.top = this.top - borderRadius;
-    this.boundingBox.bottom = this.top + this.height + borderRadius;
-    this.boundingBox.right = this.left + this.width + borderRadius;
+    this._addBoundingBoxMargin(borderRadius);
   }
 
   distanceToBorder(ctx, angle) {

lib/network/modules/components/nodes/shapes/Circle.js

@@ -28,12 +28,6 @@ class Circle extends CircleImageBase {
 
     this._drawRawCircle(ctx, x, y, values);
 
-    // TODO: values overwritten by updateBoundingBox(); is this bit necessary?
-    this.boundingBox.top = y - values.size;
-    this.boundingBox.left = x - values.size;
-    this.boundingBox.right = x + values.size;
-    this.boundingBox.bottom = y + values.size;
-
     this.updateBoundingBox(x,y);
     this.labelModule.draw(ctx, this.left + this.textSize.width / 2 + this.margin.left,
                                y, selected, hover);

lib/network/modules/components/nodes/shapes/Database.js

@@ -23,50 +23,15 @@ class Database extends NodeBase {
     this.left = x - this.width / 2;
     this.top  = y - this.height / 2;
 
-    var borderWidth = values.borderWidth / this.body.view.scale;
-    ctx.lineWidth = Math.min(this.width, borderWidth);
-
-    ctx.strokeStyle = values.borderColor;
-
-    ctx.fillStyle = values.color;
+    this.initContextForDraw(ctx, values);
     ctx.database(x - this.width / 2, y - this.height / 2, this.width, this.height);
-
-    // draw shadow if enabled
-    this.enableShadow(ctx, values);
-    // draw the background
-    ctx.fill();
-    // disable shadows for other elements.
-    this.disableShadow(ctx, values);
-
-    //draw dashed border if enabled, save and restore is required for firefox not to crash on unix.
-    ctx.save();
-    // if borders are zero width, they will be drawn with width 1 by default. This prevents that
-    if (borderWidth > 0) {
-      this.enableBorderDashes(ctx, values);
-      //draw the border
-      ctx.stroke();
-      //disable dashed border for other elements
-      this.disableBorderDashes(ctx, values);
-    }
-    ctx.restore();
+    this.performFill(ctx, values);
 
     this.updateBoundingBox(x, y, ctx, selected, hover);
     this.labelModule.draw(ctx, this.left + this.textSize.width / 2 + this.margin.left,
                                this.top + this.textSize.height / 2 + this.margin.top, selected, hover);
   }
 
-  updateBoundingBox(x, y, ctx, selected, hover) {
-    this.resize(ctx, selected, hover);
-
-    this.left = x - this.width * 0.5;
-    this.top = y - this.height * 0.5;
-
-    this.boundingBox.left = this.left;
-    this.boundingBox.top = this.top;
-    this.boundingBox.bottom = this.top + this.height;
-    this.boundingBox.right = this.left + this.width;
-  }
-
   distanceToBorder(ctx, angle) {
     return this._distanceToBorder(ctx,angle);
   }

lib/network/modules/components/nodes/shapes/Ellipse.js

@@ -22,50 +22,14 @@ class Ellipse extends NodeBase {
     this.left = x - this.width * 0.5;
     this.top = y - this.height * 0.5;
 
-    var borderWidth = values.borderWidth / this.body.view.scale;
-    ctx.lineWidth = Math.min(this.width, borderWidth);
-
-    ctx.strokeStyle = values.borderColor;
-
-    ctx.fillStyle = values.color;
+    this.initContextForDraw(ctx, values);
     ctx.ellipse_vis(this.left, this.top, this.width, this.height);
-
-    // draw shadow if enabled
-    this.enableShadow(ctx, values);
-    // draw the background
-    ctx.fill();
-    // disable shadows for other elements.
-    this.disableShadow(ctx, values);
-
-    //draw dashed border if enabled, save and restore is required for firefox not to crash on unix.
-    ctx.save();
-
-    // if borders are zero width, they will be drawn with width 1 by default. This prevents that
-    if (borderWidth > 0) {
-      this.enableBorderDashes(ctx, values);
-      //draw the border
-      ctx.stroke();
-      //disable dashed border for other elements
-      this.disableBorderDashes(ctx, values);
-    }
-
-    ctx.restore();
+    this.performFill(ctx, values);
 
     this.updateBoundingBox(x, y, ctx, selected, hover);
     this.labelModule.draw(ctx, x, y, selected, hover);
   }
 
-  updateBoundingBox(x, y, ctx, selected, hover) {
-    this.resize(ctx, selected, hover); // just in case
-
-    this.left = x - this.width * 0.5;
-    this.top = y - this.height * 0.5;
-
-    this.boundingBox.left = this.left;
-    this.boundingBox.top = this.top;
-    this.boundingBox.bottom = this.top + this.height;
-    this.boundingBox.right = this.left + this.width;
-  }
 
   distanceToBorder(ctx, angle) {
     this.resize(ctx);

lib/network/modules/components/nodes/shapes/Image.js

@@ -42,18 +42,8 @@ class Image extends CircleImageBase {
         this.height + ctx.lineWidth);
       ctx.fill();
 
-      //draw dashed border if enabled, save and restore is required for firefox not to crash on unix.
-      ctx.save();
-      // if borders are zero width, they will be drawn with width 1 by default. This prevents that
-      if (borderWidth > 0) {
-        this.enableBorderDashes(ctx, values);
-        //draw the border
-        ctx.stroke();
-        //disable dashed border for other elements
-        this.disableBorderDashes(ctx, values);
-      }
-      ctx.restore();
-
+     this.performStroke(ctx, values);
+ 
       ctx.closePath();
     }
 
@@ -66,13 +56,7 @@ class Image extends CircleImageBase {
 
   updateBoundingBox(x,y) {
     this.resize();
-    this.left = x - this.width / 2;
-    this.top = y - this.height / 2;
-
-    this.boundingBox.top = this.top;
-    this.boundingBox.left = this.left;
-    this.boundingBox.right = this.left + this.width;
-    this.boundingBox.bottom = this.top + this.height;
+    this._updateBoundingBox(x, y);
 
     if (this.options.label !== undefined && this.labelModule.size.width > 0) {
       this.boundingBox.left = Math.min(this.boundingBox.left, this.labelModule.size.left);

lib/network/modules/components/nodes/shapes/Text.js

@@ -33,18 +33,6 @@ class Text extends NodeBase {
     this.updateBoundingBox(x, y, ctx, selected, hover);
   }
 
-  updateBoundingBox(x, y, ctx, selected, hover) {
-    this.resize(ctx, selected, hover);
-
-    this.left = x - this.width / 2;
-    this.top = y - this.height / 2;
-
-    this.boundingBox.top = this.top;
-    this.boundingBox.left = this.left;
-    this.boundingBox.right = this.left + this.width;
-    this.boundingBox.bottom = this.top + this.height;
-  }
-
   distanceToBorder(ctx, angle) {
     return this._distanceToBorder(ctx,angle);
   }

lib/network/modules/components/nodes/util/CircleImageBase.js

@@ -109,31 +109,9 @@ class CircleImageBase extends NodeBase {
   }
 
   _drawRawCircle(ctx, x, y, values) {
-    var borderWidth = values.borderWidth / this.body.view.scale;
-    ctx.lineWidth = Math.min(this.width, borderWidth);
-
-    ctx.strokeStyle = values.borderColor;
-    ctx.fillStyle = values.color;
+    this.initContextForDraw(ctx, values);
     ctx.circle(x, y, values.size);
-
-    // draw shadow if enabled
-    this.enableShadow(ctx, values);
-    // draw the background
-    ctx.fill();
-    // disable shadows for other elements.
-    this.disableShadow(ctx, values);
-
-    //draw dashed border if enabled, save and restore is required for firefox not to crash on unix.
-    ctx.save();
-    // if borders are zero width, they will be drawn with width 1 by default. This prevents that
-    if (borderWidth > 0) {
-      this.enableBorderDashes(ctx, values);
-      //draw the border
-      ctx.stroke();
-      //disable dashed border for other elements
-      this.disableBorderDashes(ctx, values);
-    }
-    ctx.restore();
+    this.performFill(ctx, values);
   }
 
   _drawImageAtPosition(ctx, values) {

lib/network/modules/components/nodes/util/NodeBase.js

@@ -107,6 +107,83 @@ class NodeBase {
 
     return  (this.width === undefined) || (this.labelModule.differentState(selected, hover));
   }
+
+
+  initContextForDraw(ctx, values) {
+    var borderWidth = values.borderWidth / this.body.view.scale;
+
+    ctx.lineWidth = Math.min(this.width, borderWidth);
+    ctx.strokeStyle = values.borderColor;
+    ctx.fillStyle = values.color;
+  }
+
+
+  performStroke(ctx, values) {
+    var borderWidth = values.borderWidth / this.body.view.scale;
+
+    //draw dashed border if enabled, save and restore is required for firefox not to crash on unix.
+    ctx.save();
+    // if borders are zero width, they will be drawn with width 1 by default. This prevents that
+    if (borderWidth > 0) {
+      this.enableBorderDashes(ctx, values);
+      //draw the border
+      ctx.stroke();
+      //disable dashed border for other elements
+      this.disableBorderDashes(ctx, values);
+    }
+    ctx.restore();
+  }
+
+
+  performFill(ctx, values) {
+    // draw shadow if enabled
+    this.enableShadow(ctx, values);
+    // draw the background
+    ctx.fill();
+    // disable shadows for other elements.
+    this.disableShadow(ctx, values);
+
+    this.performStroke(ctx, values);
+  }
+
+
+  _addBoundingBoxMargin(margin) {
+    this.boundingBox.left   -= margin;
+    this.boundingBox.top    -= margin;
+    this.boundingBox.bottom += margin;
+    this.boundingBox.right  += margin;
+  }
+
+
+  /**
+   * Actual implementation of this method call.
+   *
+   * Doing it like this makes it easier to override
+   * in the child classes.
+   */
+  _updateBoundingBox(x, y, ctx, selected, hover) {
+    if (ctx !== undefined) {
+      this.resize(ctx, selected, hover);
+    }
+
+    this.left = x - this.width / 2;
+    this.top  = y - this.height/ 2;
+
+    this.boundingBox.left   = this.left;
+    this.boundingBox.top    = this.top;
+    this.boundingBox.bottom = this.top + this.height;
+    this.boundingBox.right  = this.left + this.width;
+  }
+
+
+  /**
+   * Default implementation of this method call.
+   *
+   * This acts as a stub which can be overridden.
+   */
+  updateBoundingBox(x, y, ctx, selected, hover) {
+    this._updateBoundingBox(x, y, ctx, selected, hover);
+  }
 }
 
 export default NodeBase;

lib/network/modules/components/nodes/util/ShapeBase.js

@@ -17,35 +17,12 @@ class ShapeBase extends NodeBase {
 
   _drawShape(ctx, shape, sizeMultiplier, x, y, selected, hover, values) {
     this.resize(ctx, selected, hover, values);
-
     this.left = x - this.width / 2;
     this.top = y - this.height / 2;
 
-    var borderWidth = values.borderWidth / this.body.view.scale;
-    ctx.lineWidth = Math.min(this.width, borderWidth);
-
-    ctx.strokeStyle = values.borderColor;
-    ctx.fillStyle = values.color;
+    this.initContextForDraw(ctx, values);
     ctx[shape](x, y, values.size);
-
-    // draw shadow if enabled
-    this.enableShadow(ctx, values);
-    // draw the background
-    ctx.fill();
-    // disable shadows for other elements.
-    this.disableShadow(ctx, values);
-
-    //draw dashed border if enabled, save and restore is required for firefox not to crash on unix.
-    ctx.save();
-    // if borders are zero width, they will be drawn with width 1 by default. This prevents that
-    if (borderWidth > 0) {
-      this.enableBorderDashes(ctx, values);
-      //draw the border
-      ctx.stroke();
-      //disable dashed border for other elements
-      this.disableBorderDashes(ctx, values);
-    }
-    ctx.restore();
+    this.performFill(ctx, values);
 
     if (this.options.label !== undefined) {
       // Need to call following here in order to ensure value for `this.labelModule.size.height`