vue-super-flow

• A flowchart editor component base on Vue.
• Vue flowchart.
• Vue 流程图。
• Demo
• docs

Installation

npm install vue-super-flow

yarn add vue-super-flow

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

Vue.use(SuperFlow)

Attributes

| 属性 | 类型 | 默认值 | 描述 | |---------------------------------|------------|--------------|-------------------| | relationMark | String | "id" | 可个性化 node 的标识 | | startMark | String | "startId" | 可个性化 link 的起始标识 | | endMark | String | "endId" | 可个性化 link 的终点标识 | | draggable | Boolean | true | 是否开启节点拖拽 | | linkAddable | Boolean | true | 是否开启快捷创建 link | | linkEditable | Boolean | true | link 是否可编辑 | | hasMarkLine | Boolean | true | 是否开启拖拽辅助线 | | markLineColor | String | #55abfc | 辅助线颜色 | | origin | Array | [0, 0] | graph 的二维坐标系原点 | | nodeList | Array | [] | 初始化节点列表 | | linkList | Array | [] | 初始化连线列表 | | graphMenu | Array | [] | graph 的右键菜单列表配置 | | nodeMenu | Array | [] | node 右键菜单列表配置 | | linkMenu | Array | [] | link 右键菜单配置 | | enterIntercept | Function | () => true | 创建连线进入节点限制 | | outputIntercept | Function | () => true | 节点生成连线限制函数 | | linkDesc | Function | null | 生成 link 定制描述文字 | | linkStyle | Function | null | 根据 link 定制样式 | | linkBaseStyle | Object | {} | 连线默认样式配置 |

linkDesc

function linkDesc (link) {
  /**
   根据 link 对象的属性判断定制连线描述
   */
  return link.meta ? link.meta.info : ''
}

linkBaseStyle

/*
// 内置默认样式配置
{
   hover: '#FF0000',        // 连线 hover 时颜色
   color: '#666666',        // 连线颜色
   textColor: '#666666',    // 连线描述文字颜色
   textHover: '#FF0000',    // 连线 hover 时描述文字颜色
   font: '14px Arial',      // 连线 描述文字 font 参考 https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/font
   dotted: false,           // 连线 是否是虚线
   lineDash: [4, 4],        // 为虚线时 虚线参数  参考：https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/setLineDash
   background: 'rgba(255,255,255,0.6)'  // 描述文字背景  
}
*/

{
  // ... 可选属性 参考内置默认样式 用来覆盖连线样式的默认值
}

linkStyle

function linkStyle (link) {
  /**
   根据 link 对象的属性判断定制连线样式
   */
  return {
    // ... 可选属性 参考：[linkBaseStyle](#linkBaseStyle)
  }
}

Methods

| 方法名 | 说明 | 参数 | |--------------------|--------------------------|------------------| | selectAll | 选中所有进行拖拽修改 origin | ---- | | toJSON | 将 graph 对象转为普通 json 对象 | ---- | | getMouseCoordinate | 获取当前鼠标在 graph 坐标系的坐标 | clientX, clientY | | addNode | 添加节点 | options |

Example