1.3.16 • Published 3 years ago

vue-flow-raku v1.3.16

Weekly downloads
-
License
MIT
Repository
-
Last release
3 years ago

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

属性类型默认值描述
draggableBooleantrue是否开启节点拖拽
linkAddableBooleantrue是否开启快捷创建 link
linkEditableBooleantruelink 是否可编辑
hasMarkLineBooleantrue是否开启拖拽辅助线
markLineColorString#55abfc辅助线颜色
originArray[0, 0]graph 的二维坐标系原点
nodeListArray[]初始化节点列表
linkListArray[]初始化连线列表
graphMenuArray[]graph 的右键菜单列表配置
nodeMenuArray[]node 右键菜单列表配置
linkMenuArray[]link 右键菜单配置
enterInterceptFunction() => true创建连线进入节点限制
outputInterceptFunction() => true节点生成连线限制函数
linkDescFunctionnull生成 link 定制描述文字
linkStyleFunctionnull根据 link 定制样式
linkBaseStyleObject{}连线默认样式配置

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----
toJSONgraph 对象转为普通 json 对象----
getMouseCoordinate获取当前鼠标在 graph 坐标系的坐标clientX, clientY
addNode添加节点options
1.3.14

3 years ago

1.3.15

3 years ago

1.3.16

3 years ago

1.3.13

3 years ago

1.3.12

3 years ago

1.3.11

3 years ago

1.3.10

3 years ago

1.3.8

3 years ago