Swap tree branches with the button

I use to work DoubleTree.js. There was a need to change blocks by pressing a button on the blocks themselves. The idea is that when you click on a block button, it swaps places with the block below (as in the picture below ). Is there an implementation of this, and if not, could you tell me which direction to move in?

I assume you mean extensions/DoubleTreeLayout.js. Yes, you’ll need to set TreeLayout.sorting and TreeLayout.comparer so that each tree layout sorts the children for each parent node. You will probably want to set them on both DoubleTreeLayout.topLeftOptions and DoubleTreeLayout.bottomRightOptions.

Then in order to do the “swap”, you’ll need to change some data property on the two nodes (well, at least one of them) so that the comparer causes the nodes to be sorted differently, and then cause the layout to happen again. Something like:

myDiagram.commit(diag => {
  diag.model.set(node1.data, "someProperty", someValue);
  diag.model.set(node2.data, "someProperty", someOtherValue);
  diag.layout.invalidateLayout();
});