Coder-Spirit / Coder-Spirit/beautiful-tree

feat: index-shaped layout algorithm

Open
#46 0 comments 0 reactions 0 assignees View on GitHub
algorithms enhancement hacktoberfest
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.