treant-js icon indicating copy to clipboard operation
treant-js copied to clipboard

Moving nodes around

Open EskelCz opened this issue 8 years ago • 6 comments

Thanks for this awesome library, it does exactly what I needed. I'll soon contribute some improvements. (new connector style)

I have one feature request though. Have you tried movement of nodes with mouse / touch? (repositioning on x,y coordinates)

If not, I'll try to implement it myself. Any thoughts on how would you like to be implemented? (if at all) I'll be glad for any ideas or instructions.

EskelCz avatar May 16 '16 18:05 EskelCz

Hi, i glad you like the library.

I'm not sure how would repositioning work since node coordinates are mathematicaly determined for an ideal tree layout. Any user interction whold result in a disbalanced tree. Maybe you were talking about change the nodes parent by draging it to another parent?

This library colud have been written in a better way, so don't feel bad if you are having a hard time figuring out how to extend the functionalty :)

fperucic avatar May 17 '16 14:05 fperucic

I think these are two separate concerns. Optimal automatic layout is great but sometimes you want the freedom to move things around by yourself, like a mind map.

Here's a great example from GoJS (which is closed source and quite expensive): http://gojs.net/latest/samples/orgChartEditor.html

I'm thinking about moving nodes and children as well. Saving and loading positions as a meta data. I might end up not going this road at all but it's something I'm pondering how useful it actually is and how easy would be to implement. I see most complications in redrawing the connectors properly. But maybe it would force me to make the drawing method more universal.

EskelCz avatar May 17 '16 15:05 EskelCz

@EskelCz That example is pretty cool, I especially liked that you could add new leaves at the bottom. Did you ever figure out a way to do this?

n8jadams avatar Jun 27 '17 15:06 n8jadams

@EskelCz That example is pretty cool, I especially liked that you could add new leaves at the bottom. Did you ever figure out a way to do this?

I can. Look into Raphael.js Graffle. You're already using Raphael.js in Treant.js, so you need a little. Graffle has both supporting of dragging & smooth connecting lines. Because at now Treant.js make a lot of empty space between items and there are needed support to building each node on specified coordinates (x, y)

NDruce avatar Dec 27 '18 19:12 NDruce

So I can drag nodes to locations that I want and after it, in "drag end" callback I send query to server to save (store) it's coordinates. So I can build trees with custom node positions and smoothly connected, to reduce empty space in tree

NDruce avatar Dec 27 '18 20:12 NDruce

Can you add this please? @fperucic

NDruce avatar Dec 27 '18 20:12 NDruce