# TreeNode Class - Graphical Output

Hi everyone,

i translated Rod Stephens wonderful graphical TreeNode-Output-Class to Xojo. Now i wanna draw the dynamic Tree not only from Top to Bottom. I would love to draw the Tree optional from Left to Right, Right to Left or Bottom to Top. The only Method we need to modify is TreeNode’s Arrange-Method. But how? I’m not an maths genius. I think we will need one Arrange-Method for each direction!?

So feel free to play with this sample TreeNode-Class.

Greetings!

Nice. Since the logic of arranging is the same for all 4 directions I figure it could be done with 1 arrange method that uses a direction token which gets the coordinates in the order and side needed. Basically separate the logic from the coordinate orientation. I might fiddle with this tonight.

Also, while resizing the drawing jumps up and down. Fixed it with Max() in Window1.UpdateTree

```ScrollBarHorizontal.Maximum = Max(0, Self.TreeWidth - Canvas1.Width) ScrollBarVertical.Maximum = Max(0, Self.TreeHeight - Canvas1.Height)```

[quote=292474:@Will Shank]Nice. Since the logic of arranging is the same for all 4 directions I figure it could be done with 1 arrange method that uses a direction token which gets the coordinates in the order and side needed. Basically separate the logic from the coordinate orientation. I might fiddle with this tonight.

Also, while resizing the drawing jumps up and down. Fixed it with Max() in Window1.UpdateTree

```ScrollBarHorizontal.Maximum = Max(0, Self.TreeWidth - Canvas1.Width) ScrollBarVertical.Maximum = Max(0, Self.TreeHeight - Canvas1.Height)```[/quote]
Thanks Will, i’ll look forward, if you “crack” this This is just a simple Tree-Structure, so at the moment it’s not possible to show the father and mother of the children (relationships). Have to think about, how to modify.

As you can see, you can create a JSON-Structure of the Tree by clicking the JSON-Button. I would love also to be able to add JSON-Code from Clipboard (PushButton3) and draw the Tree. But PushButton3.Action didn’t works fine at the moment…because of parsing. It adds only the first Generation.

Hi everyone,

just as an short update: After a few days i got a working graphical left to right output. Bottom to top and right to left are still open. It’s difficult, because the tree needs to arrange and drawn from the last child up to the root. I don’t know how. To much maths. Maybe someone played a little bit with the source and found a solution. Please share.

I’ve worked on this the last couple days but been stymied in implementing a singular arrange method like I first suggested. Duplicating Arrange and DrawTreeLinks and modifying them for another orientation took 10 minutes, it’s just going through the lines and swapping coordinates, but that’s inelegant. Yet the elegant solution eludes me for now.

You don’t need to arrange from the last child up, just start the root at the bottom or right and position children in a negative direction. I can manually add those orientations later tonight, should be easy (but I’ve said that before ).

Hey Will,

sounds like you have a solution?! I’m looking forward to your Project.

Thanks

Well, again I was confounded by something I thought to be easy but finally came up with a solution. It’s not the small elegant change I’d envisioned, just couldn’t figure that out.

Instead this uses 2 methods: ArrangeDown (the original Arrange) and ArrangeRight (xy swapped). To get Up and Left I added method invertPosition. This simply moves node centers to the other side. So, to arrange in the up direction first ArrangeDown then go through and calculate Center.Y = TreeHeight - Center.Y for each node which mirrors it about the midline.

DrawSubtreeLinks was split into horizontal and vertical versions too. And the g parameter was removed from the interface and other places where I didn’t see it being used. The direction choice is an integer for laziness but should be an Enumeration.

[code]Public Sub Arrange(ByRef x As Integer, ByRef y As Integer, direction As integer)

Select Case direction

Case 0 //Down
ArrangeDown( x, y )

Case 1 //Right
ArrangeRight( x, y )

Case 2 //Up
ArrangeDown( x, y )
invertPosition( x, y, direction )

Case 3 //Left
ArrangeRight( x, y )
invertPosition( x, y, direction )

End
End Sub

Private Sub invertPosition(spanX As integer, spanY As integer, direction As integer)

if direction mod 2 = 0 then //up down
Center = new Xojo.Core.Point( Center.X, spanY - Center.Y )
else //left right
Center = new Xojo.Core.Point( spanX - Center.X, Center.Y )
end

for i As integer = 0 to Children.Ubound
Children(i).invertPosition( spanX, spanY, direction )
next

End Sub[/code]

I still think a single recursive Arrange method solution is possible and thought someone would’ve spotted it by now. It’s something I’ll continue to look at in my spare time for a puzzle, at least to identify why I’m not solving it.

Will, thats looks really cool! Thank you. I made one modification at the:

ArrangeDown Method

```// Allow room before the next sibling. x = If(Children.Ubound > 0, x + HOffset, x)```

ArrangeRight Method

```// Allow room before the next sibling. y = If(Children.Ubound > 0, x + HOffset, y)```

Next steps i’ll look forward is to realize MouseHover/MouseDown-Events for each Node. Also to draw more complex trees (familie with 2 root Nodes - father & mother)…But that isn’t easy. I have to think about it!