使用說明
import GGEditor, { Flow } from 'gg-editor'; <GGEditor> <Flow /> </GGEditor>
API
| 屬性 | 說明 | 類型 | 默認值 |
|---|---|---|---|
| data | 初始數據 | object |
- |
| graph | 圖配置項，參考 G6 Graph API | object |
- |
| align | 對齊配置 | object |
- |
| grid | 網格線配置 | object |
- |
| shortcut | 快捷鍵配置，內置命令 | object |
- |
| noEndEdge | 是否支持懸空邊 | boolean |
true |
Align
| 屬性 | 說明 | 類型 | 默認值 |
|---|---|---|---|
| line | 對齊線樣式 | object |
- |
| item | 圖項對齊 | true false horizontal vertical center |
- |
| grid | 網格對齊 | true false cc tl |
- |
Grid
| 屬性 | 說明 | 類型 | 默認值 |
|---|---|---|---|
| cell | 網孔尺寸 | number |
- |
| line | 網格線樣式 | object |
- |
Shortcut
示例：
shortcut: { zoomIn: true, // 開啟放大快捷鍵 zoomOut: false, // 開啟視口縮小快捷鍵 }
Events
請移步至 PageEvents 查看詳情
監聽事件
import GGEditor, { Flow } from 'gg-editor'; <GGEditor> <Flow onClick={(e) => { console.log(e); }} /> </GGEditor>
事件對象
| 屬性屬性 | 屬性說明 |
|---|---|
| action | 動作包括：add、update、remove、changeData |
| item | 圖項 |
| shape | 圖形 |
| x | 圖橫坐標 |
| y | 圖縱坐標 |
| domX | dom 橫坐標 |
| domY | dom 縱坐標 |
| domEvent | 原生 dom 事件 |
| currentItem | drag 拖動圖項 |
| currentShape | drag 拖動圖形 |
| toShape | mouseleave、dragleave 到達的圖形 |
| toItem | mouseleave、dragleave 到達的圖項 |
事件列表
組合事件
此類事件可以結合前綴 node、edge、group、guide、anchor 組合使用，例如：
import GGEditor, { Flow } from 'gg-editor'; <GGEditor> <Flow onClick={() => {}} // 點擊畫布 onNodeClick={() => {}} // 點擊節點 onEdgeClick={() => {}} // 點擊邊線 onGroupClick={() => {}} // 點擊群組 onGuideClick={() => {}} // 點擊導引 onAnchorClick={() => {}} // 點擊錨點 /> </GGEditor>
| 事件名稱 | 事件說明 |
|---|---|
| onClick | 鼠標左鍵點擊事件 |
| onDoubleClick | 鼠標左鍵雙擊事件 |
| onMouseEnter | 鼠標移入事件 |
| onMouseLeave | 鼠標移除事件 |
| onMouseDown | 鼠標按下事件 |
| onMouseUp | 鼠標抬起事件 |
| onMouseMove | 鼠標移動事件 |
| onDragStart | 鼠標開始拖拽事件 |
| onDrag | 鼠標拖拽事件 |
| onDragEnd | 鼠標拖拽結束事件 |
| onDragEnter | 鼠標拖拽進入事件 |
| onDragLeave | 鼠標拖拽移出事件 |
| onDrop | 鼠標拖拽放置事件 |
| onContextMenu | 鼠標右鍵菜單事件 |
普通事件
| 事件名稱 | 事件說明 |
|---|---|
| onMouseWheel | 鼠標滾輪事件 |
| onKeyDown | 鍵盤按鍵按下事件 |
| onKeyUp | 鍵盤按鍵抬起事件 |
| onBeforeChange | 子項數據變化前 |
| onAfterChange | 子項數據變化后 |
| onBeforeChangeSize | 畫布尺寸變化前 |
| onAfterChangeSize | 畫布尺寸變化后 |
| onBeforeViewportChange | 視口變化前 |
| onAfterViewportChange | 視口變化后 |
| onBeforeItemActived | 激活前 |
| onAfterItemActived | 激活后 |
| onBeforeItemInactivated | 取消激活前 |
| onAfterItemInactivated | 取消激活后 |
| onBeforeItemSelected | 選中前 |
| onAfterItemSelected | 選中后 |
| onBeforeItemUnselected | 取消選中前 |
| onAfterItemUnselected | 取消選中后 |
| onKeyUpEditLabel | 鍵盤按鍵抬起事件（節點編輯） |
G6: