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.

73 lines
2.4 KiB

  1. 'use strict';
  2. import CircleImageBase from '../util/CircleImageBase'
  3. class Image extends CircleImageBase {
  4. constructor (options, body, labelModule, imageObj, imageObjAlt) {
  5. super(options, body, labelModule);
  6. this.setImages(imageObj, imageObjAlt);
  7. }
  8. resize(ctx, selected = this.selected, hover = this.hover) {
  9. if (this.needsRefresh(selected, hover)) {
  10. this._resizeImage();
  11. }
  12. }
  13. draw(ctx, x, y, selected, hover, values) {
  14. this.switchImages(selected);
  15. this.resize();
  16. this.left = x - this.width / 2;
  17. this.top = y - this.height / 2;
  18. if (this.options.shapeProperties.useBorderWithImage === true) {
  19. var neutralborderWidth = this.options.borderWidth;
  20. var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
  21. var borderWidth = (selected ? selectionLineWidth : neutralborderWidth) / this.body.view.scale;
  22. ctx.lineWidth = Math.min(this.width, borderWidth);
  23. ctx.beginPath();
  24. // setup the line properties.
  25. ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;
  26. // set a fillstyle
  27. ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
  28. // draw a rectangle to form the border around. This rectangle is filled so the opacity of a picture (in future vis releases?) can be used to tint the image
  29. ctx.rect(this.left - 0.5 * ctx.lineWidth,
  30. this.top - 0.5 * ctx.lineWidth,
  31. this.width + ctx.lineWidth,
  32. this.height + ctx.lineWidth);
  33. ctx.fill();
  34. this.performStroke(ctx, values);
  35. ctx.closePath();
  36. }
  37. this._drawImageAtPosition(ctx, values);
  38. this._drawImageLabel(ctx, x, y, selected, hover);
  39. this.updateBoundingBox(x,y);
  40. }
  41. updateBoundingBox(x,y) {
  42. this.resize();
  43. this._updateBoundingBox(x, y);
  44. if (this.options.label !== undefined && this.labelModule.size.width > 0) {
  45. this.boundingBox.left = Math.min(this.boundingBox.left, this.labelModule.size.left);
  46. this.boundingBox.right = Math.max(this.boundingBox.right, this.labelModule.size.left + this.labelModule.size.width);
  47. this.boundingBox.bottom = Math.max(this.boundingBox.bottom, this.boundingBox.bottom + this.labelOffset);
  48. }
  49. }
  50. distanceToBorder(ctx, angle) {
  51. return this._distanceToBorder(ctx,angle);
  52. }
  53. }
  54. export default Image;