jrtechs-vis/lib/network/modules/components/nodes/NodeMain.js

var util = require('../../../../util');


import Label from '../unified/label.js'
/**
 * @class Node
 * A node. A node can be connected to other nodes via one or multiple edges.
 * @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, available:
 *                                              "database", "circle", "ellipse",
 *                                              "box", "image", "text", "dot",
 *                                              "star", "triangle", "triangleDown",
 *                                              "square", "icon"
 *                              {string} image  An image url
 *                              {string} title  An title text, can be HTML
 *                              {anytype} group A group name or number
 * @param {Network.Images} imagelist    A list with images. Only needed
 *                                            when the node has an image
 * @param {Network.Groups} grouplist    A list with groups. Needed for
 *                                            retrieving group options
 * @param {Object}               constants    An object with default values for
 *                                            example for the color
 *
 */
class Node {
  constructor(options, body, imagelist, grouplist, globalOptions) {
    this.options = util.bridgeObject(globalOptions);

    this.selected = false;
    this.hover = false;

    this.edges = []; // all edges connected to this node

    // set defaults for the options
    this.id = undefined;
    this.allowedToMoveX = false;
    this.allowedToMoveY = false;
    this.xFixed = false;
    this.yFixed = false;

    this.boundingBox = {top: 0, left: 0, right: 0, bottom: 0};

    this.imagelist = imagelist;
    this.grouplist = grouplist;

    // physics options
    this.x = null;
    this.y = null;
    this.predefinedPosition = false; // used to check if initial zoomExtent should just take the range or approximate

    this.fixedData = {x: null, y: null};
    this.labelModule = new Label(body, this.options);

    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
   * @param {Object} constants  and object with default, global options
   */
  setOptions(options) {
    if (!options) {
      return;
    }

    var fields = [
      'borderWidth',
      'borderWidthSelected',
      'shape',
      'image',
      'brokenImage',
      'size',
      'label',
      'customScalingFunction',
      'icon',
      'value',
      'hidden',
      'physics'
    ];
    util.selectiveDeepExtend(fields, this.options, options);

    // basic options
    if (options.id !== undefined) {
      this.id = options.id;
    }
    if (options.title !== undefined) {
      this.title = options.title;
    }
    if (options.x !== undefined) {
      this.x = options.x;
      this.predefinedPosition = true;
    }
    if (options.y !== undefined) {
      this.y = options.y;
      this.predefinedPosition = true;
    }
    if (options.value !== undefined) {
      this.value = options.value;
    }
    if (options.level !== undefined) {
      this.level = options.level;
      this.preassignedLevel = true;
    }

    if (options.triggerFunction !== undefined) {
      this.triggerFunction = options.triggerFunction;
    }

    if (this.id === undefined) {
      throw "Node must have an id";
    }

    // copy group options
    if (typeof options.group === 'number' || (typeof options.group === 'string' && options.group != '')) {
      var groupObj = this.grouplist.get(options.group);
      util.deepExtend(this.options, groupObj);
      // the color object needs to be completely defined. Since groups can partially overwrite the colors, we parse it again, just in case.
      this.options.color = util.parseColor(this.options.color);
    }
    // individual shape options
    if (options.color !== undefined) {
      this.options.color = util.parseColor(options.color);
    }

    if (this.options.image !== undefined && this.options.image != "") {
      if (this.imagelist) {
        this.imageObj = this.imagelist.load(this.options.image, this.options.brokenImage);
      }
      else {
        throw "No imagelist provided";
      }
    }

    if (options.allowedToMoveX !== undefined) {
      this.xFixed = !options.allowedToMoveX;
      this.allowedToMoveX = options.allowedToMoveX;
    }
    else if (options.x !== undefined && this.allowedToMoveX == false) {
      this.xFixed = true;
    }


    if (options.allowedToMoveY !== undefined) {
      this.yFixed = !options.allowedToMoveY;
      this.allowedToMoveY = options.allowedToMoveY;
    }
    else if (options.y !== undefined && this.allowedToMoveY == false) {
      this.yFixed = true;
    }

    // choose draw method depending on the shape
    switch (this.options.shape) {
      case 'database':
        this.draw = this._drawDatabase;
        this.resize = this._resizeDatabase;
        break;
      case 'box':
        this.draw = this._drawBox;
        this.resize = this._resizeBox;
        break;
      case 'circle':
        this.draw = this._drawCircle;
        this.resize = this._resizeCircle;
        break;
      case 'ellipse':
        this.draw = this._drawEllipse;
        this.resize = this._resizeEllipse;
        break;
      // TODO: add diamond shape
      case 'image':
        this.draw = this._drawImage;
        this.resize = this._resizeImage;
        break;
      case 'circularImage':
        this.draw = this._drawCircularImage;
        this.resize = this._resizeCircularImage;
        break;
      case 'text':
        this.draw = this._drawText;
        this.resize = this._resizeText;
        break;
      case 'dot':
        this.draw = this._drawDot;
        this.resize = this._resizeShape;
        break;
      case 'square':
        this.draw = this._drawSquare;
        this.resize = this._resizeShape;
        break;
      case 'triangle':
        this.draw = this._drawTriangle;
        this.resize = this._resizeShape;
        break;
      case 'triangleDown':
        this.draw = this._drawTriangleDown;
        this.resize = this._resizeShape;
        break;
      case 'star':
        this.draw = this._drawStar;
        this.resize = this._resizeShape;
        break;
      case 'icon':
        this.draw = this._drawIcon;
        this.resize = this._resizeIcon;
        break;
      default:
        this.draw = this._drawEllipse;
        this.resize = this._resizeEllipse;
        break;
    }

    this.labelModule.setOptions(this.options);

    // reset the size of the node, this can be changed
    this._reset();

  }


  /**
   * select this node
   */
  select() {
    this.selected = true;
    this._reset();
  }


  /**
   * unselect this node
   */
  unselect() {
    this.selected = false;
    this._reset();
  }



  /**
   * Reset the calculated size of the node, forces it to recalculate its size
   * @private
   */
  _reset() {
    this.width = undefined;
    this.height = undefined;
  }


  /**
   * get the title of this node.
   * @return {string} title    The title of the node, or undefined when no title
   *                           has been set.
   */
  getTitle() {
    return typeof this.title === "function" ? this.title() : this.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) {
    var borderWidth = 1;

    if (!this.width) {
      this.resize(ctx);
    }

    switch (this.options.shape) {
      case 'circle':
      case 'dot':
        return this.options.size + borderWidth;

      case 'ellipse':
        var a = this.width / 2;
        var b = this.height / 2;
        var w = (Math.sin(angle) * a);
        var h = (Math.cos(angle) * b);
        return a * b / Math.sqrt(w * w + h * h);

      // TODO: implement distanceToBorder for database
      // TODO: implement distanceToBorder for triangle
      // TODO: implement distanceToBorder for triangleDown

      case 'box':
      case 'image':
      case 'text':
      default:
        if (this.width) {
          return Math.min(
              Math.abs(this.width / 2 / Math.cos(angle)),
              Math.abs(this.height / 2 / Math.sin(angle))) + borderWidth;
          // TODO: reckon with border size too in case of box
        }
        else {
          return 0;
        }

    }
    // TODO: implement calculation of distance to border for all shapes
  }


  /**
   * Check if this node has a fixed x and y position
   * @return {boolean}      true if fixed, false if not
   */
  isFixed() {
    return (this.xFixed && this.yFixed);
  }


  /**
   * 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.value;
  }


  /**
   * Adjust the value range of the node. The node will adjust it's size
   * based on its value.
   * @param {Number} min
   * @param {Number} max
   */
  setValueRange(min, max, total) {
    if (this.value !== undefined) {
      var scale = this.options.scaling.customScalingFunction(min, max, total, this.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;
    }
  }


  /**
   * 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) {
    throw "Draw method not initialized for node";
  }


  /**
   * 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) {
    throw "Resize method not initialized for node";
  }


  /**
   * 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.left < obj.right &&
    this.left + this.width > obj.left &&
    this.top < obj.bottom &&
    this.top + this.height > obj.top);
  }


  _resizeImage(ctx) {
    // TODO: pre calculate the image size

    if (!this.width || !this.height) {  // undefined or 0
      var width, height;
      if (this.value) {
        var scale = this.imageObj.height / this.imageObj.width;
        if (scale !== undefined) {
          width = this.options.size || this.imageObj.width;
          height = this.options.size * scale || this.imageObj.height;
        }
        else {
          width = 0;
          height = 0;
        }
      }
      else {
        width = this.imageObj.width;
        height = this.imageObj.height;
      }
      this.width = width;
      this.height = height;
    }
  }


  _drawImageAtPosition(ctx) {
    if (this.imageObj.width != 0) {
      // draw the image
      ctx.globalAlpha = 1.0;
      ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
    }
  }


  _drawImageLabel(ctx) {
    var yLabel;
    var offset = 0;

    if (this.height) {
      offset = this.height / 2;
      var labelDimensions = this.labelModule.labelDimensions;

      if (labelDimensions.lineCount >= 1) {
        offset += labelDimensions.height / 2;
        offset += 3;
      }
    }

    yLabel = this.y + offset;

    this.labelModule.draw(ctx, this.x, yLabel);
  }


  _drawImage(ctx) {
    this._resizeImage(ctx);
    this.left = this.x - this.width / 2;
    this.top = this.y - this.height / 2;

    this._drawImageAtPosition(ctx);

    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._drawImageLabel(ctx);
    this.boundingBox.left = Math.min(this.boundingBox.left, this.labelModule.size.left);
    this.boundingBox.right = Math.max(this.boundingBox.right, this.labelModule.size.left + this.labelModule.size.width);
    this.boundingBox.bottom = Math.max(this.boundingBox.bottom, this.boundingBox.bottom + this.labelModule.size.height);
  }


  _resizeCircularImage(ctx) {
    if (!this.imageObj.src || !this.imageObj.width || !this.imageObj.height) {
      if (!this.width) {
        var diameter = this.options.size * 2;
        this.width = diameter;
        this.height = diameter;
        this._swapToImageResizeWhenImageLoaded = true;
      }
    }
    else {
      if (this._swapToImageResizeWhenImageLoaded) {
        this.width = 0;
        this.height = 0;
        delete this._swapToImageResizeWhenImageLoaded;
      }
      this._resizeImage(ctx);
    }

  }


  _drawCircularImage(ctx) {
    this._resizeCircularImage(ctx);

    this.left = this.x - this.width / 2;
    this.top = this.y - this.height / 2;

    var centerX = this.left + (this.width / 2);
    var centerY = this.top + (this.height / 2);
    var size = Math.abs(this.height / 2);

    this._drawRawCircle(ctx, size);

    ctx.save();
    ctx.circle(this.x, this.y, size);
    ctx.stroke();
    ctx.clip();

    this._drawImageAtPosition(ctx);

    ctx.restore();

    this.boundingBox.top = this.y - this.options.size;
    this.boundingBox.left = this.x - this.options.size;
    this.boundingBox.right = this.x + this.options.size;
    this.boundingBox.bottom = this.y + this.options.size;

    this._drawImageLabel(ctx);

    this.boundingBox.left = Math.min(this.boundingBox.left, this.labelModule.size.left);
    this.boundingBox.right = Math.max(this.boundingBox.right, this.labelModule.size.left + this.labelModule.size.width);
    this.boundingBox.bottom = Math.max(this.boundingBox.bottom, this.boundingBox.bottom + this.labelModule.size.height);
  }


  _resizeBox(ctx) {
    if (!this.width) {
      var margin = 5;
      var textSize = this.labelModule.getTextSize(ctx,this.selected);
      this.width = textSize.width + 2 * margin;
      this.height = textSize.height + 2 * margin;
    }
  }


  _drawBox(ctx) {
    this._resizeBox(ctx);

    this.left = this.x - this.width / 2;
    this.top = this.y - this.height / 2;

    var borderWidth = this.options.borderWidth;
    var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;

    ctx.strokeStyle = this.selected ? this.options.color.highlight.border : this.hover ? this.options.color.hover.border : this.options.color.border;
    ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth);
    ctx.lineWidth *= this.networkScaleInv;
    ctx.lineWidth = Math.min(this.width, ctx.lineWidth);

    ctx.fillStyle = this.selected ? this.options.color.highlight.background : this.hover ? this.options.color.hover.background : this.options.color.background;

    ctx.roundRect(this.left, this.top, this.width, this.height, this.options.size);
    ctx.fill();
    ctx.stroke();

    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.labelModule.draw(ctx, this.x, this.y);
  }


  _resizeDatabase(ctx) {
    if (!this.width) {
      var margin = 5;
      var textSize = this.labelModule.getTextSize(ctx,this.selected);
      var size = textSize.width + 2 * margin;
      this.width = size;
      this.height = size;
    }
  }


  _drawDatabase(ctx) {
    this._resizeDatabase(ctx);
    this.left = this.x - this.width / 2;
    this.top = this.y - this.height / 2;

    var borderWidth = this.options.borderWidth;
    var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;

    ctx.strokeStyle = this.selected ? this.options.color.highlight.border : this.hover ? this.options.color.hover.border : this.options.color.border;
    ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth);
    ctx.lineWidth *= this.networkScaleInv;
    ctx.lineWidth = Math.min(this.width, ctx.lineWidth);

    ctx.fillStyle = this.selected ? this.options.color.highlight.background : this.hover ? this.options.color.hover.background : this.options.color.background;
    ctx.database(this.x - this.width / 2, this.y - this.height * 0.5, this.width, this.height);
    ctx.fill();
    ctx.stroke();

    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.labelModule.draw(ctx, this.x, this.y);
  }


  _resizeCircle(ctx) {
    if (!this.width) {
      var margin = 5;
      var textSize = this.labelModule.getTextSize(ctx,this.selected);
      var diameter = Math.max(textSize.width, textSize.height) + 2 * margin;
      this.options.size = diameter / 2;

      this.width = diameter;
      this.height = diameter;
    }
  }


  _drawRawCircle(ctx, size) {
    var borderWidth = this.options.borderWidth;
    var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;

    ctx.strokeStyle = this.selected ? this.options.color.highlight.border : this.hover ? this.options.color.hover.border : this.options.color.border;

    ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth);
    ctx.lineWidth *= this.networkScaleInv;
    ctx.lineWidth = Math.min(this.width, ctx.lineWidth);

    ctx.fillStyle = this.selected ? this.options.color.highlight.background : this.hover ? this.options.color.hover.background : this.options.color.background;
    ctx.circle(this.x, this.y, size);
    ctx.fill();
    ctx.stroke();
  }


  _drawCircle(ctx) {
    this._resizeCircle(ctx);
    this.left = this.x - this.width / 2;
    this.top = this.y - this.height / 2;

    this._drawRawCircle(ctx, this.options.size);

    this.boundingBox.top = this.y - this.options.size;
    this.boundingBox.left = this.x - this.options.size;
    this.boundingBox.right = this.x + this.options.size;
    this.boundingBox.bottom = this.y + this.options.size;

    this.labelModule.draw(ctx, this.x, this.y);
  }


  _resizeEllipse(ctx) {
    if (this.width === undefined) {
      var textSize = this.labelModule.getTextSize(ctx,this.selected);

      this.width = textSize.width * 1.5;
      this.height = textSize.height * 2;
      if (this.width < this.height) {
        this.width = this.height;
      }
    }
  }


  _drawEllipse(ctx) {
    this._resizeEllipse(ctx);
    this.left = this.x - this.width / 2;
    this.top = this.y - this.height / 2;

    var borderWidth = this.options.borderWidth;
    var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;

    ctx.strokeStyle = this.selected ? this.options.color.highlight.border : this.hover ? this.options.color.hover.border : this.options.color.border;

    ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth);
    ctx.lineWidth *= this.networkScaleInv;
    ctx.lineWidth = Math.min(this.width, ctx.lineWidth);

    ctx.fillStyle = this.selected ? this.options.color.highlight.background : this.hover ? this.options.color.hover.background : this.options.color.background;

    ctx.ellipse(this.left, this.top, this.width, this.height);
    ctx.fill();
    ctx.stroke();

    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.labelModule.draw(ctx, this.x, this.y, this.selected);
  }


  _drawDot(ctx) {
    this._drawShape(ctx, 'circle');
  }


  _drawTriangle(ctx) {
    this._drawShape(ctx, 'triangle');
  }


  _drawTriangleDown(ctx) {
    this._drawShape(ctx, 'triangleDown');
  }


  _drawSquare(ctx) {
    this._drawShape(ctx, 'square');
  }


  _drawStar(ctx) {
    this._drawShape(ctx, 'star');
  }


  _resizeShape(ctx) {
    if (!this.width) {
      var size = 2 * this.options.size;
      this.width = size;
      this.height = size;
    }
  }


  _drawShape(ctx, shape) {
    this._resizeShape(ctx);

    this.left = this.x - this.width / 2;
    this.top = this.y - this.height / 2;

    var borderWidth = this.options.borderWidth;
    var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
    var sizeMultiplier = 2;

    // choose draw method depending on the shape
    switch (shape) {
      case 'dot':
        sizeMultiplier = 2;
        break;
      case 'square':
        sizeMultiplier = 2;
        break;
      case 'triangle':
        sizeMultiplier = 3;
        break;
      case 'triangleDown':
        sizeMultiplier = 3;
        break;
      case 'star':
        sizeMultiplier = 4;
        break;
    }

    ctx.strokeStyle = this.selected ? this.options.color.highlight.border : this.hover ? this.options.color.hover.border : this.options.color.border;
    ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth);
    ctx.lineWidth *= this.networkScaleInv;
    ctx.lineWidth = Math.min(this.width, ctx.lineWidth);

    ctx.fillStyle = this.selected ? this.options.color.highlight.background : this.hover ? this.options.color.hover.background : this.options.color.background;
    ctx[shape](this.x, this.y, this.options.size);
    ctx.fill();
    ctx.stroke();

    this.boundingBox.top = this.y - this.options.size;
    this.boundingBox.left = this.x - this.options.size;
    this.boundingBox.right = this.x + this.options.size;
    this.boundingBox.bottom = this.y + this.options.size;

    if (this.options.label!== undefined) {
      this.labelModule.draw(ctx, this.x, this.y + (this.height + this.labelModule.size.height)*0.5, this.selected, 'hanging');
      this.boundingBox.left = Math.min(this.boundingBox.left, this.labelModule.size.left);
      this.boundingBox.right = Math.max(this.boundingBox.right, this.labelModule.size.left + this.labelModule.size.width);
      this.boundingBox.bottom = Math.max(this.boundingBox.bottom, this.boundingBox.bottom + this.labelModule.size.height);
    }
  }


  _resizeText(ctx) {
    if (!this.width) {
      var margin = 5;
      var textSize = this.labelModule.getTextSize(ctx,this.selected);
      this.width = textSize.width + 2 * margin;
      this.height = textSize.height + 2 * margin;
    }
  }


  _drawText(ctx) {
    this._resizeText(ctx);
    this.left = this.x - this.width / 2;
    this.top = this.y - this.height / 2;

    this.labelModule.draw(ctx, this.x, this.y);

    this.boundingBox.top = this.top;
    this.boundingBox.left = this.left;
    this.boundingBox.right = this.left + this.width;
    this.boundingBox.bottom = this.top + this.height;
  }


  _resizeIcon(ctx) {
    if (!this.width) {
      var margin = 5;
      var iconSize =
      {
        width: Number(this.options.icon.iconSize),
        height: Number(this.options.icon.iconSize)
      };
      this.width = iconSize.width + 2 * margin;
      this.height = iconSize.height + 2 * margin;
    }
  }


  _drawIcon(ctx) {
    this._resizeIcon(ctx);

    this.options.icon.iconSize = this.options.icon.iconSize || 50;

    this.left = this.x - this.width / 2;
    this.top = this.y - this.height / 2;
    this._icon(ctx);


    this.boundingBox.top = this.y - this.options.icon.iconSize / 2;
    this.boundingBox.left = this.x - this.options.icon.iconSize / 2;
    this.boundingBox.right = this.x + this.options.icon.iconSize / 2;
    this.boundingBox.bottom = this.y + this.options.icon.iconSize / 2;

    if (this.options.label!== unde) {
      var iconTextSpacing = 5;
      this.labelModule.draw(ctx, this.x, this.y + this.height / 2 + iconTextSpacing);

      this.boundingBox.left = Math.min(this.boundingBox.left, this.labelModule.size.left);
      this.boundingBox.right = Math.max(this.boundingBox.right, this.labelModule.size.left + this.labelModule.size.width);
      this.boundingBox.bottom = Math.max(this.boundingBox.bottom, this.boundingBox.bottom + this.labelModule.size.height);
    }
  }


  _icon(ctx) {
    var relativeIconSize = Number(this.options.icon.iconSize) * this.networkScale;

    if (this.options.icon.code && relativeIconSize > this.options.scaling.label.drawThreshold - 1) {

      var iconSize = Number(this.options.icon.iconSize);

      ctx.font = (this.selected ? "bold " : "") + iconSize + "px " + this.options.icon.iconFontFace;

      // draw icon
      ctx.fillStyle = this.options.icon.iconColor || "black";
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      ctx.fillText(this.options.icon.code, this.x, this.y);
    }
  }

}

export default Node;