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.
Related
I have the following project: https://codesandbox.io/s/vue-template-c1rj1
I expect the image to just come up from the bottom of the screen already being in the middle of the page, but it first comes up from the bottom and then moves to the center of the page. I noticed that setting the width of the notification-box class to 100% fixes it but I am not exactly sure why.
The reason this is not working is because the fixed css property positions an element relative to the parent layer. Usually this is the viewport.
However, the transition property creates a new layer for the the Element it is used on. In your case, Vue applies the transition property during the animation - making the notification-box the next parent-layer (with a width of 0).
Positioning your Image 50% (of 0) left, does not do anything.
Once the animation is over, the transition property disappears, making the viewport once again the next parent layer. Now 50% left (of the viewport) gives you the desired result.
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 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.
So,
I have a fairly simple parent div containing two child divs, one is text (floated left), the other contains an image (floated left against the first child)...the float of the second is kind of irrelevant (I just don't want it to drop down below). But what I want to achieve is for the image to sit in the bottom right of the parent and STAY there. At the same time I want it to be part of a fluid grid and for the distance from the bottom/right to also be responsive.
I tried absolute positioning (with an extra parent added around it to position:relative), which just didn't work at all...it could only be left/top positioned which then wouldn't work in %'s.
I then tried adding padding (top, left) instead of using positioning, thinking I could maybe push it into place...which worked great for keeping it to the right (pushing left), but obviously didn't work for the bottom (pushing from the top), as this value needed to increase as the screen decreased rather than the other way around (doh!).
Just wondering if anyone has any ideas or creative solutions?
I know I'm trying to do a number of tricky things all at the same time!!
Imagine a small red box (CALayer instance) drawn in the lower left corner of its parent layer (which is the root layer of a layer hosting NSView).
When the frame of the parent view changes, the red box should remain at the same position on the screen. I do this by adjusting it's position relative to the lower left corner of the parent view .
The problem is that in some cases there is flickering and I can see the red box layer being drawn in the lower left corner of the extended frame before it is shown at the correct position.
I assumed that wrapping the frame and position change into one CATransaction would make both changes together, but that doesn't always work (the docs say that by using a transaction the animations will start at the same time, but there still seems to be a race condition at times).
How can I adjust the frame of the parent NSView while keeping the child layer at its perceived position?
Example and code:
My own ideas:
Hide red box layer, update the position, show it again
Use constraints to bind it to the right corner. Problem is that this offset could also change and I would have to update the constraint which could lead to the same flickering issue.
Try deleting the code you have already made to have the layer move with the view and put this where you are creating the layer.
boxLayer.autoresizingMask = kCALayerMaxXMargin | kCALayerMinYMargin;