Skip to content

Простейшая реализация коносльного рендеринга из древовидной структуры, подобной HTML

Notifications You must be signed in to change notification settings

grigoriy-grisha/Hand-Of-MIdas

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

56 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Простейшая реализация коносльного рендеринга из древовидной структуры, подобной HTML

1052669

Проект состоит из 3 модулей

  • HOM (Hand OF Midas) - модуль занимется высчитыванием границ элементов, размеров. Модуль разбит на две фазы. 1-высчитывание размеров элементов, 2- высчитывание границ элементова основываясь на их размерах
  • HOMR (Hand OF Midas Renderer) - Модуль занмиется отображением всего на экран, имея размеры и границы элементов, так же модуль ренедрит текст во всех 9 выриациях
  • HOMF (Hand OF Midas Framework) - Простая оболочка над HOM, Представляет из себя фасад для взаимодействия с бибилиотекой, позволяет отлавливать клики на элементах и запускать перерендер всего содержимого

Проект очень простой и сырой, разрабатывался с целью развлечения и получения навыков, возможно, когда-то будет доведен до ума, и сможет рендерить HTML/CSS в консоли

Так же, хоть все и работает шустро, тут можно выделить подобие браузерному рендерингу. Все разделено на фазы. Можно делать минимум работы для изменения цвета, либо половину работы при изменении позиционирования только одного элемента (Вынос из основного потока)

Построенное дерево выглядит так:

HOM.NewHOMElement(
  HOM.NewElementParams{
    Style: &HOM.Style{
      PaddingRight:     5,
      PaddingLeft:      5,
      PaddingTop:       2,
      PaddingBottom:    2,
      VerticalContent:  HOM.VerticalContentCenter,
      AlignContent:     HOM.AlignContentCenter,
      AlignItems:       HOM.AlignItemsEnd,
      ContentDirection: HOM.VerticalDirection,
      Border:           true,
    },
    Children: &HOM.Children{
      Elements: []*HOM.Element{
        HOM.NewHOMElement(
          HOM.NewElementParams{
            Style: &HOM.Style{
              PaddingRight:    5,
              PaddingLeft:     5,
              PaddingTop:      2,
              PaddingBottom:   2,
              Border:          true,
              Width:           "100%",
              AlignContent:    HOM.AlignContentCenter,
              VerticalContent: HOM.VerticalContentCenter,
            },
            Text: &HOM.Text{Value: "Hello from the most simple and crippled console renderer in the world!"},
          },
        ),
        HOM.NewHOMElement(
          HOM.NewElementParams{
            Style: &HOM.Style{
              PaddingRight:     5,
              PaddingLeft:      5,
              PaddingTop:       2,
              PaddingBottom:    2,
              Border:           true,
              ContentDirection: HOM.VerticalDirection,
            },
            Children: &HOM.Children{
              Elements: []*HOM.Element{
                HOM.NewHOMElement(
                  HOM.NewElementParams{
                    Style: &HOM.Style{
                      PaddingRight:  5,
                      PaddingLeft:   5,
                      PaddingTop:    2,
                      PaddingBottom: 2,
                      Border:        true,
                    },
                    Children: &HOM.Children{
                      Elements: []*HOM.Element{
                        HOM.NewHOMElement(
                          HOM.NewElementParams{
                            Style: &HOM.Style{
                              ContentDirection: HOM.VerticalDirection,
                            },
                            Children: &HOM.Children{Elements: []*HOM.Element{
                              HOM.NewHOMElement(
                                HOM.NewElementParams{
                                  Children: &HOM.Children{Elements: []*HOM.Element{
                                    HOM.NewHOMElement(HOM.NewElementParams{ID: "1", Text: &HOM.Text{Value: "hello"}}),
                                    HOM.NewHOMElement(HOM.NewElementParams{Text: &HOM.Text{Value: "hello"}}),
                                    HOM.NewHOMElement(HOM.NewElementParams{Text: &HOM.Text{Value: "hello"}}),
                                    HOM.NewHOMElement(HOM.NewElementParams{Text: &HOM.Text{Value: "hello"}}),
                                  }},
                                },
                              ),
                              HOM.NewHOMElement(
                                HOM.NewElementParams{
                                  Children: &HOM.Children{Elements: []*HOM.Element{
                                    HOM.NewHOMElement(HOM.NewElementParams{Text: &HOM.Text{Value: "Some Text"}}),
                                  }},
                                },
                              ),
                            },
                            },
                          },
                        ),
                      },
                    },
                  },
                ),
                HOM.NewHOMElement(
                  HOM.NewElementParams{
                    Style: &HOM.Style{
                      PaddingRight:  5,
                      PaddingLeft:   5,
                      PaddingTop:    2,
                      PaddingBottom: 2,
                    },
                    Text: &HOM.Text{Value: "Нажми на меня и я изменю текст"},
                    OnClick: func(element *HOM.Element) {
                      element.Text.Value = "Текст изменен"
                    },
                  },
                ),
              },
            },
          },
        ),
      },
    },
  },
)

Такое рендер дерево будет преобразовано в такой интерфейс в консоли:

Screenshot_58

About

Простейшая реализация коносльного рендеринга из древовидной структуры, подобной HTML

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages