How can we implement an "underlay" in cytoscape.js - cytoscape.js

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?

Related

Foregrounding selected node and edge in cytoscapejs

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.

child node positioning within compound nodes in cytoscape.js

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

Drawing outside of NSWindow

I understand how to draw inside an NSWindow frame. But I don't understand how to achieve something like this for example:
If I knew, how this is called, I could investigate the matter further, but as I didn't know what to look for, this is impossible.
I appreciate any kind of hint.
Thanks a lot.
The app in the screenshot looks like it's using a customized NSDrawer. Drawers slide out from a side of a window and can display any content.
Take a look at the documentation to see if it's what you want:
https://developer.apple.com/library/mac/#documentation/Cocoa/Conceptual/Drawers/Drawers.html#//apple_ref/doc/uid/10000001-BABFIBIA
Drawers are easy to set up. However, while you have full control over the content inside a drawer, you don't have much control over how the border looks without using private APIs (e.g., the ragged edges in the screenshot). If you want more control, you can use a borderless child window.
Here's a tutorial that makes a borderless, entirely custom window: http://cocoawithlove.com/2008/12/drawing-custom-window-on-mac-os-x.html
Then, you can "attach" your custom window to the parent window with -[NSWindow addChildWindow:ordered:]. That will allow the child window to follow the parent window as it moves. You will still need to respond to changes to the parent window size, and perhaps some other properties, on your own.

Resizing a component added to the canvas by dragging along the edge

I am developing an application where I need to place rectangular slabs of different shapes to create the shape of a Bench Top. I am placing the rectangular slabs of different shapes(I am using a the Canvas container as the slab) in a repeater and dragging them on the main canvas. One functionality that needs to be implemented is the ability to resize these slabs once the are dragged from the repeater into the drawing canvas by dragging along their edges like we resize the windows that we normally see. Is there any way this can be done.
I just found an component developed for the purpose
http://www.rogue-development.com/objectHandles.html
I am going to check it out.
Please inform if anyone has any other solutions.

Propagating events in dijit.layout.BorderContainer

I've dijit BorderContainer overlaying a gfx surface which is movable (dojox.gfx.Moveable). Is there any way of disabling BorderContainer completely from catching mouse events and letting the Surface get them instead?
I've been thinking of publishing the BorderContainer events to Surface, but that's seems like an overkill and might run into problems along the way.
BorderContainer is just a DOM node with other nodes inside it, really. Since they're not contained by the gfx surface, you'd probably have to wire the events up to relay them, the same as you would any other HTML element. Perhaps you can use dojo.connect on the relevant events?