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.

134 lines
4.0 KiB

  1. import NodeBase from '../util/NodeBase'
  2. class CircleImageBase extends NodeBase {
  3. constructor(options, body, labelModule) {
  4. super(options, body, labelModule);
  5. this.labelOffset = 0;
  6. this.imageLoaded = false;
  7. }
  8. setOptions(options, imageObj) {
  9. this.options = options;
  10. if (imageObj) {
  11. this.imageObj = imageObj;
  12. }
  13. }
  14. /**
  15. * This function resizes the image by the options size when the image has not yet loaded. If the image has loaded, we
  16. * force the update of the size again.
  17. *
  18. * @private
  19. */
  20. _resizeImage() {
  21. let force = false;
  22. if (!this.imageObj.width || !this.imageObj.height) { // undefined or 0
  23. this.imageLoaded = false;
  24. }
  25. else if (this.imageLoaded === false) {
  26. this.imageLoaded = true;
  27. force = true;
  28. }
  29. if (!this.width || !this.height || force === true) { // undefined or 0
  30. var width, height, ratio;
  31. if (this.imageObj.width && this.imageObj.height) { // not undefined or 0
  32. width = 0;
  33. height = 0;
  34. }
  35. if (this.options.shapeProperties.useImageSize === false) {
  36. if (this.imageObj.width > this.imageObj.height) {
  37. ratio = this.imageObj.width / this.imageObj.height;
  38. width = this.options.size * 2 * ratio || this.imageObj.width;
  39. height = this.options.size * 2 || this.imageObj.height;
  40. }
  41. else {
  42. if (this.imageObj.width && this.imageObj.height) { // not undefined or 0
  43. ratio = this.imageObj.height / this.imageObj.width;
  44. }
  45. else {
  46. ratio = 1;
  47. }
  48. width = this.options.size * 2;
  49. height = this.options.size * 2 * ratio;
  50. }
  51. }
  52. else {
  53. // when not using the size property, we use the image size
  54. width = this.imageObj.width;
  55. height = this.imageObj.height;
  56. }
  57. this.width = width;
  58. this.height = height;
  59. this.radius = 0.5 * this.width;
  60. }
  61. }
  62. _drawRawCircle(ctx, x, y, selected, hover, size) {
  63. var neutralborderWidth = this.options.borderWidth;
  64. var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
  65. var borderWidth = (selected ? selectionLineWidth : neutralborderWidth) / this.body.view.scale;
  66. ctx.lineWidth = Math.min(this.width, borderWidth);
  67. ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;
  68. ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
  69. ctx.circle(x, y, size);
  70. // draw shadow if enabled
  71. this.enableShadow(ctx);
  72. // draw the background
  73. ctx.fill();
  74. // disable shadows for other elements.
  75. this.disableShadow(ctx);
  76. //draw dashed border if enabled, save and restore is required for firefox not to crash on unix.
  77. ctx.save();
  78. // if borders are zero width, they will be drawn with width 1 by default. This prevents that
  79. if (borderWidth > 0) {
  80. this.enableBorderDashes(ctx);
  81. //draw the border
  82. ctx.stroke();
  83. //disable dashed border for other elements
  84. this.disableBorderDashes(ctx);
  85. }
  86. ctx.restore();
  87. }
  88. _drawImageAtPosition(ctx) {
  89. if (this.imageObj.width != 0) {
  90. // draw the image
  91. ctx.globalAlpha = 1.0;
  92. // draw shadow if enabled
  93. this.enableShadow(ctx);
  94. // draw image
  95. ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
  96. // disable shadows for other elements.
  97. this.disableShadow(ctx);
  98. }
  99. }
  100. _drawImageLabel(ctx, x, y, selected) {
  101. var yLabel;
  102. var offset = 0;
  103. if (this.height !== undefined) {
  104. offset = this.height * 0.5;
  105. var labelDimensions = this.labelModule.getTextSize(ctx);
  106. if (labelDimensions.lineCount >= 1) {
  107. offset += labelDimensions.height / 2;
  108. }
  109. }
  110. yLabel = y + offset;
  111. if (this.options.label) {
  112. this.labelOffset = offset;
  113. }
  114. this.labelModule.draw(ctx, x, yLabel, selected, 'hanging');
  115. }
  116. }
  117. export default CircleImageBase;