cytoscape / cytoscape.js

Graph theory (network) library for visualisation and analysis
https://js.cytoscape.org
MIT License
10.14k stars 1.64k forks source link

Include Node Labels in Box Selection Area #3281

Open jquery404 opened 1 month ago

jquery404 commented 1 month ago

Include Node Labels in Box Selection Area

Description: Box selection doesn't select nodes if it only covers the node label without including the node itself.

Here is an example https://jsfiddle.net/jquery404/tfcvhm2s/ [try box-select on labels (a or b)]

Motivation for new feature Currently, when the text-events: yes property is enabled, it allows for direct interaction (like click, tap) with node labels, but box selection only considers the node’s shape and padding, not the labels. In graphs where labels are positioned away from the node or have large text margins for readability, users naturally attempt to select nodes by drawing a selection box around the label area. However, this action does not currently select the node, leading to an unintuitive user experience.

Proposed Solution:

Use Case: This feature would be valuable in scenarios where labels are positioned away from the node's center (e.g., large graphs where labels are shifted for readability). Including labels in the box selection area would make it more intuitive to select nodes based on their labels.

Possible Changes:

{
  name: 'box-select-labels',
  type: types.bool,
  triggersBounds: true
}
maxkfranz commented 2 weeks ago

@jquery404, would you put up a PR with your proposed behaviour change but only using the existing text-events property?

If you have text-events:yes, it would be fair to assume that box selection would apply w.r.t. labels.