博客

初次使用G6，用的是官网推荐的Workflow Designer。

使用后发现里面的自定义节点有时候会出现拖动失灵的情况，需要点击节点，按下许久再拖动,才不会出现拖不动的情况，这个问题困扰了很久，严重影响操作交互体验。

后面发现凡是点击到自定义添加的图形图标和文字上都会出现拖不动的问题。

自定义节点如下：

drawLabel:(cfg,group)=>{
	const description = group.addShape('text',{
		  attrs: {
		    text: cfg.description,
		    x: 0,
		    y: 10,
		    fontSize: 14,
		    textAlign: 'left',
		    textBaseline: 'middle',
		    fill: '#0000D9',
  }})
}

drawLogoIcon:(cfg,group)=>{
  const logoIcon = group.addShape('image', {
	  attrs: {
	    x: 0,
	    y: 0,
	    img:
	      'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/TAIR.png',
	  },
});
}

添加完一个文字节点和一个图像节点后,能正常显示,但鼠标拖动这两个节点时经常会出现拖动失灵。

在谷歌和Workflow Designer github issues 查找无果。

后面去翻阅官方文档发现有个API：enableCapture(enable)

enableCapture(enable)
//是否拾取及触发该元素的交互事件。

// 不允许元素响应事件
item.enableCapture(false);

// 允许元素响应事件
item.enableCapture(true);

试着用上面自定的节点调用该函数。

description.enableCapture(false);
logoIcon.enableCapture(false);
// 报错,提示group.logoIcon 没有enableCapture属性;

// 接着在 setState(name,value,item){} 里发现item是该节点的实例,并且有enableCapture方法。
// 试着在setState函数里面调用 item.enableCapture(false); 
// 没有报错,但也没有效果.....
// 心塞！可能是我对这个方法的使用方式不对。。 

后面把官网上示例上的modelRect节点，单独拉个项目跑起来，发现拖动啥的都很流畅，完全没有出现卡顿和拖不动的情况。

找到modelRect原码，对比了modelRect源码上添加节点的操作，发现多了个自定义完了之后,多了一个xxx.set(‘capture’,false) 步骤。

搞过来一试，果然可以了，节点拖动时流畅度瞬间就上来了。

最后的解决方法：

drawLogoIcon:(cfg,group)=>{
  const logoIcon = group.addShape('image', {
	  attrs: {
	    x: 0,
	    y: 0,
	    img:
	      'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/TAIR.png',
	  },
});
	logoIcon.set('capture',false);
}

我使用的是 3.2版本的 g6，解决方法是 .set(‘capture’,false);

3.7版本的在创建节点时添加属性 draggable: true,

drawLogoIcon:(cfg,group)=>{
  const logoIcon = group.addShape('image', {
	  attrs: {
	    x: 0,
	    y: 0,
	    img:
	      'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/TAIR.png',
	  },
	  draggable: true,
});
}