cytoscape.js icon indicating copy to clipboard operation
cytoscape.js copied to clipboard

Include Node Labels in Box Selection Area

Open jquery404 opened this issue 4 months ago • 0 comments

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:

  • Allow an option to include labels in the node's interactive area for box selection, similar to how text-events: yes allows direct interaction with the label.
  • Example: A new style property like box-select-labels: yes to enable this behavior?

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
}

jquery404 avatar Oct 04 '24 14:10 jquery404