Skip to content

feat: index-shaped layout algorithm #46

Open
@castarco

Description

@castarco

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 .

Metadata

Metadata

Assignees

No one assigned

    Labels

    algorithmsRelated to internal algorithmsenhancementNew feature or requesthacktoberfestFor tasks eligible for Hacktoberfest participation

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions