Flow
流程图
使用说明
import GGEditor, { Flow } from 'gg-editor'; <GGEditor> <Flow /> </GGEditor>
API
| 属性 |
说明 |
类型 |
默认值 |
版本 |
||
| data |
图表数据 |
object |
{ nodes: [], edges: [], } |
|
||
| graphConfig |
图表配置，查看详情 |
object |
- |
|||
| customModes |
模式配置 |
Function |
- |
|
||
通用事件
| 属性 |
说明 |
|||||
| onClick |
单击鼠标左键或者按下回车键时触发 | |||||
| onDoubleClick |
双击鼠标左键时触发 | |||||
| onMouseEnter |
鼠标移入元素范围内触发，该事件不冒泡，即鼠标移到其后代元素上时不会触发 | |||||
| onMouseMove |
鼠标在元素内部移到时不断触发，不能通过键盘触发 | |||||
| onMouseOut |
鼠标移出目标元素后触发 | |||||
| onMouseOver |
鼠标移入目标元素上方，鼠标移到其后代元素上时会触发 | |||||
| onMouseLeave |
鼠标移出元素范围时触发，该事件不冒泡，即鼠标移到其后代元素时不会触发 | |||||
| onMouseDown |
鼠标按钮被按下（左键或者右键）时触发，不能通过键盘触发 | |||||
| onMouseUp |
鼠标按钮被释放弹起时触发，不能通过键盘触发 | |||||
| onContextMenu |
用户右击鼠标时触发并打开上下文菜单 | |||||
| onDragStart |
当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上 | |||||
| onDrag |
当拖拽元素在拖动过程中时触发的事件，此事件作用于被拖拽元素上 | |||||
| onDragEnd |
当拖拽完成后触发的事件，此事件作用在被拖曳元素上 | |||||
| onDragEnter |
当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上 | |||||
| onDragLeave |
当拖曳元素离开目标元素的时候触发的事件，此事件作用在目标元素上 | |||||
| onDrop |
被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上 | |||||
| onKeyDown |
按下键盘键触发该事件 | |||||
| onKeyUp |
释放键盘键触发该事件 | |||||
| onTouchStart |
当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发 | |||||
| onTouchMove |
当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。 | |||||
| onTouchEnd |
当手指从屏幕上离开的时候触发 | |||||
节点事件
| 属性 |
说明 |
|||||
| onNodeClick | 鼠标左键单击节点时触发 | |||||
| onNodeDoubleClick | 鼠标双击左键节点时触发 | |||||
| onNodeMouseEnter | 鼠标移入节点时触发 | |||||
| onNodeMouseMove | 鼠标在节点内部移到时不断触发，不能通过键盘触发 | |||||
| onNodeMouseOut | 鼠标移出节点后触发 | |||||
| onNodeMouseOver | 鼠标移入节点上方时触发 | |||||
| onNodeMouseLeave | 鼠标移出节点时触发 | |||||
| onNodeMouseDown | 鼠标按钮在节点上按下（左键或者右键）时触发，不能通过键盘触发 | |||||
| onNodeMouseUp | 节点上按下的鼠标按钮被释放弹起时触发，不能通过键盘触发 | |||||
| onNodeContextMenu | 用户在节点上右击鼠标时触发并打开右键菜单 | |||||
| onNodeDragStart | 当节点开始被拖拽的时候触发的事件，此事件作用在被拖曳节点上 | |||||
| onNodeDrag | 当节点在拖动过程中时触发的事件，此事件作用于被拖拽节点上 | |||||
| onNodeDragEnd | 当拖拽完成后触发的事件，此事件作用在被拖曳节点上 | |||||
| onNodeDragEnter | 当拖曳节点进入目标元素的时候触发的事件，此事件作用在目标元素上 | |||||
| onNodeDragLeave | 当拖曳节点离开目标元素的时候触发的事件，此事件作用在目标元素上 | |||||
| onNodeDrop | 被拖拽的节点在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上 | |||||
边线事件
| 属性 |
说明 |
|||||
| onEdgeClick | 鼠标左键单击边时触发 | |||||
| onEdgeDoubleClick | 鼠标双击左键边时触发 | |||||
| onEdgeMouseEnter | 鼠标移入边时触发 | |||||
| onEdgeMouseMove | 鼠标在边上移到时不断触发，不能通过键盘触发 | |||||
| onEdgeMouseOut | 鼠标移出边后触发 | |||||
| onEdgeMouseOver | 鼠标移入边上方时触发 | |||||
| onEdgeMouseLeave | 鼠标移出边时触发 | |||||
| onEdgeMouseDown | 鼠标按钮在边上按下（左键或者右键）时触发，不能通过键盘触发 | |||||
| onEdgeMouseUp | 边上按下的鼠标按钮被释放弹起时触发，不能通过键盘触发 | |||||
| onEdgeContextMenu | 用户在边上右击鼠标时触发并打开右键菜单 | |||||
画布事件
| 属性 |
说明 |
|||||
| onCanvasClick | 鼠标左键单击画布时触发 | |||||
| onCanvasDoubleClick | 鼠标双击左键画布时触发 | |||||
| onCanvasMouseEnter | 鼠标移入画布时触发 | |||||
| onCanvasMouseMove | 鼠标在画布内部移到时不断触发，不能通过键盘触发 | |||||
| onCanvasMouseOut | 鼠标移出画布后触发 | |||||
| onCanvasMouseOver | 鼠标移入画布上方时触发 | |||||
| onCanvasMouseLeave | 鼠标移出画布时触发 |
|||||
| onCanvasMouseDown | 鼠标按钮在画布上按下（左键或者右键）时触发，不能通过键盘触发 | |||||
| onCanvasMouseUp | 画布上按下的鼠标按钮被释放弹起时触发，不能通过键盘触发 | |||||
| onCanvasContextMenu | 用户在画布上右击鼠标时触发并打开右键菜单 | |||||
| onCanvasDragStart | 当画布开始被拖拽的时候触发的事件，此事件作用在被拖曳画布上 | |||||
| onCanvasDrag | 当画布在拖动过程中时触发的事件，此事件作用于被拖拽画布上 | |||||
| onCanvasDragEnd | 当拖拽完成后触发的事件，此事件作用在被拖曳画布上 | |||||
| onCanvasDragEnter | 当拖曳画布进入目标元素的时候触发的事件，此事件作用在目标元素上 | |||||
| onCanvasDragLeave | 当拖曳画布离开目标元素的时候触发的事件，此事件作用在目标元素上 | |||||
时机监听
| 属性 |
说明 |
|||||
| onBeforeAddItem | 调用add / addItem方法之前触发 | |||||
| onAfterAddItem | 调用add / addItem方法之后触发 | |||||
| onBeforeRemoveItem | 调用remove / removeItem方法之前触发 | |||||
| onAfterRemoveItem | 调用remove / removeItem方法之后触发 | |||||
| onBeforeUpdateItem | 调用update / updateItem方法之前触发 | |||||
| onAfterUpdateItem | 调用update / updateItem方法之后触发 | |||||
| onBeforeItemVisibilityChange | 调用showItem / hideItem方法之前触发 | |||||
| onAfterItemVisibilityChange | 调用showItem / hideItem方法之后触发 | |||||
| onBeforeItemStateChange | 调用setItemState方法之前触发 | |||||
| onAfterItemStateChange | 调用setItemState方法之后触发 |
|||||
| onBeforeRefreshItem | 调用refreshItem方法之前触发 | |||||
| onAfterRefreshItem | 调用refreshItem方法之后触发 | |||||
| onBeforeItemStatesClear | 调用clearItemStates方法之前触发 | |||||
| onAfterItemStatesClear | 调用clearItemStates方法之后触发 | |||||
| onBeforeLayout | 布局前触发。调用 render 时会进行布局，因此 render 时会触发。或用户主动调用图的 layout 时触发。 | |||||
| onAfterLayout | 布局完成后触发。调用 render 时会进行布局，因此 render 时布局完成后会触发。或用户主动调用图的 layout 时布局完成后触发。 | |||||