wetrade-design
Version:
一款多语言支持Vue3的UI框架
386 lines • 18.8 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { resolveDirective as _resolveDirective, createVNode as _createVNode, Fragment as _Fragment } from "vue";
import { defineComponent, toRefs, computed, withModifiers, ref } from 'vue';
// import { withInstall } from '../_util/type';
import {
// Direction,
OperationType, TreeNodeType,
// TRADIND_KEYS,
// ToolsStatusEnum,
// CONDITION_HEAD_NODE_HEIGHT,
ICON_SIZE } from './utils/types';
// import { getOffset } from './utils';
import useConfigInject from '../_util/hooks/useConfigInject';
import { findChildrenNodeList, hasErrorToolInLink, isNodeInMerge } from './utils/tool';
import Icon from '../icon';
// import Tools from './Tools';
import Dropdown from '../dropdown';
import Menu, { MenuItem } from '../menu';
import classNames from '../_util/classNames';
export var nodeProps = function nodeProps() {
return {
graph: Object,
node: Object,
index: Number,
isMove: Boolean,
isTemEdge: Boolean,
nodeIntercept: Function,
lineDrop: Boolean,
nodeDrop: Boolean,
className: String,
nodeList: {
type: Array,
default: function _default() {
return [];
}
},
linkList: {
type: Array,
default: function _default() {
return [];
}
},
modelPathList: {
type: Array,
default: function _default() {
return [];
}
},
merge: Boolean,
selectedNodeId: Array,
disabledLine: {
type: Boolean,
default: true
},
nodeMousedown: Function,
nodeMouseenter: Function,
nodeMouseleave: Function,
nodeMouseup: Function,
// sideMousedown: Function,
nodeSelect: Function,
nodeDelete: Function,
nodeShrink: Function,
menuClick: Function,
menus: Array,
readonly: Boolean,
getMenuPopupContainer: {
type: Function
},
scrollRef: {
type: Object
},
onDrag: Function,
onDragEnd: Function,
dragging: Boolean,
nodeClick: Function
};
};
var StgyFlowNode = defineComponent({
compatConfig: {
MODE: 3
},
name: 'WdStgyFlowNode',
props: nodeProps(),
emits: ['node-mousedown', 'node-select', 'node-mouseenter', 'node-mouseleave', 'node-mouseup', 'node-contextmenu', 'side-mousedown', 'node-insert'],
slots: ['header', 'content', 'tools'],
setup: function setup(props, _ref) {
var slots = _ref.slots;
var _useConfigInject = useConfigInject('stgy-flow-node', props),
prefixCls = _useConfigInject.prefixCls;
var _toRefs = toRefs(props),
node = _toRefs.node,
linkList = _toRefs.linkList,
merge = _toRefs.merge,
selectedNodeId = _toRefs.selectedNodeId,
className = _toRefs.className,
modelPathList = _toRefs.modelPathList,
nodeList = _toRefs.nodeList,
menus = _toRefs.menus,
readonly = _toRefs.readonly,
getMenuPopupContainer = _toRefs.getMenuPopupContainer,
dragging = _toRefs.dragging;
// const state = reactive({
// direction: Direction,
// output: props.nodeIntercept,
// });
var nodeRef = ref();
var style = computed(function () {
var _node$value = node.value,
position = _node$value.position,
width = _node$value.width,
height = _node$value.height;
return {
width: width + 'px',
height: height + 'px',
top: position[1] + 'px',
left: position[0] + 'px'
};
});
var notToolsNode = computed(function () {
var _node$value2, _node$value2$meta;
return ((_node$value2 = node.value) === null || _node$value2 === void 0 ? void 0 : (_node$value2$meta = _node$value2.meta) === null || _node$value2$meta === void 0 ? void 0 : _node$value2$meta.type) !== TreeNodeType.TOOLS;
});
var insertNodeStyle = computed(function () {
var _meta$extParam;
var _node$value3 = node.value,
width = _node$value3.width,
meta = _node$value3.meta;
return {
position: 'absolute',
top: (meta !== null && meta !== void 0 && (_meta$extParam = meta.extParam) !== null && _meta$extParam !== void 0 && _meta$extParam.isMergeNode ? -(ICON_SIZE / 2) : 6) + 'px',
left: (hasNextNodeAndNotEmpty.value ? width + 60 : width + 40) + 'px'
};
});
var isOpen = computed(function () {
return node.value.meta.extParam.isOpen;
});
var shrinkNodeStyle = computed(function () {
var _meta$extParam2;
var _node$value4 = node.value,
width = _node$value4.width,
meta = _node$value4.meta;
return {
position: 'absolute',
top: (meta !== null && meta !== void 0 && (_meta$extParam2 = meta.extParam) !== null && _meta$extParam2 !== void 0 && _meta$extParam2.isMergeNode ? -(ICON_SIZE / 2) : 6) + 'px',
left: width + (isOpen.value ? 24 : 40) + 'px'
};
});
var deleteNodeStyle = computed(function () {
var width = node.value.width;
return {
position: 'absolute',
top: "".concat(notToolsNode.value ? 8 : 7, "px"),
left: width - 18 - 12 + 'px'
};
});
var isLastNode = computed(function () {
var startIds = linkList.value.map(function (link) {
return link === null || link === void 0 ? void 0 : link.startId;
});
// 被合并的节点也要判断后面是否是空节点
var mergeLink = linkList.value.find(function (link) {
var _link$meta;
return node.value.id === link.startId && ((_link$meta = link.meta) === null || _link$meta === void 0 ? void 0 : _link$meta.activeId) !== -1;
});
// 判断空节点是否为最后节点 要用来判断这个空节点后面有没有连接其它阶段 没有的话则是最后节点
if (mergeLink) {
return !linkList.value.some(function (link) {
return (mergeLink === null || mergeLink === void 0 ? void 0 : mergeLink.endId) === link.startId;
});
}
return !startIds.includes(node.value.id);
});
// 是否有下一个节点
var hasNextNode = computed(function () {
return linkList.value.some(function (link) {
return link.startId === node.value.id;
});
});
// 是否有下一个节点,并且下一个节点不是空节点
var hasNextNodeAndNotEmpty = computed(function () {
return linkList.value.some(function (link) {
var _link$meta2, _link$meta3;
return link.startId === node.value.id && ((_link$meta2 = link.meta) === null || _link$meta2 === void 0 ? void 0 : _link$meta2.activeId) === -1 && !((_link$meta3 = link.meta) !== null && _link$meta3 !== void 0 && _link$meta3.isDragElement);
});
});
var nodeClassNames = computed(function () {
var _node$value5, _node$value5$meta, _node$value6, _node$value6$meta, _classNameObj;
var classNameObj = (_classNameObj = {}, _defineProperty(_classNameObj, "".concat(prefixCls.value), true), _defineProperty(_classNameObj, 'last-node', isLastNode.value), _defineProperty(_classNameObj, 'merge-node', merge.value), _defineProperty(_classNameObj, 'selected-node', selectedNodeId.value.includes(node.value.id)), _defineProperty(_classNameObj, 'lighten-node', (_node$value5 = node.value) === null || _node$value5 === void 0 ? void 0 : (_node$value5$meta = _node$value5.meta) === null || _node$value5$meta === void 0 ? void 0 : _node$value5$meta.isHighLight), _defineProperty(_classNameObj, 'start-node', ((_node$value6 = node.value) === null || _node$value6 === void 0 ? void 0 : (_node$value6$meta = _node$value6.meta) === null || _node$value6$meta === void 0 ? void 0 : _node$value6$meta.configKey) === 'start_node'), _defineProperty(_classNameObj, 'dragging-node', dragging.value), _classNameObj);
var key = className.value;
key && (classNameObj[key] = true);
return classNameObj;
});
var isInMerge = computed(function () {
return isNodeInMerge({
nodeId: node.value.id,
modelPathList: modelPathList.value,
nodeList: nodeList.value
});
});
var isInErrorToolLink = computed(function () {
return hasErrorToolInLink({
nodeId: node.value.id,
modelPathList: modelPathList.value,
nodeList: nodeList.value
});
});
var isInMergeLastNode = computed(function () {
var _link$meta4;
var link = linkList.value.find(function (item) {
return item.startId === node.value.id;
});
return isInMerge.value && (link === null || link === void 0 ? void 0 : (_link$meta4 = link.meta) === null || _link$meta4 === void 0 ? void 0 : _link$meta4.activeId) !== -1;
});
// 展开收起禁用
var shrinkDisabled = computed(function () {
return merge.value || isInMerge.value || isInErrorToolLink.value;
});
var nodeMousedown = function nodeMousedown(evt) {
props.nodeMousedown(evt, node.value);
};
var nodeMouseup = function nodeMouseup() {
props.nodeMouseup();
if (merge.value) {
props.nodeSelect({
nodeId: node.value.id,
isLastNode: isLastNode.value
});
}
};
var nodeDelete = function nodeDelete() {
props.nodeDelete(node.value);
};
var nodeShrink = function nodeShrink() {
if (shrinkDisabled.value) {
return;
}
props.nodeShrink(node.value);
};
// 获取收起数量
var getShrinkNodeAfterNum = function getShrinkNodeAfterNum() {
var _findChildrenNodeList, _findChildrenNodeList2;
return ((_findChildrenNodeList = findChildrenNodeList({
nodeId: node.value.id,
modelPathList: modelPathList.value,
nodeList: nodeList.value
})) === null || _findChildrenNodeList === void 0 ? void 0 : (_findChildrenNodeList2 = _findChildrenNodeList.filter(function (item) {
var _item$meta, _item$meta$extParam;
return !item.meta.extParam.isMergeNode && !((_item$meta = item.meta) !== null && _item$meta !== void 0 && (_item$meta$extParam = _item$meta.extParam) !== null && _item$meta$extParam !== void 0 && _item$meta$extParam.isDragElement);
})) === null || _findChildrenNodeList2 === void 0 ? void 0 : _findChildrenNodeList2.length) - (node.value.meta.extParam.isMergeNode ? 0 : 1);
};
var handleMenuClick = function handleMenuClick(key) {
props.menuClick({
type: OperationType.INSERT,
key: key,
node: node.value
});
};
var nodeDeleteDown = function nodeDeleteDown() {
// 占位
};
return function () {
var _node$value7, _node$value7$meta, _node$value$meta, _node$value$meta2, _node$value$meta3, _node$value8, _node$value8$meta, _node$value11, _node$value11$meta, _node$value11$meta$ex;
var deleteNode = null;
if (((_node$value7 = node.value) === null || _node$value7 === void 0 ? void 0 : (_node$value7$meta = _node$value7.meta) === null || _node$value7$meta === void 0 ? void 0 : _node$value7$meta.type) !== TreeNodeType.TOOLS && ((_node$value$meta = node.value.meta) === null || _node$value$meta === void 0 ? void 0 : _node$value$meta.configKey) !== 'start_node' && !readonly.value) {
deleteNode = _createVNode(_Fragment, null, [_createVNode("div", {
"onMousedown": withModifiers(nodeDeleteDown, ['left', 'prevent', 'stop']),
"onMouseup": withModifiers(nodeDelete, ['left', 'prevent', 'stop']),
"style": deleteNodeStyle.value,
"class": "node-delete"
}, [_createVNode(Icon, {
"class": "icon-delete ".concat(notToolsNode.value ? '' : 'icon-tools-delete'),
"icon-class": "wd-icon-tips_close_circle"
}, null)])]);
}
var insertNode = null;
if (!isInMergeLastNode.value && !readonly.value && !((_node$value$meta2 = node.value.meta) !== null && _node$value$meta2 !== void 0 && _node$value$meta2.extParam.hiddenInsert) && (_node$value$meta3 = node.value.meta) !== null && _node$value$meta3 !== void 0 && _node$value$meta3.extParam.isOpen) {
var _node$value$meta4, _node$value$meta4$ext;
insertNode = _createVNode(_Fragment, null, [_createVNode(Dropdown, {
"trigger": 'click',
"getPopupContainer": getMenuPopupContainer.value,
"disabled": ((_node$value$meta4 = node.value.meta) === null || _node$value$meta4 === void 0 ? void 0 : (_node$value$meta4$ext = _node$value$meta4.extParam) === null || _node$value$meta4$ext === void 0 ? void 0 : _node$value$meta4$ext.menuDisabled) || merge.value,
"destroyPopupOnHide": true
}, {
overlay: function overlay() {
return _createVNode(Menu, {
"onClick": function onClick(_ref2) {
var key = _ref2.key;
handleMenuClick(key);
}
}, {
default: function _default() {
return [menus.value.map(function (menu) {
return _createVNode(MenuItem, {
"key": menu.value
}, {
default: function _default() {
return [menu.name];
}
});
})];
}
});
},
default: function _default() {
var _node$value$meta5, _node$value$meta5$ext;
return _createVNode("div", {
"style": insertNodeStyle.value,
"class": "node-insert"
}, [_createVNode(Icon, {
"class": "icon-plus",
"icon-class": "wd-icon-tips_plus_circle"
}, null), hasNextNode.value ? null : _createVNode("div", {
"class": classNames('node-insert-line', _defineProperty({}, 'node-insert-line__merge', (_node$value$meta5 = node.value.meta) === null || _node$value$meta5 === void 0 ? void 0 : (_node$value$meta5$ext = _node$value$meta5.extParam) === null || _node$value$meta5$ext === void 0 ? void 0 : _node$value$meta5$ext.isMergeNode))
}, null)]);
}
})]);
}
var shrinkNode = null;
if (hasNextNodeAndNotEmpty.value) {
var _node$value$meta6, _node$value$meta6$ext, _classNames2;
shrinkNode = _createVNode(_Fragment, null, [_createVNode("div", {
"style": shrinkNodeStyle.value,
"class": classNames('node-shrink', (_classNames2 = {}, _defineProperty(_classNames2, "node-shrink-disabled", shrinkDisabled.value), _defineProperty(_classNames2, "node-shrink-collaspe", !isOpen.value), _defineProperty(_classNames2, "node-shrink-merge-collaspe", ((_node$value$meta6 = node.value.meta) === null || _node$value$meta6 === void 0 ? void 0 : (_node$value$meta6$ext = _node$value$meta6.extParam) === null || _node$value$meta6$ext === void 0 ? void 0 : _node$value$meta6$ext.isMergeNode) && isOpen.value === false), _classNames2))
}, [isOpen.value ? _createVNode(Icon, {
"icon-class": "wd-icon-tips_minus_circle",
"class": "node-shrink-icon",
"onMousedown": withModifiers(nodeShrink, ['left', 'prevent', 'stop'])
}, null) : _createVNode("div", {
"class": "node-shrink-expand"
}, [getShrinkNodeAfterNum() > 99 ? _createVNode(Icon, {
"icon-class": "wd-icon-interactive_more",
"class": "node-shrink-icon",
"onMousedown": withModifiers(nodeShrink, ['left', 'prevent', 'stop'])
}, null) : _createVNode("span", {
"class": "node-shrink-text",
"onMousedown": withModifiers(nodeShrink, ['left', 'prevent', 'stop'])
}, [getShrinkNodeAfterNum()]), _createVNode("div", {
"class": "node-shrink-line"
}, null)])])]);
}
var renderNode = null;
if (((_node$value8 = node.value) === null || _node$value8 === void 0 ? void 0 : (_node$value8$meta = _node$value8.meta) === null || _node$value8$meta === void 0 ? void 0 : _node$value8$meta.type) === TreeNodeType.TOOLS) {
var renderToolsNode = slots === null || slots === void 0 ? void 0 : slots.tools;
if (renderToolsNode) {
renderNode = _createVNode(_Fragment, null, [_createVNode("div", {
"onMousedown": nodeMousedown,
"onMouseup": nodeMouseup
}, [renderToolsNode()])]);
}
} else {
var _node$value9, _node$value9$meta, _node$value10, _node$value10$meta, _classNames3, _slots$header, _slots$content;
renderNode = _createVNode(_Fragment, null, [node.value.width > 0 && _createVNode("div", {
"class": classNames((_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefixCls.value, "-wrap"), true), _defineProperty(_classNames3, "".concat(prefixCls.value, "-wrap-buy"), ((_node$value9 = node.value) === null || _node$value9 === void 0 ? void 0 : (_node$value9$meta = _node$value9.meta) === null || _node$value9$meta === void 0 ? void 0 : _node$value9$meta.configKey) === 'buy'), _defineProperty(_classNames3, "".concat(prefixCls.value, "-wrap-sell"), ((_node$value10 = node.value) === null || _node$value10 === void 0 ? void 0 : (_node$value10$meta = _node$value10.meta) === null || _node$value10$meta === void 0 ? void 0 : _node$value10$meta.configKey) === 'sell'), _classNames3)),
"onMousedown": nodeMousedown,
"onMouseup": nodeMouseup
}, [_createVNode("div", {
"class": "".concat(prefixCls.value, "-wrap-header")
}, [slots === null || slots === void 0 ? void 0 : (_slots$header = slots.header) === null || _slots$header === void 0 ? void 0 : _slots$header.call(slots)]), _createVNode("div", {
"class": "".concat(prefixCls.value, "-wrap-bottom")
}, [slots === null || slots === void 0 ? void 0 : (_slots$content = slots.content) === null || _slots$content === void 0 ? void 0 : _slots$content.call(slots)]), deleteNode])]);
}
if ((_node$value11 = node.value) !== null && _node$value11 !== void 0 && (_node$value11$meta = _node$value11.meta) !== null && _node$value11$meta !== void 0 && (_node$value11$meta$ex = _node$value11$meta.extParam) !== null && _node$value11$meta$ex !== void 0 && _node$value11$meta$ex.isDragElement) {
var dragStyle = {
width: node.value.width + 'px',
height: node.value.height + 'px',
left: node.value.position[0] + 'px',
top: node.value.position[1] + 'px'
};
return _createVNode(_Fragment, null, [_createVNode("div", {
"data-id": node.value.id,
"style": dragStyle,
"class": "".concat(prefixCls.value, "-dragging")
}, null)]);
} else {
return _createVNode("div", {
"ref": nodeRef,
"tabindex": "-1",
"class": nodeClassNames.value,
"style": style.value,
"data-id": node.value.id
}, [renderNode, shrinkNode, insertNode]);
}
};
}
});
export default StgyFlowNode;