ControllableImage.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. 'use strict';
  2. import H from './../../parts/Globals.js';
  3. import './../../parts/Utilities.js';
  4. import controllableMixin from './controllableMixin.js';
  5. import ControllableLabel from './ControllableLabel.js';
  6. /**
  7. * A controllable image class.
  8. *
  9. * @class
  10. * @mixes Annotation.controllableMixin
  11. * @memberOf Annotation
  12. *
  13. * @param {Highcharts.Annotation} annotation - an annotation instance
  14. * @param {Object} options a controllable's options
  15. * @param {number} index of the image
  16. **/
  17. function ControllableImage(annotation, options, index) {
  18. this.init(annotation, options, index);
  19. this.collection = 'shapes';
  20. }
  21. /**
  22. * @typedef {Object} Annotation.ControllableImage.AttrsMap
  23. * @property {string} width=width
  24. * @property {string} height=height
  25. * @property {string} zIndex=zIndex
  26. */
  27. /**
  28. * A map object which allows to map options attributes to element attributes
  29. *
  30. * @type {Annotation.ControllableImage.AttrsMap}
  31. */
  32. ControllableImage.attrsMap = {
  33. width: 'width',
  34. height: 'height',
  35. zIndex: 'zIndex'
  36. };
  37. H.merge(
  38. true,
  39. ControllableImage.prototype,
  40. controllableMixin, /** @lends Annotation.ControllableImage# */ {
  41. /**
  42. * @type 'image'
  43. */
  44. type: 'image',
  45. render: function (parent) {
  46. var attrs = this.attrsFromOptions(this.options),
  47. options = this.options;
  48. this.graphic = this.annotation.chart.renderer
  49. .image(options.src, 0, -9e9, options.width, options.height)
  50. .attr(attrs)
  51. .add(parent);
  52. this.graphic.width = options.width;
  53. this.graphic.height = options.height;
  54. controllableMixin.render.call(this);
  55. },
  56. redraw: function (animation) {
  57. var anchor = this.anchor(this.points[0]),
  58. position = ControllableLabel.prototype.position.call(
  59. this,
  60. anchor
  61. );
  62. if (position) {
  63. this.graphic[animation ? 'animate' : 'attr']({
  64. x: position.x,
  65. y: position.y
  66. });
  67. } else {
  68. this.graphic.attr({
  69. x: 0,
  70. y: -9e9
  71. });
  72. }
  73. this.graphic.placed = Boolean(position);
  74. controllableMixin.redraw.call(this, animation);
  75. },
  76. translate: function (dx, dy) {
  77. var annotationOptions = this.annotation.userOptions,
  78. shapeOptions = annotationOptions[this.collection][this.index];
  79. this.translatePoint(dx, dy, 0);
  80. // Options stored in chart:
  81. shapeOptions.point = this.options.point;
  82. }
  83. }
  84. );
  85. export default ControllableImage;