Создание динамического интерфейса для вашего плагина Figma.
Создание плагина Figma: часть 5 из 6
** Код этого раздела находится здесь. **
В этой главе мы собираемся управлять пользовательским интерфейсом на основе обновлений, которые мы получаем из песочницы плагина. Продолжайте и откройте ui.html, если он еще не открыт, и обновите его следующим образом:
Мы добавили HTML-код для отображения некоторых наших результатов, а в <script/> мы используем некоторые методы браузера для поиска и изменения этих HTML-элементов при получении нового сообщения.
Если мы щелкнем мышью, мы увидим обновление пользовательского интерфейса плагина:
🔁 Замена переднего плана и фона
Если вы похожи на меня, вас будет немного раздражать, что мы не можем поменять местами два цвета. Это особенно раздражает, потому что порядок слоев в figma.currentPage.selection в основном случайный, поэтому мы не можем с уверенностью выбрать, какой слой будет каким.
Чтобы решить эту проблему, мы собираемся добавить кнопку в пользовательский интерфейс, чтобы поменять местами текущие цвета. Когда кнопка нажата, мы хотим отправить сообщение обратно в песочницу, чтобы поменять местами эти цвета. Вот как выглядит публикация сообщения на этом конце:
Получаем кнопку и назначаем ей onclick обработчик. Этот обработчик запускает parent.postMessage для отправки сообщения от iframe и присваивает ему type swap.
Затем в code.js нам нужно прослушать сообщение с помощью figma.ui.onmessage прослушивателя:
Если мы запустим плагин сейчас и нажмем кнопку подкачки, мы увидим, что консоль выдает сообщение с типом swap.
Итак, мы получаем сообщение, но как мы собираемся поменять местами цвета?
По этой причине мы переместили текущие цвета в переменные вверху файла code.js. Каждый раз, когда выбор изменяется, мы назначаем соответствующие цвета этим переменным, поэтому теперь все, что нам нужно сделать, это поменять местами значения этих переменных и снова вычислить контраст.
Один из способов сделать это - вот так ☝. ️ Использование массивов для обмена значениями переменных без использования набора временных переменных. Это называется деструктуризацией сопоставления массива присваиваний, что действительно скатывается с языка. Обратите внимание, что мы также добавили переменную backgroundAlpha, чтобы замена цветов обеспечивала правильную прозрачность.
Фактически, если бы нам не нужно было обрабатывать непрозрачность переднего плана, нам вообще не пришлось бы пересчитывать контраст. Коэффициент контрастности между двумя сплошными цветами никогда не меняется, независимо от положения переднего или заднего плана.
Откройте это в Figma и протестируйте. Вы должны увидеть, что цвета переднего плана и фона меняются местами:
Это круто. Цвета меняются местами, и оценка пересчитывается, что мы видим при тестировании цветов с непрозрачностью.
🩺 Устранение структурной проблемы
Но есть одна проблема. Цвет foreground отправляется как исходный сплошной цвет вместо нового смешанного цвета, который мы получаем с помощью нашей функции overlay().
Почему? Это потому, что, когда мы вызываем sendContrastInfo(), мы вызываем его с нашими глобальными цветовыми переменными, и мы не обновили это, чтобы иметь наш новый смешанный цвет.
Итак, как мы можем это исправить? Что ж, это небольшая структурная дыра, которую мы вырыли сами, но очевидное решение - переместить наш вызов sendContrastInfo() внутрь функции calculateContrast(). Это даст ему доступ к новому наложенному цвету. Обратной стороной этого является то, что теперь calculateContrast() выполняет более одного действия, что не является сверхчистым кодом. А пока мы собираемся разобраться с этим, переименовав функцию, чтобы было ясно, что у нее есть побочные эффекты:
Не забудьте вызвать его с параметрами foreground и background с локальной областью действия в качестве аргументов, а не с параметрами foregroundColor и backgroundColor с глобальной областью действия. Затем мы удаляем вызов sendContrastInfo() из наших слушателей:
Теперь в Figma мы видим, что правильное значение цвета отправляется пользовательскому интерфейсу:
Уф. Это было много. Но хорошая новость в том, что это вся необходимая функциональность песочницы!
В последней главе мы собираемся очистить пользовательский интерфейс и рассмотрим некоторые дополнительные улучшения, такие как объединение вещей с веб-пакетом.
