top升级第二版,以鼠标为中心放大缩小不精确

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 }
+        };
+
+      }
+    },
+  }
+};

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();
+      }
+    },
+  }
+};

ebts-ui/src/views/tool/top/packages/topology/src/behavior/dice-er-node.js

@@ -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,
-          });
-        }
-      }
-    },
-  }
-}

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;
 };

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 {

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 graph = this.graph;
-      let selectedNodes = graph.findAllByState('node', 'selected')
+      let selectedNodes = graph.findAllByState("node", "selected");
-      let selectedEdges = graph.findAllByState('edge', '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 historyData = JSON.stringify(graph.save());
-        let key = `graph_history_${vm.historyIndex}`
+        let key = `graph_history_${vm.historyIndex}`;
-        vm.addHistoryData(key, historyData)
+        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}`
+            let key = `graph_history_${vm.historyIndex + i}`;
-            vm.removeHistoryData(key)
+            vm.removeHistoryData(key);
           }
-          vm.undoCount = 0
+          vm.undoCount = 0;
         }
         // 记录【删除】后的数据状态
-        vm.historyIndex += 1
+        vm.historyIndex += 1;
-        key = `graph_history_${vm.historyIndex}`
+        key = `graph_history_${vm.historyIndex}`;
-        let currentData = JSON.stringify(graph.save())
+        let currentData = JSON.stringify(graph.save());
-        vm.addHistoryData(key, currentData)
+        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;
         }
       }
     }
   }
+};

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;

ebts-ui/src/views/tool/top/packages/topology/src/topology.vue

@@ -72,42 +72,6 @@
               <span>节点标签</span>
               <el-input v-model="selectedNodeParams.label" size="mini"/>
               <!--              <input class="params-input" type="text" autocomplete="off" v-model="selectedNodeParams.label" />-->
-              <div style="margin-top: 10px">
-                <el-button
-                  type="primary"
-                  plain
-                  icon="el-icon-edit"
-                  size="mini"
-                  @click="editColumns"
-                >修改
-                </el-button>
-              </div>
-              <div class="input-item">
-                <!--
-              <span>字段信息</span>
-              <template>
-                <el-table
-                  :data="selectedNodeParams.columns"
-                  max-height="350px"
-                  style="width: 100%">
-                  <el-table-column
-                    prop="key"
-                    width="120"
-                    label="字段名称">
-                    <template slot-scope="scope">
-                      {{ scope.row.columnComment + ':' + scope.row.columnName }}
-                    </template>
-                  </el-table-column>
-                  <el-table-column
-                    prop="isUse"
-                    label="是否使用">
-                    <template slot-scope="scope">
-                      <el-checkbox :true-label="1" :false-label="0" v-model="scope.row.isUse"></el-checkbox>
-                    </template>
-                  </el-table-column>
-                </el-table>
-                </template>-->
-              </div>
               <div v-for="(value, key) in nodeAppConfig" :key="key">
                 <span>{{ value }}</span>
                 <el-input v-model="selectedNodeParams.appConfig[key]" size="mini"/>
@@ -361,11 +325,12 @@ export default {
         nodes: [],
         edges: []
       },
+      // 表格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() {

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'
 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: {

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
 }

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)

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,

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 (name === 'selected') {
-    if (value) {
-      shape.attr(themeStyle.edgeStyle.active)
-    } else {
-      shape.attr(themeStyle.edgeStyle.inactive)
-    }
-  } else if (name === 'selected') {
     if (value) {
       shape.attr(themeStyle.edgeStyle.selected)
     } else {

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') {
+  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) {
-      shape.attr(themeStyle.nodeStyle.active)
+          child.attr(themeStyle.nodeStyle.selected)
         } else {
-      shape.attr(themeStyle.nodeStyle.inactive)
+          child.attr(themeStyle.nodeStyle.default)
-    }
+        }
-  } else if (name === 'selected') {
+      }
-    if (value) {
-      group.attr(themeStyle.nodeStyle.selected)
-    } else {
-      group.attr(themeStyle.nodeStyle.default)
     }
   }
-
 }