wetrade-design
Version:
一款多语言支持Vue3的UI框架
394 lines (390 loc) • 21 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.nodeProps = exports.default = void 0;
var _vue = require("vue");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _types = require("./utils/types");
var _useConfigInject2 = _interopRequireDefault(require("../_util/hooks/useConfigInject"));
var _tool = require("./utils/tool");
var _icon = _interopRequireDefault(require("../icon"));
var _dropdown = _interopRequireDefault(require("../dropdown"));
var _menu = _interopRequireWildcard(require("../menu"));
var _classNames4 = _interopRequireDefault(require("../_util/classNames"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
// import { withInstall } from '../_util/type';
// import { getOffset } from './utils';
// import Tools from './Tools';
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
};
};
exports.nodeProps = nodeProps;
var StgyFlowNode = (0, _vue.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 = (0, _useConfigInject2.default)('stgy-flow-node', props),
prefixCls = _useConfigInject.prefixCls;
var _toRefs = (0, _vue.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 = (0, _vue.ref)();
var style = (0, _vue.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 = (0, _vue.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) !== _types.TreeNodeType.TOOLS;
});
var insertNodeStyle = (0, _vue.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 ? -(_types.ICON_SIZE / 2) : 6) + 'px',
left: (hasNextNodeAndNotEmpty.value ? width + 60 : width + 40) + 'px'
};
});
var isOpen = (0, _vue.computed)(function () {
return node.value.meta.extParam.isOpen;
});
var shrinkNodeStyle = (0, _vue.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 ? -(_types.ICON_SIZE / 2) : 6) + 'px',
left: width + (isOpen.value ? 24 : 40) + 'px'
};
});
var deleteNodeStyle = (0, _vue.computed)(function () {
var width = node.value.width;
return {
position: 'absolute',
top: "".concat(notToolsNode.value ? 8 : 7, "px"),
left: width - 18 - 12 + 'px'
};
});
var isLastNode = (0, _vue.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 = (0, _vue.computed)(function () {
return linkList.value.some(function (link) {
return link.startId === node.value.id;
});
});
// 是否有下一个节点,并且下一个节点不是空节点
var hasNextNodeAndNotEmpty = (0, _vue.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 = (0, _vue.computed)(function () {
var _node$value5, _node$value5$meta, _node$value6, _node$value6$meta, _classNameObj;
var classNameObj = (_classNameObj = {}, (0, _defineProperty2.default)(_classNameObj, "".concat(prefixCls.value), true), (0, _defineProperty2.default)(_classNameObj, 'last-node', isLastNode.value), (0, _defineProperty2.default)(_classNameObj, 'merge-node', merge.value), (0, _defineProperty2.default)(_classNameObj, 'selected-node', selectedNodeId.value.includes(node.value.id)), (0, _defineProperty2.default)(_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), (0, _defineProperty2.default)(_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'), (0, _defineProperty2.default)(_classNameObj, 'dragging-node', dragging.value), _classNameObj);
var key = className.value;
key && (classNameObj[key] = true);
return classNameObj;
});
var isInMerge = (0, _vue.computed)(function () {
return (0, _tool.isNodeInMerge)({
nodeId: node.value.id,
modelPathList: modelPathList.value,
nodeList: nodeList.value
});
});
var isInErrorToolLink = (0, _vue.computed)(function () {
return (0, _tool.hasErrorToolInLink)({
nodeId: node.value.id,
modelPathList: modelPathList.value,
nodeList: nodeList.value
});
});
var isInMergeLastNode = (0, _vue.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 = (0, _vue.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 = (0, _tool.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: _types.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) !== _types.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 = (0, _vue.createVNode)(_vue.Fragment, null, [(0, _vue.createVNode)("div", {
"onMousedown": (0, _vue.withModifiers)(nodeDeleteDown, ['left', 'prevent', 'stop']),
"onMouseup": (0, _vue.withModifiers)(nodeDelete, ['left', 'prevent', 'stop']),
"style": deleteNodeStyle.value,
"class": "node-delete"
}, [(0, _vue.createVNode)(_icon.default, {
"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 = (0, _vue.createVNode)(_vue.Fragment, null, [(0, _vue.createVNode)(_dropdown.default, {
"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 (0, _vue.createVNode)(_menu.default, {
"onClick": function onClick(_ref2) {
var key = _ref2.key;
handleMenuClick(key);
}
}, {
default: function _default() {
return [menus.value.map(function (menu) {
return (0, _vue.createVNode)(_menu.MenuItem, {
"key": menu.value
}, {
default: function _default() {
return [menu.name];
}
});
})];
}
});
},
default: function _default() {
var _node$value$meta5, _node$value$meta5$ext;
return (0, _vue.createVNode)("div", {
"style": insertNodeStyle.value,
"class": "node-insert"
}, [(0, _vue.createVNode)(_icon.default, {
"class": "icon-plus",
"icon-class": "wd-icon-tips_plus_circle"
}, null), hasNextNode.value ? null : (0, _vue.createVNode)("div", {
"class": (0, _classNames4.default)('node-insert-line', (0, _defineProperty2.default)({}, '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 = (0, _vue.createVNode)(_vue.Fragment, null, [(0, _vue.createVNode)("div", {
"style": shrinkNodeStyle.value,
"class": (0, _classNames4.default)('node-shrink', (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "node-shrink-disabled", shrinkDisabled.value), (0, _defineProperty2.default)(_classNames2, "node-shrink-collaspe", !isOpen.value), (0, _defineProperty2.default)(_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 ? (0, _vue.createVNode)(_icon.default, {
"icon-class": "wd-icon-tips_minus_circle",
"class": "node-shrink-icon",
"onMousedown": (0, _vue.withModifiers)(nodeShrink, ['left', 'prevent', 'stop'])
}, null) : (0, _vue.createVNode)("div", {
"class": "node-shrink-expand"
}, [getShrinkNodeAfterNum() > 99 ? (0, _vue.createVNode)(_icon.default, {
"icon-class": "wd-icon-interactive_more",
"class": "node-shrink-icon",
"onMousedown": (0, _vue.withModifiers)(nodeShrink, ['left', 'prevent', 'stop'])
}, null) : (0, _vue.createVNode)("span", {
"class": "node-shrink-text",
"onMousedown": (0, _vue.withModifiers)(nodeShrink, ['left', 'prevent', 'stop'])
}, [getShrinkNodeAfterNum()]), (0, _vue.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) === _types.TreeNodeType.TOOLS) {
var renderToolsNode = slots === null || slots === void 0 ? void 0 : slots.tools;
if (renderToolsNode) {
renderNode = (0, _vue.createVNode)(_vue.Fragment, null, [(0, _vue.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 = (0, _vue.createVNode)(_vue.Fragment, null, [node.value.width > 0 && (0, _vue.createVNode)("div", {
"class": (0, _classNames4.default)((_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, "".concat(prefixCls.value, "-wrap"), true), (0, _defineProperty2.default)(_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'), (0, _defineProperty2.default)(_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
}, [(0, _vue.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)]), (0, _vue.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 (0, _vue.createVNode)(_vue.Fragment, null, [(0, _vue.createVNode)("div", {
"data-id": node.value.id,
"style": dragStyle,
"class": "".concat(prefixCls.value, "-dragging")
}, null)]);
} else {
return (0, _vue.createVNode)("div", {
"ref": nodeRef,
"tabindex": "-1",
"class": nodeClassNames.value,
"style": style.value,
"data-id": node.value.id
}, [renderNode, shrinkNode, insertNode]);
}
};
}
});
var _default2 = StgyFlowNode;
exports.default = _default2;