text-box.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. import { isNil, deepMix, mix, parsePadding, isObject } from '../util/common';
  2. import { Group } from '../graphic/index';
  3. class TextBox {
  4. getDefaultCfg() {
  5. return {
  6. x: 0,
  7. y: 0,
  8. content: '',
  9. textStyle: {
  10. fontSize: 12,
  11. fill: '#fff',
  12. textAlign: 'center',
  13. textBaseline: 'middle',
  14. fontFamily: 'Arial'
  15. },
  16. background: {
  17. radius: 1,
  18. fill: 'rgba(0, 0, 0, 0.65)',
  19. padding: [3, 5]
  20. },
  21. width: 0,
  22. height: 0,
  23. className: ''
  24. };
  25. }
  26. constructor(cfg) {
  27. deepMix(this, this.getDefaultCfg(), cfg);
  28. this._init();
  29. var {
  30. content,
  31. x,
  32. y
  33. } = this;
  34. if (!isNil(content)) {
  35. this.updateContent(content);
  36. }
  37. this.updatePosition(x, y);
  38. }
  39. _init() {
  40. var {
  41. content,
  42. textStyle,
  43. background,
  44. className,
  45. visible,
  46. context
  47. } = this;
  48. var container = new Group({
  49. context,
  50. className,
  51. zIndex: 0,
  52. visible
  53. });
  54. var text = container.addShape('Text', {
  55. className: className + '-text',
  56. zIndex: 1,
  57. attrs: mix({
  58. text: content,
  59. x: 0,
  60. y: 0
  61. }, textStyle)
  62. });
  63. var backgroundShape = container.addShape('Rect', {
  64. className: className + '-bg',
  65. zIndex: -1,
  66. attrs: mix({
  67. x: 0,
  68. y: 0,
  69. width: 0,
  70. height: 0
  71. }, background)
  72. });
  73. container.sort();
  74. this.container = container;
  75. this.textShape = text;
  76. this.backgroundShape = backgroundShape;
  77. }
  78. _getBBox() {
  79. var textShape = this.textShape;
  80. var background = this.background;
  81. var textBBox = textShape.getBBox();
  82. var padding = parsePadding(background.padding);
  83. var width = textBBox.width + padding[1] + padding[3];
  84. var height = textBBox.height + padding[0] + padding[2];
  85. var x = textBBox.minX - padding[3];
  86. var y = textBBox.minY - padding[0];
  87. return {
  88. x,
  89. y,
  90. width,
  91. height
  92. };
  93. }
  94. updateContent(text) {
  95. var {
  96. textShape,
  97. backgroundShape
  98. } = this;
  99. if (!isNil(text)) {
  100. if (!isObject(text)) {
  101. text = {
  102. text
  103. };
  104. }
  105. textShape.attr(text); // update box shape
  106. var {
  107. x,
  108. y,
  109. width: tipWidth,
  110. height: tipHeight
  111. } = this._getBBox();
  112. var width = this.width || tipWidth;
  113. var height = this.height || tipHeight;
  114. backgroundShape.attr({
  115. x,
  116. y,
  117. width,
  118. height
  119. });
  120. this._width = width;
  121. this._height = height;
  122. this.content = text.text;
  123. }
  124. }
  125. updatePosition(x, y) {
  126. var container = this.container;
  127. var {
  128. x: xMin,
  129. y: yMin
  130. } = this._getBBox();
  131. container.moveTo(x - xMin, y - yMin);
  132. this.x = x - xMin;
  133. this.y = y - yMin;
  134. }
  135. getWidth() {
  136. return this._width;
  137. }
  138. getHeight() {
  139. return this._height;
  140. }
  141. show() {
  142. this.container.show();
  143. }
  144. hide() {
  145. this.container.hide();
  146. }
  147. clear() {
  148. var container = this.container;
  149. container.clear();
  150. container.remove(true);
  151. this.container = null;
  152. this.textShape = null;
  153. this.backgroundShape = null;
  154. }
  155. }
  156. export default TextBox;