@alicloud/cloud-charts/lib/aop/controller/tooltip.js


"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports["default"] = void 0;

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _tooltip = _interopRequireDefault(require("@antv/g2/esm/chart/controller/tooltip"));

var _reactDom = _interopRequireDefault(require("react-dom"));

var _constants = require("../../constants");

// @ts-ignore
var WidgetsTooltipController = /*#__PURE__*/function (_RawTooltipController) {
  (0, _inheritsLoose2["default"])(WidgetsTooltipController, _RawTooltipController);

  function WidgetsTooltipController(props) {
    var _this;

    _this = _RawTooltipController.call(this, props) || this;
    _this.parentDom = void 0;
    _this.tooltipContainer = void 0;
    _this.parentDom = _this.view.getCanvas().get('el').parentNode.parentNode.parentNode;
    return _this;
  }

  var _proto = WidgetsTooltipController.prototype;

  _proto.showTooltip = function showTooltip(point) {
    var cfg = this.getTooltipCfg(); // 自定义tooltip

    if (cfg !== null && cfg !== void 0 && cfg.customTooltip) {
      // 创建容器
      if (!this.tooltipContainer) {
        var container = document.createElement('div');
        container.className = _constants.FullCrossName + " widgets-tooltip";
        container.style.cssText = "position: absolute;z-index: 1001; pointer-events: none; transition: left 0.1s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.1s cubic-bezier(0.23, 1, 0.32, 1) 0s;";
        document.body.append(container);
        this.tooltipContainer = container;
      }

      this.tooltipContainer.style.visibility = 'visible'; // 绘制

      var items = this.getTooltipItems(point);
      var title = '';

      try {
        // @ts-ignore
        title = this.getTitle(items);
      } catch (e) {}

      var element = cfg.customTooltip(title, items);

      _reactDom["default"].render(element, this.tooltipContainer); // 计算位置


      var padding = 10;
      var position = {
        x: point.x + padding,
        y: point.y
      };
      var curElement = this.parentDom;

      while (curElement && curElement !== document.body) {
        position.x += curElement.offsetLeft;
        position.y += curElement.offsetTop;
        curElement = curElement.offsetParent;
      } // 减去scroll的宽高


      curElement = this.parentDom;

      while (curElement && curElement !== document.body) {
        position.x -= curElement.scrollLeft;
        position.y -= curElement.scrollTop;
        curElement = curElement.parentElement;
      }

      var tooltipRect = this.tooltipContainer.getBoundingClientRect();
      var bodyWidth = document.body.clientWidth;

      if (position.x + tooltipRect.width > bodyWidth) {
        // 超过屏幕时移至左边
        position.x = position.x - tooltipRect.width - padding * 2;
      } // 定位
      // @ts-ignore


      this.tooltipContainer.style.top = position.y + "px"; // @ts-ignore

      this.tooltipContainer.style.left = position.x + "px"; // 显示辅助线

      _RawTooltipController.prototype.renderCrosshairs.call(this, point, cfg);
    } else {
      _RawTooltipController.prototype.showTooltip.call(this, point);
    }
  };

  _proto.hideTooltip = function hideTooltip() {
    var cfg = this.getTooltipCfg();

    if (cfg !== null && cfg !== void 0 && cfg.customTooltip) {
      if (this.tooltipContainer) {
        this.tooltipContainer.style.visibility = 'hidden';
      } // hide crosshairs
      // @ts-ignore


      var xCrosshair = this.xCrosshair,
          yCrosshair = this.yCrosshair;

      if (xCrosshair) {
        xCrosshair.hide();
      }

      if (yCrosshair) {
        yCrosshair.hide();
      }
    } else {
      _RawTooltipController.prototype.hideTooltip.call(this);
    }
  };

  _proto.destroy = function destroy() {
    var cfg = this.getTooltipCfg();

    if (cfg !== null && cfg !== void 0 && cfg.customTooltip) {
      if (this.tooltipContainer) {
        document.body.removeChild(this.tooltipContainer);
        this.tooltipContainer = null;
      } // clear crosshairs
      // @ts-ignore


      var xCrosshair = this.xCrosshair,
          yCrosshair = this.yCrosshair;

      if (xCrosshair) {
        xCrosshair.clear();
      }

      if (yCrosshair) {
        yCrosshair.clear();
      }
    } else {
      _RawTooltipController.prototype.destroy.call(this);
    }
  };

  return WidgetsTooltipController;
}(_tooltip["default"]);

var _default = WidgetsTooltipController;
exports["default"] = _default;