How to lock the position of a cytoscape.js node within its parent node

Question

I want to lock the position of a node relative to its parent compound node, such that if I grab and drag the parent node, the child node moves with it, but the child is not individually grabbable. If I set the child to be ungrabbable and/or locked, then it doesn't move with its parent, but if I don't, it can be individually dragged, which I don't want. Can this be done?

Failing that, is there a way to programmatically grab/ungrab a node so that I can listen for a grab event and then grab the parent instead/as well?

Answer 1

Compound grabbing/locking logic with children probably needs to be improved in general, but you should be able to achieve the effect you want today with the current version:

cy.nodes().nonorphans()
  .on('grab', function(){ this.ungrabify(); })
  .on('free', function(){ this.grabify(); })
;

This makes all nonorphan/child nodes not directly grabbable but still moveable with their parents.

Ref for improvements : https://github.com/cytoscape/cytoscape.js/issues/1074

Answer 2

For posterity, the code that will do this in cytoscape-automove

let nodeList = cy.nodes().nonorphans();
for (let i=0; i < nodeList.length; i++) {
        let n = nodeList[i];
        let parent = n.parent()[0];
        let family = parent.children();
        family.add(parent);

        this.cy.automove({
            nodesMatching: family,
            reposition: 'drag',
            dragWith: n
        });
    }