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

F6 plugin

import { __extends } from "tslib";
import Base from '../base';
import { createUI } from '@antv/f6-ui';

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

  function Menu(config) {
    return _super.call(this, config) || this;
  }

  Menu.prototype.getDefaultCfgs = function () {
    return {
      offsetX: 6,
      offsetY: 6,
      handleMenuClick: undefined,
      // 指定菜单内容，function(e) {...}
      getContent: function getContent(e) {
        return "\n          <div class='f6-contextmenu-ul'>\n            <div class='f6-contextmenu-li'>\u83DC\u5355\u98791</div>\n            <div class='f6-contextmenu-li'>\u83DC\u5355\u98792</div>\n          </div>\n        ";
      },
      getCss: function getCss() {
        return "\n        .f6-contextmenu-ul {\n          display: flex;\n          width: 100;\n          border: 1 solid #e2e2e2;\n          border-radius: 4;\n          font-size: 12;\n          color: #545454;\n          padding: 10 8;\n          background-color: rgba(255, 255, 255, 0.9);\n        }\n        .f6-contextmenu-li {\n            opacity: 0;\n            justify-content: center;\n            text-align: center;\n            height: 50;\n          }\n        ";
      },
      shouldBegin: function shouldBegin(e) {
        return true;
      },
      // 菜单隐藏事件
      onHide: function onHide() {
        return true;
      },
      itemTypes: ['node', 'edge', 'combo']
    };
  }; // class-methods-use-this


  Menu.prototype.getEvents = function () {
    return {
      press: 'onMenuShow'
    };
  };

  Menu.prototype.init = function () {
    var _this = this;

    var graph = this.get('graph');
    graph.on('tap', function () {
      _this.onMenuHide();
    });
  };

  Menu.prototype.onMenuShow = function (e) {
    var _a, _b;

    var self = this;
    e.preventDefault();
    var itemTypes = this.get('itemTypes');

    if (!e.item) {
      if (itemTypes.indexOf('canvas') === -1) {
        self.onMenuHide();
        return;
      }
    } else {
      if (e.item && e.item.getType && itemTypes.indexOf(e.item.getType()) === -1) {
        self.onMenuHide();
        return;
      }
    }

    var shouldBegin = this.get('shouldBegin');
    if (!shouldBegin(e)) return;
    var className = this.get('className');
    var graph = this.get('graph');
    var uiGroup = graph.get('uiGroup');
    var getContent = this.get('getContent');
    var getCss = this.get('getCss');
    var css = "\n    root {\n      display: flex;\n      font-size: 12;\n      color: #545454;\n    }\n    text {\n      height: 12;\n      opacity: 1;\n    }\n    " + ((_a = getCss === null || getCss === void 0 ? void 0 : getCss()) !== null && _a !== void 0 ? _a : '') + "\n  ";
    var menuLiHtml = getContent(e, graph);
    var menu = createUI("<root class=" + (className || 'g6-component-contextmenu') + ">" + menuLiHtml + "</root>", css, uiGroup);
    (_b = this.get('menu')) === null || _b === void 0 ? void 0 : _b.remove();
    this.set('menu', menu);
    var handleMenuClick = this.get('handleMenuClick');

    if (handleMenuClick) {
      var handleMenuClickWrapper = function handleMenuClickWrapper(evt) {
        var _a;

        evt.stopPropagation();
        handleMenuClick((_a = evt.uiNode) === null || _a === void 0 ? void 0 : _a.attributes, e.item, graph);
      };

      this.set('handleMenuClickWrapper', handleMenuClickWrapper);
      menu.on('tap', handleMenuClickWrapper);
    }

    var width = graph.get('width');
    var height = graph.get('height');
    var bbox = {
      width: menu.width,
      height: menu.height,
      left: menu.left,
      right: menu.right
    };
    var offsetX = this.get('offsetX') || 0;
    var offsetY = this.get('offsetY') || 0;
    var x = e.canvasX + offsetX;
    var y = e.canvasY + offsetY; // when the menu is (part of) out of the canvas

    if (x + bbox.width > width) {
      x = e.canvasX - bbox.width - offsetX;
    }

    if (y + bbox.height > height) {
      y = e.canvasY - bbox.height - offsetY;
    }

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

  Menu.prototype.onMenuHide = function () {
    var menuDom = this.get('menu');
    menuDom === null || menuDom === void 0 ? void 0 : menuDom.remove();
  };

  Menu.prototype.destroy = function () {
    var menu = this.get('menu');
    menu === null || menu === void 0 ? void 0 : menu.remove();
  };

  return Menu;
}(Base);

export default Menu;