@antv/f2/es/components/guide/views/Tag.js

import { __assign, __extends } from "tslib";
import { jsx, Component, computeLayout } from '@antv/f-engine';
var defaultProps = {
  offsetX: 0,
  offsetY: 0,
  points: [],
  direct: 'tl',
  side: '8px',
  autoAdjust: true
};
var defaultStyle = {
  container: {
    fill: '#1677FF',
    radius: '4px',
    padding: ['4px', '8px']
  },
  text: {
    fontSize: '22px',
    fill: '#fff'
  },
  arrow: {
    fill: '#1677FF'
  }
};
var Label = function Label(_a) {
  var content = _a.content,
    background = _a.background,
    textStyle = _a.textStyle,
    _b = _a.animation,
    animation = _b === void 0 ? {} : _b;
  return jsx("rect", {
    style: __assign({
      display: 'flex',
      fill: defaultStyle.container.fill,
      padding: defaultStyle.container.padding,
      radius: defaultStyle.container.radius
    }, background),
    animation: animation
  }, jsx("text", {
    style: __assign({
      text: content,
      fontSize: defaultStyle.text.fontSize,
      fill: defaultStyle.text.fill
    }, textStyle),
    animation: animation
  }));
};
var Tag = /** @class */function (_super) {
  __extends(Tag, _super);
  function Tag() {
    return _super !== null && _super.apply(this, arguments) || this;
  }
  Tag.prototype.render = function () {
    var _a = this,
      props = _a.props,
      context = _a.context;
    var px2hd = context.px2hd;
    var cfg = __assign(__assign({}, defaultProps), props);
    var _b = px2hd(cfg),
      points = _b.points,
      content = _b.content,
      offsetX = _b.offsetX,
      offsetY = _b.offsetY,
      direct = _b.direct,
      side = _b.side,
      autoAdjust = _b.autoAdjust,
      canvasWidth = _b.canvasWidth,
      canvasHeight = _b.canvasHeight,
      background = _b.background,
      textStyle = _b.textStyle,
      animation = _b.animation;
    var _c = points[0] || {},
      x = _c.x,
      y = _c.y;
    if (isNaN(x) || isNaN(y)) return null;
    var offsetXNum = context.px2hd(offsetX);
    var offsetYNum = context.px2hd(offsetY);
    var posX = x + (offsetXNum || 0);
    var posY = y + (offsetYNum || 0);
    var layout = computeLayout(this, jsx(Label, {
      content: content,
      background: background,
      textStyle: textStyle
    })).layout;
    var guideWidth = layout.width,
      guideHeight = layout.height;
    var _getDirect = function _getDirect(point) {
      var newDirect = direct;
      var x = point.x,
        y = point.y;
      var vertical = newDirect[0];
      var horizontal = newDirect[1];
      // adjust for vertical direction
      if (vertical === 't' && y - side - guideHeight < 0) {
        vertical = 'b';
      } else if (vertical === 'b' && y + side + guideHeight > canvasHeight) {
        vertical = 't';
      }
      // adjust for horizontal direction
      var diff = vertical === 'c' ? side : 0;
      if (horizontal === 'l' && x - diff - guideWidth < 0) {
        horizontal = 'r';
      } else if (horizontal === 'r' && x + diff + guideWidth > canvasWidth) {
        horizontal = 'l';
      } else if (horizontal === 'c') {
        if (guideWidth / 2 + x + diff > canvasWidth) {
          horizontal = 'l';
        } else if (x - guideWidth / 2 - diff < 0) {
          horizontal = 'r';
        }
      }
      newDirect = vertical + horizontal;
      return newDirect;
    };
    var _getArrowPoints = function _getArrowPoints(direct) {
      var arrowPoints = [];
      if (direct === 'tl') {
        arrowPoints = [{
          x: guideWidth,
          y: guideHeight - 1
        }, {
          x: guideWidth,
          y: guideHeight + side
        }, {
          x: guideWidth - side,
          y: guideHeight - 1
        }];
        posX -= guideWidth || 0;
        posY = posY - (guideHeight || 0) - side;
      } else if (direct === 'cl') {
        arrowPoints = [{
          x: guideWidth,
          y: guideHeight / 2 - side
        }, {
          x: guideWidth,
          y: guideHeight / 2 + side
        }, {
          x: guideWidth + side,
          y: guideHeight / 2
        }];
        posX = posX - (guideWidth || 0) - side;
        posY -= guideHeight / 2 || 0;
      } else if (direct === 'bl') {
        arrowPoints = [{
          x: guideWidth,
          y: -side
        }, {
          x: guideWidth,
          y: 1
        }, {
          x: guideWidth - side,
          y: 1
        }];
        posX = posX - (guideWidth || 0);
        posY += side;
      } else if (direct === 'bc') {
        arrowPoints = [{
          x: guideWidth / 2,
          y: -side
        }, {
          x: guideWidth / 2 - side,
          y: 1
        }, {
          x: guideWidth / 2 + side,
          y: 1
        }];
        posX = posX - (guideWidth / 2 || 0);
        posY = posY + side;
      } else if (direct === 'br') {
        arrowPoints = [{
          x: 0,
          y: -side
        }, {
          x: 0,
          y: 1
        }, {
          x: +side,
          y: 1
        }];
        posY += side;
      } else if (direct === 'cr') {
        arrowPoints = [{
          x: -side,
          y: guideHeight / 2
        }, {
          x: 0,
          y: guideHeight / 2 - side
        }, {
          x: 0,
          y: guideHeight / 2 + side
        }];
        posX += side;
        posY -= guideHeight / 2 || 0;
      } else if (direct === 'tr') {
        arrowPoints = [{
          x: 0,
          y: guideHeight + side
        }, {
          x: 0,
          y: guideHeight - 1
        }, {
          x: side,
          y: guideHeight - 1
        }];
        posY = posY - (guideHeight || 0) - side;
      } else if (direct === 'tc') {
        arrowPoints = [{
          x: guideWidth / 2,
          y: guideHeight + side
        }, {
          x: guideWidth / 2 - side,
          y: guideHeight - 1
        }, {
          x: guideWidth / 2 + side,
          y: guideHeight - 1
        }];
        posX -= guideWidth / 2 || 0;
        posY = posY - guideHeight - side;
      }
      return arrowPoints;
    };
    var dr = autoAdjust ? _getDirect(points[0]) : direct;
    var arrowPoints = _getArrowPoints(dr);
    return jsx("group", {
      style: {
        x: posX,
        y: posY
      }
    }, jsx(Label, {
      content: content,
      background: background,
      textStyle: textStyle,
      animation: animation
    }), jsx("polygon", {
      style: {
        points: arrowPoints.map(function (d) {
          return [d.x, d.y];
        }),
        fill: (background === null || background === void 0 ? void 0 : background.fill) || defaultStyle.arrow.fill
      },
      animation: animation
    }));
  };
  return Tag;
}(Component);
export default Tag;