kGraph
定制化实现流程绘制工具
特点
- 基于antv g6的二次开发
安装
npm install kgraph
开始
最简单的例子
import kg from './kgraph'
const graph = new kg.Graph()
配置项 / Options
container
string HTMLElement
选择器 or dom对象，默认body，设置则在指定容器内初始化组件。
canvas
string HTMLElement
选择器 or dom对象，不指定则默认生成一个canvas并插入容器中，宽高自适应容器大小
width
number
宽度，默认撑满全屏
height
number
高度，默认撑满全屏
diagramWidth
number
绘图范围宽度，默认 800
diagramHeight
number
绘图范围高度，默认 400
fitcanvas
boolean
绘图范围是否默认撑满画布。默认true。
指定true时绘制范围小于画布的时候会撑满画布。
指定false时绘制范围尺寸为指定高度宽度。
originRatio
number
分辨率(较低值在高分辨率显示器下会模糊)，默认2
enableRubberband
boolean
rubberhand 多个框选功能
enableScroll
boolean
滚动条, 默认true
bgColor
string
画布背景色，默认#000
网格配置项 Options - Grid
网格配置
grid.show
boolean
启用网格，默认false
grid.align
boolean
网格对齐，默认false
grid.size
number
网格大小，默认10
API
Graph.addItem( type, options )
-
参数:
- { String } type 节点类型
- { Object } options 节点配置
-
用法:
const graph = new kg.Graph() const shape = {} // 参考式样配置 const parentId = '' // 父级节点的ID graph.addItem('outline', { cfgKey: 'outline', // 配置对应的key x: 0, // 节点所处的X轴坐标 y: 0, // 节点所处的Y轴坐标 parent: parentId, ...shape })
Graph.updateItem(item, options)
-
参数:
- { Item } item 节点实例
- { Object } options 节点配置
-
用法:
item为新增完成的节点实例，options与addItem相同
Graph.remove( Id )
-
参数:
- { String } Id 节点ID
-
用法:
const graph = new kg.Graph() const item = graph.addItem({}) const id = item.get('id') graph.removeItem(id)
Graph.abandonRemoveItem()
- 用法: 阻止删除节点的操作，搭配beforeRemoveItem钩子使用
Graph.clear()
-
用法:
清空画布绘制内容
Graph.clearData()
-
用法:
清空画布数据
Graph.getData()
-
用法:
获取画布数据，可用于画布回显
Graph.getBox()
-
用法:
获取container的BoundingClientRect
Graph.findById(ID)
-
用法:
通过ID获取节点
Graph.findShapeById(ID)
-
用法:
通过ID获取Shape
Graph.changeSize(width, height)
-
用法:
改变画布容器大小
Graph.getPointByClient(x, y)
-
用法 :
通过x,y，获取窗口内的点
Graph.getPointByClient(x, y)
-
用法 :
通过x,y，获取画布内的点
Graph.setAutoPaint( Flag )
-
参数:
- { Boolean } flag
-
用法:
是否自定绘制，addItem、updatePosition等操作会触发自动绘制
graph.setAutoPaint(false)
Graph.autoPaint()
-
用法:
绘制一次画布
基础节点
节点类型
- Node // 各种 自己理解
- Edge // 线
- Anchor // 锚点
Vue节点
组件 test
<template>
<div>{{ a }}</div>
</template>
<script></script>
<style><style>
-
1.通过$vue.create创建vue对象，指定parent后插入，可以配合afterAddItem使用
const graph = kg.Graph(options) graph.add({ props: { vue: { props: { a: 1 } } } }) graph.on('afterAddItem', item => { graph.$vue.create({ parent: item component: test, item.get('props').vue }) }) -
2: node类型节点，配置vueComponent。
const graph = kg.Graph(options) graph.add({ vueComponent: test, props: { vue: { props: { a: 1 } } } })
注册节点
自定义节点类型
式样配置
<!--节点的样式-->
rect: {
// 基础样式
shape: {
type: 'rect', // 形状
size: [50, 50], // 宽高，circle只需要填一个
style: { }, // 参考canvas的样式属性 lineWidth fill strokeStyle ..
},
// 节点不同状态下对应的样式
stateShapeMap: {
default: {
type: 'rect',
size: [50, 50],
style: {
stroke: '#00678a',
fill: '#eee',
lineWidth: 2,
}
},
hover: {
type: 'rect',
size: [50, 50],
style: {
stroke: '#00678a',
fill: '#000',
lineWidth: 2,
}
}
},
// 自定义属性
props: {
key: 'start',
value: 'Start'
},
anchorOffset: {}, // 锚点偏移
anchorMatrix: [[0.5, 0], [1, 0.5], [0.5, 1], [0, 0.5]], // 锚点 matrix
labelCfg: {
content: '', // label内容
offsetX: 0, // 相对偏移x 相对的是新增节点的中心坐标
offsetY: 60, // 相对偏移y 相对的是新增节点的中心坐标
style: {
color: '#F00',
size: '14px'
},
hidden: true // 是否显示label
},
event: true // 是否对节点绑定上所有画布事件
eventArea: { r: 10 } // 节点的事件范围，不配置则以节点size作为事件范围
}
事件监听
/*
* type: 参考下方事件列表及内置钩子
* fn: 回调函数
* 默认阻止一切冒泡
*/
graph.on(type, fn)
事件触发
/*
* type: 参考下方事件列表及内置钩子
*/
graph.emit(type)
全局事件
| 名称 | 说明 | 回调参数 |
|---|---|---|
| click | 单击 | event |
| dblclick | 双击 | event |
| contextmenu | 右键菜单 | event |
| mousedown | 鼠标按下 | event |
| mouseup | 鼠标松开 | event |
| mouseenter | 鼠标移入 | event |
| mouseleave | 鼠标移出 | event |
| mousemove | 鼠标移动 | event |
| focus | 焦点在画布上 | event |
| blur | 焦点移出画布 | event |
节点事件
| 名称 | 说明 | 回调参数 |
|---|---|---|
| click | 单击 | event |
| dblclick | 双击 | event |
| contextmenu | 右键菜单 | event |
| mousedown | 鼠标按下 | event |
| mouseup | 鼠标松开 | event |
| mouseenter | 鼠标移入 | event |
| mouseout | 鼠标移出 | event |
| mouseover | 鼠标移入 | event |
| mousemove | 鼠标移动 | event |
| mouseleave | 鼠标移出 | event |
| dragstart | 拖拽开始 | event |
| dragend | 拖拽结束 | event |
| drag | 拖拽中 | event |
| dragenter | 拖拽进入 | event |
| dragleave | 拖拽离开 | event |
| drop | 放下 | event |
| focus | 聚焦在节点上 | event |
| blur | 焦点离开节点 | event |
回调参数Event
| 名称 | 说明 |
|---|---|
| type | 事件类型 |
| origin | 原生event |
| items | 触发时间的节点列表 |
| clientX | 画布中的绝对坐标X |
| clientY | 画布中的绝对坐标Y |
| target | 监听事件的节点对象 |
内置钩子
| 名称 | 说明 | 回调参数 |
|---|---|---|
| beforeAddItem | 节点添加前 | config 配置参数 |
| afterAddItem | 节点添加后 | item 节点 |
| beforeAddShape | 图形添加前 | |
| afterAddShape | 图形添加后 | |
| beforeUpdateItem | 节点更新前 | item 节点 config 配置参数 |
| afterUpdateItem | 节点更新后 | item 节点 |
| beforeRemoveItem | 节点删除前 | item 作用节点 |
| afterRemoveItem | 节点删除后 | item 已删节点 |
| beforePaint | 流程绘制前 | |
| afterPaint | 流程绘制后 |