I am using cytoscape.js to draw a graph. I give the library a graph object and run the dagre layout for the graph. Then I manually position cytoscape node elements, which act as buttons, on each graph node. This lays out fine. Image is attached below.
However, when I drag a node around, the connected graph nodes become 'foregrounded' and are drawn on top of the 'buttons' that I have positioned on top of each node.
I have tried to manually set the z-indexes of each of these 'button' nodes to a very high value (Number.MAX_SAFE_INTEGER) and also setting the z-index of the connected graph nodes to a very low value, but the graph nodes still clip through and are drawn on top of the 'button' nodes for the duration of the drag.
How can I prevent the nodes graph nodes from overlapping/being drawn on top of the nodes that I manually placed?
How it should look:
The red/green/black bars and arrows are nodes that are drawn on top of the base graph node
How it looks on drag - not desired:
The connected nodes (violet colored nodes) are covering the 'button' nodes
Related
I see cytoscape.js has support for an overlay, but could not find any way on how to draw a similar shape, but one which is behind the node body, instead of on top of it.
Overlay:
My use case is basically to have something that does not darken the node body when the node is active. Can we somehow manipulate the z-index of the overlay, so that it is shown below the node?
I have a really huge network. In my webapp, I want to be able to select nodes and edges then I change the style to selected stylesheet. I have succeed with this but the problem is the edges always behind another nodes because it is too crowded. Is it possible to make all selected nodes and edges to be in the foreground? I knwo about z-index but it seems it can not set selected nodes and edges to the foreground.
See the visibility style properties: http://js.cytoscape.org/#style/visibility
From the docs:
z-compound-depth : May be bottom, orphan, auto (default), or top. The first drawn is bottom, the second is orphan, which is the same depth as the root of the compound graph, followed by the default of auto which draws in depth order from root to leaves of the compound graph. The last drawn is top.
z-index-compare: May be auto (default) or manual. The auto setting draws edges under nodes, whereas manual ignores this convention and draws solely based on the z-index value.
z-index : An integer value that affects the relative draw order of elements. In general, an element with a higher z-index will be drawn on top of an element with a lower z-index within the same depth.
So, you need to set at least z-index-compare: manual and z-index if you generally want edges over nodes.
Used cytoscape.js to draw a graph using compound nodes. Need to position the inside node (i.e. child) to specific position of compound node (e.g. left, right, top, bottom, etc.). Is there any way to do this?
This feature is planned for 2.4: https://github.com/cytoscape/cytoscape.js/issues/530
I want to set the color of all edges that are attached to a selected node, so that each time a user selects a node any edges that the node is either a source or target of will be a different color. What would the selector look like for this, or is it not possible?
You can't just use a selector, because you need a small graph traversal in addition to the initial filter, e.g.: cy.$('node:selected').neighborhood('edge'); i.e. for selected nodes get all connected edges
Or cy.$('node:selected').connectedEdges()
I have a lot of different sprite nodes with a physicsbody the same size as the object. For positioning I need to change the anchorpoint of the node, but this changes the position of the physicsbody as well. Is there a way to keep the anchorpoint for the physicsbody centered? Using a path for the physicsbody is no option because I have so many different objects.
The anchorPoint is a purely visual property, it defines how the texture is drawn relative to the node's position. The physics body remains unaffected by changing the anchorPoint, it remains centered on the node's position.
So in a sense, the physics body does remain centered on the sprite's position already. By changing the anchorPoint you merely changed where the sprite's texture is displayed, and I believe you assumed the physics body would center on the sprite's anchorPoint. It does not, for one every node can have a physics body but only few nodes (sprite, scene, video) have an anchorPoint property.
The best way to fix this is to create your sprite images so that the physics body is always assumed to be centered on the image. Leave transparent borders around the image to ensure the image size is always the same and the position of the body properly centered.
You can also use SKPhysicsBody bodyWithRectangleOfSize:center: initializer to define the center point of the body and to match it up with the sprite's anchorPoint. But this is tricky and counterproductive, as you'll have to constantly realign body and sprite anchorPoint if you make even the smallest change.
Other than that it's best to leave the anchorPoint alone, especially with physics.
An old thread but still pops up when I google searched... Here was how I solved the problem for myself.
I essentially just stacked my SKSpriteNodes. The highest level parent node would receive the SKPhysicsBody so that all the objects would stay together. If you add the SKPhysicsBody object as a child to another node, the physicsBody can essentially fall out of the other nodes (images would be left floating in my case) when gravity or other forces are applied and can return some wonky results if you aren't careful.
To further clarify:
Parent node with no image/texture associated with it, just a size and then the physicsBody. (This node had the modified anchor point)
I then added a child node that had my "body" texture. (position had to be adjusted to make up for the parent's anchor point)
Finally I added two more child nodes to the "body" node to make up the eyes.
This specifically allows you to use a texture based SKPhysicsBody or something more complicated that does not have a centering option.
The physicsBody worked just as I needed it to while still being able to manipulate SKActions in the way in which a modified anchor point allows.
Hope this helps someone.