text-box.js 3.8 KB

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