Расскажу для начала, что от него жду и зачем все вообще.
Функциональное требование 1
Мне нужна система, которая будет показывать различные объекты на сцене: тексты, прямоугольники, стрелочки, картинки и т.д.
Функциональное требование 2
Я хочу описывать сцену программно. Это даст возможность строить сцену при помощи циклов, получать интересные эффекты (генеративная графика типа), строить пресеты, фасады и другие интересные штуки. А кроме того, конвертировать в различные форматы.
Функциональное требование 3
Мне нужно заставить элементы двигаться по экрану. А также плавно появляться и исчезать. Ну какая хорошая презентация без этого? 😱
А еще хочу экспортировать движение сцены в видео-формат. Но это уже на закуску 🤫
Дальше расскажу про устройство.
Начну не с нуля, а с того, что уже есть. А есть уже немало 🙂
Что уже готово
Первая тройка примитивов (компонентов): Text, Box, Flex.
Для разработки и тестирования их вполне хватает, поэтому пока не расширяю их количество. Добавить их будет не сложно позже. Сложно определиться — что же все таки есть примитив 🙈
Декораторы
Нет, это не те декораторы, что из паттернов проектирования. Я их ввел для более эффективной визуальной настройки компонентов. Есть примитивы, которые могут работать с одинаковыми настройками. Например обводка (border). Его можно применить к примитивам Text, Box, Image и т.д.
Если настройку обводки сделать только лишь, скажем, в Box. То это приведет к тому, что если нам нужна обводка у текста или картинки, то нам нужно будет разместить один компонент в другой. На масштабе, это выльется в не оптимальную перегруженную структуру. Декораторы помогут избежать этого.
Семейство настроек компонентов
Пока их пара десятков. Как общих для примитивов, так и частных для конкретных реализаций. Сами настройки поделены на типы: string, boolean, number, list.
Кстати, настройки — это штука тонкая и важная, вероятно даже базовая. Их верное устройство гораздо важнее самого движка. Т.к. их много и они разные, а движок один 😅
Кроме того, то, что мы видим в итоге на экране, это интерпретация совокупности настроек компонентов. Движок же только показывает нам это.
Валидаторы значений
Куда же без них. Кто же еще проверит корректность значений, с которыми мы работаем? Правильно — валидаторы. Завозим.
Range-значения
Они плотно работают с валидаторами. Если есть типы данных и значения, к которым мы все привыкли, и которые первым делом спрашивают на собеседованиях 😎 — string, number и т.д. Так вот Range-значения хранят в себе значения в диапазоне. Например, для прозрачности: от 0 до 100, а вот для поворота уже может быть от 0 до 360. А есть еще списки значений. Так вот чтобы облегчить себе жизнь, нужно внедрить и такую сущность. Надо.
Движок рендеринга сцены
Компонент, парсящий все дерево сцены и обеспечивающий жизненный цикл размещенных в нем компонентов. Его основная сложность в том, что если неверно его спроектировать, то в будущем скорее всего это приведет к шторму и отсутствии возможности его поддерживать. Придется откатываться далеко назад и выбирать другой путь. А это сильно скажется на клиентском коде и работе компонентов.
Система плагинов
Вся базовая работа сцены строится на самих компонентах и движке. И этого даже хватает для работы. Однако, может потребоваться более широкая логика в клиентском коде, и это нужно как-то сделать без необходимости залазить в движок. Туда вообще лезть не надо, знаете ли 🫣
Утилиты
Разные функции, полезные в использовании. Тут как и в любом другом проекте.
Песочница
Обычная страница, на которой я провожу эксперименты. Какие? Поделюсь в следующих постах 🙌
Keep in touch.
Подписывайся на мой канал в TG: https://t.me/cantfailcode