visjs-network
Version:
A dynamic, browser-based network visualization library.
300 lines (275 loc) • 7.71 kB
JavaScript
/**
* The Base class for all Nodes.
*/
class NodeBase {
/**
* @param {Object} options
* @param {Object} body
* @param {Label} labelModule
*/
constructor(options, body, labelModule) {
this.body = body
this.labelModule = labelModule
this.setOptions(options)
this.top = undefined
this.left = undefined
this.height = undefined
this.width = undefined
this.radius = undefined
this.margin = undefined
this.refreshNeeded = true
this.boundingBox = { top: 0, left: 0, right: 0, bottom: 0 }
}
/**
*
* @param {Object} options
*/
setOptions(options) {
this.options = options
}
/**
*
* @param {Label} labelModule
* @private
*/
_setMargins(labelModule) {
this.margin = {}
if (this.options.margin) {
if (typeof this.options.margin == 'object') {
this.margin.top = this.options.margin.top
this.margin.right = this.options.margin.right
this.margin.bottom = this.options.margin.bottom
this.margin.left = this.options.margin.left
} else {
this.margin.top = this.options.margin
this.margin.right = this.options.margin
this.margin.bottom = this.options.margin
this.margin.left = this.options.margin
}
}
labelModule.adjustSizes(this.margin)
}
/**
*
* @param {CanvasRenderingContext2D} ctx
* @param {number} angle
* @returns {number}
* @private
*/
_distanceToBorder(ctx, angle) {
var borderWidth = this.options.borderWidth
this.resize(ctx)
return (
Math.min(
Math.abs(this.width / 2 / Math.cos(angle)),
Math.abs(this.height / 2 / Math.sin(angle))
) + borderWidth
)
}
/**
*
* @param {CanvasRenderingContext2D} ctx
* @param {ArrowOptions} values
*/
enableShadow(ctx, values) {
if (values.shadow) {
ctx.shadowColor = values.shadowColor
ctx.shadowBlur = values.shadowSize
ctx.shadowOffsetX = values.shadowX
ctx.shadowOffsetY = values.shadowY
}
}
/**
*
* @param {CanvasRenderingContext2D} ctx
* @param {ArrowOptions} values
*/
disableShadow(ctx, values) {
if (values.shadow) {
ctx.shadowColor = 'rgba(0,0,0,0)'
ctx.shadowBlur = 0
ctx.shadowOffsetX = 0
ctx.shadowOffsetY = 0
}
}
/**
*
* @param {CanvasRenderingContext2D} ctx
* @param {ArrowOptions} values
*/
enableBorderDashes(ctx, values) {
if (values.borderDashes !== false) {
if (ctx.setLineDash !== undefined) {
let dashes = values.borderDashes
if (dashes === true) {
dashes = [5, 15]
}
ctx.setLineDash(dashes)
} else {
console.warn(
'setLineDash is not supported in this browser. The dashed borders cannot be used.'
)
this.options.shapeProperties.borderDashes = false
values.borderDashes = false
}
}
}
/**
*
* @param {CanvasRenderingContext2D} ctx
* @param {ArrowOptions} values
*/
disableBorderDashes(ctx, values) {
if (values.borderDashes !== false) {
if (ctx.setLineDash !== undefined) {
ctx.setLineDash([0])
} else {
console.warn(
'setLineDash is not supported in this browser. The dashed borders cannot be used.'
)
this.options.shapeProperties.borderDashes = false
values.borderDashes = false
}
}
}
/**
* Determine if the shape of a node needs to be recalculated.
*
* @param {boolean} selected
* @param {boolean} hover
* @returns {boolean}
* @protected
*/
needsRefresh(selected, hover) {
if (this.refreshNeeded === true) {
// This is probably not the best location to reset this member.
// However, in the current logic, it is the most convenient one.
this.refreshNeeded = false
return true
}
return (
this.width === undefined ||
this.labelModule.differentState(selected, hover)
)
}
/**
*
* @param {CanvasRenderingContext2D} ctx
* @param {ArrowOptions} values
*/
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
}
/**
*
* @param {CanvasRenderingContext2D} ctx
* @param {ArrowOptions} values
*/
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()
}
/**
*
* @param {CanvasRenderingContext2D} ctx
* @param {ArrowOptions} values
*/
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)
}
/**
*
* @param {number} margin
* @private
*/
_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.
*
* @param {number} x width
* @param {number} y height
* @param {CanvasRenderingContext2D} ctx
* @param {boolean} selected
* @param {boolean} hover
* @private
*/
_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.
*
* @param {number} x width
* @param {number} y height
* @param {CanvasRenderingContext2D} ctx
* @param {boolean} selected
* @param {boolean} hover
*/
updateBoundingBox(x, y, ctx, selected, hover) {
this._updateBoundingBox(x, y, ctx, selected, hover)
}
/**
* Determine the dimensions to use for nodes with an internal label
*
* Currently, these are: Circle, Ellipse, Database, Box
* The other nodes have external labels, and will not call this method
*
* If there is no label, decent default values are supplied.
*
* @param {CanvasRenderingContext2D} ctx
* @param {boolean} [selected]
* @param {boolean} [hover]
* @returns {{width:number, height:number}}
*/
getDimensionsFromLabel(ctx, selected, hover) {
// NOTE: previously 'textSize' was not put in 'this' for Ellipse
// TODO: examine the consequences.
this.textSize = this.labelModule.getTextSize(ctx, selected, hover)
var width = this.textSize.width
var height = this.textSize.height
const DEFAULT_SIZE = 14
if (width === 0) {
// This happens when there is no label text set
width = DEFAULT_SIZE // use a decent default
height = DEFAULT_SIZE // if width zero, then height also always zero
}
return { width: width, height: height }
}
}
export default NodeBase