在 cytoscape.js "on('unselect')" 事件中查找选定的节点/边缘

Posted 2023-04-18

【中文标题】在 cytoscape.js "on(\'unselect\')" 事件中查找选定的节点/边缘

【英文标题】：Find selected nodes/edges in cytoscape.js "on('unselect')" event在 cytoscape.js "on('unselect')" 事件中查找选定的节点/边缘

【发布时间】：2020-05-19 18:29:04

【问题描述】：

背景

当我点击一个节点时，会触发一个事件； “点击”事件。然后当我点击另一个节点时，会触发两个事件； 'tap' 事件，然后是 'unselect' 事件。

起初我认为这是on('tap') 和on('unselect') 事件顺序的问题，只是因为人类可能会想，“首先我要清除我的选择，然后我要选择一个新节点”，但是我可以看到为什么它可以正常运行。一个不同的节点被点击，所以 'tap' 事件触发；然后因为之前的节点不再被选中，'unselect' 事件触发。

所以，我认为它可以正常工作，但这确实意味着我需要围绕这种行为编写代码。

详情

我想要做的是调用on('unselect') 中的一些代码，这些代码仅在未选择节点/边缘时运行。这通常是在我单击图表的背景时。

问题是cy.$('node:selected').length 总是返回 0。edge:selected 也是如此。请参阅下面的代码。

所以我想知道是否有任何解决方法？如何查询on('unselect')中图表的选中项？

上下文

我正在使用图形选择来过滤表格的行，但是当没有选择节点/边时，我希望表格显示所有数据。目前，每个节点/边必须单击两次，on('tap') 才不会被 on('unselect') 取消过滤代码覆盖。

复制步骤

var cy = cytoscape(
  container: document.getElementById('cy'),
  elements: [
     data:  id: 'a'  ,
     data:  id: 'b'  ,
     data:  id: 'ab', source: 'a', target: 'b'  
  ]
);
cy.on('tap', 'node', function(evt)
  console.log('event: tap node');
);
cy.on('tap', 'edge', function(evt)
  console.log('event: tap edge');
);
cy.on('unselect', function(evt)
  console.log('event: unselect');
  console.log('node:  ' + cy.$('node:selected').length);
  console.log('edge:  ' + cy.$('edge:selected').length);
);

当我点击一个节点时，控制台会记录点击。 当我点击不同的节点时，控制台会记录点击，然后记录取消选择。

所以当我点击一个节点，然后是边缘，然后是节点，然后是后台，控制台日志是：

event: tap node
event: tap edge
event: unselect
node:  0
edge:  0
event: tap node
event: unselect
node:  0
edge:  0
event: unselect
node:  0
edge:  0

如您所见，cy.$('node:selected').length 始终为 0。

环境信息

Cytoscape.js 版本：3.15.0

【参考方案1】：

原理同How to listen to drag event of CytoscapeJS node (including only the one directly under the cursor/finger)

向tap 上的目标添加您选择的类，例如.selected，并在侦听unselect 事件或查询选定目标时使用该类。删除 unselect 处理程序逻辑中的类，这样就不会留下任何 .selected 目标。