react+antvX6制作可编辑图表6——节点和边的交互前情提要：上一期我们讲了连接柱Port，这一期我们讲一讲节点和

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。

前情提要： 上一期我们讲了连接柱Port，这一期我们讲一讲节点和边的交互。

调整节点大小、旋转角度

节点可以调整大小，角度，最大最小的调整高度，限制节点的移动范围等内容，具体选项内容点这里

连线规则

迫不及待的想讲讲这个连线规则了，定义连线规则后，就会实现你想要的连线模式了。下方这些选项你都可以在创建graph示例时，在connecting中进行配置。

选项

snap

当 snap 设置为 true 时连线的过程中距离节点或者连接桩 50px 时会触发自动吸附，可以通过配置 radius 属性自定义触发吸附的距离。当 snap 设置为 false 时不会触发自动吸附。默认值为 false。

const graph = new Graph({
  connecting: {
    snap: true,
  }
})
// 等价于
const graph = new Graph({
  connecting: {
    snap: {
      radius: 50,
    },
  }
})

allowBlank

是否允许连接到画布空白位置的点，默认为 true。

allowMulti

是否允许在相同的起始节点和终止之间创建多条边，默认为 true。当设置为 false 时，在起始和终止节点之间只允许创建一条边，当设置为 'withPort' 时，在起始和终止节点的相同链接桩之间只允许创建一条边（即，起始和终止节点之间可以创建多条边，但必须要要链接在不同的链接桩上）。支持以下三种形式：

boolean
withPort
((this: Graph, args: ValidateConnectionArgs) => boolean)

其他

选项	选项值
allowLoop	是否允许创建循环连线，即边的起始节点和终止节点为同一节点，默认为 `true`。
allowNode	是否允许边链接到节点（非节点上的链接桩），默认为 `true`。
allowEdge	是否允许边链接到另一个边，默认为 `true`。
allowPort	是否允许边链接到链接桩，默认为 `true`。
highlight	拖动边时，是否高亮显示所有可用的连接桩或节点，默认值为 `false`。我觉得这个高亮开启还是会比较好看。
anchor	当连接到节点时，通过 `anchor` 来指定被连接的节点的锚点，默认值为 `center`。
sourceAnchor	当连接到节点时，通过 `sourceAnchor` 来指定源节点的锚点。
targetAnchor	当连接到节点时，通过 `targetAnchor` 来指定目标节点的锚点。
edgeAnchor	当连接到边时，通过 `edgeAnchor` 来指定被连接的边的锚点，默认值为 `ratio`。
sourceEdgeAnchor	当连接到边时，通过 `sourceEdgeAnchor` 来指定源边的锚点。
targetEdgeAnchor	当连接到边时，通过 `targetEdgeAnchor` 来指定目标边的锚点。
connectionPoint	指定连接点，默认值为 `boundary`。
sourceConnectionPoint	连接源的连接点。
targetConnectionPoint	连接目标的连接点。
router	路由将边的路径点 `vertices` 做进一步转换处理，并在必要时添加额外的点，然后返回处理后的点，默认值为 `normal`。
connector	连接器将起点、路由返回的点、终点加工为元素的 d 属性，决定了边渲染到画布后的样式，默认值为 `normal`。	createEdge	连接的过程中创建新的边
validateMagnet	点击 `magnet` 时根据 `validateMagnet` 返回值来判断是否新增边，触发时机是 `magnet` 被按下，如果返回 `false`，则没有任何反应，如果返回 `true`，会在当前 `magnet` 创建一条新的边。validateMagnet({ e, magnet, view, cell }) {return false}
validateConnection	在移动边的时候判断连接是否有效，如果返回 `false`，当鼠标放开的时候，不会连接到当前元素，否则会连接到当前元素。
validateEdge	当停止拖动边的时候根据 `validateEdge` 返回值来判断边是否生效，如果返回 `false`, 该边会被清除。

定制交互行为

可以在全局配置 interacting 定制节点和边的交互行为，interacting 的类型定义如下：

const graph = new Graph({
  container: this.container,
  width: 800,
  height: 1400,
  grid: 10,
  interacting: function (cellView: CellView) {
    if (cellView.cell.getData().disableMove) {
      return { nodeMovable: false }
    }
    return true
  },
})

interacting 的配置支持下面三种方式：

boolean 节点或边是否可交互
InteractionMap 节点或边的交互细节，支持以下属性，每个属性支持boolean 和 (this: Graph, cellView: CellView) => boolean 两种定义：
- 'nodeMovable' 节点是否可以被移动。
- 'magnetConnectable' 当在具有 'magnet' 属性的元素上按下鼠标开始拖动时，是否触发连线交互。
- 'edgeMovable' 边是否可以被移动。
- 'edgeLabelMovable' 边的标签是否可以被移动。
- 'arrowheadMovable' 边的起始/终止箭头是否可以被移动。
- 'vertexMovable' 边的路径点是否可以被移动。
- 'vertexAddable' 是否可以添加边的路径点。
- 'vertexDeletable' 边的路径点是否可以被删除。
(this: Graph, cellView: CellView) => InteractionMap | boolean