text.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. /**
  2. * @fileoverview text
  3. * @author dengfuping_develop@163.com
  4. */
  5. import { __assign, __extends } from "tslib";
  6. import { each } from '@antv/util';
  7. import { detect } from 'detect-browser';
  8. import { setTransform } from '../util/svg';
  9. import { SVG_ATTR_MAP } from '../constant';
  10. import ShapeBase from './base';
  11. var LETTER_SPACING = 0.3;
  12. var BASELINE_MAP = {
  13. top: 'before-edge',
  14. middle: 'central',
  15. bottom: 'after-edge',
  16. alphabetic: 'baseline',
  17. hanging: 'hanging',
  18. };
  19. // for FireFox
  20. var BASELINE_MAP_FOR_FIREFOX = {
  21. top: 'text-before-edge',
  22. middle: 'central',
  23. bottom: 'text-after-edge',
  24. alphabetic: 'alphabetic',
  25. hanging: 'hanging',
  26. };
  27. var ANCHOR_MAP = {
  28. left: 'left',
  29. start: 'left',
  30. center: 'middle',
  31. right: 'end',
  32. end: 'end',
  33. };
  34. var Text = /** @class */ (function (_super) {
  35. __extends(Text, _super);
  36. function Text() {
  37. var _this = _super !== null && _super.apply(this, arguments) || this;
  38. _this.type = 'text';
  39. _this.canFill = true;
  40. _this.canStroke = true;
  41. return _this;
  42. }
  43. Text.prototype.getDefaultAttrs = function () {
  44. var attrs = _super.prototype.getDefaultAttrs.call(this);
  45. return __assign(__assign({}, attrs), { x: 0, y: 0, text: null, fontSize: 12, fontFamily: 'sans-serif', fontStyle: 'normal', fontWeight: 'normal', fontVariant: 'normal', textAlign: 'start', textBaseline: 'bottom' });
  46. };
  47. Text.prototype.createPath = function (context, targetAttrs) {
  48. var _this = this;
  49. var attrs = this.attr();
  50. var el = this.get('el');
  51. this._setFont();
  52. each(targetAttrs || attrs, function (value, attr) {
  53. if (attr === 'text') {
  54. _this._setText("" + value);
  55. }
  56. else if (attr === 'matrix' && value) {
  57. setTransform(_this);
  58. }
  59. else if (SVG_ATTR_MAP[attr]) {
  60. el.setAttribute(SVG_ATTR_MAP[attr], value);
  61. }
  62. });
  63. el.setAttribute('paint-order', 'stroke');
  64. el.setAttribute('style', 'stroke-linecap:butt; stroke-linejoin:miter;');
  65. };
  66. Text.prototype._setFont = function () {
  67. var el = this.get('el');
  68. var _a = this.attr(), textBaseline = _a.textBaseline, textAlign = _a.textAlign;
  69. var browser = detect();
  70. if (browser && browser.name === 'firefox') {
  71. // compatible with FireFox browser, ref: https://github.com/antvis/g/issues/119
  72. el.setAttribute('dominant-baseline', BASELINE_MAP_FOR_FIREFOX[textBaseline] || 'alphabetic');
  73. }
  74. else {
  75. el.setAttribute('alignment-baseline', BASELINE_MAP[textBaseline] || 'baseline');
  76. }
  77. el.setAttribute('text-anchor', ANCHOR_MAP[textAlign] || 'left');
  78. };
  79. Text.prototype._setText = function (text) {
  80. var el = this.get('el');
  81. var _a = this.attr(), x = _a.x, _b = _a.textBaseline, baseline = _b === void 0 ? 'bottom' : _b;
  82. if (!text) {
  83. el.innerHTML = '';
  84. }
  85. else if (~text.indexOf('\n')) {
  86. var textArr = text.split('\n');
  87. var textLen_1 = textArr.length - 1;
  88. var arr_1 = '';
  89. each(textArr, function (segment, i) {
  90. if (i === 0) {
  91. if (baseline === 'alphabetic') {
  92. arr_1 += "<tspan x=\"" + x + "\" dy=\"" + -textLen_1 + "em\">" + segment + "</tspan>";
  93. }
  94. else if (baseline === 'top') {
  95. arr_1 += "<tspan x=\"" + x + "\" dy=\"0.9em\">" + segment + "</tspan>";
  96. }
  97. else if (baseline === 'middle') {
  98. arr_1 += "<tspan x=\"" + x + "\" dy=\"" + -(textLen_1 - 1) / 2 + "em\">" + segment + "</tspan>";
  99. }
  100. else if (baseline === 'bottom') {
  101. arr_1 += "<tspan x=\"" + x + "\" dy=\"-" + (textLen_1 + LETTER_SPACING) + "em\">" + segment + "</tspan>";
  102. }
  103. else if (baseline === 'hanging') {
  104. arr_1 += "<tspan x=\"" + x + "\" dy=\"" + (-(textLen_1 - 1) - LETTER_SPACING) + "em\">" + segment + "</tspan>";
  105. }
  106. }
  107. else {
  108. arr_1 += "<tspan x=\"" + x + "\" dy=\"1em\">" + segment + "</tspan>";
  109. }
  110. });
  111. el.innerHTML = arr_1;
  112. }
  113. else {
  114. el.innerHTML = text;
  115. }
  116. };
  117. return Text;
  118. }(ShapeBase));
  119. export default Text;
  120. //# sourceMappingURL=text.js.map