From 1d77befadbb0e8462a285e850ca7b1a3ddcf4f8a Mon Sep 17 00:00:00 2001 From: clay <20932067@zju.edu.cn> Date: Fri, 25 Feb 2022 23:38:58 +0800 Subject: [PATCH] =?UTF-8?q?top=E5=8D=87=E7=BA=A7=E7=AC=AC=E4=BA=8C?= =?UTF-8?q?=E7=89=88,=E4=BB=A5=E9=BC=A0=E6=A0=87=E4=B8=BA=E4=B8=AD?= =?UTF-8?q?=E5=BF=83=E6=94=BE=E5=A4=A7=E7=BC=A9=E5=B0=8F=E4=B8=8D=E7=B2=BE?= =?UTF-8?q?=E7=A1=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../topology/src/behavior/click-er-edge.js | 78 ++++++ .../topology/src/behavior/click-er-node.js | 160 +++++++++++ .../topology/src/behavior/dice-er-node.js | 249 ------------------ .../topology/src/behavior/hover-event-edit.js | 2 +- .../packages/topology/src/behavior/index.js | 6 +- .../topology/src/behavior/keyup-event-edit.js | 56 ++-- .../packages/topology/src/node/dice-er-box.js | 64 +++-- .../top/packages/topology/src/topology.vue | 76 ++---- .../topology/src/utils/anchor/draw_mark.js | 13 +- .../topology/src/utils/anchor/index.js | 4 - .../topology/src/utils/anchor/set-state.js | 2 - .../topology/src/utils/collapse/set-state.js | 7 +- .../topology/src/utils/edge/set-state.js | 8 +- .../topology/src/utils/node/set-state.js | 25 +- 14 files changed, 351 insertions(+), 399 deletions(-) create mode 100644 ebts-ui/src/views/tool/top/packages/topology/src/behavior/click-er-edge.js create mode 100644 ebts-ui/src/views/tool/top/packages/topology/src/behavior/click-er-node.js delete mode 100644 ebts-ui/src/views/tool/top/packages/topology/src/behavior/dice-er-node.js diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/behavior/click-er-edge.js b/ebts-ui/src/views/tool/top/packages/topology/src/behavior/click-er-edge.js new file mode 100644 index 0000000..adc09d7 --- /dev/null +++ b/ebts-ui/src/views/tool/top/packages/topology/src/behavior/click-er-edge.js @@ -0,0 +1,78 @@ +/** + * @author: clay + * @data: 2021/5/14 23:20 + * @email: clay@hchyun.com + * @description: node er图点击事件 + */ + +let vm = null; + +const sendThis = (_this) => { + vm = _this; +}; + +export default { + sendThis, + name: "click-er-edge", + options: { + getEvents() { + return { + "edge:click": "onEdgeClick", + "edge:contextmenu": "onEdgeRightClick" + }; + }, + /** + * 点击连线 + * @param event + */ + onEdgeClick(event) { + let clickEdge = event.item; + clickEdge.setState("selected", !clickEdge.hasState("selected")); + vm.currentFocus = "edge"; + + this.updateVmData(event); + }, + /** + * + * @param event + */ + onEdgeRightClick(event) { + let graph = vm.graph; + let clickEdge = event.item; + let clickEdgeModel = clickEdge.getModel(); + let selectedEdges = graph.findAllByState("edge", "selected"); + // 如果当前点击节点不是之前选中的单个节点，才进行下面的处理 + if (!(selectedEdges.length === 1 && clickEdgeModel.id === selectedEdges[0].getModel().id)) { + // 先取消所有节点的选中状态 + graph.findAllByState("edge", "selected").forEach(edge => { + edge.setState("selected", false); + }); + // 再添加该节点的选中状态 + clickEdge.setState("selected", true); + vm.currentFocus = "edge"; + this.updateVmData(event); + } + }, + updateVmData(event) { + + // 更新vm的data: selectedEdge 和 selectedEdgeParams + let clickEdge = event.item; + if (clickEdge.hasState("selected")) { + let clickEdgeModel = clickEdge.getModel(); + vm.selectedEdge = clickEdge; + let edgeAppConfig = { ...vm.edgeAppConfig }; + Object.keys(edgeAppConfig).forEach(function(key) { + edgeAppConfig[key] = ""; + }); + vm.selectedEdgeParams = { + label: clickEdgeModel.label || "", + relationalItem: clickEdgeModel.relationalItem, + sourceColumn: clickEdgeModel.sourceColumn, + targetColumn: clickEdgeModel.targetColumn, + appConfig: { ...edgeAppConfig, ...clickEdgeModel.appConfig } + }; + + } + }, + } +}; diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/behavior/click-er-node.js b/ebts-ui/src/views/tool/top/packages/topology/src/behavior/click-er-node.js new file mode 100644 index 0000000..d1e25a2 --- /dev/null +++ b/ebts-ui/src/views/tool/top/packages/topology/src/behavior/click-er-node.js @@ -0,0 +1,160 @@ +/** + * @author: clay + * @data: 2021/5/14 23:20 + * @email: clay@hchyun.com + * @description: node er图点击事件 + */ +const isInBBox = (point, bbox) => { + const { + x, + y + } = point; + const { + minX, + minY, + maxX, + maxY + } = bbox; + + return x < maxX && x > minX && y > minY && y < maxY; +}; + +let vm = null; + +const sendThis = (_this) => { + vm = _this; +}; + +export default { + sendThis, + name: "click-er-node", + options: { + getEvents() { + return { + wheel: "scroll", + "node:click": "onNodeClick", + "node:contextmenu": "onNodeRightClick", + "canvas:click": "onCanvasClick" + }; + }, + //滚动事件监听 + scroll(event) { + //禁止滚动的默认事件 + event.preventDefault(); + if (vm.clickCtrl) { + if (event.deltaY>0){ + let graph = vm.graph + if (graph && !graph.destroyed) { + graph.zoom(0.8,{ x: event.x, y: event.y }) + //graph.zoom(0.8,{ x: event.clientX, y: event.clientY }) + } + }else { + let graph = vm.graph + if (graph && !graph.destroyed) { + graph.zoom(1.2,{ x: event.x, y: event.y }) + //graph.zoom(1.2,{ x: event.clientX, y: event.clientY }) + } + } + } else { + const { + graph + } = this; + const nodes = graph.getNodes().filter((n) => { + const bbox = n.getBBox(); + return isInBBox(graph.getPointByClient(event.clientX, event.clientY), bbox); + }); + if (nodes) { + nodes.forEach((node) => { + const model = node.getModel(); + if (model.columns.length < 9) { + return; + } + const idx = model.startIndex || 0; + this.start = idx; + let startX = model.startX || 0.5; + let startIndex = idx + event.deltaY * 0.02; + if ((model.columns.length - idx) < 10 && startIndex > idx) { + return; + } + startX -= event.deltaX; + if (startIndex < 0) { + startIndex = 0; + } + if (startX > 0) { + startX = 0; + } + if (startIndex > model.columns.length - 1) { + startIndex = model.columns.length - 1; + } + graph.update(node, { + startIndex, + startX + }); + }); + } + } + }, + //节点左键点击监听 + onNodeClick(event) { + this.shrinkage(event); + this.updateVmData(event); + vm.currentFocus = "node"; + vm.rightMenuShow = false; + }, + /** + * todo 右键打开设置面板 + * @param event + */ + onNodeRightClick(event) { + this.updateVmData(event); + vm.tableColumnEditOpen = true; + }, + onCanvasClick() { + vm.currentFocus = "canvas"; + vm.rightMenuShow = false; + }, + updateVmData(event) { + let clickNode = event.item; + clickNode.setState("selected", true); + let clickNodeModel = clickNode.getModel(); + vm.selectedNode = clickNode; + let nodeAppConfig = { ...vm.nodeAppConfig }; + Object.keys(nodeAppConfig).forEach(function(key) { + nodeAppConfig[key] = ""; + }); + vm.selectedNodeParams = { + label: clickNodeModel.label || "", + columns: clickNodeModel.columns, + appConfig: { ...nodeAppConfig, ...clickNodeModel.appConfig } + }; + // } + }, + shrinkage(e) { + const { + graph + } = this; + const item = e.item; + const shape = e.shape; + if (!item) { + return; + } + if (shape.get("name") === "collapse") { + graph.updateItem(item, { + collapsed: true, + size: [300, 50], + height: 44 + }); + setTimeout(() => graph.layout(), 100); + } else if (shape.get("name") === "expand") { + graph.updateItem(item, { + collapsed: false, + size: [300, 500], + height: 316 + }); + setTimeout(() => graph.layout(), 100); + } else { + const model = item.getModel(); + } + }, + } +}; diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/behavior/dice-er-node.js b/ebts-ui/src/views/tool/top/packages/topology/src/behavior/dice-er-node.js deleted file mode 100644 index f927f0e..0000000 --- a/ebts-ui/src/views/tool/top/packages/topology/src/behavior/dice-er-node.js +++ /dev/null @@ -1,249 +0,0 @@ -import utils from '../utils' - -/** - * @author: clay - * @data: 2021/5/14 23:20 - * @email: clay@hchyun.com - * @description: node - */ -const isInBBox = (point, bbox) => { - const { - x, - y - } = point; - const { - minX, - minY, - maxX, - maxY - } = bbox; - - return x < maxX && x > minX && y > minY && y < maxY; -}; - -let vm = null; - -const sendThis = (_this) => { - vm = _this; -}; - -export default { - sendThis, - name: 'dice-er-node', - options: { - getDefaultCfg() { - return { - multiple: true, - start:0, - }; - }, - getEvents() { - return { - itemHeight: 50, - wheel: "scroll", - "node:click": "onNodeClick", - "edge:click": "onEdgeClick", - "node:contextmenu": "onNodeRightClick", - "edge:contextmenu": "onEdgeRightClick", - "canvas:click": "onCanvasClick", - }; - }, - scroll(e) { - e.preventDefault() - const { - graph - } = this; - const nodes = graph.getNodes().filter((n) => { - const bbox = n.getBBox(); - - return isInBBox(graph.getPointByClient(e.clientX, e.clientY), bbox); - }); - if (nodes) { - nodes.forEach((node) => { - const model = node.getModel(); - if (model.columns.length < 9 ) { - return; - } - const idx = model.startIndex || 0; - this.start=idx - let startX = model.startX || 0.5; - let startIndex = idx + e.deltaY * 0.02; - if ((model.columns.length-idx)<10 && startIndex > idx){ - return; - } - startX -= e.deltaX; - if (startIndex < 0) { - startIndex = 0; - } - if (startX > 0) { - startX = 0; - } - if (startIndex > model.columns.length - 1) { - startIndex = model.columns.length - 1; - } - graph.update(node, { - startIndex, - startX, - }); - }); - } - - - }, - onNodeClick(event) { - this.shrinkage(event) - vm.currentFocus = "node"; - vm.rightMenuShow = false; - this.updateVmData(event); - }, - /** - * 点击连线 - * @param event - */ - onEdgeClick(event) { - let clickEdge = event.item; - clickEdge.setState("selected", !clickEdge.hasState("selected")); - vm.currentFocus = "edge"; - - this.updateVmData(event); - }, - onNodeRightClick(event) { - let graph = vm.graph; - let clickNode = event.item; - let clickNodeModel = clickNode.getModel(); - let selectedNodes = graph.findAllByState("node", "selected"); - let selectedNodeIds = selectedNodes.map(item => { - return item.getModel().id; - }); - vm.selectedNode = clickNode; - // 如果当前点击节点是之前选中的某个节点，就进行下面的处理 - if (selectedNodes.length > 1 && selectedNodeIds.indexOf(clickNodeModel.id) > -1) { - vm.rightMenuShow = true; - let rightMenu = vm.$refs.rightMenu; - rightMenu.style.left = event.clientX + "px"; - rightMenu.style.top = event.clientY + "px"; - } else { - // 隐藏右键菜单 - vm.rightMenuShow = false; - // 先取消所有节点的选中状态 - selectedNodes.forEach(node => { - node.setState("selected", false); - }); - // 再添加该节点的选中状态 - clickNode.setState("selected", true); - vm.currentFocus = "node"; - this.updateVmData(event); - } - graph.paint(); - }, - /** - * - * @param event - */ - onEdgeRightClick(event) { - let graph = vm.graph; - let clickEdge = event.item; - let clickEdgeModel = clickEdge.getModel(); - let selectedEdges = graph.findAllByState("edge", "selected"); - // 如果当前点击节点不是之前选中的单个节点，才进行下面的处理 - if (!(selectedEdges.length === 1 && clickEdgeModel.id === selectedEdges[0].getModel().id)) { - // 先取消所有节点的选中状态 - graph.findAllByState("edge", "selected").forEach(edge => { - edge.setState("selected", false); - }); - // 再添加该节点的选中状态 - clickEdge.setState("selected", true); - vm.currentFocus = "edge"; - this.updateVmData(event); - } - let point = { x: event.x, y: event.y }; - }, - onCanvasClick() { - vm.currentFocus = "canvas"; - vm.rightMenuShow = false; - }, - updateVmData(event) { - if (event.item._cfg.type === "node") { - let clickNode = event.item; - if (clickNode.hasState("selected")) { - let clickNodeModel = clickNode.getModel(); - vm.selectedNode = clickNode; - let nodeAppConfig = { ...vm.nodeAppConfig }; - Object.keys(nodeAppConfig).forEach(function(key) { - nodeAppConfig[key] = ""; - }); - vm.selectedNodeParams = { - label: clickNodeModel.label || "", - columns:clickNodeModel.columns, - appConfig: { ...nodeAppConfig, ...clickNodeModel.appConfig } - }; - } - } else if (event.item._cfg.type === "edge") { - // 更新vm的data: selectedEdge 和 selectedEdgeParams - let clickEdge = event.item; - if (clickEdge.hasState("selected")) { - let clickEdgeModel = clickEdge.getModel(); - vm.selectedEdge = clickEdge; - let edgeAppConfig = { ...vm.edgeAppConfig }; - Object.keys(edgeAppConfig).forEach(function(key) { - edgeAppConfig[key] = ""; - }); - vm.selectedEdgeParams = { - label: clickEdgeModel.label || "", - relationalItem: clickEdgeModel.relationalItem, - sourceColumn:clickEdgeModel.sourceColumn, - targetColumn:clickEdgeModel.targetColumn, - appConfig: { ...edgeAppConfig, ...clickEdgeModel.appConfig } - }; - } - } - }, - shrinkage(e){ - const { - graph - } = this; - const item = e.item; - const shape = e.shape; - if (!item) { - return; - } - if (shape.get("name") === "collapse") { - graph.updateItem(item, { - collapsed: true, - size: [300, 50], - height:44, - }); - setTimeout(() => graph.layout(), 100); - } else if (shape.get("name") === "expand") { - let updateGraph = graph.updateItem(item, { - collapsed: false, - size: [300, 500], - height:316, - }); - // utils.anchor.update({height:100,}, graph) - setTimeout(() => graph.layout(), 100); - }else { - // eslint-disable-next-line no-unused-vars - const model = item.getModel(); - // console.log(JSON.stringify(model)); - // console.log(model.style.default.fill = '#4eb922'); - // console.log(model.style.selected.shadowColor = '#4eb922'); - } - }, - moves(e) { - const name = e.shape.get("name"); - const item = e.item; - if (!name.startsWith("marker")){ - if (name && name.startsWith("item")) { - this.graph.updateItem(item, { - selectedIndex: Number(name.split("-")[1]), - }); - } else { - this.graph.updateItem(item, { - selectedIndex: NaN, - }); - } - } - }, - } -} diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/behavior/hover-event-edit.js b/ebts-ui/src/views/tool/top/packages/topology/src/behavior/hover-event-edit.js index ba59728..9bae40e 100644 --- a/ebts-ui/src/views/tool/top/packages/topology/src/behavior/hover-event-edit.js +++ b/ebts-ui/src/views/tool/top/packages/topology/src/behavior/hover-event-edit.js @@ -5,7 +5,7 @@ */ // 用来获取调用此js的vue组件实例（this） let vm = null; -var hourItem = null; +let hourItem = null const sendThis = (_this) => { vm = _this; }; diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/behavior/index.js b/ebts-ui/src/views/tool/top/packages/topology/src/behavior/index.js index 748e43b..c67b1b0 100644 --- a/ebts-ui/src/views/tool/top/packages/topology/src/behavior/index.js +++ b/ebts-ui/src/views/tool/top/packages/topology/src/behavior/index.js @@ -8,14 +8,16 @@ import dragAddEdge from './drag-add-edge' import hoverEventEdit from './hover-event-edit' import dragEventEdit from './drag-event-edit' import keyupEventEdit from './keyup-event-edit' -import diceErNode from './dice-er-node' +import clickErNode from './click-er-node' +import clickErEdge from './click-er-edge' const obj = { dragAddEdge, hoverEventEdit, dragEventEdit, keyupEventEdit, - diceErNode, + clickErNode, + clickErEdge } export default { diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/behavior/keyup-event-edit.js b/ebts-ui/src/views/tool/top/packages/topology/src/behavior/keyup-event-edit.js index cdb6af3..c1a1c4c 100644 --- a/ebts-ui/src/views/tool/top/packages/topology/src/behavior/keyup-event-edit.js +++ b/ebts-ui/src/views/tool/top/packages/topology/src/behavior/keyup-event-edit.js @@ -5,59 +5,69 @@ */ // 用来获取调用此js的vue组件实例（this） -let vm = null +let vm = null; const sendThis = (_this) => { - vm = _this -} + vm = _this; +}; export default { sendThis, // 暴露函数 - name: 'keyup-event-edit', + name: "keyup-event-edit", options: { getEvents() { return { - 'keyup': 'onKeyup' - } + "keyup": "onKeyup", + "keydown": "onKeydown", + }; }, onKeyup(event) { - let graph = this.graph - let selectedNodes = graph.findAllByState('node', 'selected') - let selectedEdges = graph.findAllByState('edge', 'selected') + let graph = this.graph; + let selectedNodes = graph.findAllByState("node", "selected"); + let selectedEdges = graph.findAllByState("edge", "selected"); if (event.keyCode === 46 && (selectedNodes.length > 0 || selectedEdges.length > 0)) { // ************** 记录【删除】前的数据状态 start ************** - let historyData = JSON.stringify(graph.save()) - let key = `graph_history_${vm.historyIndex}` - vm.addHistoryData(key, historyData) + let historyData = JSON.stringify(graph.save()); + let key = `graph_history_${vm.historyIndex}`; + vm.addHistoryData(key, historyData); // ************** 记录【删除】前的数据状态 end ************** // 开始删除 for (let i = 0; i < selectedNodes.length; i++) { - graph.removeItem(selectedNodes[i]) + graph.removeItem(selectedNodes[i]); } for (let i = 0; i < selectedEdges.length; i++) { - graph.removeItem(selectedEdges[i]) + graph.removeItem(selectedEdges[i]); } // ************** 记录【删除】后的数据状态 start ************** // 如果当前点过【撤销】了，拖拽节点后将取消【重做】功能 // 重置undoCount，【删除】后的数据状态给(当前所在historyIndex + 1)，且清空这个时间点之后的记录 if (vm.undoCount > 0) { - vm.historyIndex = vm.historyIndex - vm.undoCount // 此时的historyIndex应当更新为【撤销】后所在的索引位置 + 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) + let key = `graph_history_${vm.historyIndex + i}`; + vm.removeHistoryData(key); } - vm.undoCount = 0 + vm.undoCount = 0; } // 记录【删除】后的数据状态 - vm.historyIndex += 1 - key = `graph_history_${vm.historyIndex}` - let currentData = JSON.stringify(graph.save()) - vm.addHistoryData(key, currentData) + vm.historyIndex += 1; + key = `graph_history_${vm.historyIndex}`; + let currentData = JSON.stringify(graph.save()); + vm.addHistoryData(key, currentData); // ************** 记录【删除】后的数据状态 end ************** + }else if (event.keyCode === 17){ + vm.clickCtrl = false; + } + }, + onKeydown(event){ + if (event.keyCode === 17){ + if (!vm.clickCtrl){ + vm.clickCtrl = true; + } } } } -} +}; diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/node/dice-er-box.js b/ebts-ui/src/views/tool/top/packages/topology/src/node/dice-er-box.js index 423d734..7e886a6 100644 --- a/ebts-ui/src/views/tool/top/packages/topology/src/node/dice-er-box.js +++ b/ebts-ui/src/views/tool/top/packages/topology/src/node/dice-er-box.js @@ -6,21 +6,15 @@ */ import utils from '../utils/index' -let vm = null; -const sendThis = (_this) => { - vm = _this; -}; const itemHeight = 30; export default { - sendThis, name: 'dice-er-box', options: { setState(name, value, item) { // 设置节点状态 - utils.node.setState(name, value, item) + utils.node.setState(name, value, item); // 设置锚点状态 - utils.anchor.setState(name, value, item) - // } + utils.anchor.setState(name, value, item); }, draw(cfg, group) { const width = 250; @@ -45,6 +39,7 @@ export default { ); const offsetY = (0.5 - (startIndex % 1)) * itemHeight + 30; + //设置表名的容器 group.addShape("rect", { attrs: { fill: boxStyle.stroke, @@ -55,8 +50,10 @@ export default { draggable: true, }); + //设置左侧字体的边距 let fontLeft = 12; + // 设置图标 if (icon && icon.show !== false) { group.addShape("image", { attrs: { @@ -70,6 +67,7 @@ export default { fontLeft += 18; } + //设置表名 group.addShape("text", { attrs: { y: 22, @@ -81,6 +79,7 @@ export default { }, }); + //设置收缩部分的容器 group.addShape("rect", { attrs: { x: 0, @@ -94,6 +93,7 @@ export default { name: collapsed ? "expand" : "collapse", }); + //设置收缩显示字符 group.addShape("text", { attrs: { x: width / 2 - 6, @@ -107,22 +107,27 @@ export default { name: collapsed ? "expand" : "collapse", }); + //设置外边框 const keyshape = group.addShape("rect", { attrs: { + name: 'border', x: 0, y: 0, width, height: collapsed ? 45 : height, ...boxStyle, }, - draggable: true, + //是否被允许拖拽 + draggable: true }); + //如果收缩状态,则返回当前图形 if (collapsed) { return keyshape; } - + //添加空白组 const listContainer = group.addGroup({}); + //todo 设置裁剪对象,字体加粗? listContainer.setClip({ type: "rect", attrs: { @@ -144,6 +149,7 @@ export default { draggable: true, }); + //如果list中的column字段超过10个 if (list.length > itemCount) { const barStyle = { width: 4, @@ -166,6 +172,7 @@ export default { }, }); + //设置矩形高度 const indexHeight = afterList.length > itemCount ? (afterList.length / list.length) * height : @@ -183,10 +190,11 @@ export default { }, }); } + //渲染显示区域 if (afterList) { afterList.forEach((e, i) => { - const isSelected = - Math.floor(startIndex) + i === Number(selectedIndex); + //设置选中的列 + const isSelected = Math.floor(startIndex) + i === Number(selectedIndex); let { columnName = "", columnType,columnComment } = e; @@ -205,12 +213,29 @@ export default { width: width - 4, height: itemHeight, radius: 2, + fill:isSelected ? "#ddd" : "#fff", lineWidth: 1, cursor: "pointer", }, name: `item-${Math.floor(startIndex) + i}-content`, draggable: true, }); + + listContainer.addShape("text", { + attrs: { + x: 12, + y: i * itemHeight + offsetY + 6, + text: label, + fontSize: 12, + fill: "#000", + fontFamily: "Avenir,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol", + full: e, + fontWeight: isSelected ? 500 : 100, + cursor: "pointer", + }, + name: `item-${Math.floor(startIndex) + i}`, + }); + //未来设置字段之间有锚点 // if (!cfg.hideDot) { // utils.anchor.erDrawLeft(group, label, 0, i * itemHeight + offsetY) @@ -245,21 +270,6 @@ export default { // name: 'marker-shape' // }); // } - - listContainer.addShape("text", { - attrs: { - x: 12, - y: i * itemHeight + offsetY + 6, - text: label, - fontSize: 12, - fill: "#000", - fontFamily: "Avenir,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol", - full: e, - fontWeight: isSelected ? 500 : 100, - cursor: "pointer", - }, - name: `item-${Math.floor(startIndex) + i}`, - }); }); } return keyshape; diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/topology.vue b/ebts-ui/src/views/tool/top/packages/topology/src/topology.vue index 35c9384..368176f 100644 --- a/ebts-ui/src/views/tool/top/packages/topology/src/topology.vue +++ b/ebts-ui/src/views/tool/top/packages/topology/src/topology.vue @@ -72,42 +72,6 @@ 节点标签 -
- 修改 - -
-
- -
{{ value }} @@ -361,11 +325,12 @@ export default { nodes: [], edges: [] }, - tableColumnEditOpen: false, + // 表格Column设置弹窗开关 + tableColumnEditOpen:false, loading: false, clientWidth: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, clientHeight: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight, - //todo 设置线段的选择 + //todo 设置线段的选择 er图中只有一种线 edgeShapeList: [ // { guid: "top-line", label: "直线", class: "iconfont icon-flow-line" }, // { guid: "dice-er-edge", label: "连线", class: "iconfont icon-flow-line" }, @@ -488,12 +453,12 @@ export default { created() { }, mounted() { - Node.obj.diceErBox.sendThis(this) Behavior.obj.dragAddEdge.sendThis(this) Behavior.obj.dragEventEdit.sendThis(this) Behavior.obj.keyupEventEdit.sendThis(this) Behavior.obj.hoverEventEdit.sendThis(this) - Behavior.obj.diceErNode.sendThis(this) + Behavior.obj.clickErNode.sendThis(this) + Behavior.obj.clickErEdge.sendThis(this) this.clearHistoryData() // this.initTopo(this.graphData) @@ -681,6 +646,7 @@ export default { multiple: true } ], + //添加预览状态下的Behavior preview: [ 'drag-canvas', 'zoom-canvas', @@ -701,6 +667,7 @@ export default { // 自定义Behavior // 'my-collapse-expand' ], + //添加编辑模式下的Behavior edit: [ 'drag-node', 'drag-canvas', @@ -709,6 +676,7 @@ export default { // trigger: 'ctrl', // TODO... 疑似官方bug，ctrl无效 multiple: true }, + // 多选 ctrl＋鼠标左键 { type: 'brush-select', trigger: 'ctrl', @@ -721,13 +689,17 @@ export default { // 'collapse-expand-group', // 'drag-node-with-group', // 自定义Behavior + //悬浮交互 'hover-event-edit', - 'keyup-event', - // "drag-event-edit", + //键盘事件的交互 'keyup-event-edit', + //通过拖拽节点上的锚点添加连线 'drag-add-edge', - 'dice-er-node', - 'dice-er-edge' + //鼠标拖动节点的交互 + 'drag-event-edit', + //图点击事件 + 'click-er-node', + 'click-er-edge' ], addEdge: [ 'drag-canvas' @@ -784,22 +756,6 @@ export default { self.graph.setMode(self.graphMode) self.graph.refresh() self.autoZoomHandler() - if (this.graphMode === 'edit') { - // 由于 G6 目前不支持监听 Group 的点击事件，故自行实现 - self.graph.on('click', evt => { - if (evt.target.cfg.groupId) { - self.currentFocus = 'group' - self.selectedGroupId = evt.target.cfg.groupId - } - }) - self.graph.on('contextmenu', evt => { - if (evt.target.cfg.groupId) { - self.currentFocus = 'group' - self.selectedGroupId = evt.target.cfg.groupId - self.rightMenuShow = true - } - }) - } }, /* Deprecated method: 早期用d3-force手写的自动布局 */ autoLayoutHandler() { diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/utils/anchor/draw_mark.js b/ebts-ui/src/views/tool/top/packages/topology/src/utils/anchor/draw_mark.js index fd9a524..10eb16f 100644 --- a/ebts-ui/src/views/tool/top/packages/topology/src/utils/anchor/draw_mark.js +++ b/ebts-ui/src/views/tool/top/packages/topology/src/utils/anchor/draw_mark.js @@ -1,13 +1,13 @@ +/** + * @author: clay + * @data: 2019/08/15 + * @description: 画锚点 + */ - - - -import theme from '../../theme' + import theme from '../../theme' export default function(cfg, group) { const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体 - // console.log("cfg",cfg) let { anchorPoints, width, height, id } = cfg - // console.log("基础信息",anchorPoints,"宽",width,"高",height,"节点id",id) if (anchorPoints && anchorPoints.length) { for (let i = 0, len = anchorPoints.length; i < len; i++) { let [x, y] = anchorPoints[i] @@ -28,7 +28,6 @@ export default function(cfg, group) { name: 'markerBg-shape' }) // 添加锚点Marker形状 - // eslint-disable-next-line no-unused-vars let anchorShape = group.addShape('marker', { id: id + '_anchor_' + i, attrs: { diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/utils/anchor/index.js b/ebts-ui/src/views/tool/top/packages/topology/src/utils/anchor/index.js index 1b94cd3..e272fab 100644 --- a/ebts-ui/src/views/tool/top/packages/topology/src/utils/anchor/index.js +++ b/ebts-ui/src/views/tool/top/packages/topology/src/utils/anchor/index.js @@ -4,14 +4,10 @@ * @description: anchor */ -import erDrawLeft from './er-draw-left' import setState from './set-state' import drawMark from './draw_mark' -import update from './update' export default { setState, - erDrawLeft, drawMark, - update } diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/utils/anchor/set-state.js b/ebts-ui/src/views/tool/top/packages/topology/src/utils/anchor/set-state.js index fa3fd65..39a3f0d 100644 --- a/ebts-ui/src/views/tool/top/packages/topology/src/utils/anchor/set-state.js +++ b/ebts-ui/src/views/tool/top/packages/topology/src/utils/anchor/set-state.js @@ -9,13 +9,11 @@ export default function(name, value, item) { const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体 if (name === 'hover') { - // console.log(item) let group = item.getContainer() let children = group.get('children') for (let i = 0, len = children.length; i < len; i++) { let child = children[i] // 处理锚点状态 - // console.log(child.attrs.name) if (child.attrs.name === 'anchorBg') { if (value) { child.attr(themeStyle.anchorStyle.hover) diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/utils/collapse/set-state.js b/ebts-ui/src/views/tool/top/packages/topology/src/utils/collapse/set-state.js index c946239..f327b1d 100644 --- a/ebts-ui/src/views/tool/top/packages/topology/src/utils/collapse/set-state.js +++ b/ebts-ui/src/views/tool/top/packages/topology/src/utils/collapse/set-state.js @@ -2,27 +2,26 @@ * @author: clay * @data: 2021/5/11 17:28 * @email: clay@hchyun.com - * @description: node + * @description: node ڵͷŴ */ export default function(e){ const { graph } = this; - const { - y - } = e; const item = e.item; const shape = e.shape; if (!item) { return; } + // if (shape.get("name") === "collapse") { graph.updateItem(item, { collapsed: true, size: [300, 50], }); setTimeout(() => graph.layout(), 100); + //չ } else if (shape.get("name") === "expand") { graph.updateItem(item, { collapsed: false, diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/utils/edge/set-state.js b/ebts-ui/src/views/tool/top/packages/topology/src/utils/edge/set-state.js index 9090426..862f447 100644 --- a/ebts-ui/src/views/tool/top/packages/topology/src/utils/edge/set-state.js +++ b/ebts-ui/src/views/tool/top/packages/topology/src/utils/edge/set-state.js @@ -10,13 +10,7 @@ export default function(name, value, item) { const group = item.getContainer() const shape = group.get('children')[0] // 顺序根据 draw 时确定 const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体 - if (name === 'active') { - if (value) { - shape.attr(themeStyle.edgeStyle.active) - } else { - shape.attr(themeStyle.edgeStyle.inactive) - } - } else if (name === 'selected') { + if (name === 'selected') { if (value) { shape.attr(themeStyle.edgeStyle.selected) } else { diff --git a/ebts-ui/src/views/tool/top/packages/topology/src/utils/node/set-state.js b/ebts-ui/src/views/tool/top/packages/topology/src/utils/node/set-state.js index 4b60368..a2674fd 100644 --- a/ebts-ui/src/views/tool/top/packages/topology/src/utils/node/set-state.js +++ b/ebts-ui/src/views/tool/top/packages/topology/src/utils/node/set-state.js @@ -8,20 +8,19 @@ import theme from '../../theme' export default function(name, value, item) { const group = item.getContainer() - const shape = group.get('children')[0] // 顺序根据 draw 时确定 const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体 - if (name === 'active') { - if (value) { - shape.attr(themeStyle.nodeStyle.active) - } else { - shape.attr(themeStyle.nodeStyle.inactive) - } - } else if (name === 'selected') { - if (value) { - group.attr(themeStyle.nodeStyle.selected) - } else { - group.attr(themeStyle.nodeStyle.default) + let children = group.get('children') + for (let i = 0; i < children.length; i++) { + let child = children[i] + //判断是否为er图的外围,是则改变样式 + if (child.attrs.name === 'border') { + if (name === 'selected') { + if (value) { + child.attr(themeStyle.nodeStyle.selected) + } else { + child.attr(themeStyle.nodeStyle.default) + } + } } } - }