wetrade-design
Version:
一款多语言支持Vue3的UI框架
945 lines (943 loc) • 38.4 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _extends from "@babel/runtime/helpers/esm/extends";
import { createVNode as _createVNode } from "vue";
import { defineComponent, nextTick, reactive, toRefs, watch, onMounted, computed, isReactive } from 'vue';
import { withInstall } from '../_util/type';
import { QuotationColor } from '../_util/enum';
import { TreeNodeType, ComponentType, NodeLineType } from './utils/types';
import { APPEND_EMPTY_X_GAP, INSERT_JOIN_X_GAP, INSERT_JOIN_X_GAP_MERGE, ICON_SIZE, SHRINK_CLOSE_X_GAP, SHRINK_OPEN_X_GAP, SHRINK_OPEN_X_GAP_MERGE, APPEND_X_GAP } from './utils/const';
import useConfigInject from '../_util/hooks/useConfigInject';
import ScrollBar from '../scrollbar';
import classNames from '../_util/classNames';
import * as d3 from 'd3';
import Graph from './utils/graph';
import { renderStgyGraph, appendNode, addModuleBrotherNode, insertNode, addModuleChildNode, mergeNode, cancelMerge, editMerge, initShrinkNode, shrinkOrExpandNode, findLinkChildById, deleteSingleNodeRelation, deleteMergeNodeRelation, appendDragNode, deleteDragNodeAndLink, disabledNodeDrag, findNodeByCoordinate, updateDragNode, lightenPath, getCurrentFatherAdnSonNode, getCurrentFatherNode, getCurrentChildrenNode, getCurrentBrother, getCompletionPreRelationList } from './utils/tools';
import raf from '../_util/raf';
import { useCreateVueApp } from './utils/useApp';
// import type { NodeProps } from './Node';
export var stgyGraphProps = function stgyGraphProps() {
return {
relationMark: {
type: String,
default: 'id'
},
startMark: {
type: String,
default: 'startId'
},
endMark: {
type: String,
default: 'endId'
},
draggable: {
type: Boolean,
default: false
},
miniStartNode: {
type: Boolean,
default: false
},
origin: {
type: Array,
default: function _default() {
return [0, 0];
}
},
nodeList: {
type: Array,
default: function _default() {
return [];
}
},
linkList: {
type: Array,
default: function _default() {
return [];
}
},
menus: {
type: Array,
default: function _default() {
return [{
name: '条件',
value: TreeNodeType.CONDITION,
disabled: false
}, {
name: '工具',
value: TreeNodeType.TOOLS,
disabled: false
}];
}
},
// 选中的node id 集合
selectedNodeId: {
type: Array,
default: function _default() {
return [];
}
},
// 选中的link的activeId
selectedActiveId: {
type: Number,
default: -1
},
linkPadding: {
type: Number,
default: 50
},
merge: {
type: Boolean,
default: false
},
readonly: {
type: Boolean,
default: false
},
quotationColor: {
type: Number,
default: QuotationColor.RED_UP_GREEN_DOWN
},
hiddenAppend: {
type: Boolean,
default: false
}
};
};
var StgyGraph = defineComponent({
compatConfig: {
MODE: 3
},
name: 'WdStgyGraph',
props: stgyGraphProps(),
emits: ['node-delete', 'node-shrink', 'menu-click', 'node-append', 'node-insert', 'node-click', 'link-click', 'node-drag-end'],
slots: ['node-header', 'node-content'],
setup: function setup(props, _ref) {
var slots = _ref.slots,
emit = _ref.emit,
expose = _ref.expose;
var _useConfigInject = useConfigInject('stgy-graph', props),
prefixCls = _useConfigInject.prefixCls,
configProvider = _useConfigInject.configProvider;
var _toRefs = toRefs(props),
relationMark = _toRefs.relationMark,
startMark = _toRefs.startMark,
endMark = _toRefs.endMark,
origin = _toRefs.origin,
menus = _toRefs.menus,
readonly = _toRefs.readonly,
draggable = _toRefs.draggable,
selectedActiveId = _toRefs.selectedActiveId,
selectedNodeId = _toRefs.selectedNodeId,
miniStartNode = _toRefs.miniStartNode,
hiddenAppend = _toRefs.hiddenAppend;
var state = reactive({
graphRef: null,
scrollRef: null,
svgContainer: null,
renderNodeList: [],
renderLinkList: [],
graph: new Graph({
relationMark: relationMark.value,
startMark: startMark.value,
endMark: endMark.value,
origin: origin.value,
readonly: readonly.value,
hiddenAppend: hiddenAppend.value
}),
// 元素拖动配置
moveNodeConf: {
sourceNode: null,
startNode: null,
targetNode: null,
direction: null,
disabledDrag: false,
disabledDragging: false // 是否禁用拖动过程
},
rafRef: null,
nodeList: [],
linkList: []
});
var _toRefs2 = toRefs(state),
graphRef = _toRefs2.graphRef,
scrollRef = _toRefs2.scrollRef,
svgContainer = _toRefs2.svgContainer,
renderNodeList = _toRefs2.renderNodeList,
renderLinkList = _toRefs2.renderLinkList,
graph = _toRefs2.graph,
moveNodeConf = _toRefs2.moveNodeConf,
rafRef = _toRefs2.rafRef,
nodeList = _toRefs2.nodeList,
linkList = _toRefs2.linkList;
var relationMap = {
parentMap: {},
subMap: {},
relationList: []
};
var defaultLineColor = computed(function () {
return (configProvider === null || configProvider === void 0 ? void 0 : configProvider.mode) === 'light' ? '#C7CBD6' : '#9094a9';
});
var activeLineColor = computed(function () {
return (configProvider === null || configProvider === void 0 ? void 0 : configProvider.mode) === 'light' ? '#FF9917' : '#e8a33c';
});
// 拖拽颜色
var dragColor = computed(function () {
return (configProvider === null || configProvider === void 0 ? void 0 : configProvider.mode) === 'light' ? '#2469F2' : '#3578fd';
});
watch(function () {
return configProvider === null || configProvider === void 0 ? void 0 : configProvider.mode;
}, function () {
updateLinkColor(); // 更新连线颜色
updateLineColor(); // 更新线段颜色
});
onMounted(function () {
var container = d3.select(graphRef.value);
svgContainer.value = container.append('svg').attr('width', '100%').attr('height', '100%');
});
// 渲染函数
var render = function render(_ref2) {
var linkArr = _ref2.linkArr,
nodeArr = _ref2.nodeArr,
changeNodeAttributes = _ref2.changeNodeAttributes;
return new Promise(function (resolve) {
nextTick(function () {
handleRenderNode();
relationMap = renderStgyGraph({
linkList: linkArr,
nodeList: nodeArr,
changeNodeAttributes: changeNodeAttributes,
renderLinkList: renderLinkList.value,
nodeMap: graph.value.originPointMap(nodeArr),
origin: origin.value,
miniStartNode: miniStartNode.value
});
resolve(relationMap);
updateContainerRect();
scrollRef.value.update(); // 更新滚动条
createChart();
});
});
};
// 创建画布
var createChart = function createChart() {
graph.value.initNode(renderNodeList.value);
graph.value.initLink(renderLinkList.value);
graph.value.initButtonAndLine(linkList.value); // 初始化按钮及线段
createLink();
createNode();
createShrink();
createShrinkLine();
createInsert();
createInsertLine();
createAppend();
};
var vueAppNodeInstances = {};
var nodePropsMap = {}; // nodeProps Map
// 创建节点
var createNode = function createNode() {
var _graph$value$nodeList;
if (((_graph$value$nodeList = graph.value.nodeList) === null || _graph$value$nodeList === void 0 ? void 0 : _graph$value$nodeList.length) > 0) {
var nodes = svgContainer.value.selectAll('.node-group').data(graph.value.nodeList, function (d) {
return d.id;
}); // 使用id作为唯一key;
var enterSelection = nodes.enter().append('g').attr('class', 'node-group').each(function (d, nodeIndex, nodes) {
var group = d3.select(nodes[nodeIndex]);
group.append('foreignObject').attr('width', d.width).attr('height', d.height).style('border-radius', '8px').append('xhtml:div').attr('class', 'node-wrapper');
});
// 合并并更新数据
var updateSelection = enterSelection.merge(nodes);
// update merge data
updateSelection.select('foreignObject').attr('x', function (d) {
return d.coordinate[0];
}).attr('y', function (d) {
return d.coordinate[1];
}).attr('overflow', 'visible').select('.node-wrapper').each(function (node, nodeIndex, child) {
var el = child[nodeIndex];
var key = node.id;
var renderSlots = {
header: function header() {
var _slots$header;
return slots === null || slots === void 0 ? void 0 : (_slots$header = slots.header) === null || _slots$header === void 0 ? void 0 : _slots$header.call(slots, node);
}
};
(slots === null || slots === void 0 ? void 0 : slots.content) && _extends(renderSlots, {
content: function content() {
return slots.content(node);
}
});
(slots === null || slots === void 0 ? void 0 : slots.tools) && _extends(renderSlots, {
tools: function tools() {
var _slots$tools;
return slots === null || slots === void 0 ? void 0 : (_slots$tools = slots.tools) === null || _slots$tools === void 0 ? void 0 : _slots$tools.call(slots, {
node: node,
updateNodeData: updateNodeData
});
}
});
var nodeProps = {
node: node,
miniStartNode: miniStartNode.value,
readonly: readonly.value,
selectedNodeId: selectedNodeId.value
};
if (!isReactive(nodePropsMap[key])) {
nodePropsMap[key] = reactive(nodeProps);
} else {
_extends(nodePropsMap[key], nodeProps);
}
useCreateVueApp({
key: key,
props: {
nodeDelete: nodeDelete,
nodeShrink: nodeShrink,
menuClick: menuClick,
nodeAppend: nodeAppend,
nodeInsert: nodeInsert,
nodeMousedown: nodeMousedown,
nodeMouseup: nodeMouseup
},
componentKey: ComponentType.GRAPH_NODE,
el: el,
slots: renderSlots,
vueAppInstances: vueAppNodeInstances,
extParam: nodePropsMap[key]
});
});
// 处理已删除的元素
nodes.exit().remove().each(function (node) {
var _vueAppNodeInstances$;
var key = node.id;
(_vueAppNodeInstances$ = vueAppNodeInstances[key]) === null || _vueAppNodeInstances$ === void 0 ? void 0 : _vueAppNodeInstances$.destroy();
nodePropsMap[key] = null;
});
}
};
// 创建【添】
var vueAppAppendInstances = {};
var appendPropsMap = {};
var createAppend = function createAppend() {
var appendNodeList = readonly.value || hiddenAppend.value ? [] : graph.value.appendNodeList;
var appendNodes = svgContainer.value.selectAll('.node-append').data(appendNodeList, function (d) {
return d.id;
});
var enterSelection = appendNodes.enter().append('g').attr('class', 'node-append').each(function (_d, i, nodes) {
var group = d3.select(nodes[i]);
group.append('foreignObject').attr('width', ICON_SIZE).attr('height', ICON_SIZE).attr('overflow', 'visible').append('xhtml:div').attr('class', 'node-append-wrapper');
});
enterSelection.merge(appendNodes).select('foreignObject').attr('x', function (d) {
// d表示node
return d.coordinate[0] - APPEND_X_GAP;
}).attr('y', function (d) {
return d.coordinate[1] + 6;
}).select('.node-append-wrapper').each(function (node, i, child) {
var el = child[i];
var key = node.id;
var appendProps = {
node: node,
menus: menus.value
};
if (!isReactive(appendPropsMap[key])) {
appendPropsMap[key] = reactive(appendProps);
} else {
_extends(appendPropsMap[key], appendProps);
}
useCreateVueApp({
key: key,
props: {
menuClick: menuClick,
nodeAppend: nodeAppend,
getMenuPopupContainer: function getMenuPopupContainer() {
return graphRef.value;
}
},
componentKey: ComponentType.APPEND,
el: el,
vueAppInstances: vueAppAppendInstances,
extParam: appendPropsMap[key]
});
});
appendNodes.exit().remove().each(function (node) {
var key = node.id;
vueAppAppendInstances[key].destroy();
appendPropsMap[key] = null;
});
};
// 创建【+】
var vueAppInsertInstances = {};
var insertPropsMap = {};
var createInsert = function createInsert() {
var insertNodeList = readonly.value ? [] : graph.value.insertNodeList;
var appendNodes = svgContainer.value.selectAll('.node-insert').data(insertNodeList, function (d) {
return d.id;
});
var enterSelection = appendNodes.enter().append('g').attr('class', 'node-insert').each(function (_d, i, nodes) {
var group = d3.select(nodes[i]);
group.append('foreignObject').attr('width', ICON_SIZE).attr('height', ICON_SIZE).attr('overflow', 'visible').append('xhtml:div').attr('class', 'node-insert-wrapper');
});
enterSelection.merge(appendNodes).select('foreignObject').attr('x', function (d) {
var width = d.width,
coordinate = d.coordinate,
isMergeNode = d.meta.extParam.isMergeNode;
var left = coordinate[0] + width;
var hasNextNodeAndNotEmpty = linkList.value.some(function (link) {
var _link$meta, _link$meta2;
return link.startId === d.id && (link === null || link === void 0 ? void 0 : (_link$meta = link.meta) === null || _link$meta === void 0 ? void 0 : _link$meta.activeId) === -1 && !((_link$meta2 = link.meta) !== null && _link$meta2 !== void 0 && _link$meta2.isDragElement);
});
var xGap = isMergeNode ? INSERT_JOIN_X_GAP_MERGE : INSERT_JOIN_X_GAP;
var x = hasNextNodeAndNotEmpty ? left + xGap : left + APPEND_EMPTY_X_GAP;
return x;
}).attr('y', function (d) {
var coordinate = d.coordinate;
var top = coordinate[1];
var y = 6 + top;
return y;
}).select('.node-insert-wrapper').each(function (node, i, child) {
var el = child[i];
var key = node.id;
var insertProps = {
node: node,
menus: menus.value
};
if (!isReactive(insertPropsMap[key])) {
insertPropsMap[key] = reactive(insertProps);
} else {
_extends(insertPropsMap[key], insertProps);
}
useCreateVueApp({
key: key,
props: {
menuClick: menuClick,
nodeInsert: nodeInsert,
getMenuPopupContainer: function getMenuPopupContainer() {
return graphRef.value;
}
},
componentKey: ComponentType.INSERT,
el: el,
vueAppInstances: vueAppInsertInstances,
extParam: insertPropsMap[key]
});
});
appendNodes.exit().remove().each(function (node) {
var _vueAppInsertInstance;
var key = node.id;
(_vueAppInsertInstance = vueAppInsertInstances[key]) === null || _vueAppInsertInstance === void 0 ? void 0 : _vueAppInsertInstance.destroy();
insertPropsMap[key] = null;
});
};
// 创建【展开收起】
var vueAppShrinkInstances = {};
var shrinkPropsMap = {};
var createShrink = function createShrink() {
var shrinkNodeList = graph.value.shrinkNodeList;
var appendNodes = svgContainer.value.selectAll('.node-shrink').data(shrinkNodeList, function (d) {
return d.id;
});
var enterSelection = appendNodes.enter().append('g').attr('class', 'node-shrink').each(function (_d, i, nodes) {
var group = d3.select(nodes[i]);
group.append('foreignObject').attr('width', ICON_SIZE).attr('height', ICON_SIZE).attr('overflow', 'visible').append('xhtml:div').attr('class', 'node-shrink-wrapper');
});
enterSelection.merge(appendNodes).select('foreignObject').attr('x', function (d) {
var width = d.width,
coordinate = d.coordinate,
_d$meta$extParam = d.meta.extParam,
isOpen = _d$meta$extParam.isOpen,
isMergeNode = _d$meta$extParam.isMergeNode;
var left = coordinate[0] + width;
var openXGap = isMergeNode ? SHRINK_OPEN_X_GAP_MERGE : SHRINK_OPEN_X_GAP;
var x = left + (isOpen ? openXGap : SHRINK_CLOSE_X_GAP);
return x;
}).attr('y', function (d) {
var coordinate = d.coordinate;
var top = coordinate[1];
var y = 6 + top;
return y;
}).select('.node-shrink-wrapper').each(function (node, i, child) {
var el = child[i];
var key = node.id;
var shrinkProps = {
node: node
};
if (!isReactive(shrinkPropsMap[key])) {
shrinkPropsMap[key] = reactive(shrinkProps);
} else {
_extends(shrinkPropsMap[key], shrinkProps);
}
useCreateVueApp({
key: key,
props: {
nodeShrink: nodeShrink
},
componentKey: ComponentType.SHRINK_EXPAND,
el: el,
vueAppInstances: vueAppShrinkInstances,
extParam: shrinkPropsMap[key]
});
});
appendNodes.exit().remove().each(function (node) {
var _vueAppShrinkInstance;
var key = node.id;
(_vueAppShrinkInstance = vueAppShrinkInstances[key]) === null || _vueAppShrinkInstance === void 0 ? void 0 : _vueAppShrinkInstance.destroy();
shrinkPropsMap[key] = null;
});
};
// 创建连线
var createLink = function createLink() {
var links = svgContainer.value.selectAll('.link-group').lower().data(graph.value.linkList, function (d) {
return d.id;
}); // 使用id作为唯一key;
var enterSelection = links.enter().append('g').attr('transform', 'translate(0.5,0.5)') // 处理dpr显示问题
.attr('class', 'link-group').attr('data-activeId', function (d) {
return d.meta.activeId;
}).classed('link-group-merge', function (d) {
return d.meta.activeId !== -1;
}).each(function (link, i, links) {
var group = d3.select(links[i]);
link.createLink({
g: group,
style: {
color: relationLineColor(link)
}
}, function () {
var _link$meta3;
if (props.merge || props.readonly || ((_link$meta3 = link.meta) === null || _link$meta3 === void 0 ? void 0 : _link$meta3.activeId) === -1) return;
emit('link-click', link);
});
});
var mergeSelection = enterSelection.merge(links);
mergeSelection.select('.link-path-hot').attr('d', function (link) {
return link.createPath();
});
mergeSelection.select('.link-path').attr('d', function (link) {
return link.createPath();
}).attr('stroke', linkColor);
mergeSelection.select('.link-start-point').attr('d', function (link) {
return link.createArc().startPath;
}).attr('fill', linkColor);
mergeSelection.select('.link-end-point').attr('d', function (link) {
return link.createArc().endPath;
}).attr('fill', linkColor);
mergeSelection.lower();
// 将当前点击的合并线层级调整至最高
if (selectedActiveId.value !== -1) {
svgContainer.value.selectAll("[data-activeId='".concat(selectedActiveId.value, "']")).raise();
}
links.exit().remove();
};
// 创建+的连线
var createInsertLine = function createInsertLine() {
var insertLineList = readonly.value ? [] : graph.value.insertLineList;
var lines = svgContainer.value.selectAll('.line-insert').data(insertLineList, function (d) {
return d.id;
}); // 使用id作为唯一key;
var enterSelection = lines.enter().append('g').lower().attr('transform', 'translate(0.5,0.5)') // 处理dpr显示问题
.attr('class', 'line-insert').each(function (node, i, lines) {
var group = d3.select(lines[i]);
node.createLine({
g: group,
style: {
color: defaultLineColor.value
},
type: NodeLineType.INSERT
});
});
var mergeSelection = enterSelection.merge(lines);
mergeSelection.select('.line-path').attr('d', function (d) {
return d.createPath({
type: NodeLineType.INSERT
});
}).attr('stroke', lineAndPointColor);
mergeSelection.select('.line-start-point').attr('d', function (d) {
return d.createArc(NodeLineType.INSERT).startPath;
}).attr('fill', lineAndPointColor);
mergeSelection.select('.line-end-point').attr('d', function (d) {
return d.createArc(NodeLineType.INSERT).endPath;
}).attr('fill', lineAndPointColor);
mergeSelection.lower();
lines.exit().remove();
};
// 创建展开收起的连线
var createShrinkLine = function createShrinkLine() {
var shrinkLineList = graph.value.shrinkLineList;
var lines = svgContainer.value.selectAll('.line-shrink').data(shrinkLineList, function (d) {
return d.id;
}); // 使用id作为唯一key;
var enterSelection = lines.enter().append('g').lower().attr('transform', 'translate(0.5,0.5)') // 处理dpr显示问题
.attr('class', 'line-shrink').each(function (node, i, lines) {
var group = d3.select(lines[i]);
node.createLine({
g: group,
style: {
color: defaultLineColor.value
},
type: NodeLineType.SHRINK
});
});
var mergeSelection = enterSelection.merge(lines);
mergeSelection.select('.line-path').attr('d', function (d) {
return d.createPath({
type: NodeLineType.SHRINK
});
}).attr('stroke', lineAndPointColor);
mergeSelection.select('.line-start-point').attr('d', function (d) {
return d.createArc(NodeLineType.SHRINK).startPath;
}).attr('fill', lineAndPointColor);
mergeSelection.select('.line-end-point').attr('d', function (d) {
return d.createArc(NodeLineType.SHRINK).endPath;
}).attr('fill', lineAndPointColor);
mergeSelection.lower();
lines.exit().remove();
};
// 获取线段以及端点颜色
var lineAndPointColor = function lineAndPointColor(node) {
var _node$meta, _node$meta$extParam;
return node !== null && node !== void 0 && (_node$meta = node.meta) !== null && _node$meta !== void 0 && (_node$meta$extParam = _node$meta.extParam) !== null && _node$meta$extParam !== void 0 && _node$meta$extParam.isHighLight ? activeLineColor.value : defaultLineColor.value;
};
// 获取关系线段颜色
var relationLineColor = function relationLineColor(link) {
var _link$meta4;
return link !== null && link !== void 0 && (_link$meta4 = link.meta) !== null && _link$meta4 !== void 0 && _link$meta4.isDragElement ? dragColor.value : defaultLineColor.value;
};
// 路径颜色
var linkColor = function linkColor(link) {
var _link$meta5, _link$meta6, _link$meta7;
if ((_link$meta5 = link.meta) !== null && _link$meta5 !== void 0 && _link$meta5.isHighLight || selectedActiveId.value === ((_link$meta6 = link.meta) === null || _link$meta6 === void 0 ? void 0 : _link$meta6.activeId) && ((_link$meta7 = link.meta) === null || _link$meta7 === void 0 ? void 0 : _link$meta7.activeId) !== -1) {
return activeLineColor.value;
} else {
return relationLineColor(link);
}
};
// 更新路径颜色
var updateLinkColor = function updateLinkColor() {
var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
_ref3$path = _ref3.path,
path = _ref3$path === void 0 ? '.link-path' : _ref3$path,
_ref3$start = _ref3.start,
start = _ref3$start === void 0 ? '.link-start-point' : _ref3$start,
_ref3$end = _ref3.end,
end = _ref3$end === void 0 ? '.link-end-point' : _ref3$end,
_ref3$lineColor = _ref3.lineColor,
lineColor = _ref3$lineColor === void 0 ? linkColor : _ref3$lineColor;
svgContainer.value.selectAll(path).attr('stroke', lineColor);
svgContainer.value.selectAll(start).attr('fill', lineColor);
svgContainer.value.selectAll(end).attr('fill', lineColor);
};
// 更新线段颜色
var updateLineColor = function updateLineColor() {
updateLinkColor({
path: '.line-path',
start: '.line-start-point',
end: '.line-end-point',
lineColor: lineAndPointColor
});
};
// 更新容器宽高
var updateContainerRect = function updateContainerRect() {
var _renderNodeList$value;
var cacheWidth = 200;
var cacheHeight = 150;
var rect = (_renderNodeList$value = renderNodeList.value) === null || _renderNodeList$value === void 0 ? void 0 : _renderNodeList$value.reduce(function (prev, item) {
var _item$coordinate = item === null || item === void 0 ? void 0 : item.coordinate,
_item$coordinate2 = _slicedToArray(_item$coordinate, 2),
x = _item$coordinate2[0],
y = _item$coordinate2[1];
var w = x + item.width || 0;
if (w > prev.width) {
prev.width = w;
}
var h = y + item.height || 0;
if (h > prev.height) {
prev.height = h;
}
return prev;
}, {
width: 0,
height: 0
});
var d = graphRef.value;
if (d) {
d.style.width = "".concat(rect.width + cacheWidth, "px");
d.style.height = "".concat(rect.height + cacheHeight, "px");
}
};
// 删除
var nodeDelete = function nodeDelete(node) {
emit('node-delete', node);
};
// 展开收起
var nodeShrink = function nodeShrink(node) {
emit('node-shrink', node);
};
// 处理需要渲染的数据 以及源数据赋值
var handleRenderNode = function handleRenderNode() {
nodeList.value = props.nodeList;
linkList.value = props.linkList;
var obj = initShrinkNode({
linkList: linkList.value,
nodeList: nodeList.value
});
renderNodeList.value = obj.renderNodeList;
renderLinkList.value = obj.renderLinkList;
};
// 点击菜单
var menuClick = function menuClick(obj) {
emit('menu-click', obj);
};
// 点击【+】
var nodeInsert = function nodeInsert(node) {
emit('node-insert', node);
};
// 点击【添】
var nodeAppend = function nodeAppend(node) {
emit('node-append', node);
};
var nodeMouseup = function nodeMouseup(node) {
emit('node-click', node);
};
var deleteNodeLinkList = function deleteNodeLinkList(id, params) {
var _relationMap, _relationMap$subMap;
// 子节点的id集合
var subIdList = (_relationMap = relationMap) === null || _relationMap === void 0 ? void 0 : (_relationMap$subMap = _relationMap.subMap) === null || _relationMap$subMap === void 0 ? void 0 : _relationMap$subMap[id];
// 受影响的id (要被删除)
var effectIds = [id];
// 浅拷贝
var newList = _toConsumableArray(params.linkList);
// 只有一个子节点
if ((subIdList === null || subIdList === void 0 ? void 0 : subIdList.length) === 1) {
var _nodeMap$nextId, _nodeMap$nextId$meta, _nodeMap$nextId$meta$;
// 子节点的id
var nextId = subIdList[0];
// 节点Map
var nodeMap = graph.value.originPointMap(nodeList.value);
// 节点是否属于合并节点
var isSubMergeNode = (_nodeMap$nextId = nodeMap[nextId]) === null || _nodeMap$nextId === void 0 ? void 0 : (_nodeMap$nextId$meta = _nodeMap$nextId.meta) === null || _nodeMap$nextId$meta === void 0 ? void 0 : (_nodeMap$nextId$meta$ = _nodeMap$nextId$meta.extParam) === null || _nodeMap$nextId$meta$ === void 0 ? void 0 : _nodeMap$nextId$meta$.isMergeNode;
if (isSubMergeNode) {
var _relationMap$relation, _relationMap2, _relationMap2$parentM, _relationMap2$parentM2, _relationMap2$parentM3;
// 经过合并节点的全部路线
var pathList = (_relationMap$relation = relationMap.relationList) === null || _relationMap$relation === void 0 ? void 0 : _relationMap$relation.filter(function (l) {
return (l === null || l === void 0 ? void 0 : l.includes(nextId)) && l[0] !== nextId;
});
// 被删除的节点的 第一个兄弟节点
var broId = (_relationMap2 = relationMap) === null || _relationMap2 === void 0 ? void 0 : (_relationMap2$parentM = _relationMap2.parentMap) === null || _relationMap2$parentM === void 0 ? void 0 : (_relationMap2$parentM2 = _relationMap2$parentM[nextId]) === null || _relationMap2$parentM2 === void 0 ? void 0 : (_relationMap2$parentM3 = _relationMap2$parentM2.filter(function (i) {
return i !== id;
})) === null || _relationMap2$parentM3 === void 0 ? void 0 : _relationMap2$parentM3[0];
// 路线是否小于2条
if ((pathList === null || pathList === void 0 ? void 0 : pathList.length) <= 2) {
// 小于两条线 需要删除合并节点 并且把删除节点后续的关系拼接到 兄弟节点上
effectIds.push(nextId);
newList = deleteMergeNodeRelation(id, {
linkList: newList,
mergeId: nextId,
broId: broId,
delMerge: true
});
} else {
// 大于两条线 找到兄弟节点然后做替换 不需要删除合并节点
newList = deleteMergeNodeRelation(id, {
linkList: newList,
mergeId: nextId,
broId: broId
});
}
return {
newList: newList,
effectIds: effectIds
};
}
}
// 删除单个的节点方法
newList = deleteSingleNodeRelation(id, {
linkList: newList
});
return {
newList: newList,
effectIds: effectIds
};
};
// 开始拖拽
var offsetX = 0;
var offsetY = 0;
var offsetLeft = 0;
var offsetTop = 0;
var draggableEl = null;
var dragFlag = false;
var startClientX = null;
var startClientY = null;
// 定义一个阈值，用于判断是否为长按拖拽
var dragThreshold = 3; // 单位像素
var nodeMousedown = function nodeMousedown(evt, node) {
evt.preventDefault();
dragFlag = false;
var boxEl = evt.target.closest(".".concat(prefixCls.value, "-node"));
var el = boxEl.children[0];
offsetX = evt.clientX - el.getBoundingClientRect().left;
offsetY = evt.clientY - el.getBoundingClientRect().top;
startClientX = evt.clientX;
startClientY = evt.clientY;
moveNodeConf.value.disabledDrag = disabledNodeDrag({
sourceNode: node,
linkList: linkList.value,
draggable: draggable.value
});
if (!moveNodeConf.value.disabledDrag) {
draggableEl = el.cloneNode(true);
window.requestAnimationFrame(function () {
var _graphRef$value;
draggableEl.style.position = 'absolute';
draggableEl.style.zIndex = '10';
draggableEl.style.opacity = '0';
draggableEl.style.width = el.offsetWidth + 'px';
draggableEl.style.height = el.offsetHeight + 'px';
draggableEl && ((_graphRef$value = graphRef.value) === null || _graphRef$value === void 0 ? void 0 : _graphRef$value.appendChild(draggableEl));
});
}
moveNodeConf.value.sourceNode = node;
document.addEventListener('mousemove', docNodeMove);
document.addEventListener('mouseup', doceNodeUp);
};
// 拖动中
var docNodeMove = function docNodeMove(evt) {
evt.preventDefault();
evt.stopPropagation();
if (moveNodeConf.value.disabledDrag) return;
if (Math.abs(evt.clientX - startClientX) < dragThreshold && Math.abs(evt.clientY - startClientY) < dragThreshold) {
draggableEl.style.pointerEvents = 'none';
return;
} else {
draggableEl.style.pointerEvents = 'auto';
}
dragFlag = true;
var scrollWrap = scrollRef.value.wrapRef;
var boxLeft = scrollWrap.getBoundingClientRect().left;
var boxTop = scrollWrap.getBoundingClientRect().top;
offsetLeft = evt.clientX - offsetX - boxLeft + scrollWrap.scrollLeft;
offsetTop = evt.clientY - offsetY - boxTop + scrollWrap.scrollTop;
window.requestAnimationFrame(function () {
if (!draggableEl) return;
draggableEl.style.left = offsetLeft + 'px';
draggableEl.style.top = offsetTop + 'px';
draggableEl.style.opacity = '1';
onDrag({
offset: [offsetLeft, offsetTop],
sourceNode: moveNodeConf.value.sourceNode
});
});
};
// 拖动结束
var doceNodeUp = function doceNodeUp(evt) {
var _graphRef$value2;
evt.preventDefault();
draggableEl && ((_graphRef$value2 = graphRef.value) === null || _graphRef$value2 === void 0 ? void 0 : _graphRef$value2.removeChild(draggableEl));
draggableEl = null;
dragFlag && onDragEnd();
document.removeEventListener('mousemove', docNodeMove);
document.removeEventListener('mouseup', doceNodeUp);
};
var onDrag = function onDrag(_ref4) {
var sourceNode = _ref4.sourceNode,
offset = _ref4.offset;
raf.cancel(rafRef.value);
rafRef.value = raf(function () {
var _findNodeByCoordinate = findNodeByCoordinate({
nodeList: nodeList.value,
linkList: linkList.value,
offset: offset
}),
node = _findNodeByCoordinate.node,
direction = _findNodeByCoordinate.direction;
var _appendDragNode = appendDragNode({
sourceNode: sourceNode,
direction: direction,
targetNode: node,
nodeList: nodeList.value,
linkList: linkList.value,
nodeMap: graph.value.nodeMap
}),
disabled = _appendDragNode.disabled,
startNode = _appendDragNode.startNode;
moveNodeConf.value.startNode = startNode;
moveNodeConf.value.targetNode = node;
moveNodeConf.value.direction = direction;
moveNodeConf.value.disabledDragging = disabled;
if (disabled) {
deleteDragNodeAndLink({
nodeList: nodeList.value,
linkList: linkList.value
});
}
handleRenderNode();
createChart();
}, 5);
};
var onDragEnd = function onDragEnd() {
raf.cancel(rafRef.value);
rafRef.value = null;
deleteDragNodeAndLink({
nodeList: nodeList.value,
linkList: linkList.value
});
emit('node-drag-end');
};
// 更新拖动后的数据
var updateDragData = function updateDragData() {
updateDragNode({
sourceNode: moveNodeConf.value.sourceNode,
targetNode: moveNodeConf.value.targetNode,
linkList: linkList.value,
direction: moveNodeConf.value.direction,
disabled: moveNodeConf.value.disabledDragging,
nodeMap: graph.value.originPointMap(nodeList.value),
nodeList: nodeList.value
});
moveNodeConf.value.sourceNode = null;
moveNodeConf.value.targetNode = null;
};
// 旧组件copy来的 工具内更新数据的相关方法
var updateNodeData = function updateNodeData(node, newNode) {
_extends(node, newNode);
};
// 展开收起方法
var shrinkOrExpand = function shrinkOrExpand(nodeId) {
shrinkOrExpandNode({
nodeId: nodeId,
nodeList: nodeList.value
});
};
expose({
render: render,
appendNode: appendNode,
addModuleBrotherNode: addModuleBrotherNode,
insertNode: insertNode,
addModuleChildNode: addModuleChildNode,
mergeNode: mergeNode,
cancelMerge: cancelMerge,
editMerge: editMerge,
findLinkChildById: findLinkChildById,
updateDragData: updateDragData,
deleteNodeLinkList: deleteNodeLinkList,
shrinkOrExpand: shrinkOrExpand,
lightenPath: lightenPath,
getCurrentFatherAdnSonNode: getCurrentFatherAdnSonNode,
getCurrentFatherNode: getCurrentFatherNode,
getCurrentChildrenNode: getCurrentChildrenNode,
getCurrentBrother: getCurrentBrother,
getCompletionPreRelationList: getCompletionPreRelationList
});
return function () {
var _classNames;
return _createVNode(ScrollBar, {
"ref": scrollRef,
"view-class": "".concat(prefixCls.value, "-view")
}, {
default: function _default() {
return [_createVNode("div", {
"class": classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls.value), true), _defineProperty(_classNames, "".concat(prefixCls.value, "-readonly"), props.readonly), _defineProperty(_classNames, "".concat(prefixCls.value, "-gu"), props.quotationColor === QuotationColor.GREEN_UP_RED_DOWN), _defineProperty(_classNames, "".concat(prefixCls.value, "-merge"), props.merge), _classNames)),
"ref": graphRef
}, null)];
}
});
};
}
});
export default withInstall(StgyGraph);