const graph = new G6.Graph({
  modes: {
    default: ['drag-combo'],
})




    
;

const graph = new G6.Graph({
  modes: {
    default: [
        type: 'drag-combo',
        enableDelegate: true,
        activeState: 'actived',
        shouldUpdate: (e) => {
          // 不允许 id 为 'combo1' 的 combo 被拖拽
          if (e.item && e.item.getModel().id === 'combo1') return false;
          return true;
  comboStateStyles: {
    actived: {
      stroke: 'red',
      lineWidth: 3,
});

const graph = new G6.Graph({
  modes: {
    default: ['collapse-expand-combo'],
});

const graph = new G6.Graph({
  modes: {
    default: [
        type: 'collapse-expand-combo',
        trigger: 'click',
        relayout: false, // 收缩展开后，不重新布局
});

const graph = new G6.Graph({
  modes: {
    default: ['drag-canvas'],
});

const graph = new G6.Graph({
  modes: {
    default: [
        type: 'drag-canvas',
        direction: 'x',
});

const graph = new G6.Graph({
  modes: {
    default: ['drag-node'],
});

const graph = new G6.Graph({
  modes: {
    default: [
        type: 'drag-node',
        enableDelegate: true,
        shouldBegin: (e) => {
          // 不允许拖拽 id 为 'node1' 的节点
          if (e.item && e.item.getModel().id === 'node1') return false;
});

const graph = new G6.Graph({
  modes: {
    default: ['click-select'],
});
// 当 click-select 选中的元素集合发生变化时将会触发下面时机事件，e 中包含相关信息
graph.on('nodeselectchange', (e) => {
  // 当前操作的 item
  console.log(e.target);
  // 当前操作后，所有被选中的 items 集合
  console.log(e.selectedItems);
  // 当前操作时选中(true)还是取消选中(false)
  console.log(e.select);
});

const graph = new G6.Graph({
  modes: {
    default: [
        type: 'click-select',
        trigger: 'ctrl',
        // 是否允许该 behavior 发生。若返回 false，被操作的 item 不会被选中，也不会触发 'nodeselectchange' 时机事件
        shouldBegin: (e) => {
          // 当点击的图形名为 'text-shape' 时，不允许该 behavior 发生




    

          if (e.target.get('name') === 'text-shape') return false;
          // 当点击的节点/边/ combo 的 id 为 'id1' 时，不允许该 behavior 发生
          if (e.item.getModel().id === 'id1') return false;
          return true;
        // 是否允许对该 behavior 发生状态响应。若返回 false，被操作的对象的状态及相关状态样式不会被更新，但是仍然会触发 'nodeselectchange' 时机事件
        shouldUpdate: (e) => {
          // 当点击的节点/边/ combo 的 id 为 'id2' 时，该 item 不会发生状态的改变
          if (e.item.getModel().id === 'id2') return false;
          return true;
});
// 当 click-select 选中的元素集合发生变化时将会触发下面时机事件，evt 中包含相关信息
graph.on('nodeselectchange', (e) => {
  // 当前操作的 item
  console.log(e.target);
  // 当前操作后，所有被选中的 items 集合
  console.log(e.selectedItems);
  // 当前操作时选中(true)还是取消选中(false)
  console.log(e.select);
});

const graph = new G6.Graph({
  container: 'mountNode',
  width: 500,
  height: 500,
  modes: {
    default: [
        type: 'tooltip',
        formatText(model) {
          return model.xxx;
        offset: 10,
});

.g6-tooltip {
  padding: 10px 6px;
  color: #444;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #e2e2e2;
  border-radius: 4px;
edge-tooltip
使用方式基本与 tooltip 相同，但是移到边时触发。主要是为了将两个交互区分开，以满足用户边与节点的提示样式或 HTML 结构不同，以及不需要在事件中去区分是节点事件还是边事件等。
含义：边文本提示；
type: 'edge-tooltip'；
formatText(model)：格式化函数，可以返回文本或者 HTML；
offset：tooltip 距离鼠标的偏移量；
shouldBegin(e)：是否允许 toolip 出现；
shouldUpdate(e)：是否允许 toolip 内容更新。
相关时机事件：
tooltipchange：当 tooltip 发生变化时被触发。使用 graph.on('tooltipchange', e => {...}) 监听。
activate-relations
含义：当鼠标移到某节点时，突出显示该节点以及与其直接关联的节点和连线；
type: 'activate-relations'；
trigger: 'mouseenter'。可以是  mousenter，表示鼠标移入时触发；也可以是  click，鼠标点击时触发；
activeState: 'active'。活跃节点状态。当行为被触发，需要被突出显示的节点和边都会附带此状态，默认值为  active；可以与 graph 实例的  nodeStyle  和  edgeStyle  结合实现丰富的视觉效果。
inactiveState: 'inactive'。非活跃节点状态。不需要被突出显示的节点和边都会附带此状态。默认值为  inactive。可以与 graph 实例的  nodeStyle  和  edgeStyle  结合实现丰富的视觉效果；
resetSelected：高亮相连节点时是否重置已经选中的节点，默认为 false，即选中的节点状态不会被 activate-relations 覆盖；
shouldUpdate(e)：是否允许该 behavior 发生。
相关时机事件：
'afteractivaterelations'：当高亮发生改变时触发该时机事件。使用 graph.on('afteractivaterelations', evt => {...}) 监听。其参数 e 有以下字段：
e.item：当前操作的节点 item；
e.action：当前操作是选中('activate')还是取消选中('deactivate')。

使用默认配置

const graph = new G6.Graph({
  modes: {
    default: ['activate-relations'],
});
graph.on('afteractivaterelations', (e) => {
  // 当前操作的节点 item
  console.log(e.item);
  // 当前操作是选中(`'activate'`)还是取消选中(`'deactivate'`)
  console.log(e.action);
});
默认情况下，选中的节点状态，在操作完以后仍然会保持选中状态。

使用自定义参数
const graph = new G6.Graph({
  modes: {
    default: [
        type: 'activate-relations',
        resetSelected: true,
});
graph.on('afteractivaterelations', (e) => {
  // 当前操作的节点 item
  console.log(e.item);
  // 当前操作是选中(`'activate'`)还是取消选中(`'deactivate'`)
  console.log(e.action);
});
配置 resetSelected 参数为 true 后，交互后会重置节点的选择状态。
brush-select
含义：拖动框选节点；
type: 'brush-select'；
brushStyle：拖动框选框的样式，包括 fill、fillOpacity、stroke 和 lineWidth 四个属性;
onSelect(nodes)：选中节点时的回调，参数 nodes 表示选中的节点；
onDeselect(nodes)：取消选中节点时的回调，参数 nodes 表示取消选中的节点；
selectedState：选中的状态，默认值为 'selected'；
includeEdges：框选过程中是否选中边，默认为 true，用户配置为 false 时，则不选中边；
trigger：触发框选的动作，默认为 'shift'，即用户按住 Shift 键拖动就可以进行框选操作，可配置的的选项为: 'shift'、'ctrl' / 'control'、'alt' 和 'drag' ，不区分大小写：
'shift'：按住 Shift 键进行拖动框选；
'ctrl' / 'control'：按住 Ctrl 键进行拖动框选；
'alt'：按住 Alt 键进行拖动框选；
风险  'drag'：不需要按任何键，进行拖动框选，如果同时配置了 drag-canvas，则会与该选项冲突。
shouldUpdate(e)：是否允许对该 behavior 发生，参考下面示例。
相关时机事件：




    

'nodeselectchange'：当选中的元素集合发生变化时将会触发该时机事件。使用 graph.on('nodeselectchange', e => {...}) 监听。其参数 e 有以下字段：
e.selectedItems：当前操作后，所有被选中的 items 集合；
e.select：当前操作是选中(true)还是取消选中(false)。
使用默认配置
const graph = new G6.Graph({
  modes: {
    default: ['brush-select'],
});
// 当 click-select 选中的元素集合发生变化时将会触发下面时机事件，e 中包含相关信息
graph.on('nodeselectchange', (e) => {
  // 当前操作后，所有被选中的 items 集合
  console.log(e.selectedItems);
  // 当前操作时选中(true)还是取消选中(false)
  console.log(e.select);
});
默认情况下，按住 Shift 键进行框选，选中节点的同时，也会选中边。 

使用自定义参数
const graph = new G6.Graph({
  modes: {
    default: [
        type: 'brush-select',
        trigger: 'ctrl',
        includeEdges: false,
        // 是否允许对该 behavior 发生。若返回 false，被操作的 item 不会被选中，不触发 'nodeselectchange' 时机事件
        shouldUpdate: (e) => {
          // 当点击的节点/边/ combo 的 id 为 'id2' 时，该 item 不会被选中
          if (e.item.getModel().id === 'id2') return false;
          return true;
});
// 当 click-select 选中的元素集合发生变化时将会触发下面时机事件，e 中包含相关信息
graph.on('nodeselectchange', (e) => {
  // 当前操作后，所有被选中的 items 集合
  console.log(e.selectedItems);
  // 当前操作时选中(true)还是取消选中(false)
  console.log(e.select);
});
上面的配置，按住 Ctrl 键，进行框选，框选过程中不会选中边。

冲突的配置：
const graph = new G6.Graph({
  modes: {
    default: [
      'drag-canvas',
        type: 'brush-select',
        trigger: 'drag',
});
当用户配置 brush-select 的 trigger 为 drag，同时又配置了 drag-canvas 时，在交互上面会出现冲突的情况。

可以看到，在拖动过程中也出现了框选的情况，这种情况很显然不是我们期望的效果，除过使用 brush-select 的 trigger 参数避免这种冲突外，我们还可以通过下面的方式来实现：
const graph = new G6.Graph({
  modes: {
    default: ['drag-canvas'],
    brush: [
        type: 'brush-select',
        trigger: 'drag',
});
上面这种方式是使用不同的 mode 来区分，mode 可以达到使用相同交互动作而产生不同的效果。默认模式中，使用的是拖拽操作由 drag-canvas 响应。当用户通过通过 graph.setMode('brush') 切换到 brush 模式后，此时同样的拖拽操作由 brush-select 响应。更多关于 mode 的内容请参考 Mode 教程。
lasso-select
含义：自由圈选；
type: 'lasso-select'；
delegateStyle：拖动框选框的样式，包括 fill、fillOpacity、stroke 和 lineWidth 四个属性;
onSelect(nodes, edges)：选中节点时的回调，参数 nodes 表示选中的节点，edges 表示选中的边；
onDeselect(nodes, edges)：取消选中节点时的回调，参数 nodes 表示取消选中的节点，edges 表示取消选中的边；
selectedState：选中的状态，默认值为 'selected'；
includeEdges：框选过程中是否选中边，默认为 true，用户配置为 false 时，则不选中边；
trigger：触发框选的动作，默认为 'shift'，即用户按住 Shift 键拖动就可以进行框选操作，可配置的的选项为: 'shift'、'ctrl' / 'control'、'alt' 和 'drag' ，不区分大小写：
'shift'：按住 Shift 键进行拖动框选；
'ctrl' / 'control'：按住 Ctrl 键进行拖动框选；
'alt'：按住 Alt 键进行拖动框选；
风险  'drag'：不需要按任何键，进行拖动框选，如果同时配置了 drag-canvas，则会与该选项冲突。
shouldUpdate(e)：是否允许对该 behavior 发生，参考下面示例。
相关时机事件：
'nodeselectchange'：当选中的元素集合发生变化时将会触发该时机事件。使用 graph.on('nodeselectchange', e => {...}) 监听。其参数 e 有以下字段：
e.selectedItems：当前操作后，所有被选中的 items 集合；
e.select：当前操作是选中(true)还是取消选中(false)。
lasso-select 的配置和使用方法和 brush-select 一致。
collapse-expand
含义：只适用于树图，展开或收起子树；
注意：若希望在首次布局时有默认收起的子树，则可以在数据中设置子树根节点的属性 collapsed 为 true。若希望使用代码控制子树的展开/收起，同样可以在数据中设置子树根节点的 collapsed 属性，并调用 treeGraph.layout() 使之生效；
type: 'collapse-expand'；
trigger：收起和展开树图的方式，支持 'click' 和 'dblclick' 两种方式。默认为 'click'，即单击；
onChange：收起或展开的回调函数。警告：V3.1.2 版本中将移除；
shouldBegin(e)：是否允许该 behavior 在当前操作的 item 上发生。
相关时机事件：
itemcollapsed：当 collapse-expand 发生时被触发。使用 graph.on('itemcollapsed', e => {...}) 监听，参数 e 有以下字段：
e.item：当前被操作的节点 item；
e.collapsed：当前操作是收起（true）还是展开（false）。
const graph = new G6.TreeGraph({
  modes: {
    default: [
        type: 'collapse-expand',
        trigger: 'click',
        onChange: (item, collapsed) => {
          const data = item.get('model').data;
          data.collapsed = collapsed;
          return true;
        shouldBegin: (e) => {
          // 若当前操作的节点 id 为 'node1'，则不发生 collapse-expand
          if (e.item && e.item.getModel().id === 'node1') return false;
          return true;
      'drag-canvas',
      'zoom-canvas',
});
graph.on('itemcollapsed', (e) => {
  // 当前被操作的节点 item
  console.log(e.item);
  // 当前操作是收起（`true`）还是展开（`false`）
  console.log(e.collapsed);
});
create-edge
含义：通过交互创建边；
type：'create-edge'；
trigger：该交互的触发条件，可选 'click'，'drag'。默认为 'click'，即分别点击两个节点为这两个节点创建边。'drag' 代表从一个节点“拖拽”出一条边，在另一个节点上松开鼠标完成创建。注意，trigger: 'drag' 不能创建一个自环边；
key：键盘按键作为该交互的辅助触发，若不设置或设置为 undefined 则代表只根据 trigger 决定该交互的触发条件。可选值：'shift'，'ctrl', 'control'，'alt'，'meta'，undefined；
edgeConfig: 有该交互创建出的边的配置项，可以配置边的类型、样式等，其类型参考边的配置。如果需要为不同的被添加边赋予不同样式，请监听 'aftercreateedge' 并更新相对应的边；
shouldBegin(e)：是否允许当前被操作的条件下开始创建边；
shouldEnd(e)：是否允许当前被操作的条件下结束创建边；
相关时机事件：
'aftercreateedge'：当边创建完成时将会触发该时机事件。使用 graph.on('aftercreateedge', e => {...}) 监听。其参数 e 中的 edge 字段即为刚刚创建的边。
使用默认配置
const graph = new G6.Graph({
  modes: {
    default: ['create-edge'],
});
graph.on('aftercreateedge', (e) => {
  console.log(e.edge);
});
使用自定义参数
const graph = new G6.Graph({
  modes: {
    default: [
      // 只有当 'shift' 键被按下，才能够通过从一个节点拖拽到另一个节点来创建一条边
        type: 'create-edge',
        trigger: 'drag',
        key: 'shift',
        edgeConfig: {
          type: 'cubic',
          style: {
            stroke: '#f00',
            lineWidth: 2,
            // ... // 其它边样式配置
          // ... // 其它边配置
});
shortcuts-call
含义：允许终端用户使用键盘组合键调用 Graph 的函数，例如按下键盘上的 control 与 1，对图进行适应画布。注意：终端用户使用该功能时焦点必须在画布上才能够正确触发；
type：'shortcuts-call'；
trigger：触发该交互的主键，可选 'shift'，'alt'，'ctrl'，'control'。默认为 'control'。设置时需要注意可能与其他正在别使用的 Behavior 的 trigger 产生冲突；
combinedKey：触发该交互的副按键，在按住主键 trigger 后，按下该副按键，将会调用 functionName 指定的函数。若不设置或设置为 undefined 则代表只根据 trigger 触发；
functionName: 被调用的 Graph 的一个函数名，若传入一个错误的函数名，将会不产生任何效果；
functionParams: 被调用的函数的参数，请根据各函数的文档传入正确的参数，错误的参数可能导致报错。
使用默认配置
const graph = new G6.Graph({
  modes: {
    default: ['shortcuts-call'],
});
使用自定义参数
const graph = new G6.Graph({
  modes: {
    default: [
      // 当按住 'alt' 键，并按下 'm' 键，将调用 graph.moveTo(10, 10)
        type: 'shortcuts-call',
        // 主健
        trigger: 'alt',
        // 副键
        combinedKey: 'm',
        // 将图内容的左上角移动到 10,10