visjs-network/lib/network/modules/components/Node.js

A dynamic, browser-based network visualization library.

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