vue + 原生JS开发的流程图组件

2022-04-20 269 阅读1分钟

vue-super-flow

一个基于 Vue 的在线流程编辑组件。
Demo
docs

安装

npm install vue-super-flow

yran add vue-spuer-flow

使用

import SuperFlow from 'vue-super-flow'
import 'vue-super-flow/lib/index.css'

Vue.use(SuperFlow)

算法解析

判断鼠标相对元素位置

首先获取元素中心位置；
计算元素左上角、右上角、右下角、左下角；
计算 4 角与中心点向量夹角；
计算鼠标位置与中心点的向量夹角；
使用计算得到的角度判断可以得到鼠标处于元素的哪个方向；

关于拖拽

记录 mousedown 时 clietX clientY，以及鼠标相对拖拽节点的 offsetTop offsetLeft 记录 node mousedown 状态。
mousemove 时判断 node mousedown状态并判断移动距离大于 5 时进入拖拽状态。进入拖拽状态后鼠标移动更新节点定位。定位元素公式为：top = clientY - Node.top - offsetTop left = clietX - Node.left - offsetLeft (node 的 top 和 left 通过 ElementNode.getBoundingClientRect() 获取)
mouseup 时移除鼠标按下状态移除拖拽状态并更新数据。

全局引用


import SuperFlow from 'vue-super-flow'
import 'vue-super-flow/lib/index.css'

Vue.use(SuperFlow)

局部引用

<template>
  <super-flow></super-flow>
</template>

<script >
  import SuperFlow from 'vue-super-flow' 
  import 'vue-super-flow/lib/index.css'
  export default {
    components: {SuperFlow}   
  } 
</script>

友情链接：