/** * @author: clay * @data: 2019/07/16 * @description: edit mode: 通过拖拽节点上的锚点添加连线 */ import utils from "../../utils"; // 用来获取调用此js的vue组件实例（this） let vm = null; const sendThis = (_this) => { vm = _this; }; import theme from "../theme"; import {ElMessage} from "element-plus"; export default { sendThis, // 暴露函数 name: "drag-add-edge", options: { getEvents() { return { "node:mousedown": "onNodeMousedown", "node:mouseup": "onNodeMouseup", "edge:mouseup": "onEdgeMouseup", "mousemove": "onMousemove" }; }, onNodeMousedown(event) { let self = this; // 交互过程中的信息 self.evtInfo = { action: null, node: event.item, target: event.target, }; if (self.evtInfo.target && self.evtInfo.target.attrs.name) { // todo...未来可能针对锚点增加其它功能(例如拖拽调整大小) switch (self.evtInfo.target.attrs.name) { case "anchor": self.evtInfo.action = "drawEdge"; break; } } if (self.evtInfo && self.evtInfo.action) { self[self.evtInfo.action].start.call(self, event); } }, onNodeMouseup(event) { let self = this; if (self.evtInfo && self.evtInfo.action) { self[self.evtInfo.action].stop.call(self, event); } }, onEdgeMouseup(event) { let self = this; if (self.evtInfo && self.evtInfo.action === "drawEdge") { self[self.evtInfo.action].stop.call(self, event); } }, onMousemove(event) { let self = this; if (self.evtInfo && self.evtInfo.action) { self[self.evtInfo.action].move.call(self, event); } }, drawEdge: { isMoving: false, currentLine: null, start: function (event) { let self = this; let themeStyle = theme.defaultStyle; // todo...先使用默认主题，后期可能增加其它风格的主体 // ************** 暂存【连线】前的数据状态 start ************** let graph = vm.getGraph(); self.historyData = JSON.stringify(graph.save()); // ************** 暂存【连线】前的数据状态 end ************** let sourceAnchor = self.evtInfo.node.getAnchorPoints(); let sourceNodeModel = toRaw(self.evtInfo.node.getModel()); // 锚点数据 let anchorPoints = self.evtInfo.node.getAnchorPoints(); // 处理线条目标点 if (anchorPoints && anchorPoints.length) { // 获取距离指定坐标最近的一个锚点 sourceAnchor = self.evtInfo.node.getLinkPoint({ x: event.x, y: event.y }) } // let relational = vm.getRelationalMap().get(sourceNodeModel.tableId) let relational = vm.getRelationalMap().map(item => { if (item.mainId === sourceNodeModel.tableId) { return item } }) //item.columnName+':'+item.columnComment let columns = [] for (let i = 0; i < sourceNodeModel.columns.length; i++) { let column = { columnName: sourceNodeModel.columns[i].columnName, columnComment: sourceNodeModel.columns[i].columnComment } columns.push(column) } self.drawEdge.currentLine = self.graph.addItem("edge", { // id: G6.Util.uniqueId(), // 这种生成id的方式有bug，会重复 id: utils.generateUUID(), // 起始节点 source: sourceNodeModel.id, sourceColumn: columns, sourceAnchor: sourceAnchor ? sourceAnchor.anchorIndex : "", // 终止节点/位置 relational: relational, target: { x: event.x, y: event.y }, type: self.graph.$C.edge.type || "top-cubic", style: themeStyle.edgeStyle.default || self.graph.$C.edge.style }); self.drawEdge.isMoving = true; }, move(event) { let self = this; if (self.drawEdge.isMoving && self.drawEdge.currentLine) { self.graph.updateItem(self.drawEdge.currentLine, { target: { x: event.x, y: event.y } }); } }, stop(event) { let self = this; if (self.drawEdge.isMoving) { if (self.drawEdge.currentLine === event.item) { // 画线过程中点击则移除当前画线 self.graph.removeItem(event.item); } else { let targetNode = event.item; let targetNodeModel = toRaw(targetNode.getModel()); let targetAnchor = null; // 锚点数据 let anchorPoints = targetNode.getAnchorPoints(); // 处理线条目标点 let relational = self.drawEdge.currentLine.getModel().relational let starts = false; let relationalItem = null; if (relational) { // let flag = false // relational.forEach(item=>{ // flag = item.childId=== targetNodeModel.tableId // }) // if(flag) { // starts = true // relationalItem = relational // } relational.map(item => { if (item) { if (item.childId === targetNodeModel.tableId) { starts = true relationalItem = item }else { starts = false } } }) } // 去掉关系验证 // starts = true if (starts) { if (anchorPoints && anchorPoints.length) { // 获取距离指定坐标最近的一个锚点 targetAnchor = targetNode.getLinkPoint({ x: event.x, y: event.y }); } let columns = [] for (let i = 0; i < targetNodeModel.columns.length; i++) { let column = { columnName: targetNodeModel.columns[i].columnName, columnComment: targetNodeModel.columns[i].columnComment } columns.push(column) } self.graph.updateItem(self.drawEdge.currentLine, { target: targetNodeModel.id, relationalItem: relationalItem, targetAnchor: targetAnchor ? targetAnchor.anchorIndex : "", targetColumn: columns, }); // ************** 记录historyData的逻辑 start ************** if (self.historyData) { let graph = self.graph; // 如果当前点过【撤销】了，拖拽节点后没有【重做】功能 // 重置undoCount，拖拽后的数据给(当前所在historyIndex + 1)，且清空这个时间点之后的记录 if (vm.undoCount > 0) { vm.historyIndex = vm.historyIndex - vm.undoCount;// 此时的historyIndex应当更新为【撤销】后所在的索引位置 for (let i = 1; i <= vm.undoCount; i++) { let key = `graph_history_${vm.historyIndex + i}`; vm.removeHistoryData(key); } vm.editUndoCount(0) // vm.undoCount=0 } else { // 正常顺序执行的情况，记录拖拽前的数据状态 let key = `graph_history_${vm.historyIndex}`; vm.addHistoryData(key, self.historyData); } // 记录拖拽后的数据状态 vm.historyIndex += 1 vm.getHistoryIndex(vm.historyIndex); let key = `graph_history_${vm.historyIndex}`; let currentData = JSON.stringify(graph.save()); vm.addHistoryData(key, currentData); } } else { if(self.evtInfo.node.getModel().tableId===targetNodeModel.tableId){ ElMessage.warning("不可连接自身") }else { ElMessage.warning("两表之间无关联关系") } self.graph.removeItem(self.drawEdge.currentLine); } // ************** 记录historyData的逻辑 end ************** } } self.drawEdge.currentLine = null; self.drawEdge.isMoving = false; self.evtInfo = null; } } } };