Browse Source

Refactoring of Node Drawing (#3170)

* Consolidated common code for drawing in nodes

* Consolidated updateBoundingBox(), default version

* Setting bounding box margin in separate method
gemini
wimrijnders 7 years ago
committed by yotamberk
parent
commit
a820ec4b77
9 changed files with 92 additions and 194 deletions
  1. +4
    -33
      lib/network/modules/components/nodes/shapes/Box.js
  2. +0
    -6
      lib/network/modules/components/nodes/shapes/Circle.js
  3. +2
    -37
      lib/network/modules/components/nodes/shapes/Database.js
  4. +2
    -38
      lib/network/modules/components/nodes/shapes/Ellipse.js
  5. +3
    -19
      lib/network/modules/components/nodes/shapes/Image.js
  6. +0
    -12
      lib/network/modules/components/nodes/shapes/Text.js
  7. +2
    -24
      lib/network/modules/components/nodes/util/CircleImageBase.js
  8. +77
    -0
      lib/network/modules/components/nodes/util/NodeBase.js
  9. +2
    -25
      lib/network/modules/components/nodes/util/ShapeBase.js

+ 4
- 33
lib/network/modules/components/nodes/shapes/Box.js View File

@ -22,33 +22,9 @@ class Box extends NodeBase {
this.left = x - this.width / 2; this.left = x - this.width / 2;
this.top = y - this.height / 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); 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.updateBoundingBox(x, y, ctx, selected, hover);
this.labelModule.draw(ctx, this.left + this.textSize.width / 2 + this.margin.left, 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) { 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 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) { distanceToBorder(ctx, angle) {

+ 0
- 6
lib/network/modules/components/nodes/shapes/Circle.js View File

@ -28,12 +28,6 @@ class Circle extends CircleImageBase {
this._drawRawCircle(ctx, x, y, values); 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.updateBoundingBox(x,y);
this.labelModule.draw(ctx, this.left + this.textSize.width / 2 + this.margin.left, this.labelModule.draw(ctx, this.left + this.textSize.width / 2 + this.margin.left,
y, selected, hover); y, selected, hover);

+ 2
- 37
lib/network/modules/components/nodes/shapes/Database.js View File

@ -23,50 +23,15 @@ class Database extends NodeBase {
this.left = x - this.width / 2; this.left = x - this.width / 2;
this.top = y - this.height / 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); 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.updateBoundingBox(x, y, ctx, selected, hover);
this.labelModule.draw(ctx, this.left + this.textSize.width / 2 + this.margin.left, this.labelModule.draw(ctx, this.left + this.textSize.width / 2 + this.margin.left,
this.top + this.textSize.height / 2 + this.margin.top, selected, hover); 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) { distanceToBorder(ctx, angle) {
return this._distanceToBorder(ctx,angle); return this._distanceToBorder(ctx,angle);
} }

+ 2
- 38
lib/network/modules/components/nodes/shapes/Ellipse.js View File

@ -22,50 +22,14 @@ class Ellipse extends NodeBase {
this.left = x - this.width * 0.5; this.left = x - this.width * 0.5;
this.top = y - this.height * 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); 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.updateBoundingBox(x, y, ctx, selected, hover);
this.labelModule.draw(ctx, x, y, 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) { distanceToBorder(ctx, angle) {
this.resize(ctx); this.resize(ctx);

+ 3
- 19
lib/network/modules/components/nodes/shapes/Image.js View File

@ -42,18 +42,8 @@ class Image extends CircleImageBase {
this.height + ctx.lineWidth); this.height + ctx.lineWidth);
ctx.fill(); 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(); ctx.closePath();
} }
@ -66,13 +56,7 @@ class Image extends CircleImageBase {
updateBoundingBox(x,y) { updateBoundingBox(x,y) {
this.resize(); 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) { if (this.options.label !== undefined && this.labelModule.size.width > 0) {
this.boundingBox.left = Math.min(this.boundingBox.left, this.labelModule.size.left); this.boundingBox.left = Math.min(this.boundingBox.left, this.labelModule.size.left);

+ 0
- 12
lib/network/modules/components/nodes/shapes/Text.js View File

@ -33,18 +33,6 @@ class Text extends NodeBase {
this.updateBoundingBox(x, y, ctx, selected, hover); 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) { distanceToBorder(ctx, angle) {
return this._distanceToBorder(ctx,angle); return this._distanceToBorder(ctx,angle);
} }

+ 2
- 24
lib/network/modules/components/nodes/util/CircleImageBase.js View File

@ -109,31 +109,9 @@ class CircleImageBase extends NodeBase {
} }
_drawRawCircle(ctx, x, y, values) { _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); 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) { _drawImageAtPosition(ctx, values) {

+ 77
- 0
lib/network/modules/components/nodes/util/NodeBase.js View File

@ -107,6 +107,83 @@ class NodeBase {
return (this.width === undefined) || (this.labelModule.differentState(selected, hover)); 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; export default NodeBase;

+ 2
- 25
lib/network/modules/components/nodes/util/ShapeBase.js View File

@ -17,35 +17,12 @@ class ShapeBase extends NodeBase {
_drawShape(ctx, shape, sizeMultiplier, x, y, selected, hover, values) { _drawShape(ctx, shape, sizeMultiplier, x, y, selected, hover, values) {
this.resize(ctx, selected, hover, values); this.resize(ctx, selected, hover, values);
this.left = x - this.width / 2; this.left = x - this.width / 2;
this.top = y - this.height / 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); 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) { if (this.options.label !== undefined) {
// Need to call following here in order to ensure value for `this.labelModule.size.height` // Need to call following here in order to ensure value for `this.labelModule.size.height`

Loading…
Cancel
Save