Protopie 4.3

И так краткий перечень функций, которые будут в Protopie 4.3:

1. Возможность создания вложенных компонентов;
2. Автозаполнение действия Send и триггера Receive;
3. Строка состояния системы;
4. Размытие фона как у iOS;
5. Привязка значений к целым пикселям;
6. Поддержка формул в значениях действия Color;
7. Дублирование взаимодействий;
8. Новые рамки устройств;
9. Возможность закрепить сцену и панель компонентов;
10. Кнопки навигации по сценам и компонентам.

10. Кнопки навигации по сценам и компонентам.

Работают как стрелочки в браузере. Т.е. если вы, делая прототип, переходите по страницам в таком порядке:

Нажимая стрелку назад - вы перейдете по страницам в обратном порядке:

Удобное нововведение, учитывая то, что добавили вложенные компоненты. В больших прототипах я часто искал сцену с которой залез в компонент, а когда прототип тяжелый - каждая сцена грузится довольно долго, и перейдя не в ту сцену становится грустно)

9. Возможность закрепить панель сцен и компонентов.

Можно закрепить, например, только панель компонентов, а панель сцен оставить как раньше - выезжающей. Таким образом на сцену можно быстро набрасывать нужные компоненты.

Либо, если делаешь простой прототип и не используешь компоненты, то закрепляешь панель сцен, для удобного перемещения между ними.

Мне - понравилось. Когда много компонентов и сцен, подобный навигатор необходим.

8. Новые рамки устройств.

Добавили такие рамки как iPhone 11 Pro / Pro Max, Google Pixel 4 / 4 XL

Штош... Ждём когда они сделают респонсив лайаут, вместо этих костылей с кучей экранов)

7. Дублирование взаимодействий.

Добавили в контекстное меню пункт Duplicate для действий. Также для этого действия добавили хоткей Ctrl / Cmd + D

Интересно, когда они добавят стандартное действие Вырезать? =)

6. Поддержка формул в значениях действия Color.

Удивительно, но встречал очень много людей, запрашивающих эту функцию. Жаль что программируемые градиенты пока не завезли..

Вот, я сделал небольшой пример, который использует новую возможность.

5. Привязка значений к целым пикселям.

Теперь размещая объекты и меняя им размер - координаты и размеры будут всегда целочисленными значениями.

Дробные значения можно указать только вручную, вписав значение в поле ввода.

4. Размытие фона как у iOS.

Вот тут команда Protopie меня немного удивила.

Размытие фона в ProtoPie - это отдельный объект, который размывает всё под собой и имеет 13 (ну или 14) разных вариантов размытия.

Ну типа стандартное размытие у иос имеет такие параметры, поэтому сделано так.

Вот демка, показывающая все типы размытия. Работает в браузере и в iOS ProtoPie Player. В плеере Андроида работать не будет.

3. Строка состояния системы.

Включить и отключить статус бар можно в настройках сцены. У каждой сцены может быть разные настройки статус бара

К сожалению ни триггеров ни условий ни формул в этой версии не завезли. Даже текущее время не получить (хотя обещали). Видимо перенесли на следующую версию.

На одной странице можно установить только одни параметры. Чтобы в прототипе изменить цвет статус бара - нужно будет делать переход на новую сцену. Немного поэксперементировал со статус баром тут.

Также с обновлением добавят новую предустановленную переменную $statusBarHeight - Переменная даёт высоту статус бара вашего девайса. Это может быть полезно для расчетов различных отступов, чтобы контент не заходил под статус бар.

2. Автозаполнение действия Send и триггера Receive.

Из заголовка мне было не понятно что именно это означает. Теперь при создании действия Send в поле сообщение будут подсказки всех тех сообщений, что слушают в выбранном канале. Т.е. если у вас в прототипе где-то есть Receive с сообщением TOGGLE_ON и другой Receive с сообщением TOGGLE_OFF, то создавая Send в поле сообщение будут предложены эти варианты. Также и наоборот, создавая триггер Receive - будут предложены все сообщения которые написаны ранее в Send на выбранном канале (например Current Scene)

Очень важное нововведение, позволит сэкономит кучу времени. Я например раньше создавал дополнительные текстовые перезаписываемые переменные, в которые записывал все сенды и ресивы текущего компонента

Кстати, насчёт выбранных каналов. Их стало гораздо больше, как я и предполагал, но об этом в последнем, самом важном пункте.

1. Возможность создания вложенных компонентов.

Самое крутое в дополнении - это конечно же Nested Components. Теперь Возможности практически безграничны.

Вместе с возможностью складывать компоненты внутрь компонентов появились дополнительные каналы вещания для действия Send и триггера Receive

Благодаря автокомплиту сообщений, описанных выше - становится понятнее как работают каналы. Сейчас я опишу несколько кейсов, для лучшего понимания работы с компонентами.

У меня есть Компонент 2 внутри Компонента 1, который внутри Сцены 1.

1. Если я делаю Send to Parent из Компонента 2, то это сообщение я услышу только с помощью триггера Receive to Child component находясь в Компоненте 1. Из Сцены 1 таким образом я не услышу отправленное сообщение. Однако, если я размещу Компонент 2 на Сцену 1, то на Сцене 1 я смогу услышать сообщение, используя обычный Receive from Component
2. Если я делаю Send to Current Scene из Компонента 2 (или любого другого места), то это сообщение я услышу везде. В любом другом компоненте - родительском или дочернем, главное, чтобы они все были расположены на Сцене 1 (ну или внутри других компонентов, которые расположены на Сцене 1) Теперь в любом месте мы можем установить триггер Receive from Current Scene и поймаем передаваемое сообщение.
3. Если я делаю Send to Current Component из Компонента 2, то это сообщение я услышу только внутри Компонента 2, используя триггер Receive from Current Component
4. Если я делаю Send to Child component из Компонента 1 в Компонент 2, то это сообщение я услышу только внутри Компонента 2, используя триггер Receive from Parrent

Вот небольшой пример с вложенными компонентами

__________________________________

Автор - @anafemest

Телегам канал ProtoPie и наш чатик