@xrenders/xflow
Version:
一款功能强大、易用灵活的流程编辑器框架，帮助你轻松构建复杂的工作流和流程产品
353 lines • 15.9 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); }
import "antd/es/dropdown/style";
import _Dropdown from "antd/es/dropdown";
import "antd/es/menu/style";
import _Menu from "antd/es/menu";
import "antd/es/message/style";
import _message from "antd/es/message";
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; }
import { MoreOutlined } from '@ant-design/icons';
import { Handle, Position, useReactFlow } from '@xyflow/react';
import classNames from 'classnames';
import { isFunction } from 'lodash';
import React, { Fragment, memo, useCallback, useContext, useMemo, useState } from 'react';
import { shallow } from 'zustand/shallow';
import { useStore } from '../../hooks/useStore';
import { ConfigContext } from '../../models/context';
import { capitalize, isTruthy, transformNodeStatus, uuid, uuid4 } from '../../utils';
import "./index.css";
import SourceHandle from './sourceHandle';
import { useFlow } from '../../hooks/useFlow';
export default /*#__PURE__*/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 = useContext(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(capitalize(type), "Node")] || widgets['CommonNode'];
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
isHovered = _useState2[0],
setIsHovered = _useState2[1];
var reactflow = useReactFlow();
var _useStore = useStore(function (state) {
return {
nodes: state.nodes,
edges: state.edges,
mousePosition: state.mousePosition,
addEdges: state.addEdges,
onEdgesChange: state.onEdgesChange
};
}, shallow),
edges = _useStore.edges,
nodes = _useStore.nodes,
addEdges = _useStore.addEdges,
mousePosition = _useStore.mousePosition;
var _useFlow = 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 = 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 = 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 = 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(uuid4())
}, data),
position: {
x: x,
y: y
}
};
var newEdges = Object.assign({
id: uuid(),
source: id,
target: targetId,
deletable: deletable
}, sourceHandle && {
sourceHandle: sourceHandle
});
addNodes(newNodes);
addEdges(newEdges);
};
var targetPosition = Position.Left;
var sourcePosition = Position.Right;
if (layout === 'TB') {
targetPosition = Position.Top;
sourcePosition = Position.Bottom;
}
var handleCopyNode = useCallback(function () {
copyNode(id);
_message.success('复制成功');
}, [copyNode, id]);
var handlePasteNode = useCallback(function (data) {
pasteNode(id, data);
}, [pasteNode, id]);
var handleDeleteNode = 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 (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 = 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 = 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__*/React.createElement(_Menu, {
onClick: itemClick
}, /*#__PURE__*/React.createElement(_Menu.Item, {
key: 'copy',
disabled: disabledCopy
}, "\u590D\u5236"), !isEnd ? menuItem.map(function (r) {
return /*#__PURE__*/React.createElement(_Menu.Item, Object.assign({}, r, {
key: r.key
}), r.label);
}) : null, /*#__PURE__*/React.createElement(_Menu.Item, {
key: 'delete',
danger: true,
disabled: disabledDelete
}, "\u5220\u9664"));
var dropdownVersionProps = 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__*/React.createElement("div", {
className: classNames('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), 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__*/React.createElement(Handle, Object.assign({}, handleProps, {
type: "target",
position: targetPosition,
isConnectable: connectable,
className: classNames({
'handle-connected': isTargetHandleConnected,
'handle-disconnected': !isTargetHandleConnected,
"handle-connected-target": true
})
}))), !readOnly && (/*#__PURE__*/React.createElement(_Dropdown, Object.assign({
disabled: readOnly
}, dropdownVersionProps), /*#__PURE__*/React.createElement("div", {
className: "xflow-node-actions-container"
}, /*#__PURE__*/React.createElement(MoreOutlined, {
style: {
transform: 'rotateZ(90deg)',
fontSize: '20px'
}
})))), /*#__PURE__*/React.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__*/React.createElement("div", {
onClick: function onClick() {
_onClick(data);
}
}, renderHandle(SourceHandle, {
position: sourcePosition,
isConnectable: connectable,
selected: selected,
isHovered: isHovered,
handleAddNode: handleAddNode
}, {
id: id,
type: type,
data: data,
layout: layout,
isConnectable: isConnectable,
readOnly: readOnly
})) : /*#__PURE__*/React.createElement(Fragment, null, !((_m = settingMap === null || settingMap === void 0 ? void 0 : settingMap[type]) === null || _m === void 0 ? void 0 : _m.sourceHandleHidden) && !isSwitchNode && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SourceHandle, {
position: sourcePosition,
isConnectable: connectable,
selected: selected,
isHovered: isHovered,
handleAddNode: handleAddNode,
isConnected: isSourceHandleConnected
})))));
});