ggEditor FLow API

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 时布局完成后触发。