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 時布局完成后觸發。 | |||||