vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

112 lines
3.2 KiB

  1. 'use strict';
  2. import CircleImageBase from '../util/CircleImageBase'
  3. /**
  4. * A CircularImage Node/Cluster shape.
  5. *
  6. * @extends CircleImageBase
  7. */
  8. class CircularImage extends CircleImageBase {
  9. /**
  10. * @param {Object} options
  11. * @param {Object} body
  12. * @param {Label} labelModule
  13. * @param {Image} imageObj
  14. * @param {Image} imageObjAlt
  15. */
  16. constructor (options, body, labelModule, imageObj, imageObjAlt) {
  17. super(options, body, labelModule);
  18. this.setImages(imageObj, imageObjAlt);
  19. }
  20. /**
  21. *
  22. * @param {CanvasRenderingContext2D} ctx
  23. * @param {boolean} [selected]
  24. * @param {boolean} [hover]
  25. */
  26. resize(ctx, selected = this.selected, hover = this.hover) {
  27. var imageAbsent = (this.imageObj.src === undefined) ||
  28. (this.imageObj.width === undefined) ||
  29. (this.imageObj.height === undefined);
  30. if (imageAbsent) {
  31. var diameter = this.options.size * 2;
  32. this.width = diameter;
  33. this.height = diameter;
  34. this.radius = 0.5*this.width;
  35. return;
  36. }
  37. // At this point, an image is present, i.e. this.imageObj is valid.
  38. if (this.needsRefresh(selected, hover)) {
  39. this._resizeImage();
  40. }
  41. }
  42. /**
  43. *
  44. * @param {CanvasRenderingContext2D} ctx
  45. * @param {number} x width
  46. * @param {number} y height
  47. * @param {boolean} selected
  48. * @param {boolean} hover
  49. * @param {ArrowOptions} values
  50. */
  51. draw(ctx, x, y, selected, hover, values) {
  52. this.switchImages(selected);
  53. this.resize();
  54. this.left = x - this.width / 2;
  55. this.top = y - this.height / 2;
  56. // draw the background circle. IMPORTANT: the stroke in this method is used by the clip method below.
  57. this._drawRawCircle(ctx, x, y, values);
  58. // now we draw in the circle, we save so we can revert the clip operation after drawing.
  59. ctx.save();
  60. // clip is used to use the stroke in drawRawCircle as an area that we can draw in.
  61. ctx.clip();
  62. // draw the image
  63. this._drawImageAtPosition(ctx, values);
  64. // restore so we can again draw on the full canvas
  65. ctx.restore();
  66. this._drawImageLabel(ctx, x, y, selected, hover);
  67. this.updateBoundingBox(x,y);
  68. }
  69. // TODO: compare with Circle.updateBoundingBox(), consolidate? More stuff is happening here
  70. /**
  71. *
  72. * @param {number} x width
  73. * @param {number} y height
  74. */
  75. updateBoundingBox(x,y) {
  76. this.boundingBox.top = y - this.options.size;
  77. this.boundingBox.left = x - this.options.size;
  78. this.boundingBox.right = x + this.options.size;
  79. this.boundingBox.bottom = y + this.options.size;
  80. // TODO: compare with Image.updateBoundingBox(), consolidate?
  81. this.boundingBox.left = Math.min(this.boundingBox.left, this.labelModule.size.left);
  82. this.boundingBox.right = Math.max(this.boundingBox.right, this.labelModule.size.left + this.labelModule.size.width);
  83. this.boundingBox.bottom = Math.max(this.boundingBox.bottom, this.boundingBox.bottom + this.labelOffset);
  84. }
  85. /**
  86. *
  87. * @param {CanvasRenderingContext2D} ctx
  88. * @param {number} angle - Unused
  89. * @returns {number}
  90. */
  91. distanceToBorder(ctx, angle) { // eslint-disable-line no-unused-vars
  92. this.resize(ctx);
  93. return this.width * 0.5;
  94. }
  95. }
  96. export default CircularImage;