GGEditor 使用

使用说明

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:

https://www.yuque.com/antv/g6/custom-edge