Mode与Behavior是G6提供的图事件定义与管理机制。Mode是针对不同场景下,同一个事件上的处理函数可能不同而设计的。例如在编辑模式下点击节点需要弹出窗口让用户编辑,在查看模式下点击节点需要选中节点。用户不需要写太多条件切换语句,定义好每个模式下的行为,在切换编辑/查看模式时切换mode即可实现效果。

Mode

mode指当前图的事件模式,一个mode可能包含多个behavior。通过在图上切换mode,可以切换当前事件对应的行为。


const graph = new G6.Graph({

  modes: {

   default: ['drag-canvas', {

     type: 'zoom-canvas',

     sensitivity: 5

   }],

   edit: ['click-select']

  }

});


以上是模式定义的一个例子。在图上定义了两个模式,分别是default, edit。其中default包含两个行为,drag-canvas使用行为的默认参数,zoom-canvas自定义了参数。edit模式定义了一个行为。此时当从默认状态切换到编辑态时,仅需调用graph.setMode('edit')。

内置Behavior

behavior指G6中的复合交互,一般behavior包含一个或多个事件的监听与处理以及一系列对图中元素的操作。Behavior默认包含shouldBegin,shouldUpdate,shouldEnd三个回调,代表是否开始行为,是否更新元素,是否进行结束行为,当返回值为false时阻止默认行为。

内置Behavior

drag-canvas 拖拽画布

zoom-canvas 滚轮缩放画布

若要限定缩放尺寸,请在graph上设置minZoommaxZoom

drag-node 拖拽节点

click-select 点击选中节点

tooltip 节点文本提示

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

注意:

.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 结构不同,以及不需要在事件中去区分是节点事件还是边事件等。

activate-relations

当鼠标移到某节点时,突出显示该节点以及与其直接关联的节点和连线。


自定义Behavior

registerBehavior

G6提供方便灵活的自定义行为方法:


G6.registerBehavior(type, cfgs);


实例

拿系统内置的画布缩放为例


G6.registerBehavior('zoom-canvas', {

 // 设置参数的默认值。若没有需要传入行为的参数可以不写。

 getDefaultCfg() {    

   return {

  // 默认灵敏度为5

     sensitivity: 5,

   };

 },

 getEvents() {

   return {

     wheel: 'onWheel'  	// 监听graph的wheel事件,绑定事件处理函数onWheel

   };

 },

 // 事件处理函数

 onWheel(e) {    

   const graph = this.graph;

   ...      	// 事件响应逻辑

   graph.paint();

 }

});


再一个点击节点添加边的交互为例:


// 封装点击添加边的交互
G6.registerBehavior('click-add-edge', {
  getEvents() {
   return {
     'node:click': 'onClick' , 
     mousemove: 'onMousemove'
   };
 	},
  onClick(ev) {
    const node = ev.item;
    const graph = this.graph;
    const point = {x: ev.x, y: ev.y};
    const model = node.getModel();
    // 如果在添加边的过程中,再次点击另一个节点,结束边的添加
    if (this.addingEdge && this.edge) {
      graph.updateItem(this.edge, {
        target: model.id
      });
      this.edge = null;
      this.addingEdge = false;
    } else {
      // 点击节点,触发增加边
      this.edge = graph.addItem('edge', {
        source: model.id,
        target: point
      });
      this.addingEdge = true;
    }
  },
  onMousemove(ev) {
  	const point = {x: ev.x, y: ev.y};
    if (this.addingEdge && this.edge) {
      // 增加边的过程中,移动时边跟着移动
      this.graph.updateItem(this.edge, {
        target: point
      });
    }
	}
});


add-edge.gif