流程图整体操作事件汇总
首先开启画布撤销/重做能力。再调用对应方法
// 配置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)
首先获取到当前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)
}
graph.toJSON()
组件结构
<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)
| 
转播
