/**
 * @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)
      }
    }
  }
}