CODEWITHSUNDEEP
javascriptdrag-and-dropcytoscape.js
J.W.
J.W.

Reputation: 11

Is there a way to drag and drop nodes into or out of other nodes in Cytoscape js?

i'm looking for a way to drag node/s out of its compound node and drop it to another node (which will then its new parent).

The example shows some captured nodes in compound nodes. But i found no way to "free" them by dnd.

http://jsbin.com/gist/5b192c88616af2f75344?output

I missing also some HTML5 events like dragover, dragout and such things. Is there a way to get it?

I tried to use the given cytoscape js events to "move" some nodes, but without a good user experience.

Upvotes: 0

Views: 1658

Answers (2)

Danielle Cerisier
Danielle Cerisier

Reputation: 561

Based on maxkfranz's answer this approach will allow for adding a parent to a node by dragging into it. Bind a tapend event (fires when released) to orphan nodes (those without parents) in which you detect if the mouse cursor is in the bounding box of a parent node.

//dragging orphan nodes into parents
cy.on('tapend', ':orphan', function(event){
    var node = event.cyTarget;
    var mouse = event.cyRenderedPosition;

    cy.$(':parent').each(function(i, ele){
        //ensure we dont drag into self
        if (ele !== node){
            //check if we dragged into a compound node
            var pos = ele.renderedBoundingBox();
            if (mouse.x > pos.x1 && mouse.x < pos.x2){
                if (mouse.y > pos.y1 && mouse.y < pos.y2){
                    console.log("Move ", node.id(), " into ", ele.id());
                    node.move({
                        parent: ele.id()
                    });
                }
            }
        }
    });
});

You may want to use a forEach loop instead and break the loop after node.move(), just in case of overlapping nodes and a slight performance increase.

Upvotes: 5

maxkfranz
maxkfranz

Reputation: 12242

Cytoscape.js allows you to build your own gestures by emitting custom events. It's pretty straightforward to create your own dragover etc. events on top of drag and ele.boundingBox(). You can structure your gesture and custom event into an autoscaffolded extension for more reusability, if you like. If you do make an extension, please consider submitting it to the list so other devs can benefit from it and contribute to it.

The core library has to be kept performant, which precludes doing expensive dragover checks. Otherwise, core usecases for other devs would be negatively affected.

Your custom gesture can make certain assumptions -- that the core lib couldn't -- to keep things faster. For example, if you care only about compound parent nodes for dragover etc. events, then you can do bounding box checks only for parents.

Upvotes: 1

Related Questions