Fishbone diagram drag problem

GoJS
#1

I encountered a problem when using fishbone diagram layout.
When I drag the node to the other side, the style of the dragged child node does not change to the style when it is on the other side.

1
1717×486 7.47 KB
2
2737×522 9.48 KB

This is my first problem, the overall style changes when the node is dragged to the other side.
My second question, I want to change the order in my data nodeDataArray after changing the position.
My third question, the node I drag should not exceed the root node position.
4
4785×453 9.54 KB

This is my test demo fishDemo
please help me! Thank you

#2

It seems to me that the first and third problems are almost the same – you want to restrict where nodes can be dragged, because each node is designed to be in a particular parallelogram-shaped area.

This can be done by setting Node.dragComputation, https://gojs.net/latest/api/symbols/Part.html#dragComputation , or by overriding DraggingTool.computeMove, https://gojs.net/latest/api/symbols/DraggingTool.html#computeMove and making sure the node does not leave its proper three-sided parallelogram area. But maybe you do not need to do this work…

Normally the order of data in the Model.nodeDataArray should not matter. In the case of using a TreeLayout, the programmer can control the relative ordering of the immediate children of a node by setting TreeLayout.sorting and TreeLayout.comparer. This is complicated in FishboneLayout because it uses go.TreeLayout.AlignmentBusBranching.
https://gojs.net/latest/api/symbols/TreeLayout.html#comparer

But maybe you are wanting to change that ordering when the user drags outside of the natural parallelogram? You can do that by adding your own data property that specifies the order of the children within the set of siblings, and sorting on that property. I suggest that you could do that when the user finishes dragging the node, in a “SelectionMoved” DiagramEvent listener. You would need to figure out the new ordering of siblings based on where the node was dropped.
https://gojs.net/latest/intro/events.html#SelectionMoved

A good thing about doing this ordering is that it also can avoid the need for implementing what I suggested above for the first and third problems. You would not care where they dragged a node, because the end position only signifies the desired relative ordering, which in turn would cause another layout to be performed.

#3

Thank you very much for the ideas provided, I will try them out.
Thank you!

#4

I tried to use the “SelectionMoved” method to listen, but I don’t know how to get the relationship between the placement of the node and other nodes. How should I get it? I have no idea now, please help me.

#5

I also encountered a problem when trying to “SelectionMoved”. In the “FishboneLayout” layout, the child nodes are arranged in a left-to-right manner. How can I make the child nodes be displayed on one side and three sides.
1 1590040568(1)

#6

The Bus alignment of TreeLayout positions the children alternately on the two sides of the “aisle” between them. If you have four children and you want one on one side and three on the other side, you will need to create at least one dummy vertex so that they can alternate the way that you want.

There are a few examples of using dummy vertexes in customized TreeLayouts. The Org Chart Editor with Assistants uses Bus alignment to position the assistant nodes. The non-assistant nodes get placed as children of a new dummy vertex. But to make sure that dummy vertex is positioned at the end of the “aisle”, not as an assistant vertex, it makes sure that there are an even number of assistants by adding a dummy assistant vertex if needed. Then it adds the dummy vertex for all of the regular child nodes.

In your case you’ll want to make sure your custom FishboneLayout has twice as many vertexes as there are nodes on any side. That would mean six vertexes for the four nodes in your example. And you would need to have them be in alternating order: top/left, bottom/right, top/left, bottom/right, top/left, bottom/right.

#7

Thanks for the ideas provided, I will try it, thank you again!

#8

Sorry, I didn’t understand the fishbone diagram code, they are placed on the left and right of the fishbone according to what attributes. I tried to add a virtual node, but it didn’t achieve the desired result. I’m sorry, I hope you can use the code explanation to help me again, thank you!

#9

By the even-odd-ness of their index in the parent vertex’s https://gojs.net/latest/api/symbols/TreeVertex.html#children

#10

thank you very much!

#11

I’m sorry, I am still a novice with limited abilities. I did not achieve the effect I wanted. I still have n’t been able to drag and drop the nodes to change the position. According to the ideas you provided, I still have n’t been able to use the code to achieve the effect. I do n’t know where it went wrong. I sincerely hope that you can write a simple demo to help me and achieve the desired effect.
Thanks again for your previous help, thank you very much!
Thank you!

#12

Yes, such a customization is not so easy to implement. Once you purchase a support contract I can implement that custom FishboneLayout for you. Update your forum profile and ask again.