0

In my cytoscape.js graph, I have a compound node with a number of child nodes. Some (but not all) of these children are styled as labels only, and because I have set a min-zoomed-font-size, these children are invisible at low zoom levels. Nonetheless, if someone attempts to grab the compound node to drag it, there is a decent chance they will hit an invisible node and drag it instead. To forestall this, when I detect that the graph is at a zoom level where labels will not be displayed, I've tried setting those child nodes to be ungrabbable using ungrabify(). However, this has the unfortunate effect that when I grab and drag the parent compound node, the invisible ungrabbable nodes don't move with the other children (even though I haven't locked any of the nodes). The same problem occurs if instead of ungrabifying them I just add a class that sets their visibility to hidden. I would like them to be not individually grabbable, but to still move when their parent node is dragged -- how can I best accomplish this?

Suzanne Paley
  • 172
  • 8

1 Answers1

1

A CSS property for usecases similar to this has been discussed before. Here's a ticket: https://github.com/cytoscape/cytoscape.js/issues/1015

For now, if you don't need real node bodies, maybe try making the child nodes 1x1 px. It will be hard to grab the body since it's so small, but the labels will still show.

maxkfranz
  • 11,896
  • 1
  • 27
  • 36
  • Thanks, that seems to work. I do need node bodies the rough size of the labels (which I've precomputed) when the labels are displayed, so that the labels can be grabbed and moved when visible, but I've added a handler on zoom events that checks when the labels are no longer going to be displayed, and then toggles a class w/ 1x1 node dimensions and a very low but nonzero opacity, so that I can get the effect I want. It's a little complicated, but fortunately for now all my nodes use the same font size, so I only need to check one node for each zoom event. – Suzanne Paley Jul 24 '15 at 07:53
  • This answer might help you: https://stackoverflow.com/a/55968043/1167573 It's just about setting `grabbable: false` on your individual node. – emil.c May 03 '19 at 14:15