visjs-network
Version:
A dynamic, browser-based network visualization library.
736 lines (669 loc) • 22.5 kB
JavaScript
var util = require('../../../util')
var Label = require('./shared/Label').default
var ComponentUtil = require('./shared/ComponentUtil').default
var Box = require('./nodes/shapes/Box').default
var Circle = require('./nodes/shapes/Circle').default
var CircularImage = require('./nodes/shapes/CircularImage').default
var Database = require('./nodes/shapes/Database').default
var Diamond = require('./nodes/shapes/Diamond').default
var Dot = require('./nodes/shapes/Dot').default
var Ellipse = require('./nodes/shapes/Ellipse').default
var Icon = require('./nodes/shapes/Icon').default
var Image = require('./nodes/shapes/Image').default
var Square = require('./nodes/shapes/Square').default
var Hexagon = require('./nodes/shapes/Hexagon').default
var Star = require('./nodes/shapes/Star').default
var Text = require('./nodes/shapes/Text').default
var Triangle = require('./nodes/shapes/Triangle').default
var TriangleDown = require('./nodes/shapes/TriangleDown').default
var { printStyle } = require('../../../shared/Validator')
/**
* A node. A node can be connected to other nodes via one or multiple edges.
*/
class Node {
/**
*
* @param {object} options An object containing options for the node. All
* options are optional, except for the id.
* {number} id Id of the node. Required
* {string} label Text label for the node
* {number} x Horizontal position of the node
* {number} y Vertical position of the node
* {string} shape Node shape
* {string} image An image url
* {string} title A title text, can be HTML
* {anytype} group A group name or number
*
* @param {Object} body Shared state of current network instance
* @param {Network.Images} imagelist A list with images. Only needed when the node has an image
* @param {Groups} grouplist A list with groups. Needed for retrieving group options
* @param {Object} globalOptions Current global node options; these serve as defaults for the node instance
* @param {Object} defaultOptions Global default options for nodes; note that this is also the prototype
* for parameter `globalOptions`.
*/
constructor(
options,
body,
imagelist,
grouplist,
globalOptions,
defaultOptions
) {
this.options = util.bridgeObject(globalOptions)
this.globalOptions = globalOptions
this.defaultOptions = defaultOptions
this.body = body
this.edges = [] // all edges connected to this node
// set defaults for the options
this.id = undefined
this.imagelist = imagelist
this.grouplist = grouplist
// state options
this.x = undefined
this.y = undefined
this.baseSize = this.options.size
this.baseFontSize = this.options.font.size
this.predefinedPosition = false // used to check if initial fit should just take the range or approximate
this.selected = false
this.hover = false
this.labelModule = new Label(
this.body,
this.options,
false /* Not edge label */
)
this.setOptions(options)
}
/**
* Attach a edge to the node
* @param {Edge} edge
*/
attachEdge(edge) {
if (this.edges.indexOf(edge) === -1) {
this.edges.push(edge)
}
}
/**
* Detach a edge from the node
*
* @param {Edge} edge
*/
detachEdge(edge) {
var index = this.edges.indexOf(edge)
if (index != -1) {
this.edges.splice(index, 1)
}
}
/**
* Set or overwrite options for the node
*
* @param {Object} options an object with options
* @returns {null|boolean}
*/
setOptions(options) {
let currentShape = this.options.shape
if (!options) {
return // Note that the return value will be 'undefined'! This is OK.
}
// basic options
if (options.id !== undefined) {
this.id = options.id
}
if (this.id === undefined) {
throw new Error('Node must have an id')
}
Node.checkMass(options, this.id)
// set these options locally
// clear x and y positions
if (options.x !== undefined) {
if (options.x === null) {
this.x = undefined
this.predefinedPosition = false
} else {
this.x = parseInt(options.x)
this.predefinedPosition = true
}
}
if (options.y !== undefined) {
if (options.y === null) {
this.y = undefined
this.predefinedPosition = false
} else {
this.y = parseInt(options.y)
this.predefinedPosition = true
}
}
if (options.size !== undefined) {
this.baseSize = options.size
}
if (options.value !== undefined) {
options.value = parseFloat(options.value)
}
// this transforms all shorthands into fully defined options
Node.parseOptions(
this.options,
options,
true,
this.globalOptions,
this.grouplist
)
let pile = [options, this.options, this.defaultOptions]
this.chooser = ComponentUtil.choosify('node', pile)
this._load_images()
this.updateLabelModule(options)
this.updateShape(currentShape)
return options.hidden !== undefined || options.physics !== undefined
}
/**
* Load the images from the options, for the nodes that need them.
*
* Images are always loaded, even if they are not used in the current shape.
* The user may switch to an image shape later on.
*
* @private
*/
_load_images() {
if (
this.options.shape === 'circularImage' ||
this.options.shape === 'image'
) {
if (this.options.image === undefined) {
throw new Error(
"Option image must be defined for node type '" +
this.options.shape +
"'"
)
}
}
if (this.options.image === undefined) {
return
}
if (this.imagelist === undefined) {
throw new Error('Internal Error: No images provided')
}
if (typeof this.options.image === 'string') {
this.imageObj = this.imagelist.load(
this.options.image,
this.options.brokenImage,
this.id
)
} else {
if (this.options.image.unselected === undefined) {
throw new Error('No unselected image provided')
}
this.imageObj = this.imagelist.load(
this.options.image.unselected,
this.options.brokenImage,
this.id
)
if (this.options.image.selected !== undefined) {
this.imageObjAlt = this.imagelist.load(
this.options.image.selected,
this.options.brokenImage,
this.id
)
} else {
this.imageObjAlt = undefined
}
}
}
/**
* Copy group option values into the node options.
*
* The group options override the global node options, so the copy of group options
* must happen *after* the global node options have been set.
*
* This method must also be called also if the global node options have changed and the group options did not.
*
* @param {Object} parentOptions
* @param {Object} newOptions new values for the options, currently only passed in for check
* @param {Object} groupList
*/
static updateGroupOptions(parentOptions, newOptions, groupList) {
if (groupList === undefined) return // No groups, nothing to do
var group = parentOptions.group
// paranoia: the selected group is already merged into node options, check.
if (
newOptions !== undefined &&
newOptions.group !== undefined &&
group !== newOptions.group
) {
throw new Error(
"updateGroupOptions: group values in options don't match."
)
}
var hasGroup =
typeof group === 'number' || (typeof group === 'string' && group != '')
if (!hasGroup) return // current node has no group, no need to merge
var groupObj = groupList.get(group)
// Skip merging of group font options into parent; these are required to be distinct for labels
// Also skip mergin of color IF it is already defined in the node itself. This is to avoid the color of the
// group overriding the color set at the node level
// TODO: It might not be a good idea either to merge the rest of the options, investigate this.
var skipProperties = ['font']
if (
newOptions !== undefined &&
newOptions.color !== undefined &&
newOptions.color != null
)
skipProperties.push('color')
util.selectiveNotDeepExtend(skipProperties, parentOptions, groupObj)
// the color object needs to be completely defined.
// Since groups can partially overwrite the colors, we parse it again, just in case.
parentOptions.color = util.parseColor(parentOptions.color)
}
/**
* This process all possible shorthands in the new options and makes sure that the parentOptions are fully defined.
* Static so it can also be used by the handler.
*
* @param {Object} parentOptions
* @param {Object} newOptions
* @param {boolean} [allowDeletion=false]
* @param {Object} [globalOptions={}]
* @param {Object} [groupList]
* @static
*/
static parseOptions(
parentOptions,
newOptions,
allowDeletion = false,
globalOptions = {},
groupList
) {
var fields = ['color', 'fixed', 'shadow']
util.selectiveNotDeepExtend(
fields,
parentOptions,
newOptions,
allowDeletion
)
Node.checkMass(newOptions)
// merge the shadow options into the parent.
util.mergeOptions(parentOptions, newOptions, 'shadow', globalOptions)
// individual shape newOptions
if (newOptions.color !== undefined && newOptions.color !== null) {
let parsedColor = util.parseColor(newOptions.color)
util.fillIfDefined(parentOptions.color, parsedColor)
} else if (allowDeletion === true && newOptions.color === null) {
parentOptions.color = util.bridgeObject(globalOptions.color) // set the object back to the global options
}
// handle the fixed options
if (newOptions.fixed !== undefined && newOptions.fixed !== null) {
if (typeof newOptions.fixed === 'boolean') {
parentOptions.fixed.x = newOptions.fixed
parentOptions.fixed.y = newOptions.fixed
} else {
if (
newOptions.fixed.x !== undefined &&
typeof newOptions.fixed.x === 'boolean'
) {
parentOptions.fixed.x = newOptions.fixed.x
}
if (
newOptions.fixed.y !== undefined &&
typeof newOptions.fixed.y === 'boolean'
) {
parentOptions.fixed.y = newOptions.fixed.y
}
}
}
if (allowDeletion === true && newOptions.font === null) {
parentOptions.font = util.bridgeObject(globalOptions.font) // set the object back to the global options
}
Node.updateGroupOptions(parentOptions, newOptions, groupList)
// handle the scaling options, specifically the label part
if (newOptions.scaling !== undefined) {
util.mergeOptions(
parentOptions.scaling,
newOptions.scaling,
'label',
globalOptions.scaling
)
}
}
/**
*
* @returns {{color: *, borderWidth: *, borderColor: *, size: *, borderDashes: (boolean|Array|allOptions.nodes.shapeProperties.borderDashes|{boolean, array}), borderRadius: (number|allOptions.nodes.shapeProperties.borderRadius|{number}|Array), shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *}}
*/
getFormattingValues() {
let values = {
color: this.options.color.background,
borderWidth: this.options.borderWidth,
borderColor: this.options.color.border,
size: this.options.size,
borderDashes: this.options.shapeProperties.borderDashes,
borderRadius: this.options.shapeProperties.borderRadius,
shadow: this.options.shadow.enabled,
shadowColor: this.options.shadow.color,
shadowSize: this.options.shadow.size,
shadowX: this.options.shadow.x,
shadowY: this.options.shadow.y
}
if (this.selected || this.hover) {
if (this.chooser === true) {
if (this.selected) {
values.borderWidth *= 2
values.color = this.options.color.highlight.background
values.borderColor = this.options.color.highlight.border
values.shadow = this.options.shadow.enabled
} else if (this.hover) {
values.color = this.options.color.hover.background
values.borderColor = this.options.color.hover.border
values.shadow = this.options.shadow.enabled
}
} else if (typeof this.chooser === 'function') {
this.chooser(values, this.options.id, this.selected, this.hover)
if (values.shadow === false) {
if (
values.shadowColor !== this.options.shadow.color ||
values.shadowSize !== this.options.shadow.size ||
values.shadowX !== this.options.shadow.x ||
values.shadowY !== this.options.shadow.y
) {
values.shadow = true
}
}
}
} else {
values.shadow = this.options.shadow.enabled
}
return values
}
/**
*
* @param {Object} options
*/
updateLabelModule(options) {
if (this.options.label === undefined || this.options.label === null) {
this.options.label = ''
}
Node.updateGroupOptions(this.options, options, this.grouplist)
//
// Note:The prototype chain for this.options is:
//
// this.options -> NodesHandler.options -> NodesHandler.defaultOptions
// (also: this.globalOptions)
//
// Note that the prototypes are mentioned explicitly in the pile list below;
// WE DON'T WANT THE ORDER OF THE PROTOTYPES!!!! At least, not for font handling of labels.
// This is a good indication that the prototype usage of options is deficient.
//
var currentGroup = this.grouplist.get(this.options.group, false)
let pile = [
options, // new options
this.options, // current node options, see comment above for prototype
currentGroup, // group options, if any
this.globalOptions, // Currently set global node options
this.defaultOptions // Default global node options
]
this.labelModule.update(this.options, pile)
if (this.labelModule.baseSize !== undefined) {
this.baseFontSize = this.labelModule.baseSize
}
}
/**
*
* @param {string} currentShape
*/
updateShape(currentShape) {
if (currentShape === this.options.shape && this.shape) {
this.shape.setOptions(this.options, this.imageObj, this.imageObjAlt)
} else {
// choose draw method depending on the shape
switch (this.options.shape) {
case 'box':
this.shape = new Box(this.options, this.body, this.labelModule)
break
case 'circle':
this.shape = new Circle(this.options, this.body, this.labelModule)
break
case 'circularImage':
this.shape = new CircularImage(
this.options,
this.body,
this.labelModule,
this.imageObj,
this.imageObjAlt
)
break
case 'database':
this.shape = new Database(this.options, this.body, this.labelModule)
break
case 'diamond':
this.shape = new Diamond(this.options, this.body, this.labelModule)
break
case 'dot':
this.shape = new Dot(this.options, this.body, this.labelModule)
break
case 'ellipse':
this.shape = new Ellipse(this.options, this.body, this.labelModule)
break
case 'icon':
this.shape = new Icon(this.options, this.body, this.labelModule)
break
case 'image':
this.shape = new Image(
this.options,
this.body,
this.labelModule,
this.imageObj,
this.imageObjAlt
)
break
case 'square':
this.shape = new Square(this.options, this.body, this.labelModule)
break
case 'hexagon':
this.shape = new Hexagon(this.options, this.body, this.labelModule)
break
case 'star':
this.shape = new Star(this.options, this.body, this.labelModule)
break
case 'text':
this.shape = new Text(this.options, this.body, this.labelModule)
break
case 'triangle':
this.shape = new Triangle(this.options, this.body, this.labelModule)
break
case 'triangleDown':
this.shape = new TriangleDown(
this.options,
this.body,
this.labelModule
)
break
default:
this.shape = new Ellipse(this.options, this.body, this.labelModule)
break
}
}
this.needsRefresh()
}
/**
* select this node
*/
select() {
this.selected = true
this.needsRefresh()
}
/**
* unselect this node
*/
unselect() {
this.selected = false
this.needsRefresh()
}
/**
* Reset the calculated size of the node, forces it to recalculate its size
*/
needsRefresh() {
this.shape.refreshNeeded = true
}
/**
* get the title of this node.
* @return {string} title The title of the node, or undefined when no title
* has been set.
*/
getTitle() {
return this.options.title
}
/**
* Calculate the distance to the border of the Node
* @param {CanvasRenderingContext2D} ctx
* @param {number} angle Angle in radians
* @returns {number} distance Distance to the border in pixels
*/
distanceToBorder(ctx, angle) {
return this.shape.distanceToBorder(ctx, angle)
}
/**
* Check if this node has a fixed x and y position
* @return {boolean} true if fixed, false if not
*/
isFixed() {
return this.options.fixed.x && this.options.fixed.y
}
/**
* check if this node is selecte
* @return {boolean} selected True if node is selected, else false
*/
isSelected() {
return this.selected
}
/**
* Retrieve the value of the node. Can be undefined
* @return {number} value
*/
getValue() {
return this.options.value
}
/**
* Get the current dimensions of the label
*
* @return {rect}
*/
getLabelSize() {
return this.labelModule.size()
}
/**
* Adjust the value range of the node. The node will adjust it's size
* based on its value.
* @param {number} min
* @param {number} max
* @param {number} total
*/
setValueRange(min, max, total) {
if (this.options.value !== undefined) {
var scale = this.options.scaling.customScalingFunction(
min,
max,
total,
this.options.value
)
var sizeDiff = this.options.scaling.max - this.options.scaling.min
if (this.options.scaling.label.enabled === true) {
var fontDiff =
this.options.scaling.label.max - this.options.scaling.label.min
this.options.font.size =
this.options.scaling.label.min + scale * fontDiff
}
this.options.size = this.options.scaling.min + scale * sizeDiff
} else {
this.options.size = this.baseSize
this.options.font.size = this.baseFontSize
}
this.updateLabelModule()
}
/**
* Draw this node in the given canvas
* The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
* @param {CanvasRenderingContext2D} ctx
*/
draw(ctx) {
let values = this.getFormattingValues()
this.shape.draw(ctx, this.x, this.y, this.selected, this.hover, values)
}
/**
* Update the bounding box of the shape
* @param {CanvasRenderingContext2D} ctx
*/
updateBoundingBox(ctx) {
this.shape.updateBoundingBox(this.x, this.y, ctx)
}
/**
* Recalculate the size of this node in the given canvas
* The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
* @param {CanvasRenderingContext2D} ctx
*/
resize(ctx) {
let values = this.getFormattingValues()
this.shape.resize(ctx, this.selected, this.hover, values)
}
/**
* Determine all visual elements of this node instance, in which the given
* point falls within the bounding shape.
*
* @param {point} point
* @returns {Array.<nodeClickItem|nodeLabelClickItem>} list with the items which are on the point
*/
getItemsOnPoint(point) {
var ret = []
if (this.labelModule.visible()) {
if (ComponentUtil.pointInRect(this.labelModule.getSize(), point)) {
ret.push({ nodeId: this.id, labelId: 0 })
}
}
if (ComponentUtil.pointInRect(this.shape.boundingBox, point)) {
ret.push({ nodeId: this.id })
}
return ret
}
/**
* Check if this object is overlapping with the provided object
* @param {Object} obj an object with parameters left, top, right, bottom
* @return {boolean} True if location is located on node
*/
isOverlappingWith(obj) {
return (
this.shape.left < obj.right &&
this.shape.left + this.shape.width > obj.left &&
this.shape.top < obj.bottom &&
this.shape.top + this.shape.height > obj.top
)
}
/**
* Check if this object is overlapping with the provided object
* @param {Object} obj an object with parameters left, top, right, bottom
* @return {boolean} True if location is located on node
*/
isBoundingBoxOverlappingWith(obj) {
return (
this.shape.boundingBox.left < obj.right &&
this.shape.boundingBox.right > obj.left &&
this.shape.boundingBox.top < obj.bottom &&
this.shape.boundingBox.bottom > obj.top
)
}
/**
* Check valid values for mass
*
* The mass may not be negative or zero. If it is, reset to 1
*
* @param {object} options
* @param {Node.id} id
* @static
*/
static checkMass(options, id) {
if (options.mass !== undefined && options.mass <= 0) {
let strId = ''
if (id !== undefined) {
strId = ' in node id: ' + id
}
console.log(
'%cNegative or zero mass disallowed' + strId + ', setting mass to 1.',
printStyle
)
options.mass = 1
}
}
}
export default Node