jrtechs-vis/lib/network/modules/components/nodes/util/CircleImageBase.js

import NodeBase from './NodeBase';
import CachedImage from '../../../../CachedImage';


/**
 * NOTE: This is a bad base class
 *
 * Child classes are:
 *
 *   Image       - uses *only* image methods
 *   Circle      - uses *only* _drawRawCircle
 *   CircleImage - uses all
 *
 * TODO: Refactor, move _drawRawCircle to different module, derive Circle from NodeBase
 *       Rename this to ImageBase
 *       Consolidate common code in Image and CircleImage to base class
 */
class CircleImageBase extends NodeBase {
  constructor(options, body, labelModule) {
    super(options, body, labelModule);
    this.labelOffset = 0;
    this.selected = false;
  }

  setOptions(options, imageObj, imageObjAlt) {
    this.options = options;

    if (!(imageObj === undefined && imageObjAlt === undefined)) {
      this.setImages(imageObj, imageObjAlt);
    }
  }


  /**
   * Set the images for this node.
   *
   * The images can be updated after the initial setting of options;
   * therefore, this method needs to be reentrant. 
   *
   * For correct working in error cases, it is necessary to properly set
   * field 'nodes.brokenImage' in the options.
   *
   * @param {Image} imageObj  required; main image to show for this node
   * @param {Image|undefined} optional; image to show when node is selected
   */
  setImages(imageObj, imageObjAlt) {
    if (imageObjAlt && this.selected) {
      this.imageObj    = imageObjAlt;
      this.imageObjAlt = imageObj;
    } else {
      this.imageObj    = imageObj;
      this.imageObjAlt = imageObjAlt;
    }
  }

  /**
   * Set selection and switch between the base and the selected image.
   *
   * Do the switch only if imageObjAlt exists.
   *
   * @param {true|false} selected value of new selected state for current node
   */
  switchImages(selected) {
    var selection_changed = ((selected && !this.selected) || (!selected && this.selected));
    this.selected = selected;    // Remember new selection

    if (this.imageObjAlt !== undefined && selection_changed) {
      let imageTmp = this.imageObj;
      this.imageObj = this.imageObjAlt;
      this.imageObjAlt = imageTmp;
    }
  }

  /**
   * Adjust the node dimensions for a loaded image.
   *
   * Pre: this.imageObj is valid
   */
  _resizeImage() {
    var width, height;

    if (this.options.shapeProperties.useImageSize === false) {
      // Use the size property
      var ratio_width  = 1;
      var ratio_height = 1;

      // Only calculate the proper ratio if both width and height not zero
      if (this.imageObj.width && this.imageObj.height) {
      	if (this.imageObj.width > this.imageObj.height) {
        	ratio_width = this.imageObj.width / this.imageObj.height;
        }
        else {
        	ratio_height = this.imageObj.height / this.imageObj.width;
        }
      }

      width  = this.options.size * 2 * ratio_width;
      height = this.options.size * 2 * ratio_height;
    }
    else {
      // Use the image size
      width  = this.imageObj.width;
      height = this.imageObj.height;
    }

    this.width = width;
    this.height = height;
    this.radius = 0.5 * this.width;
  }

  _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;
    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();
  }

  _drawImageAtPosition(ctx, values) {
    if (this.imageObj.width != 0) {
      // draw the image
      ctx.globalAlpha = 1.0;

      // draw shadow if enabled
      this.enableShadow(ctx, values);

      let factor = 1;
      if (this.options.shapeProperties.interpolation === true) {
        factor = (this.imageObj.width / this.width) / this.body.view.scale;
      }

      this.imageObj.drawImageAtPosition(ctx, factor, this.left, this.top, this.width, this.height);

      // disable shadows for other elements.
      this.disableShadow(ctx, values);
    }
  }

  _drawImageLabel(ctx, x, y, selected, hover) {
    var yLabel;
    var offset = 0;

    if (this.height !== undefined) {
      offset = this.height * 0.5;
      var labelDimensions = this.labelModule.getTextSize(ctx, selected, hover);
      if (labelDimensions.lineCount >= 1) {
        offset += labelDimensions.height / 2;
      }
    }

    yLabel = y + offset;

    if (this.options.label) {
      this.labelOffset = offset;
    }
    this.labelModule.draw(ctx, x, yLabel, selected, hover, 'hanging');
  }
}

export default CircleImageBase;