Functionality in Org Chart to shift a node to left

GoJS
#1

Hi,

I am using org chart functionality of Gojs. I want to know if any functionality in Org Chart to shift a node to left or right to its current position.

Exp: We have an org chart having 8 children with context menu. The context menu have two link “Shift Right” and “Shift Left”. If user click on “Shift Left” link the node should swap to its(adjacent) left node. Similarly if user click on “Shift Right” then selected node should swap to its(adjacent) right node. Please help…

Note: If user select a node that’s have no adjacent left node then “Shift Left” link should be disable similarly for “Shift Right” link.

#2

Is the purpose of the swapping positions meant to be “permanent”? In other words, if a TreeLayout happens again, would you want it to continue ordering children in the same way? Or is the swapping of node locations just a “temporary” thing?

Assuming it is meant to be “permanent”, you will need to set TreeLayout.sorting to go.TreeLayout.Ascending and TreeLayout.comparer to a function that compares two TreeVertexes and returns -1 or 1, depending on the relative ordering that you want to maintain amongst siblings. That comparer function can look at the TreeVertex.node and TreeVertex.node.data in order to return -1 or 1 (or 0 if “equal” and thus don’t care).

The Pipes sample demonstrates this, although it uses GridLayout instead of TreeLayout. You’ll want to compare some property that you add to your node data, not the key as that sample does.

So your command to swap the order of children would swap that new property value for the two node data, and then you would call Diagram.layoutDiagram(). If you call Model.setDataProperty on each node data and if you do this all within a transaction, everything should be undoable/redoable as well.

#3

Hi,
Can you please give me an example to get Left Or Right node from clicked node and also shift the position?
I have used same properties which you have suggested. But its changing data only and working when only group in Node i.e. no members are added in group. My scenario is different, I need to swap the position of left node with position of right node with its child node and data also and it will be permanent change, and also we need the location of swapped node.




Please see attached image for more info


Note: I have implemented the same functionality in silverlight for org Chart.

Not drawing a tree with the children in the right order
#4

How did you define your TreeLayout.comparer function?

#5

Hi,
Below is the TreeLayout.comparer method.



myDiagram.layout =
GO(go.TreeLayout, {
angle: 90,
isRealtime: false},
{ comparer: keyCompare }, { sorting: go.TreeLayout.SortingAscending }
);





function keyCompare(a, b) {
var at = a.node.data.sequence;
var bt = b.node.data.sequence;
if (at < bt) return -1;
if (at > bt) return 1;
return 0;
}

Thanks

#6

OK, if you have the two nodes that you want to exchange, you just need to do something like:

var right = myDiagram.selection.first(); // the selected Node
var left = …; // the node to the left of the selected Node, if any
if (!left) return;
myDiagram.startTransaction(“shift left”);
// swap “sequence” values
var r = right.data.sequence;
myDiagram.model.setDataProperty(right.data, “sequence”, left.data.sequence);
myDiagram.model.setDataProperty(left.data, “sequence”, r);
// call this because the layout doesn’t know it depends on state that has changed:
myDiagram.layout.invalidateLayout();
myDiagram.commitTransaction(“shift left”);

Sorting and Snapping nodes on same level in a Tree layout
#7

Hi,
I did the same things but missed the below line
// call this because the layout doesn’t know it depends on state that has changed: myDiagram.layout.invalidateLayout();
Whats the way find the left node from selected node? I am finding by traversing one by one node. If any other way then please let me know.

#8

That could depend on how you assigned values for “sequence” in your node data. But most generally you can call Node.findTreeParentNode to get the parent node, and then Node.findTreeChildrenNodes lets you iterate over all of the children of that parent node, so that you can compare the Node.data.sequence values to find the largest one less than the selected one.