JointJS - How can i expand and shrink from a parent node?

[Prashanth krishnan]

Hello,

I am evaluating JointJS Rapid framework.

How can I expand and shrink from a parent node?

Example: My requirement is on a node click I should hide all sub nodes and expand it on clicking it again(Just like a toggle button)

Regards

Prasanth

[dave]

Hi Prasanth,

You can react on the element:pointerdown event on paper and show/hide any other elements. Here's an example of showing/hiding embedded elements on click:

// Toggle our custom 'hidden' property on all embedded cells:

paper.on('element:pointerdown', function(cellView, evt, x, y) {

    var cell = cellView.model;

    var embeddedCells = cell.getEmbeddedCells();

    _.each(embeddedCells, function(child) {

        child.set('hidden', !child.get('hidden'))

    })

})

// React on changes in the 'hidden' property and show/hide the cell for which the property has changed.

// Note that all changes bubble up to the graph so we don't have to listen on all the cells separately.

// Instead, we can have just one handler for the change:hidden event on the graph.

graph.on('change:hidden', function(cell, changed, opt) {

    cell.attr('./opacity', cell.get('hidden') ? 0 : 1);

})

[Govinda Totla]

Hi Dave,

Thanks for the answer, even after 4 years I was able find to it useful. Just one thing here - 

I am using DirectedGraphLayout. After the elements have collapsed, how can I trigger the layout to re-render. It is possible in TreeLayout from Rappid using layout.layout(). Is it possible to do the same in DirectedLayout as well? Also, is there a filter property similar to that in TreeLayout which I can use for ignoring the hidden nodes?

Thanks 

[Roman Bruckner]

Hi,

1. It's better to use the `viewport` paper option to hide/show elements. (https://resources.jointjs.com/docs/jointjs/v3.2/joint.html#dia.Paper.prototype.options.viewport).

2.  DirectedGraph layout() function accepts an array of cells as the first parameter. So you can filter the cells  yourself before calling the layout.

joint.layout.DirectedGraph.layout(cells.filter(c => !c.isHidden()), { /* ...options... */ })

Best,

Roman

--

---
You received this message because you are subscribed to the Google Groups "JointJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jointjs+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jointjs/dff908e1-6803-4b37-9e83-bd23da4a78e7n%40googlegroups.com.

--

Roman Bruckner, CTO

client IO

http://client.io

http://jointjs.com

+420 776 504 406

[Govinda Totla]

Thanks a lot Roman, that works.