coder-spirit / beautiful-tree Goto Github PK

Besides the current orientation (top -> down), add the following extra orientations:

• left -> right
• right -> left
• down -> up

Add some "nice" badges to the README, so people can have a better idea about "quality metrics" at first sight.

• introduce CSS classes to indicate to which "level" belongs each node
• introduce CSS classes to indicate the ordinality of each node among its siblings (wether they are the 1st, 2nd, 3rd... child)

It would be nice to have a small collection of examples of beautiful trees generated with our library.

Right now we are relying on ESLint and Prettier for linting, but this tooling combination is quire complex (and slow). Biomejs seems to be simpler to manage, and offer higher performance (we won't notice it much because Turborepo is already helping us, but it's worth to make everything as streamlined as possible).

It seems that we should split the exported types for ESM and CJS ( a thread on why: https://twitter.com/AndaristRake/status/1695549037556949344 )

• derive classes for vertices
• derive classes for edges

Add a new layout algorithm that pushes all the leafs to the "bottom" layer of the rendered tree.
It won't be the main layout algorithm, but it can be useful for some people.

Reorganise the code so the package @beautiful-tree/react is not at the root level of the repository, and we can have other packages as well.

Ideally, it should be done in a way that changes in a package only trigger the CI flow associated to that code and anything that depends on it, but nothing else (so we don't slow down our CI pipelines with useless work). Some tools that could help are Turbo Repo, or Nx.

This one is a precondition for the following tasks:

• #27
• #28
• #29
• #30
• #31

• data inside nodes
• data alongside edges

For some reason, it seems that Windows & Mac pipelines are much slower than those of Linux. It would be interesting to investigate what's behind that difference, and try to solve it if possible.

• bezier curves
• horizontal+corners+vertical connectors

Introduction

Sometimes we might want to render trees as if they were indices, using "new lines" and "tabulations" to denote the nesting level of an item within the tree.

Visual example:

BOOK
┣━ CHAPTER_1
┃  ┣━ FIGURE_A
┃  ┗━ FIGURE_B
┣━ CHAPTER_2
┗━ CHAPTER_3
   ┣━ SECTION_3A
   ┃  ┣━ FIGURE_C
   ┃  ┗━ FIGURE_D
   ┗━ FIGURE_E

The main changes belong to the @beautiful-tree/algorithms package.

Some extra notes

API Changes

Besides introducing a new layout algorithm, we might have to modify the API of or @beautiful-tree/react library.

This is because the current layout algorithms assume that the nodes will be drawn centered around each point given by the layout algorith; but in the case of the index-shaped layout, we want the nodes to be drawn on the "right side" of the given point (to ensure that they are always left-aligned with other nodes at the same level of depth).

Connector lines

Right now, we only have straight connector lines. For the index-shaped layouts we need to have vertical+corner+horizontal connectors (as depicted in the example above).

We already defined an independent task for this: #13 .

Allow dynamic inline styles, as they are quite useful when generating numeric values that can be predicted in advance (so we can't prepare specific CSS classes for them).

Right now, we are not adding the xmlns attribute to the <div> element inside the <foreignObject> elements.

• Although many browsers are able to render that content without that attribute, that doesn't apply to all of them.
• Also, the generated code doesn't work well if copied to standalone SVG files.