jnpf-web-vue3/node_modules/@logicflow/extension/es/components/context-menu/index.js

var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
var COMMON_TYPE_KEY = 'menu-common';
var NEXT_X_DISTANCE = 200;
var NEXT_Y_DISTANCE = 100;
var ContextMenu = /** @class */ (function () {
    function ContextMenu(_a) {
        var _this = this;
        var lf = _a.lf;
        this.menuTypeMap = new Map();
        this.listenDelete = function () {
            _this.hideContextMenu();
        };
        this.lf = lf;
        this.__menuDOM = document.createElement('div');
        this.__menuDOM.className = 'lf-inner-context';
        this.menuTypeMap.set(COMMON_TYPE_KEY, []);
        this.lf.setContextMenuByType = function (type, menus) {
            _this.setContextMenuByType(type, menus);
        };
        this.lf.setContextMenuItems = function (menus) {
            _this.setContextMenuItems(menus);
        };
        this.lf.showContextMenu = function (data) {
            _this.showContextMenu(data);
        };
        this.lf.hideContextMenu = function () {
            _this.hideContextMenu();
        };
    }
    ContextMenu.prototype.render = function (lf, container) {
        var _this = this;
        this.container = container;
        lf.on('node:click', function (_a) {
            var data = _a.data;
            _this._activeData = data;
            _this.createContextMenu();
        });
        lf.on('edge:click', function (_a) {
            var data = _a.data;
            // 获取右上角坐标
            _this._activeData = data;
            _this.createContextMenu();
        });
        lf.on('blank:click', function () {
            _this.hideContextMenu();
        });
    };
    ContextMenu.prototype.setContextMenuByType = function (type, menus) {
        this.menuTypeMap.set(type, menus);
    };
    /**
     * 隐藏菜单
     */
    ContextMenu.prototype.hideContextMenu = function () {
        this.__menuDOM.innerHTML = '';
        this.__menuDOM.style.display = 'none';
        if (this.isShow) {
            this.container.removeChild(this.__menuDOM);
        }
        this.lf.off('node:delete,edge:delete,node:drag,graph:transform', this.listenDelete);
        this.isShow = false;
    };
    /**
     * 显示指定元素菜单
     * @param data 节点id、节点类型、菜单位置
     */
    ContextMenu.prototype.showContextMenu = function (data) {
        if (!data || !data.id) {
            console.warn('请检查传入的参数');
            return;
        }
        this._activeData = data;
        this.createContextMenu();
    };
    ContextMenu.prototype.setContextMenuItems = function (menus) {
        this.menuTypeMap.set(COMMON_TYPE_KEY, menus);
    };
    /**
     * 获取新菜单位置
     */
    ContextMenu.prototype.getContextMenuPosition = function () {
        var data = this._activeData;
        var Model = this.lf.graphModel.getElement(data.id);
        if (!Model) {
            console.warn("\u627E\u4E0D\u5230\u5143\u7D20" + data.id);
            return;
        }
        var x;
        var y;
        if (Model.BaseType === 'edge') {
            x = Number.MIN_SAFE_INTEGER;
            y = Number.MAX_SAFE_INTEGER;
            var edgeData = Model.getData();
            x = Math.max(edgeData.startPoint.x, x);
            y = Math.min(edgeData.startPoint.y, y);
            x = Math.max(edgeData.endPoint.x, x);
            y = Math.min(edgeData.endPoint.y, y);
            if (edgeData.pointsList) {
                edgeData.pointsList.forEach(function (point) {
                    x = Math.max(point.x, x);
                    y = Math.min(point.y, y);
                });
            }
        }
        if (Model.BaseType === 'node') {
            x = data.x + Model.width / 2;
            y = data.y - Model.height / 2;
        }
        return this.lf.graphModel.transformModel.CanvasPointToHtmlPoint([x, y]);
    };
    ContextMenu.prototype.createContextMenu = function () {
        var _this = this;
        var isSilentMode = this.lf.options.isSilentMode;
        // 静默模式不显示菜单
        if (isSilentMode) {
            return;
        }
        var items = this.menuTypeMap.get(this._activeData.type) || [];
        items = items.concat(this.menuTypeMap.get(COMMON_TYPE_KEY));
        var menus = document.createDocumentFragment();
        items.forEach(function (item) {
            var menuItem = document.createElement('div');
            menuItem.className = 'lf-context-item';
            var img = document.createElement('img');
            img.src = item.icon;
            img.className = 'lf-context-img';
            if (item.className) {
                menuItem.className = menuItem.className + " " + item.className;
            }
            img.addEventListener('click', function () {
                _this.hideContextMenu();
                if (item.callback) {
                    item.callback(_this._activeData);
                }
                else {
                    _this.addNode({
                        sourceId: _this._activeData.id,
                        x: _this._activeData.x,
                        y: _this._activeData.y,
                        properties: item.properties,
                        type: item.type,
                    });
                }
            });
            menuItem.appendChild(img);
            menus.appendChild(menuItem);
        });
        this.__menuDOM.innerHTML = '';
        this.__menuDOM.appendChild(menus);
        this.showMenu();
    };
    ContextMenu.prototype.addNode = function (node, y) {
        var isDeep = y !== undefined;
        if (y === undefined) {
            y = node.y;
        }
        var nodeModel = this.lf.getNodeModelById(node.sourceId);
        var leftTopX = node.x - nodeModel.width + NEXT_X_DISTANCE;
        var leftTopY = y - node.y / 2 - 20;
        var rightBottomX = node.x + nodeModel.width + NEXT_X_DISTANCE;
        var rightBottomY = y + node.y / 2 + 20;
        var existElements = this.lf.getAreaElement([leftTopX, leftTopY], [rightBottomX, rightBottomY]);
        if (existElements.length) {
            y = y + NEXT_Y_DISTANCE;
            this.addNode(node, y);
            return;
        }
        var newNode = this.lf.addNode({
            type: node.type,
            x: node.x + 200,
            y: y,
            properties: node.properties,
        });
        var startPoint;
        var endPoint;
        if (isDeep) {
            startPoint = {
                x: node.x,
                y: node.y + nodeModel.height / 2,
            };
            endPoint = {
                x: newNode.x - newNode.width / 2,
                y: newNode.y,
            };
        }
        this.lf.addEdge({
            sourceNodeId: node.sourceId,
            targetNodeId: newNode.id,
            startPoint: startPoint,
            endPoint: endPoint,
        });
    };
    ContextMenu.prototype.showMenu = function () {
        var _a = __read(this.getContextMenuPosition(), 2), x = _a[0], y = _a[1];
        this.__menuDOM.style.display = 'flex';
        this.__menuDOM.style.top = y + "px";
        this.__menuDOM.style.left = x + 10 + "px";
        this.container.appendChild(this.__menuDOM);
        // 菜单显示的时候，监听删除，同时隐藏
        !this.isShow && this.lf.on('node:delete,edge:delete,node:drag,graph:transform', this.listenDelete);
        this.isShow = true;
    };
    ContextMenu.pluginName = 'contextMenu';
    return ContextMenu;
}());
export default ContextMenu;
export { ContextMenu, };