diff --git a/lib/network/modules/components/nodes/shapes/Box.js b/lib/network/modules/components/nodes/shapes/Box.js index 5b3eb7a3..3b6ff973 100644 --- a/lib/network/modules/components/nodes/shapes/Box.js +++ b/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) { diff --git a/lib/network/modules/components/nodes/shapes/Circle.js b/lib/network/modules/components/nodes/shapes/Circle.js index 764d7340..710c2e2e 100644 --- a/lib/network/modules/components/nodes/shapes/Circle.js +++ b/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); diff --git a/lib/network/modules/components/nodes/shapes/Database.js b/lib/network/modules/components/nodes/shapes/Database.js index efc6493c..91843a7f 100644 --- a/lib/network/modules/components/nodes/shapes/Database.js +++ b/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); } diff --git a/lib/network/modules/components/nodes/shapes/Ellipse.js b/lib/network/modules/components/nodes/shapes/Ellipse.js index d993efe3..d36b4b7b 100644 --- a/lib/network/modules/components/nodes/shapes/Ellipse.js +++ b/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); diff --git a/lib/network/modules/components/nodes/shapes/Image.js b/lib/network/modules/components/nodes/shapes/Image.js index ab1e7135..5905f462 100644 --- a/lib/network/modules/components/nodes/shapes/Image.js +++ b/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); diff --git a/lib/network/modules/components/nodes/shapes/Text.js b/lib/network/modules/components/nodes/shapes/Text.js index f2b1ae40..34483e45 100644 --- a/lib/network/modules/components/nodes/shapes/Text.js +++ b/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); } diff --git a/lib/network/modules/components/nodes/util/CircleImageBase.js b/lib/network/modules/components/nodes/util/CircleImageBase.js index 4209260e..2fcd81ba 100644 --- a/lib/network/modules/components/nodes/util/CircleImageBase.js +++ b/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) { diff --git a/lib/network/modules/components/nodes/util/NodeBase.js b/lib/network/modules/components/nodes/util/NodeBase.js index 1f7aaf03..92127adb 100644 --- a/lib/network/modules/components/nodes/util/NodeBase.js +++ b/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; diff --git a/lib/network/modules/components/nodes/util/ShapeBase.js b/lib/network/modules/components/nodes/util/ShapeBase.js index 6c2e14e3..578c4c13 100644 --- a/lib/network/modules/components/nodes/util/ShapeBase.js +++ b/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`