text.js 4.6 KB

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