@antv/f6-ui/es/ui-node/UITextNode.js

UI system for @antv/f6

import { __extends } from "tslib";
import UINode from './base';
import { assembleFont } from '@antv/g-base';

var UITextNode =
/** @class */
function (_super) {
  __extends(UITextNode, _super);

  function UITextNode() {
    return _super !== null && _super.apply(this, arguments) || this;
  }

  UITextNode.prototype.getAttrs = function () {
    var style = this.styleNode.style;
    var attrs = {
      x: this.styleNode.layout.left,
      y: this.styleNode.layout.top,
      textAlign: style.textAlign,
      fill: style.color,
      fontSize: style.fontSize || 12,
      fontStyle: style.fontStyle,
      fontFamily: style.fontFamily,
      lineHeight: style.lineHeight || 0,
      fontVariant: style.fontVariant,
      fontWeight: style.fontWeight,
      textBaseline: 'top',
      opacity: style.opacity,
      fillOpacity: style.backgroundOpacity
    };
    return attrs;
  };

  UITextNode.prototype.draw = function (parentGNode) {
    var attrs = this.getAttrs();

    if (!this.gNode) {
      this.gNode = parentGNode.addShape('text', {
        type: 'text',
        attrs: attrs,
        capture: false
      });
    }

    this.update();
  };

  UITextNode.prototype.getMultiLineText = function (text, attrs, width) {
    var _a;

    var ctx = (_a = this.parent.gNode.get('canvas')) === null || _a === void 0 ? void 0 : _a.get('context');
    if (!ctx) return text;
    ctx.save();
    var font = assembleFont(attrs);
    ctx.font = font;
    if (ctx.measureText(text).width < width) return text;
    var s = '';
    var lineWidth = 0;

    for (var _i = 0, text_1 = text; _i < text_1.length; _i++) {
      var value = text_1[_i];
      var valueW = ctx.measureText(value).width;
      lineWidth += valueW;

      if (lineWidth >= width) {
        lineWidth = valueW;
        s += "\n" + value;
      } else {
        s += value;
      }
    }

    ctx.restore();
    return s;
  };

  UITextNode.prototype.update = function () {
    var style = this.styleNode.style;
    var attrs = this.getAttrs();
    var shape = this.gNode;
    shape.attr(attrs);
    shape.resetMatrix();

    switch (style.textAlign) {
      case 'center':
        shape.translate(this.styleNode.layout.width / 2);
        break;

      case 'right':
        shape.translate(this.styleNode.layout.width);
        break;

      default:
        break;
    }

    if (style.whiteSpace === 'nowrap') {
      shape.attr('text', String(this.styleNode.dom.text));
    } else {
      shape.attr('text', this.getMultiLineText(String(this.styleNode.dom.text), attrs, this.styleNode.layout.width));
    }
  };

  return UITextNode;
}(UINode);

export default UITextNode;