G6

概述

鼠标点击拖一个框笼罩元素，框选范围内的元素 点 边 Combo 会被选中。

使用场景

这一交互主要用于：

快速选中一批元素
快速取消选中一批元素

在线体验

createGraph(
  {
    data: {
      nodes: [
        { id: 'node-1', style: { x: 200, y: 100 } },
        { id: 'node-2', style: { x: 360, y: 100 } },
        { id: 'node-3', style: { x: 280, y: 220 } },
      ],
      edges: [
        { source: 'node-1', target: 'node-2' },
        { source: 'node-1', target: 'node-3' },
        { source: 'node-2', target: 'node-3' },
      ],
    },
    node: {
      style: { fill: '#7e3feb' },
      state: {
        custom: { fill: '#ffa940' },
      },
    },
    edge: {
      stroke: '#8b9baf',
      state: {
        custom: { stroke: '#ffa940' },
      },
    },
    behaviors: [
      {
        type: 'brush-select',
        key: 'brush-select',
      },
    ],
    plugins: [{ type: 'grid-line', size: 30 }],
    animation: true,
  },
  { width: 600, height: 300 },
  (gui, graph) => {
    const options = {
      key: 'brush-select',
      type: 'brush-select',
      animation: false,
      enable: true,
      enableElements: ['node', 'edge', 'combo'],
      immediately: false,
      mode: 'default',
      state: 'selected',
      trigger: 'shift+drag',
    };
    const optionFolder = gui.addFolder('BrushSelect Options');
    optionFolder.add(options, 'type').disable(true);
    optionFolder.add(options, 'animation');
    optionFolder.add(options, 'enable');
    optionFolder.add(options, 'enableElements', [
      ['node', 'edge', 'combo'],
      ['node', 'edge'],
      ['node', 'combo'],
      ['combo', 'edge'],
      ['node'],
      ['edge'],
      ['combo'],
    ]);
    optionFolder.add(options, 'trigger', {
      'shift+drag': ['shift'],
      drag: [],
    });
    optionFolder.add(options, 'state', ['active', 'selected', 'custom']);
    optionFolder.add(options, 'mode', ['union', 'intersect', 'diff', 'default']).onChange((e) => {
      immediately.show(e === 'default');
    });
    const immediately = optionFolder.add(options, 'immediately');

    optionFolder.onChange(({ property, value }) => {
      graph.updateBehavior({
        key: 'brush-select',
        [property]: value,
      });
      graph.render();
    });
  },
);

基本用法

在图配置中添加这一交互：

const graph = new Graph({
  // 其他配置...
  behaviors: ['brush-select'], // 直接添加，使用默认配置
});

// 或使用自定义配置
const graph = new Graph({
  // 其他配置...
  behaviors: [
    {
      type: 'brush-select',
      key: 'brush-select',
      immediately: true, // 可以看到框框笼罩过去时，元素立即被框选了
      trigger: ['shift', 'alt', 'control'], // 配合多种按键进行框选
    },
  ],
});

配置项

配置项	说明	类型	默认值	必选
type	交互类型名称。此插件已内置，你可以通过 `type: 'brush-select'` 来使用它。	`brush-select` \| string	`brush-select`	✓
animation	是否启用动画	boolean	false
enable	是否启用框选功能	boolean \| ((event: Event) => boolean)	true
enableElements	可框选的元素类型	( `node` \| `edge` \| `combo` )[]	[`node`, `combo`, `edge`]
immediately	是否及时框选, 仅在框选模式 mode为 `default` 时生效	boolean	false
mode	框选的选择模式	`union` \| `intersect` \| `diff` \| `default`	`default`
onSelect	框选元素状态回调	(states:Record<string,string\|string[]>) =>Record<string,string\|string[]>
state	被选中时切换到该状态	string \| `selected` \| `active` \| `inactive` \| `disabled` \| `highlight`	`selected`
style	框选时的框样式	RectStyleProps extends BaseStyleProps	默认值
trigger	按下该快捷键配合鼠标点击进行框选按键参考： MDN Key Values	string[] \| (`Control` \| `Shift`\| `Alt` \| `......`)[]	[`shift`]

immediately

boolean Default: false

是否及时框选, 仅在框选模式为 default 时生效

const graph = new Graph({
  behaviors: [
    {
      type: 'brush-select',
      key: 'brush-select',
      immediately: true, // 可以看到框框笼罩过去时，元素立即被框选了
      trigger: [], // 不需要配合其他按键，点击鼠标拖动即可框选
    },
  ],
});

createGraph(
  {
    data: {
      nodes: [
        { id: 'node-1', style: { x: 100, y: 50 } },
        { id: 'node-2', style: { x: 260, y: 50 } },
        { id: 'node-3', style: { x: 280, y: 100 } },
      ],
      edges: [
        { source: 'node-1', target: 'node-2' },
        { source: 'node-1', target: 'node-3' },
        { source: 'node-2', target: 'node-3' },
      ],
    },
    node: {
      style: { fill: '#7e3feb' },
    },
    edge: {
      stroke: '#8b9baf',
    },
    behaviors: [
      {
        type: 'brush-select',
        key: 'brush-select',
        immediately: true, // 立即框选
        trigger: [],
      },
    ],
    plugins: [{ type: 'grid-line', size: 30 }],
  },
  { width: 400, height: 200 },
);

mode

'union' | 'intersect' | 'diff' | 'default' Default: 'default'

框选的选择模式

'union'：保持已选元素的当前状态，并添加指定的 state 状态。
'intersect'：如果已选元素已有指定的 state 状态，则保留；否则清除该状态。
'diff'：对已选元素的指定 state 状态进行取反操作。
'default'：清除已选元素的当前状态，并添加指定的 state 状态。

const graph = new Graph({
  behaviors: [
    {
      type: 'brush-select',
      key: 'brush-select',
      mode: 'default', // 框选模式, 默认框选模式
    },
  ],
});

createGraph(
  {
    data: {
      nodes: [
        { id: 'node-1', style: { x: 200, y: 100 } },
        { id: 'node-2', style: { x: 360, y: 100 } },
        { id: 'node-3', style: { x: 280, y: 220 } },
      ],
      edges: [
        { source: 'node-1', target: 'node-2' },
        { source: 'node-1', target: 'node-3' },
        { source: 'node-2', target: 'node-3' },
      ],
    },
    node: {
      style: { fill: '#7e3feb' },
      state: {
        custom: { fill: '#ffa940' },
      },
    },
    edge: {
      stroke: '#8b9baf',
      state: {
        custom: { stroke: '#ffa940' },
      },
    },
    behaviors: [
      {
        type: 'brush-select',
        key: 'brush-select',
        trigger: [],
        immediately: true,
      },
    ],
    plugins: [{ type: 'grid-line', size: 30 }],
    animation: true,
  },
  { width: 600, height: 300 },
  (gui, graph) => {
    const options = {
      key: 'brush-select',
      type: 'brush-select',
      animation: false,
      enable: true,
      enableElements: ['node', 'edge', 'combo'],
      mode: 'default',
      state: 'selected',
    };
    const optionFolder = gui.addFolder('BrushSelect Options');
    optionFolder.add(options, 'type').disable(true);

    optionFolder.add(options, 'state', ['active', 'selected', 'custom']);
    optionFolder.add(options, 'mode', ['union', 'intersect', 'diff', 'default']);
    // .onChange((e) => {
    //   immediately.show(e === 'default');
    // });

    optionFolder.onChange(({ property, value }) => {
      graph.updateBehavior({
        key: 'brush-select',
        [property]: value,
      });
      graph.render();
    });
  },
);

style

RectStyleProps
Default:

// 默认值
  {
   width: 0,
   height: 0,
   lineWidth: 1,
   fill: '#1677FF',
   stroke: '#1677FF',
   fillOpacity: 0.1,
   zIndex: 2,
   pointerEvents: 'none',
 }

框选时的框样式

const graph = new Graph({
  behaviors: [
    {
      type: 'brush-select',
      key: 'brush-select',
      style: {
        width: 0,
        height: 0,
        lineWidth: 4,
        lineDash: [2, 2], // 虚线外框
        // rgb超级炫彩框框
        fill: 'linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%)',
        stroke: 'pink',
        fillOpacity: 0.2,
        zIndex: 2,
        pointerEvents: 'none',
      },
    },
  ],
});

createGraph(
  {
    data: {
      nodes: [
        { id: 'node-1', style: { x: 200, y: 100 } },
        { id: 'node-2', style: { x: 360, y: 100 } },
        { id: 'node-3', style: { x: 280, y: 220 } },
      ],
      edges: [
        { source: 'node-1', target: 'node-2' },
        { source: 'node-1', target: 'node-3' },
        { source: 'node-2', target: 'node-3' },
      ],
    },
    node: {
      style: { fill: '#7e3feb' },
    },
    edge: {
      stroke: '#8b9baf',
    },
    behaviors: [
      {
        type: 'brush-select',
        key: 'brush-select',
        trigger: [],
        immediately: true,
        style: {
          width: 0,
          height: 0,
          lineWidth: 4,
          lineDash: [2, 2], // 虚线外框
          // rgb超级炫彩框框
          fill: 'linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%)',
          stroke: 'pink',
          fillOpacity: 0.2,
          zIndex: 2,
          pointerEvents: 'none',
        },
      },
    ],
    plugins: [{ type: 'grid-line', size: 30 }],
    animation: true,
  },
  { width: 600, height: 300 },
);

trigger

string[] Default: ['shift']

按下该快捷键配合鼠标点击进行框选，若设为空数组时则表示鼠标点击进行框选，不需要按下其他按键配合。

注意，trigger 设置为 ['drag'] 时会导致 drag-canvas 行为失效。两者不可同时配置。

G6

BrushSelect 框选

概述