@antv/g6
Version:
A Graph Visualization Framework in JavaScript
158 lines • 6.42 kB
JavaScript
"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Contextmenu = void 0;
const base_plugin_1 = require("../base-plugin");
const dom_1 = require("../utils/dom");
const util_1 = require("./util");
/**
* <zh/> 上下文菜单
*
* <en/> Contextmenu
* @remarks
* <zh/> 上下文菜单，也被称为右键菜单，是当用户在某个特定区域上点击后出现的一个菜单。支持在点击前后，触发自定义事件。
*
* <en/> Contextmenu, also known as the right-click menu , is a menu that appears when a user clicks on a specific area. Supports triggering custom events before and after clicking.
*/
class Contextmenu extends base_plugin_1.BasePlugin {
constructor(context, options) {
super(context, Object.assign({}, Contextmenu.defaultOptions, options));
this.targetElement = null;
this.onTriggerEvent = (event) => {
var _a;
// `contextmenu` 事件默认会触发浏览器的右键菜单，需要阻止默认事件
// `click` 事件不需要阻止默认事件
(_a = event.preventDefault) === null || _a === void 0 ? void 0 : _a.call(event);
this.show(event);
};
this.onMenuItemClick = (event) => {
const { onClick, trigger } = this.options;
if (event.target instanceof HTMLElement) {
if (event.target.className.includes('g6-contextmenu-li')) {
const value = event.target.getAttribute('value');
onClick === null || onClick === void 0 ? void 0 : onClick(value, event.target, this.targetElement);
this.hide();
}
}
if (trigger !== 'click')
this.hide();
};
this.initElement();
this.update(options);
}
initElement() {
this.$element = (0, dom_1.createPluginContainer)('contextmenu', false, { zIndex: '99' });
const { className } = this.options;
if (className)
this.$element.classList.add(className);
const $container = this.context.canvas.getContainer();
$container.appendChild(this.$element);
(0, dom_1.insertDOM)('g6-contextmenu-css', 'style', {}, util_1.CONTEXTMENU_CSS, document.head);
}
/**
* <zh/> 显示上下文菜单
*
* <en/> Show the contextmenu
* @param event - <zh/> 元素指针事件 | <en/> Element pointer event
* @internal
*/
show(event) {
return __awaiter(this, void 0, void 0, function* () {
const { enable, offset } = this.options;
if ((typeof enable === 'function' && !enable(event)) || !enable) {
this.hide();
return;
}
const content = yield this.getDOMContent(event);
if (content instanceof HTMLElement) {
this.$element.innerHTML = '';
this.$element.appendChild(content);
}
else {
this.$element.innerHTML = content;
}
// NOTICE: 为什么事件中的 client 是相对浏览器，而不是画布容器？
const clientRect = this.context.graph.getCanvas().getContainer().getBoundingClientRect();
this.$element.style.left = `${event.client.x - clientRect.left + offset[0]}px`;
this.$element.style.top = `${event.client.y - clientRect.top + offset[1]}px`;
this.$element.style.display = 'block';
this.targetElement = event.target;
});
}
/**
* <zh/> 隐藏上下文菜单
*
* <en/> Hide the contextmenu
*/
hide() {
this.$element.style.display = 'none';
this.targetElement = null;
}
/**
* <zh/> 更新上下文菜单的配置项
*
* <en/> Update the contextmenu options
* @param options - <zh/> 配置项 | <en/> Options
* @internal
*/
update(options) {
this.unbindEvents();
super.update(options);
this.bindEvents();
}
/**
* <zh/> 销毁上下文菜单
*
* <en/> Destroy the contextmenu
* @internal
*/
destroy() {
this.unbindEvents();
super.destroy();
this.$element.remove();
}
getDOMContent(event) {
return __awaiter(this, void 0, void 0, function* () {
const { getContent, getItems } = this.options;
if (getItems) {
return (0, util_1.getContentFromItems)(yield getItems(event));
}
return yield getContent(event);
});
}
bindEvents() {
const { graph } = this.context;
const { trigger } = this.options;
graph.on(`canvas:${trigger}`, this.onTriggerEvent);
graph.on(`node:${trigger}`, this.onTriggerEvent);
graph.on(`edge:${trigger}`, this.onTriggerEvent);
graph.on(`combo:${trigger}`, this.onTriggerEvent);
document.addEventListener('click', this.onMenuItemClick);
}
unbindEvents() {
const { graph } = this.context;
const { trigger } = this.options;
graph.off(`canvas:${trigger}`, this.onTriggerEvent);
graph.off(`node:${trigger}`, this.onTriggerEvent);
graph.off(`edge:${trigger}`, this.onTriggerEvent);
graph.off(`combo:${trigger}`, this.onTriggerEvent);
document.removeEventListener('click', this.onMenuItemClick);
}
}
exports.Contextmenu = Contextmenu;
Contextmenu.defaultOptions = {
trigger: 'contextmenu',
offset: [4, 4],
loadingContent: '<div class="g6-contextmenu-loading">Loading...</div>',
getContent: () => 'It is a empty context menu.',
enable: () => true,
};
//# sourceMappingURL=index.js.map