init

src/views/custom-query/topo/top/behavior/hover-event-edit.js

@@ -0,0 +1,66 @@
+/**
+ * @author: clay
+ * @data: 2019/07/16
+ * @description: edit mode: 悬浮交互
+ */
+// 用来获取调用此js的vue组件实例（this）
+let vm = null;
+let hourItem = null;
+const sendThis = (topo) => {
+  vm = topo;
+};
+export default {
+  sendThis, // 暴露函数
+  name: "hover-event-edit",
+  options: {
+    getEvents() {
+      return {
+        "node:mouseover": "onNodeHover",
+        // "node:mouseout": "onNodeOut",
+        // "mouseleave":"onNodeLeave",
+      };
+    },
+    onNodeHover(event) {
+      let graph = vm.getGraph();
+      let hoverNode = event.item;
+      const name = event.shape.get("name");//todo ??
+      const item = event.item;
+      if (name && name.startsWith("item")) {
+        graph.updateItem(item, {//更新元素，包括更新数据、样式等
+          selectedIndex: Number(name.split("-")[1])
+        });
+      } else {
+        graph.updateItem(item, {
+          selectedIndex: NaN
+        });
+      }
+      if (name && name.startsWith("marker")) {
+        hoverNode.setState("hover", true, graph);
+        hourItem=hoverNode;
+      }else {
+        if (hourItem!=null){
+          hourItem.setState("hover", false)
+        }
+      }
+    },
+    // onNodeOut(event) {
+    //   console.log('移出节点')
+      // const name = event.shape.get("name");
+      // let hoverNode = event.item;
+      // console.log('name',name)
+      // if (name && name.startsWith("marker")) {
+      //   hoverNode.setState("hover", false);
+      // }
+      // if (hourItem!=null){
+      //   hourItem.setState("hover", false)
+      // }
+      // hoverNode.setState("hover", false);
+    // },
+    // onNodeLeave(event) {
+    //   console.log('移出节点2')
+    //   if (hourItem!=null){
+    //     hourItem.setState("hover", false)
+    //   }
+    // }
+  }
+};