0

When selecting (i.e. clicking on) a node in a DAG rendered with Cytoscape.js, I would like all "ancestor" nodes to be selected automatically.

I have adapted this algorithm to set a property, "visited", to 1 for all nodes that are ancestors (or perhaps more accurately, predecessors - see Directed graph page on Wikipedia) of the selected node.

However, subsequently calling node.select() on all nodes with node.data('visited') == 1 does not cause the style defined with the :selected selector to apply to those nodes unless you hold down shift. Even then, only the ancestors are highlighted, the clicked on node is not styled.

http://jsbin.com/piguxuna/1/edit?js,console,output

Side note: the example shows how to do a GraphViz dot/Sugiyama layout in Cytoscape.js using dagre.

acbox
  • 3
  • 2
  • Turns out the behaviour is as expected using middle-button mouse click on desktop/Chrome, and tapping on iPad/iOS 6.0.1. Nothing shows up at all on iPhone/Safari 5.0.1 though. – acbox May 07 '14 at 12:47

1 Answers1

0

(1) If you use old browsers, you'll probably run into bugs. Only modern, autoupdated browsers are supported. If you can't update your browser on your phone, update your OS to the latest version.

(2) Your approach for selection is problematic. On tap, you should build a collection of the desired elements (see cy.add() and cy.collection()). Then, you can do toSelectEles.select() and cy.elements().not( toSelectEles ).unselect().

maxkfranz
  • 11,896
  • 1
  • 27
  • 36
  • Thanks, I'm not worried about older browser support. Is it possible for the mouse left-click behaviour to match mouse middle-click and touch device tap behaviour? Also given a DAG with nodes [ A -> B -> C, D -> E -> C ], I would like to be able to select all nodes by clicking A, then Shift+D. Currently shift is ignored (i.e. selects just D, E, C). I don't know if this behaviour would be possible using touchscreen gestures though, any help would be appreciated. – acbox May 09 '14 at 06:42