"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _domUtil = require("@antv/dom-util");
var _util = require("@antv/util");
var _insertCss = _interopRequireDefault(require("insert-css"));
var _base = _interopRequireDefault(require("../base"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
var __extends = void 0 && (void 0).__extends || function () {
  var _extendStatics = function extendStatics(d, b) {
    _extendStatics = Object.setPrototypeOf || {
      __proto__: []
    } instanceof Array && function (d, b) {
      d.__proto__ = b;
    } || function (d, b) {
      for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
    };
    return _extendStatics(d, b);
  };
  return function (d, b) {
    if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
    _extendStatics(d, b);
    function __() {
      this.constructor = d;
    }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  };
}();
typeof document !== 'undefined' && (0, _insertCss.default)("\n  .g6-component-contextmenu {\n    border: 1px solid #e2e2e2;\n    border-radius: 4px;\n    font-size: 12px;\n    color: #545454;\n    background-color: rgba(255, 255, 255, 0.9);\n    padding: 10px 8px;\n    box-shadow: rgb(174, 174, 174) 0px 0px 10px;\n  }\n  .g6-contextmenu-ul {\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n\n");
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          <ul class='g6-contextmenu-ul'>\n            <li>\u83DC\u5355\u98791</li>\n            <li>\u83DC\u5355\u98792</li>\n          </ul>\n        ";
      },
      shouldBegin: function shouldBegin(e) {
        return true;
      },
      // 菜单隐藏事件
      onHide: function onHide() {
        return true;
      },
      itemTypes: ['node', 'edge', 'combo'],
      trigger: 'contextmenu'
    };
  };
  // class-methods-use-this
  Menu.prototype.getEvents = function () {
    if (this.get('trigger') === 'click') {
      return {
        click: 'onMenuShow',
        touchend: 'onMenuShow'
      };
    }
    return {
      contextmenu: 'onMenuShow'
    };
  };
  Menu.prototype.init = function () {
    var className = this.get('className');
    var menu = (0, _domUtil.createDom)("<div class=".concat(className || 'g6-component-contextmenu', "></div>"));
    (0, _domUtil.modifyCSS)(menu, {
      top: '0px',
      position: 'absolute',
      visibility: 'hidden'
    });
    var container = this.get('container');
    if (!container) {
      container = this.get('graph').get('container');
    }
    if ((0, _util.isString)(container)) {
      container = document.getElementById(container);
    }
    container.appendChild(menu);
    this.set('menu', menu);
  };
  Menu.prototype.onMenuShow = function (e) {
    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 menuDom = this.get('menu');
    var getContent = this.get('getContent');
    var graph = this.get('graph');
    var menu = getContent(e, graph);
    if ((0, _util.isString)(menu)) {
      menuDom.innerHTML = menu;
    } else {
      menuDom.innerHTML = menu.outerHTML;
    }
    // 清除之前监听的事件
    this.removeMenuEventListener();
    var handleMenuClick = this.get('handleMenuClick');
    if (handleMenuClick) {
      var handleMenuClickWrapper = function handleMenuClickWrapper(evt) {
        handleMenuClick(evt.target, e.item, graph);
      };
      this.set('handleMenuClickWrapper', handleMenuClickWrapper);
      menuDom.addEventListener('click', handleMenuClickWrapper);
    }
    var width = graph.get('width');
    var height = graph.get('height');
    var bbox = menuDom.getBoundingClientRect();
    var offsetX = this.get('offsetX') || 0;
    var offsetY = this.get('offsetY') || 0;
    var graphTop = graph.getContainer().offsetTop;
    var graphLeft = graph.getContainer().offsetLeft;
    var x = e.canvasX + graphLeft + offsetX;
    var y = e.canvasY + graphTop + offsetY;
    // when the menu is (part of) out of the canvas
    if (x + bbox.width > width) {
      x = e.canvasX - bbox.width - offsetX + graphLeft;
    }
    if (y + bbox.height > height) {
      y = e.canvasY - bbox.height - offsetY + graphTop;
    }
    if (y < 0) {
      y = 0;
    }
    (0, _domUtil.modifyCSS)(menuDom, {
      top: "".concat(y, "px"),
      left: "".concat(x, "px"),
      visibility: 'visible'
    });
    // 左键单击会触发 body 上监听的 click 事件，导致菜单展示出来后又立即被隐藏了，需要过滤掉
    var triggeredByFirstClick = this.get('trigger') === 'click';
    var handler = function handler(evt) {
      if (triggeredByFirstClick) {
        triggeredByFirstClick = false;
        return;
      }
      self.onMenuHide();
    };
    // 如果在页面中其他任意地方进行click, 隐去菜单
    document.body.addEventListener('click', handler);
    this.set('handler', handler);
  };
  Menu.prototype.removeMenuEventListener = function () {
    var handleMenuClickWrapper = this.get('handleMenuClickWrapper');
    var handler = this.get('handler');
    if (handleMenuClickWrapper) {
      var menuDom = this.get('menu');
      menuDom.removeEventListener('click', handleMenuClickWrapper);
      this.set('handleMenuClickWrapper', null);
    }
    if (handler) {
      document.body.removeEventListener('click', handler);
    }
  };
  Menu.prototype.onMenuHide = function () {
    var menuDom = this.get('menu');
    if (menuDom) {
      (0, _domUtil.modifyCSS)(menuDom, {
        visibility: 'hidden'
      });
    }
    // 隐藏菜单后需要移除事件监听
    this.removeMenuEventListener();
  };
  Menu.prototype.destroy = function () {
    var menu = this.get('menu');
    this.removeMenuEventListener();
    if (menu) {
      var container = this.get('container');
      if (!container) {
        container = this.get('graph').get('container');
      }
      if ((0, _util.isString)(container)) {
        container = document.getElementById(container);
      }
      container.removeChild(menu);
    }
  };
  return Menu;
}(_base.default);
var _default = exports.default = Menu;