@logicflow/extension
Version:
LogicFlow Extensions
240 lines (239 loc) • 8.99 kB
JavaScript
"use strict";
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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ContextMenu = void 0;
var COMMON_TYPE_KEY = 'menu-common';
var NEXT_X_DISTANCE = 200;
var NEXT_Y_DISTANCE = 100;
var ContextMenu = /** @class */ (function () {
function ContextMenu(_a) {
var lf = _a.lf;
var _this = this;
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) {
var x_1;
var y_1;
if (Model.BaseType === 'edge') {
x_1 = Number.MIN_SAFE_INTEGER;
y_1 = Number.MAX_SAFE_INTEGER;
var edgeData = Model.getData();
x_1 = Math.max(edgeData.startPoint.x, x_1);
y_1 = Math.min(edgeData.startPoint.y, y_1);
x_1 = Math.max(edgeData.endPoint.x, x_1);
y_1 = Math.min(edgeData.endPoint.y, y_1);
if (edgeData.pointsList) {
edgeData.pointsList.forEach(function (point) {
x_1 = Math.max(point.x, x_1);
y_1 = Math.min(point.y, y_1);
});
}
}
if (Model.BaseType === 'node') {
x_1 = data.x + Model.width / 2;
y_1 = data.y - Model.height / 2;
}
return this.lf.graphModel.transformModel.CanvasPointToHtmlPoint([x_1, y_1]);
}
};
ContextMenu.prototype.createContextMenu = function () {
var _this = this;
var isSilentMode = this.lf.options.isSilentMode;
// 静默模式不显示菜单
if (isSilentMode) {
return;
}
var items = __spreadArray(__spreadArray([], __read((this.menuTypeMap.get(this._activeData.type) || [])), false), __read((this.menuTypeMap.get(COMMON_TYPE_KEY) || [])), false);
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 = "".concat(menuItem.className, " ").concat(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);
if (nodeModel) {
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;
}
if (node.type) {
var newNode = this.lf.addNode({
type: node.type,
x: node.x + 200,
y: y,
properties: node.properties,
});
var startPoint = void 0;
var endPoint = void 0;
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 menuPosition = this.getContextMenuPosition();
if (menuPosition) {
var _a = __read(menuPosition, 2), x = _a[0], y = _a[1];
this.__menuDOM.style.display = 'flex';
this.__menuDOM.style.top = "".concat(y, "px");
this.__menuDOM.style.left = "".concat(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;
}());
exports.ContextMenu = ContextMenu;
exports.default = ContextMenu;