@antv/f6-plugin/es/tooltip/index.js

F6 plugin

import { __extends } from "tslib";
import { isArray } from '@antv/util';
import Base from '../base';
import { createUI } from '@antv/f6-ui';
import getHtml from './html';
import { appendCss } from './css';

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

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

  Tooltip.prototype.getDefaultCfgs = function () {
    return {
      offsetX: 6,
      offsetY: 6,
      // 指定菜单内容，function(e) {...}
      getContent: function getContent(e) {
        var _a, _b;

        return "\n          <div class=\"f6-tooltip-container\">\n            <div class='tooltip-type'>\u7C7B\u578B\uFF1A" + ((_a = e.item) === null || _a === void 0 ? void 0 : _a.getType()) + "</div>\n            <div class='tooltip-id'>ID\uFF1A" + ((_b = e.item) === null || _b === void 0 ? void 0 : _b.getID()) + "</div>\n          </div>\n        ";
      },
      getCss: function getCss() {
        return "\n        .f6-tooltip-container {\n          position: absolute;\n          width: 200;\n          border: 1 solid #e2e2e2;\n          border-radius: 4;\n          font-size: 12;\n          color: #545454;\n          background-color: rgba(255, 255, 255, 0.9);\n          padding: 10 8;\n        }\n    \n        .f6-tooltip-container div{\n          height: 20;\n        }\n        \n        .tooltip-type {\n          padding: 0;\n          margin: 0;\n        }\n        .tooltip-id {\n          color: #531dab;\n        }\n      ";
      },
      shouldBegin: function shouldBegin(e) {
        return true;
      },
      itemTypes: ['node', 'edge', 'combo'],
      trigger: 'mouseenter',
      fixToNode: undefined
    };
  }; // class-methods-use-this


  Tooltip.prototype.getEvents = function () {
    if (this.get('trigger') === 'click') {
      return {
        'node:tap': 'onClick',
        'edge:tap': 'onClick',
        'combo:tap': 'onClick',
        'canvas:tap': 'onMouseLeave',
        afterremoveitem: 'onMouseLeave',
        contextmenu: 'onMouseLeave',
        drag: 'onMouseLeave'
      };
    }

    return {
      'node:press': 'onClick',
      'edge:press': 'onClick',
      'combo:press': 'onClick',
      'canvas:press': 'onMouseLeave',
      'node:tap': 'onMouseLeave',
      'edge:tap': 'onMouseLeave',
      'combo:tap': 'onMouseLeave',
      'canvas:tap': 'onMouseLeave',
      afterremoveitem: 'onMouseLeave',
      contextmenu: 'onMouseLeave',
      drag: 'onMouseLeave'
    };
  };

  Tooltip.prototype.onClick = function (e) {
    var itemTypes = this.get('itemTypes');
    if (e.item && e.item.getType && itemTypes.indexOf(e.item.getType()) === -1) return;
    var item = e.item;
    var graph = this.get('graph'); // 若与上一次同一 item，隐藏该 tooltip

    if (this.currentTarget === item) {
      this.currentTarget = null;
      this.hideTooltip();
      graph.emit('tooltipchange', {
        item: e.item,
        action: 'hide'
      });
    } else {
      this.currentTarget = item;
      this.showTooltip(e);
      graph.emit('tooltipchange', {
        item: e.item,
        action: 'show'
      });
    }
  };

  Tooltip.prototype.onMouseEnter = function (e) {
    var itemTypes = this.get('itemTypes');
    if (e.item && e.item.getType && itemTypes.indexOf(e.item.getType()) === -1) return;
    var item = e.item;
    var graph = this.get('graph');
    this.currentTarget = item;
    this.showTooltip(e);
    graph.emit('tooltipchange', {
      item: e.item,
      action: 'show'
    });
  };

  Tooltip.prototype.onMouseMove = function (e) {
    var itemTypes = this.get('itemTypes');
    if (e.item && e.item.getType && itemTypes.indexOf(e.item.getType()) === -1) return;

    if (!this.currentTarget || e.item !== this.currentTarget) {
      return;
    }

    this.showTooltip(e);
  };

  Tooltip.prototype.onMouseLeave = function () {
    this.hideTooltip();
    var graph = this.get('graph');
    graph.emit('tooltipchange', {
      item: this.currentTarget,
      action: 'hide'
    });
    this.currentTarget = null;
  };

  Tooltip.prototype.showTooltip = function (e) {
    var _a, _b, _c;

    if (!e.item) {
      return;
    }

    var itemTypes = this.get('itemTypes');
    if (e.item.getType && itemTypes.indexOf(e.item.getType()) === -1) return;
    var uiGroup = this.get('graph').get('uiGroup');
    var html = getHtml((_a = this.get('getContent')) === null || _a === void 0 ? void 0 : _a(e));
    var css = appendCss((_b = this.get('getCss')) === null || _b === void 0 ? void 0 : _b());
    var tooltipUI = createUI(html, css, uiGroup);
    (_c = this.get('tooltip')) === null || _c === void 0 ? void 0 : _c.remove();
    this.set('tooltip', tooltipUI);
    this.updatePosition(e);
  };

  Tooltip.prototype.hideTooltip = function () {
    var tooltip = this.get('tooltip');

    if (tooltip) {
      tooltip.setStyle('display', 'none');
    }
  };

  Tooltip.prototype.updatePosition = function (e) {
    var shouldBegin = this.get('shouldBegin');
    var tooltip = this.get('tooltip');

    if (!shouldBegin(e)) {
      this.hideTooltip();
      return;
    }

    var graph = this.get('graph');
    var width = graph.get('width');
    var height = graph.get('height');
    var offsetX = this.get('offsetX') || 0;
    var offsetY = this.get('offsetY') || 0; // const mousePos = graph.getPointByClient(e.clientX, e.clientY);

    var point = graph.getPointByClient(e.clientX, e.clientY);
    var fixToNode = this.get('fixToNode');
    var item = e.item;

    if (item.getType && item.getType() === 'node' && fixToNode && isArray(fixToNode) && fixToNode.length >= 2) {
      var itemBBox = item.getBBox();
      point = {
        x: itemBBox.minX + itemBBox.width * fixToNode[0],
        y: itemBBox.minY + itemBBox.height * fixToNode[1]
      };
    }

    var _a = graph.getCanvasByPoint(point.x, point.y),
        x = _a.x,
        y = _a.y;

    var res = {
      x: x + offsetX,
      y: y + offsetY
    }; // 先修改为 visible 方可正确计算 bbox

    tooltip.setStyle('display', 'flex');

    if (x + tooltip.width + offsetX > width) {
      res.x -= tooltip.width + offsetX;
    }

    if (y + tooltip.height + offsetY > height) {
      res.y -= tooltip.height + offsetY;
    }

    tooltip.setStyle('left', res.x);
    tooltip.setStyle('top', res.y);
  };

  Tooltip.prototype.hide = function () {
    this.onMouseLeave();
  };

  Tooltip.prototype.destroy = function () {
    var tooltip = this.get('tooltip');

    if (tooltip) {
      tooltip.remove();
    }
  };

  return Tooltip;
}(Base);

export default Tooltip;