Coder-Spirit / Coder-Spirit/beautiful-tree
feat: index-shaped layout algorithm
- Dominant language
- TypeScript
- Stars
- 17
- Forks
- 3
- PR merge metrics
- No merged PRs in 30d
Description
## 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 .
Contributor guide
Research direction
Start in the `@beautiful-tree/algorithms` package to understand the existing layout algorithms, then review the `@beautiful-tree/react` API changes needed for right-aligned nodes. Use the visual example as the target layout and coordinate connector-line work with task #13; done means the index-shaped layout and required rendering behavior are supported.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100