init

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

@@ -0,0 +1,57 @@
+/**
+ * @author: clay
+ * @data: 2019/07/16
+ * @description: edit mode: 鼠标拖动节点的交互(记录拖拽前后的数据，用于【撤销】和【重做】)
+ */
+
+// 用来获取调用此js的vue组件实例（this）
+let vm = null
+let historyData = null
+
+const sendThis = (_this) => {
+  vm = _this
+}
+
+export default {
+  sendThis, // 暴露函数
+  name: 'drag-event-edit',
+  options: {
+    getEvents() {
+      return {
+        'node:dragstart': 'onNodeDragstart',
+        'node:dragend': 'onNodeDragend'
+      }
+    },
+    onNodeDragstart() {
+      let graph = vm.getGraph()
+      if(graph.cfg){
+        historyData = JSON.stringify(graph.save())
+      }
+    },
+    onNodeDragend() {
+      if (historyData) {
+        let graph = vm.getGraph()
+        // 如果当前点过【撤销】了，拖拽节点后没有【重做】功能
+        // 重置undoCount，拖拽后的数据给(当前所在historyIndex + 1)，且清空这个时间点之后的记录
+        if (vm.getUndoCount() > 0) {
+          vm.editHistoryIndex( vm.getHistoryIndex() - vm.getUndoCount()) // 此时的historyIndex应当更新为【撤销】后所在的索引位置
+          for (let i = 1; i <= vm.getUndoCount(); i++) {
+            let key = `graph_history_${vm.getHistoryIndex() + i}`
+            vm.removeHistoryData(key)
+          }
+          vm.editUndoCount(0);
+        } else {
+          // 正常顺序执行的情况，记录拖拽前的数据状态
+          let key = `graph_history_${vm.getHistoryIndex()}`
+          vm.addHistoryData(key, historyData)
+        }
+        // 记录拖拽后的数据状态
+        const index=vm.getHistoryIndex()+ 1;
+        vm.editHistoryIndex(index);
+        let key = `graph_history_${index}`
+        let currentData = JSON.stringify(graph.save())
+        vm.addHistoryData(key, currentData)
+      }
+    }
+  }
+}