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

Charts for mobile visualization.

import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import { jsx } from '../../../jsx';
var defaultProps = {
  offsetX: 0,
  offsetY: 0,
  points: [],
  direct: 'tl',
  side: 6,
  autoAdjust: true
};
var defaultStyle = {
  container: {
    fill: '#1677FF',
    radius: 2,
    padding: [3, 5]
  },
  text: {
    fontSize: '22px',
    fill: '#fff'
  },
  arrow: {
    fill: '#1677FF'
  }
};
export default (function (props, context) {
  var cfg = _objectSpread(_objectSpread({}, defaultProps), props);
  var points = cfg.points,
    content = cfg.content,
    offsetX = cfg.offsetX,
    offsetY = cfg.offsetY,
    direct = cfg.direct,
    side = cfg.side,
    autoAdjust = cfg.autoAdjust,
    canvasWidth = cfg.canvasWidth,
    canvasHeight = cfg.canvasHeight,
    guideBBox = cfg.guideBBox,
    background = cfg.background,
    textStyle = cfg.textStyle,
    triggerRef = cfg.triggerRef;
  var _ref = points[0] || {},
    x = _ref.x,
    y = _ref.y;
  var _ref2 = guideBBox || {},
    guideWidth = _ref2.width,
    guideHeight = _ref2.height;
  var offsetXNum = context.px2hd(offsetX);
  var offsetYNum = context.px2hd(offsetY);
  var posX = x + (offsetXNum || 0);
  var posY = y + (offsetYNum || 0);
  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 = [];
    // const { minX, minY } = guideBBox || {};
    if (direct === 'tl') {
      arrowPoints = [{
        x: posX,
        y: posY - side - 1
      }, {
        x: posX,
        y: posY
      }, {
        x: posX - side,
        y: posY - side - 1
      }];
      posX -= guideWidth || 0;
      posY = posY - (guideHeight || 0) - side;
    } else if (direct === 'cl') {
      arrowPoints = [{
        x: posX - side - 1,
        y: posY - side
      }, {
        x: posX - side - 1,
        y: posY + side
      }, {
        x: posX,
        y: posY
      }];
      posX = posX - (guideWidth || 0) - side;
      posY -= guideHeight / 2 || 0;
    } else if (direct === 'bl') {
      arrowPoints = [{
        x: posX,
        y: posY
      }, {
        x: posX,
        y: posY + side + 1
      }, {
        x: posX - side,
        y: posY + side + 1
      }];
      posX = posX - (guideWidth || 0);
      posY += side;
    } else if (direct === 'bc') {
      // 有问题
      arrowPoints = [{
        x: posX,
        y: posY
      }, {
        x: posX - side,
        y: posY + side + 1
      }, {
        x: posX + side,
        y: posY + side + 1
      }];
      posX = posX - (guideWidth / 2 || 0);
      posY = posY + side;
    } else if (direct === 'br') {
      arrowPoints = [{
        x: posX,
        y: posY
      }, {
        x: posX,
        y: posY + side + 1
      }, {
        x: posX + side,
        y: posY + side + 1
      }];
      posY += side;
    } else if (direct === 'cr') {
      arrowPoints = [{
        x: posX,
        y: posY
      }, {
        x: posX + side,
        y: posY - side
      }, {
        x: posX + side,
        y: posY + side
      }];
      posX += side;
      posY -= guideHeight / 2 || 0;
    } else if (direct === 'tr') {
      arrowPoints = [{
        x: posX,
        y: posY
      }, {
        x: posX,
        y: posY - side - 1
      }, {
        x: posX + side,
        y: posY - side - 1
      }];
      posY = posY - (guideHeight || 0) - side;
    } else if (direct === 'tc') {
      arrowPoints = [{
        x: posX,
        y: posY
      }, {
        x: posX - side,
        y: posY - side - 1
      }, {
        x: posX + side,
        y: posY - side - 1
      }];
      posX -= guideWidth / 2 || 0;
      posY = posY - (guideHeight || 0) - side;
    }
    return arrowPoints;
  };
  var dr = autoAdjust ? _getDirect(points[0]) : direct;
  var arrowPoints = _getArrowPoints(dr);
  return jsx("group", {
    attrs: _objectSpread({
      fill: defaultStyle.container.fill,
      radius: defaultStyle.container.radius
    }, background),
    style: _objectSpread({
      left: posX,
      top: posY,
      padding: defaultStyle.container.padding
    }, background),
    ref: triggerRef
  }, jsx("text", {
    attrs: _objectSpread({
      text: content,
      fontSize: defaultStyle.text.fontSize,
      fill: defaultStyle.text.fill
    }, textStyle)
  }), guideBBox && jsx("polygon", {
    attrs: {
      points: arrowPoints,
      fill: (background === null || background === void 0 ? void 0 : background.fill) || defaultStyle.arrow.fill
    }
  }));
});