使用

我们提供了一个独立的插件包 @antv/x6-plugin-selection 来使用框选功能。

# npm
$ npm install @antv/x6-plugin-selection --save

# yarn
$ yarn add @antv/x6-plugin-selection

然后我们在代码中这样使用：

import { Selection } from '@antv/x6-plugin-selection'

const graph = new Graph({
  background: {
    color: '#F2F7FA',
  },
})
graph.use(
  new Selection({
    enabled: true,
  }),
)

演示

• 点击选中节点。
• 启用多选，按住 Ctrl/Command 后点击节点多选。
• 启用移动，拖动选框移动节点。
• 启用框选，在画布空白位置按下鼠标左键，拖动选框来框选节点。
• 启用严格框选模式(strict)，观察对框选的影响。
• 选择与框选配合使用的修饰键，如 alt 键，按住 alt 键并画布空白位置按下鼠标左键，拖动选框来框选节点。
• 应用自定义过滤器(排除 circle 节点)，圆形节点不能被选中。
• 应用自定义附加内容(显示选中节点个数)，选择两个及以上的节点，触发显示自定义内容。

配置

Filter 的类型定义如下：

type Filter = string[] | { id: string }[] | (this: Graph, cell: Cell) => boolean

• string[]： 节点 shape 数组，指定的节点/边 shape 才能被选中
• ({ id: string })[]： 节点 ID 数组，指定的节点/边才能被选中
• (this: Graph, cell: Cell) => boolean： 返回 true 的节点/边才能被选中

ModifierKey 的类型定义如下：

type ModifierKey = string | ('alt' | 'ctrl' | 'meta' | 'shift')[] | null

X6 中修饰键包括 alt、ctrl、meta、shift 四个，设置修饰键后需要点击鼠标并按下修饰键才能触发相应的行为。修饰键在某些场景下非常有用，比如同时开始框选和拖拽画布时，而框选和拖拽画布的触发时机都是鼠标左键在画布空白位置按下，这时可以为框选和拖拽画布设置不一样的修饰键，达到同时开启又不冲突的效果。支持配置单个（如 alt）或多个（如 ['alt', 'ctrl']）修饰键，通过数组形式配置的多个修饰键是或关系，比如刚刚配置的修饰键表示按下 alt 或 ctrl，如果需要更加灵活的配置，可以使用如下这些形式：

• alt 表示按下 alt。
• [alt, ctrl], 表示按下 alt 或 ctrl。
• alt|ctrl 表示按下 alt 或 ctrl。
• alt&ctrl 表示同时按下 alt 和 ctrl。
• alt|ctrl&shift 表示同时按下 alt 和 shift 或者同时按下 ctrl 和 shift。

SelectionEventType 的类型定义如下：

type SelectionEventType = 'leftMouseDown' | 'mouseWheelDown';

触发框选的交互方式。支持2种形式或者他们之间的组合：

• leftMouseDown: 按下鼠标左键移动进行拖拽
• mouseWheelDown: 按下鼠标滚轮进行拖拽

API

graph.select(...)

select(cells: Cell | string | (Cell | string)[]): this

选中指定的节点/边。需要注意的是，该方法不会取消选中当前选中的节点/边，而是将指定的节点/边追加到选区中。如果同时需要取消选中当前选中的节点/边，请使用 resetSelection(...) 方法。

graph.unselect(...)

unselect(cells: Cell | string | (Cell | string)[]): this

取消选中指定的节点/边。

graph.isSelected(...)

isSelected(cell: Cell | string): boolean

返回指定的节点/边是否被选中。

graph.resetSelection(...)

resetSelection(cells?: Cell | string | (Cell | string)[]): this

先清空选区，然后选中提供的节点/边。

graph.getSelectedCells()

getSelectedCells(): Cell[]

获取选中的节点/边。

graph.cleanSelection()

cleanSelection(): this

清空选区。

graph.isSelectionEmpty()

cleanSelection(): boolean

返回选区是否为空。

graph.isSelectionEnabled()

isSelectionEnabled(): boolean

是否启用选择能力。

graph.enableSelection()

enableSelection(): this

启用选择能力。

graph.disableSelection()

disableSelection(): this

禁用选择能力。

graph.toggleSelection(...)

toggleSelection(enabled?: boolean): this

切换选择的启用状态。参数如下：

graph.isMultipleSelection()

isMultipleSelection(): boolean

是否启用了多选。

graph.enableMultipleSelection()

enableMultipleSelection(): this

启用多选。

graph.disableMultipleSelection()

disableMultipleSelection(): this

禁用多选。

graph.toggleMultipleSelection(...)

toggleMultipleSelection(multiple?: boolean): this

切换多选的启用状态。参数如下：

graph.isSelectionMovable()

isSelectionMovable(): boolean

返回选中的节点/边是否可以被移动。

graph.enableSelectionMovable()

enableSelectionMovable(): this

启用选中的节点/边的移动。

graph.disableSelectionMovable()

disableSelectionMovable(): this

禁用选中节点/边的移动。

graph.toggleSelectionMovable(...)

toggleSelectionMovable(enabled?: boolean): this

切换选中节点/边是否可以被移动。参数如下：

graph.isRubberbandEnabled()

isRubberbandEnabled(): boolean

返回是否启用了框选。

graph.enableRubberband()

enableRubberband(): this

启用框选。

graph.disableRubberband()

disableRubberband(): this

禁用框选。

graph.toggleRubberband(...)

toggleRubberband(enabled?: boolean): this

切换框选的启用状态。参数如下：

graph.isStrictRubberband()

isStrictRubberband(): boolean

返回是否启用了严格框选。启用严格框选后，只有节点/边被选框完全包围时才会选中节点/边。

graph.enableStrictRubberband()

enableStrictRubberband(): this

启用严格框选。启用严格框选后，只有节点/边被选框完全包围时才会选中节点/边。

graph.disableStrictRubberband()

disableStrictRubberband(): this

禁用严格框选。禁用严格框选后，只需要选框与节点/边的包围盒相交即可选中节点/边。

graph.toggleStrictRubberband(...)

toggleStrictRubberband(enabled?: boolean): this

切换严格框选的启用状态。参数如下：

graph.setSelectionFilter(...)

setSelectionFilter(
  filter?:
   | null
   | (string | { id: string })[]
   | ((this: Graph, cell: Cell) => boolean)
): this

设置选择的过滤条件，满足过滤条件的节点/边才能被选中。

graph.setRubberbandModifiers(...)

setRubberbandModifiers(modifiers?: string | ModifierKey[] | null): this

设置框选的修饰键，只有同时按下修饰键时才能触发框选。

graph.setSelectionDisplayContent(...)

setSelectionDisplayContent(
  content?:
   | null
   | false
   | string
   | ((this: Graph, selection: Selection, contentElement: HTMLElement) => string)
): this

设置选中节点/边的附加显示内容。

事件

graph.on('node:selected', ({ node }) => {
  console.log(node)
})

// 我们也可以在插件实例上监听事件
selection.on('node:selected', ({ node }) => {
  console.log(node)
})