@xrenders/xflow
Version:
一款功能强大、易用灵活的流程编辑器框架，帮助你轻松构建复杂的工作流和流程产品
362 lines (361 loc) • 17.5 kB
JavaScript
;
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("antd/es/dropdown/style");
var _dropdown = _interopRequireDefault(require("antd/es/dropdown"));
require("antd/es/menu/style");
var _menu = _interopRequireDefault(require("antd/es/menu"));
require("antd/es/message/style");
var _message2 = _interopRequireDefault(require("antd/es/message"));
var _icons = require("@ant-design/icons");
var _react = require("@xyflow/react");
var _classnames = _interopRequireDefault(require("classnames"));
var _lodash = require("lodash");
var _react2 = _interopRequireWildcard(require("react"));
var _shallow = require("zustand/shallow");
var _useStore2 = require("../../hooks/useStore");
var _context = require("../../models/context");
var _utils = require("../../utils");
require("./index.css");
var _sourceHandle = _interopRequireDefault(require("./sourceHandle"));
var _useFlow2 = require("../../hooks/useFlow");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
var _default = exports.default = /*#__PURE__*/(0, _react2.memo)(function (props) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
var id = props.id,
type = props.type,
data = props.data,
layout = props.layout,
isConnectable = props.isConnectable,
selected = props.selected,
_onClick = props.onClick,
status = props.status;
var _useContext = (0, _react2.useContext)(_context.ConfigContext),
widgets = _useContext.widgets,
settingMap = _useContext.settingMap,
globalConfig = _useContext.globalConfig,
onMenuItemClick = _useContext.onMenuItemClick,
antdVersion = _useContext.antdVersion,
readOnly = _useContext.readOnly;
var deletable = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.edge) === null || _a === void 0 ? void 0 : _a.deletable) !== null && _b !== void 0 ? _b : true;
var disabledCopy = (_d = (_c = settingMap[type]) === null || _c === void 0 ? void 0 : _c.disabledCopy) !== null && _d !== void 0 ? _d : false;
var disabledDelete = (_f = (_e = settingMap[type]) === null || _e === void 0 ? void 0 : _e.disabledDelete) !== null && _f !== void 0 ? _f : false;
var switchExtra = ((_g = settingMap[type]) === null || _g === void 0 ? void 0 : _g.switchExtra) || {};
var handleProps = (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.handle) || {};
var renderHandle = ((_h = settingMap[type]) === null || _h === void 0 ? void 0 : _h.renderHandle) || void 0;
// const isConnectableStart = globalConfig?.handle?.isConnectableStart ?? true;
// const isConnectableEnd = globalConfig?.handle?.isConnectableEnd ?? true;
var NodeWidget = widgets["".concat((0, _utils.capitalize)(type), "Node")] || widgets['CommonNode'];
var _useState = (0, _react2.useState)(false),
_useState2 = _slicedToArray(_useState, 2),
isHovered = _useState2[0],
setIsHovered = _useState2[1];
var reactflow = (0, _react.useReactFlow)();
var _useStore = (0, _useStore2.useStore)(function (state) {
return {
nodes: state.nodes,
edges: state.edges,
mousePosition: state.mousePosition,
addEdges: state.addEdges,
onEdgesChange: state.onEdgesChange
};
}, _shallow.shallow),
edges = _useStore.edges,
nodes = _useStore.nodes,
addEdges = _useStore.addEdges,
mousePosition = _useStore.mousePosition;
var _useFlow = (0, _useFlow2.useFlow)(),
addNodes = _useFlow.addNodes,
pasteNode = _useFlow.pasteNode,
copyNode = _useFlow.copyNode,
deleteNode = _useFlow.deleteNode;
var isNote = type === 'Note';
var isEnd = type === 'End';
var isSwitchNode = type === 'Switch' || type === 'Parallel' || isNote; // 判断是否为条件节点/并行节点/注释节点
var connectable = readOnly ? false : isConnectable;
var nodeSetting = settingMap[type] || {};
var nodeClassName = (nodeSetting === null || nodeSetting === void 0 ? void 0 : nodeSetting.className) || '';
// 判断左侧Handle是否已连接
var isTargetHandleConnected = (0, _react2.useMemo)(function () {
var _a;
return (_a = edges || []) === null || _a === void 0 ? void 0 : _a.some(function (edge) {
return edge.target === id;
});
}, [edges, id]);
var isSourceHandleConnected = (0, _react2.useMemo)(function () {
if (isSwitchNode) {
// 对于Switch节点，需要检查每个sourceHandle是否已连接
if (type === 'Switch' && Array.isArray(data.list)) {
return data.list.some(function (item) {
return edges.some(function (edge) {
return edge.source === id && edge.sourceHandle === item._id;
});
});
}
// 对于Parallel节点，需要检查每个sourceHandle是否已连接
if (type === 'Parallel' && Array.isArray(data.list)) {
return data.list.some(function (item) {
return edges.some(function (edge) {
return edge.source === id && edge.sourceHandle === item._id;
});
});
}
return false;
}
// 对于普通节点，检查是否有从该节点出发的边
return edges.some(function (edge) {
return edge.source === id;
});
}, [edges, id, type, data.list, isSwitchNode]);
// 增加节点并进行联系
var handleAddNode = function handleAddNode(data, sourceHandle) {
var _a;
var screenToFlowPosition = reactflow.screenToFlowPosition;
var _screenToFlowPosition = screenToFlowPosition({
x: mousePosition.pageX + 100,
y: mousePosition.pageY + 100
}),
x = _screenToFlowPosition.x,
y = _screenToFlowPosition.y;
var targetId = (0, _utils.uuid)();
var title = ((_a = settingMap[data === null || data === void 0 ? void 0 : data._nodeType]) === null || _a === void 0 ? void 0 : _a.title) || (data === null || data === void 0 ? void 0 : data._nodeType);
var newNodes = {
id: targetId,
type: 'custom',
data: Object.assign({
title: "".concat(title, "_").concat((0, _utils.uuid4)())
}, data),
position: {
x: x,
y: y
}
};
var newEdges = Object.assign({
id: (0, _utils.uuid)(),
source: id,
target: targetId,
deletable: deletable
}, sourceHandle && {
sourceHandle: sourceHandle
});
addNodes(newNodes);
addEdges(newEdges);
};
var targetPosition = _react.Position.Left;
var sourcePosition = _react.Position.Right;
if (layout === 'TB') {
targetPosition = _react.Position.Top;
sourcePosition = _react.Position.Bottom;
}
var handleCopyNode = (0, _react2.useCallback)(function () {
copyNode(id);
_message2.default.success('复制成功');
}, [copyNode, id]);
var handlePasteNode = (0, _react2.useCallback)(function (data) {
pasteNode(id, data);
}, [pasteNode, id]);
var handleDeleteNode = (0, _react2.useCallback)(function () {
deleteNode(id);
}, [deleteNode, id]);
var defaultAction = function defaultAction(e, sourceHandle) {
if (e.key === 'copy') {
handleCopyNode();
} else if (e.key === 'paste') {
handlePasteNode();
} else if (e.key === 'delete') {
handleDeleteNode();
} else if (e.key.startsWith('paste-')) {
if (sourceHandle) {
handlePasteNode({
sourceHandle: sourceHandle
});
} else {
handlePasteNode();
}
}
};
var itemClick = function itemClick(e) {
var _a;
if (!e.key) {
return;
}
var sourceHandle = (_a = e.item.props) === null || _a === void 0 ? void 0 : _a.sourcehandle;
if ((0, _lodash.isFunction)(onMenuItemClick)) {
var _data = {
key: e.key,
nodeId: id
};
if (type === 'Switch' && e.key.startsWith('paste-') && sourceHandle) {
_data['sourceHandle'] = sourceHandle;
}
onMenuItemClick(_data, function () {
defaultAction(e, sourceHandle);
});
} else {
defaultAction(e, sourceHandle);
}
};
var menuItem = (0, _react2.useMemo)(function () {
if (type === 'Switch') {
var list = [];
if (Array.isArray(data.list)) {
var len = data.list.length;
list = data.list.map(function (r, i) {
if (i === 0) {
return {
label: "\u7C98\u8D34\u5230\u7B2C".concat(i + 1, "\u4E2A\u51FA\u53E3"),
key: 'paste-' + i,
index: i,
id: id,
sourcehandle: r._id
};
} else {
return {
label: "\u7C98\u8D34\u5230\u7B2C".concat(i + 1, "\u4E2A\u51FA\u53E3"),
key: 'paste-' + i,
id: id,
index: i,
sourcehandle: r._id
};
}
});
}
var defaultElse = (switchExtra === null || switchExtra === void 0 ? void 0 : switchExtra.hideElse) ? [] : [{
label: "\u7C98\u8D34\u5230\u7B2C".concat(list.length + 1, "\u4E2A\u51FA\u53E3"),
key: 'paste-' + (list.length + 1),
id: id,
index: list.length + 1,
sourcehandle: 'id_else'
}];
return [].concat(_toConsumableArray(list), defaultElse);
}
return [{
label: '粘贴',
key: 'paste'
}];
}, [type, data, isEnd]);
// 节点状态处理
var statusObj = (0, _utils.transformNodeStatus)(((_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.nodeView) === null || _j === void 0 ? void 0 : _j.status) || []);
var nodeBorderColor = (_k = statusObj[status]) === null || _k === void 0 ? void 0 : _k.color;
var menu = /*#__PURE__*/_react2.default.createElement(_menu.default, {
onClick: itemClick
}, /*#__PURE__*/_react2.default.createElement(_menu.default.Item, {
key: 'copy',
disabled: disabledCopy
}, "\u590D\u5236"), !isEnd ? menuItem.map(function (r) {
return /*#__PURE__*/_react2.default.createElement(_menu.default.Item, Object.assign({}, r, {
key: r.key
}), r.label);
}) : null, /*#__PURE__*/_react2.default.createElement(_menu.default.Item, {
key: 'delete',
danger: true,
disabled: disabledDelete
}, "\u5220\u9664"));
var dropdownVersionProps = (0, _react2.useMemo)(function () {
if (antdVersion === 'V5') {
return {
menu: {
items: [{
label: '复制',
key: 'copy',
disabled: disabledCopy
}].concat(_toConsumableArray(isEnd ? [] : menuItem), [{
label: '删除',
key: 'delete',
danger: true,
disabled: disabledDelete
}]),
onClick: itemClick
}
};
}
// V4
return {
overlay: menu
};
}, [menuItem, isEnd]);
return /*#__PURE__*/_react2.default.createElement("div", {
className: (0, _classnames.default)('xflow-node-container', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, 'xflow-node-container-selected', !!selected), 'xflow-node-container-tb', layout === 'TB'), 'xflow-node-container-note', isNote), "xflow-node-container-status-".concat(status), (0, _utils.isTruthy)(status)), nodeClassName, !!nodeClassName)),
onMouseEnter: function onMouseEnter() {
return setIsHovered(true);
},
onMouseLeave: function onMouseLeave() {
return setIsHovered(false);
},
style: {
'--nodeBorderColor': nodeBorderColor
}
}, !((_l = settingMap === null || settingMap === void 0 ? void 0 : settingMap[type]) === null || _l === void 0 ? void 0 : _l.targetHandleHidden) && !isNote && (/*#__PURE__*/_react2.default.createElement(_react.Handle, Object.assign({}, handleProps, {
type: "target",
position: targetPosition,
isConnectable: connectable,
className: (0, _classnames.default)({
'handle-connected': isTargetHandleConnected,
'handle-disconnected': !isTargetHandleConnected,
"handle-connected-target": true
})
}))), !readOnly && (/*#__PURE__*/_react2.default.createElement(_dropdown.default, Object.assign({
disabled: readOnly
}, dropdownVersionProps), /*#__PURE__*/_react2.default.createElement("div", {
className: "xflow-node-actions-container"
}, /*#__PURE__*/_react2.default.createElement(_icons.MoreOutlined, {
style: {
transform: 'rotateZ(90deg)',
fontSize: '20px'
}
})))), /*#__PURE__*/_react2.default.createElement(NodeWidget, {
id: id,
type: type,
data: data,
onClick: function onClick() {
return _onClick(data);
},
position: sourcePosition,
isConnectable: connectable,
selected: selected,
isHovered: isHovered,
handleAddNode: handleAddNode
}), typeof renderHandle === 'function' ? /*#__PURE__*/_react2.default.createElement("div", {
onClick: function onClick() {
_onClick(data);
}
}, renderHandle(_sourceHandle.default, {
position: sourcePosition,
isConnectable: connectable,
selected: selected,
isHovered: isHovered,
handleAddNode: handleAddNode
}, {
id: id,
type: type,
data: data,
layout: layout,
isConnectable: isConnectable,
readOnly: readOnly
})) : /*#__PURE__*/_react2.default.createElement(_react2.Fragment, null, !((_m = settingMap === null || settingMap === void 0 ? void 0 : settingMap[type]) === null || _m === void 0 ? void 0 : _m.sourceHandleHidden) && !isSwitchNode && (/*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement(_sourceHandle.default, {
position: sourcePosition,
isConnectable: connectable,
selected: selected,
isHovered: isHovered,
handleAddNode: handleAddNode,
isConnected: isSourceHandleConnected
})))));
});