江苏龙网

  1. 主页 > 生活百科 > >

基于 vue3.x 的流程图绘制( 五 )

Vue3

最后更新状态 。
// 获取修正后的 x, y，还有吸附线的状态export const getAdsordXY = (coords: Set<number>[], x: number, y: number, w: number, h: number) => {const vals = hasAdsorbable(coords, x, y, w, h)let linex = nulllet liney = nullif (vals[0] !== null) { // xx += vals[0]linex = x} else if (vals[2] !== null) { // x + wx += vals[2]linex = x + w} else if (vals[4] !== null) { // x + w/2x += vals[4]linex = x + (w >> 1)}if (vals[1] !== null) { // yy += vals[1]liney = y} else if (vals[3] !== null) { // y + hy += vals[3]liney = y + h} else if (vals[5] !== null) { // y + h/2y += vals[5]liney = y + (h >> 1)}return {x, y, linex, liney}}复制代码撤销和恢复撤销和恢复的功能是比较简单的，其实就是用栈来保存每一次需要保存的配置结构，就是要考虑哪些操作是可以撤销和恢复的，就是像节点移动，节点的新增和删除，连接线的连接，连接线的备注新增和编辑等等，在相关的操作下面入栈即可 。
// 撤销和恢复操作const cacheComponentList = ref<WF.ComponentType[][]>([])const currentComponentIndex = ref(-1)// 撤销const undo = () => {componentRenderList.value = https://www.isolves.com/it/cxkf/qd/2022-06-05/JSON.parse(JSON.stringify(cacheComponentList.value[--currentComponentIndex.value]))// 更新视图updateCanvas(true)cancelSelected()}// 恢复const redo = () => {componentRenderList.value = JSON.parse(JSON.stringify(cacheComponentList.value[++currentComponentIndex.value]))// 更新视图updateCanvas(true)cancelSelected()}// 缓存入栈const chacheStack = () => {if (cacheComponentList.value.length - 1 > currentComponentIndex.value) {cacheComponentList.value.length = currentComponentIndex.value + 1}cacheComponentList.value.push(JSON.parse(JSON.stringify(componentRenderList.value)))currentComponentIndex.value++}复制代码

基于 vue3.x 的流程图绘制

文章插图
 
最后这里主要的已经差不多都写了，其实最红还有一个挺有用的功能还没有做 。就是改变已经绘制的连接线的起止点 。
这里的思路是：先选中需要改变起止点的连接线，然后把鼠标移动到起止点的位置，将它从已经绘制的状态改为正在绘制的状态，然后再选择它的开始位置或者结束位置 。这个后面看情况吧，有空就加上 。




推荐阅读


上一篇：详解java中float与double的区别

下一篇：Spring Boot与JAX-RS框架Jersey的完美搭配