feat: simple tree layout + saving & loading session

[Yuu-Han]

Implementation of a simple tree layout

See displayTree3 in hmTree3View.js.

Features and settings

Tree features

• Nodes have the same width (nodeWidth)
• Nodes have different height

I used the layout algorithm posted in https://github.com/Vis4Sense/HistoryMap/issues/138#issuecomment-1862222056. It is a quite simple one which adds up the node height in a bottom-up way and there is no optimisation (e.g., compressing the tree).

The horizontal and vertical spacing between nodes are fixed, which is specificed in controls. The size of the canvas fits the size of the whole tree.

Issues

It is a quick test so a lot of settings are quite specific and temporary:

• Randomly generated node height
  • It should be the height of the html element
• Specific style setting
  • Currently lots of style properties are specified within the drawing function

Also there is no animation or transition when a new node is added, so it is a bit interruptive when using.

Preview

Here is a screenshot of the implemented tree:

[Yuu-Han]

A simple version of saving and loading session #140

Please feel free to point out anything that needs revision. I will fix that in my free time. (This won't pose any burden on me. I was attending something boring so I made a quick try.)

Preview gif: