antv x6流程图图绘制编辑 节点属性、连线属性置（二）

流程图整体操作事件汇总

• 撤销/重做 官方api

首先开启画布撤销/重做能力。再调用对应方法

// 配置graph
const graph = new Graph({
  history: true,
})
// this.FlowGraph= new FlowGraph()通过父组件传递过来
// const {graph} = this.FlowGraph
// 重做
graph.history.redo()

// 撤销
graph.history.undo()

• 删除

首先获取到当前cells getSelectedCells();其次调用cut方法删除cells。cells包含当前节点和连接线

const cell = graph.getSelectedCells()
graph.cut(cell)

• 复制/粘贴  官方 剪切板api

首先获取到当前cells getSelectedCells();其次找到当前cells的id，再找当前cell，区分连接线和节点；调用复制方法copy

// 复制
const cells =graph.getSelectedCells()
if(cells&&cells.length){
    const Id = cells[0].id
    const cell = graph.getCellById(Id)
    if(cell.isEdge()){
        //连接线不可复制、清除
        graph.cleanClipboard()
    }else{
        graph.copy(cells,{offset:30,useLocalStorage:true})
    }
}

 // 粘贴
if(!graph.isClipboardEmpty()){
    const cells =graph.paste({offset:32})
    graph.cleanSelection()
    graph.select(cells)
}
return false

•  放大/缩小

// 放大
graph.zoom(0.1)
// 缩小
// 获取当前缩放比例，如果小于0.1则不继续缩小
const Num= Number(graph.zoom().toFixed(1))
if(Num>0.1){
  graph.zoom(-0.1)
}

• 导出数据  官方api

graph.toJSON()

---

节点Node  官方api

组件结构

•  父组件传递当前流程图

<div class="config">
    <!--配置面板组件：传递flowGraph给子组件使用-->
    <config-panel :flowGraph="flowGraph"/>
</div>

// 导入
import FlowGraph from './graph/index'
mounted () {
// mounted生命周期初始化流程
  this.flowGraph = new FlowGraph()
}

• ConfigPanel/index.vue 导入子组件，传递流程图和id

 <div v-if="type === configType.orid">
      <!--网格和背景图配置组件-->
      <config-grid :flowGraph="flowGraph"/>
    </div>
    <div v-if="type === configType.node">
      <!--node的配置-->
      <config-node :flowGraph="flowGraph" :id="id"/>
    </div>
    <div v-if="type === configType.edge">
      <!--edge边的配置-->
      <config-edge :flowGraph="flowGraph" :id="id"/>
    </div>

import configGrid from './ConfigGrid/index'
import configNode from './ConfigNode/index'
import configEdge from './ConfigEdge/index'

export default {
  name: 'index',
  components: {
    configGrid,
    configNode,
    configEdge
  },
  props: {
    // 子组件接收flowGraph
    flowGraph: {
      type: null, // 实例对象竟然是null
      default: null,
      required: true
    }
  },
}

ConfigNode

props: {
    flowGraph: {
      type: null,
      default: null,
      required: true
    },
    id: {
      type: String,
      default: null,
      required: true
    }
  },
// 拿到graph，通过id获取当前cell
const { graph } = this.flowGraph
const cell = graph.getCellById(nv)
 if (!cell || !cell.isNode()) {
       return
 }
this.cell=cell
// cell.attr是内置函数;获取属性或者获取指定路径上的属性值cell.attr('text/nodeType')；
cell.attr('text/nodeType')
// 设置指定路径上的属性值cell.attr('text/text', e.target.value)
this.cell.attr('text/text', e.target.value)