交互
X6 最吸引开发者的地方是具备非常完整的交互定制能力，在此基础上，我们可以实现非常多的复杂效果。下面列举常见的交互行为。
连线
通过配置 connecting 可以实现丰富的连线交互。使用方式如下：
const graph = new Graph({
...,
connecting: {
snap: true,
}
})下面分别介绍 connecting 支持的配置。
snap
snap: boolean | { radius: number, anchor: 'center' | 'bbox' }当 snap 设置为 true 或者 false 代表开启和关闭连线过程中自动吸附，开启时距离目标 50px 是触发吸附。可以通过配置 radius 属性来自定义吸附半径。
const graph = new Graph({
connecting: {
snap: true,
},
})
// 等价于
const graph = new Graph({
connecting: {
snap: {
radius: 50,
},
},
})当计算distance用于判断是否吸附到节点时，默认基于节点的中心，可以通过配置 anchor 为 bbox 改为基于节点的包围盒子计算距离。
allowBlank
allowBlank: boolean | ((this: Graph, args: ValidateConnectionArgs) => boolean)是否允许连接到画布空白位置的点，默认为 true，也支持通过函数的方式来动态调整。
const graph = new Graph({
connecting: {
allowBlank() {
// 根据条件返回 true or false
return true
},
},
})allowLoop
allowLoop: boolean | ((this: Graph, args: ValidateConnectionArgs) => boolean)是否允许创建循环连线，即边的起始节点和终止节点为同一节点，默认为 true 。
allowNode
allowNode: boolean | ((this: Graph, args: ValidateConnectionArgs) => boolean)是否允许边连接到节点（非节点上的连接桩），默认为 true 。
allowEdge
allowEdge: boolean | ((this: Graph, args: ValidateConnectionArgs) => boolean)是否允许边链接到另一个边，默认为 true 。
allowPort
allowPort: boolean | ((this: Graph, args: ValidateConnectionArgs) => boolean)是否允许边链接到连接桩，默认为 true 。
allowMulti
allowMulti: boolean |
'withPort' |
((this: Graph, args: ValidateConnectionArgs) => boolean)是否允许在相同的起始节点和终止之间创建多条边，默认为 true 。当设置为 false 时，在起始和终止节点之间只允许创建一条边，当设置为 'withPort' 时，在起始和终止节点的相同连接桩之间只允许创建一条边（即，起始和终止节点之间可以创建多条边，但必须要要链接在不同的连接桩上）。
highlight
highlight: boolean拖动边时，是否高亮显示所有可用的连接桩或节点，默认值为 false 。一般都会与 highlighting 联合使用。
anchor
anchor: NodeAnchorOptions当连接到节点时，通过 anchor 来指定被连接的节点的锚点，默认值为 center 。
sourceAnchor
sourceAnchor?: NodeAnchorOptions当连接到节点时，通过 sourceAnchor 来指定源节点的锚点。
targetAnchor
targetAnchor?: NodeAnchorOptions当连接到节点时，通过 targetAnchor 来指定目标节点的锚点。
edgeAnchor
edgeAnchor: EdgeAnchorOptions当连接到边时，通过 edgeAnchor 来指定被连接的边的锚点，默认值为 ratio 。
sourceEdgeAnchor
sourceEdgeAnchor?: EdgeAnchorOptions当连接到边时，通过 sourceEdgeAnchor 来指定源边的锚点。
targetEdgeAnchor
targetEdgeAnchor?: EdgeAnchorOptions当连接到边时，通过 targetEdgeAnchor 来指定目标边的锚点。
connectionPoint
connectionPoint: ConnectionPointOptions指定连接点，默认值为 boundary 。
sourceConnectionPoint
sourceConnectionPoint?: ConnectionPointOptions连接源的连接点。
targetConnectionPoint
targetConnectionPoint?: ConnectionPointOptions连接目标的连接点。
router
router: string | Router.NativeItem | Router.ManaualItem路由将边的路径点 vertices 做进一步转换处理，并在必要时添加额外的点，然后返回处理后的点，默认值为 normal 。
connector
connector: string | Connector.NativeItem | Connector.ManaualItem连接器将起点、路由返回的点、终点加工为 path 元素的 d 属性，决定了边渲染到画布后的样式，默认值为 normal 。
createEdge
createEdge?: (
this: Graph,
args: {
sourceCell: Cell
sourceView: CellView
sourceMagnet: Element
},
) => Nilable<Edge> | void通过该方法可以自定义新建的边的样式。
validateMagnet
validateMagnet?: (
this: Graph,
args: {
cell: Cell
view: CellView
magnet: Element
e: Dom.MouseDownEvent | Dom.MouseEnterEvent
},
) => boolean点击 magnet 时 根据 validateMagnet 返回值来判断是否新增边，触发时机是 magnet 被按下，如果返回 false ，则没有任何反应，如果返回 true ，会在当前 magnet 创建一条新的边。
validateConnection
validateConnection: (this: Graph, args: ValidateConnectionArgs) => boolean在移动边的时候判断连接是否有效，如果返回 false ，当鼠标放开的时候，不会连接到当前元素，否则会连接到当前元素。
validateEdge
validateEdge?: (
this: Graph,
args: {
edge: Edge
type: Edge.TerminalType
previous: Edge.TerminalData
},
) => boolean当停止拖动边的时候根据 validateEdge 返回值来判断边是否生效，如果返回 false , 该边会被清除。
组合
通过 embedding 可以将一个节点拖动到另一个节点中，使其成为另一节点的子节点，默认禁用。支持的配置如下：
enabled
enabled?: boolean是否允许节点之间嵌套，默认值为 false 。
findParent
findParent?:
| 'bbox'
| 'center'
| 'topLeft'
| 'topRight'
| 'bottomLeft'
| 'bottomRight'
| ((this: Graph, args: { node: Node; view: NodeView }) => Cell[])在节点被移动时通过 findParent 指定的方法返回父节点。默认值为 bbox 。
frontOnly
frontOnly?: boolean如果 frontOnly 为 true ，则只能嵌入显示在最前面的节点，默认值为 true 。
validate
validate: (
this: Graph,
args: {
child: Node
parent: Node
childView: CellView
parentView: CellView
},
) => booleanvalidate 为判断节点能否被嵌入父节点的函数，默认返回 true 。
限制
限制节点和边的交互行为，interacting 支持的配置如下：
export type Interacting =
| boolean
| InteractionMap
| ((this: Graph, cellView: CellView) => InteractionMap | boolean)boolean节点或边是否可交互InteractionMap节点或边的交互细节，支持以下属性：'nodeMovable'节点是否可以被移动。'magnetConnectable'当在具有'magnet'属性的元素上按下鼠标开始拖动时，是否触发连线交互。'edgeMovable'边是否可以被移动。'edgeLabelMovable'边的标签是否可以被移动。'arrowheadMovable'边的起始/终止箭头是否可以被移动。'vertexMovable'边的路径点是否可以被移动。'vertexAddable'是否可以添加边的路径点。'vertexDeletable'边的路径点是否可以被删除。
(this: Graph, cellView: CellView) => InteractionMap | boolean
const graph = new Graph({
container: this.container,
width: 800,
height: 1400,
grid: 10,
interacting: function (cellView: CellView) {
if (cellView.cell.getProp('customLinkInteractions')) {
return { vertexAdd: false }
}
return true
},
})高亮
可以通过 highlighting 选项来指定触发某种交互时的高亮样式，如：
new Graph({
highlighting: {
// 当连接桩可以被链接时，在连接桩外围渲染一个 2px 宽的红色矩形框
magnetAvailable: {
name: 'stroke',
args: {
padding: 4,
attrs: {
'stroke-width': 2,
stroke: 'red',
},
},
},
},
})支持的 highlighting 配置项有：
'default'默认高亮选项，当以下几种高亮配置缺省时被使用。'embedding'拖动节点进行嵌入操作过程中，节点可以被嵌入时被使用。'nodeAvailable'连线过程中，节点可以被链接时被使用。'magnetAvailable'连线过程中，连接桩可以被链接时被使用。'magnetAdsorbed'连线过程中，自动吸附到连接桩时被使用。
上面 magnetAvailable.name 其实是高亮器的名称，X6 内置了 stroke 和 className 两种高亮器，详细信息参考 Highlighter。
移动范围
可以在全局配置 translating 来限制节点的移动范围。
const graph = new Graph({
translating: {
restrict: true,
},
})restrict
节点的可移动范围。支持以下两种方式：
boolean如果设置为true, 节点不能移动超出画布区域Rectangle.RectangleLike | (arg: CellView) => Rectangle.RectangleLike指定一个节点的移动范围
const graph = new Graph({
translating: {
restrict: {
x: 0,
y: 0,
width: 100,
height: 100,
},
},
})