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

2022-02-25 23:38:58 +08:00 · 2022-02-25 23:38:58 +08:00 · 1d77befadb
parent 173d18a982
commit 1d77befadb
14 changed files with 351 additions and 399 deletions
--- 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
@ -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 }
+        };
+
+      }
+    },
+  }
+};
--- 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
@ -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();
+      }
+    },
+  }
+};
--- 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
@ -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,
-          });
-        }
-      }
-    },
-  }
-}
--- 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;
 };
--- 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 {
--- 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;
+        }
      }
    }
  }
-}
+};
--- 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;
--- 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 @@
              <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: []
      },
-      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() {
--- 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: {
--- 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
 }
--- 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)
--- 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,
--- 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 {
--- 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)
+        }
+      }
    }
  }
-
 }