使用说明
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:
