0.3.17 • Published 5 years ago
node-editor-core v0.3.17
node-editor-core
基于 G6 封装的节点编辑器核心组件
- 支持的节点类型：圆形、矩形、菱形、文本、图片
- 支持的连线类型：直线、折线、曲线
示例
<NodeEditorCore
mode="edit"
rankdir="LR"
:ranksep="200"
:tooltip="tooltip"
:showGrid="true"
edgeType="line"
:data="chartData"
@changeSelected="changeSelected"
@changeData="changeData"
@click="click"
@dblclick="dblclick"
@contextmenu="contextmenu"
/>数据结构
chartData: {
nodes: [
{
id: 'node1', // 节点ID
shape: 'circle', // 节点类型：'circle'、'rect'、'rhombus'、'text'、'image url'
size: [100, 100], // [width, height]
style: { // 可选，没有则使用默认样式
fill: 'red', // 节点颜色
stroke: 'blue', // 节点边框颜色
lineWidth: 1 // 节点边框大小
},
label: { // 可选，没有则不显示
text: '文本标签', // 文字内容
fill: 'green', // 文字颜色
fontSize: 14 // 文字大小
},
x: 200, // 节点x坐标
y: 200 // 节点y坐标
},
{
id: 'node2',
shape: 'text',
label: {
text: '文本标签',
fill: 'green',
fontSize: 12
},
x: 400,
y: 200
},
{
id: 'node3',
shape: 'image',
image: 'https://www.baidu.com/img/bd_logo1.png',
size: [100, 50],
label: {
text: '文本标签',
fill: 'green',
fontSize: 16
},
x: 500,
y: 300
}
],
edges: [
{
id: 'edge1', // 连线ID
shape: 'line', // 连线类型：'line'、'smooth'、'polyLineFlow'
source: 'node1', // 连线的起始节点ID
target: 'node2', // 连线的终止节点ID
style: { // 可选，没有则使用默认样式
stroke: 'blue', // 连线颜色
lineWidth: 2, // 连线的粗细
lineDash: [5, 2], // 显示成虚线
arrow: true // 是否显示箭头
},
label: { // 可选，没有则不显示
text: '文本标签', // 文字内容
fill: 'green', // 文字颜色
fontSize: 12 // 文字大小
}
}
]
}Props
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| mode | String | 'default' | 可选的值：'edit'、'view'，编辑器模式下分'default'和'edit'两种状态；部分项目只需要展示数据，节点不包括x\y值，提供'view'供使用。 |
| data.node, data.edges | object | 图的数据。 | |
| rankdir | String | 'LR' | 可选的值：'TB'、'BT'、'LR'、'RL'，分别为从上到下、从下到上、从左到右、从右到左。mode为'view'状态下可能会用到。 |
| ranksep | Number | 100 | 两个节点之间连线的长度 |
| showGrid | Boolean | false/object | 是否显示网格线，mode为'edit'模式下会有用。 |
| autoZoom | Boolean | false | 是否缩放显示。 |
| tooltip | Array | 是否显示Tooltip，不传则不显示。参数为二维数组，每个数组的第一项为显示的文本，第二项为字段名。 | |
| edgeLabelRectFill | String | 'transparent' | 线上文字的背景色，默认是透明色。 |
| edgeType | String | 'line' | 可选的值：'line'、 'smooth'、 'polyLineFlow' |
| chartType | String | 'flowchart' | 可选的值：'tree'、'undirected' |
Events
| 名称 | 参数 | 描述 |
|---|---|---|
| click | value | 鼠标单击时触发。点击节点、连线返回被点击元素的数据；点击空白区域只返回x、y坐标。 |
| dblclick | value | 鼠标双击时触发。点击节点、连线返回被点击元素的数据；点击空白区域只返回x、y坐标。 |
| contextmenu | value | 右键单击时触发。点击节点、连线返回被点击元素的数据；点击空白区域只返回x、y坐标。 |
| changeSelected | value | 已选择元素被更新时出发。返回值是当前已选择元素的列表。 |
| changeChartData | value | 图的数据被更新时触发。返回值是当前最新的数据。 |
| getSelected | () => Object，获取当前实例中的 selected 对象 | |
| getChartData | () => Object，获取当前实例中的chart data 对象 | |
Methods
| 名称 | 描述 |
|---|---|
| addNode() | 添加节点 |
| update() | 更新节点或边 |
| del() | 删除节点或边 |
| undo() | 撤销 |
| redo() | 还原 |
| copy() | 复制 |
| getSelected() | 获取当前选中元素 |
| getChartData() | 获取当前图的数据 |
| resetZoom() | 重置缩放 |
| changeMode() | 更改模式 |
To Do
- 数据格式优化
- 支持树形图、导向图等不同展示类型
- 空白区域支持右键菜单
- 节点 单击选中 双击打开菜单制定项 右键展开列表
- 节点编辑规则、全局模式，谁的优先级高？
- 特定节点支持锁定，如允许拖动、编辑、连线数量、连线进出等
- 提供当前元素符合条件的关联元素
- 取消 mode 模式，由单个元素控制
- 所有的方法执行前后增加事件
- 事件名称规范一些
grid config
开始节点和结束节点 一个只能出 一个只能进 且一条
- 开始节点的后一个节点只能进一次
- 结束节点的前一个节点只能出一次
{
outEdgeNum: 1,
inEdgeNum: 1,
dragable: true,
delable: true,
resizeable: true,
activeable: true
}