Введение
Ваши идеи. Ваши инструменты. Ваш DSK.
Design System Kit – набор специализированных UI-компонентов для творческих приложений от Flowscape Team. Он даёт разработчикам элементы управления, с которыми удобно и точно работать в редакторе: менять число перетаскиванием, выбирать цвет, поворачивать объект, настраивать кривую или упорядочивать иерархию.
Начните с одного компонента или соберите целую панель свойств. DSK написан на TypeScript, HTML и CSS и поставляется в виде пользовательских HTML-элементов, которые работают средствами браузера. Их можно использовать в обычном веб-приложении и связать с собственным движком отрисовки.
Зачем мы создаём DSK
Творческим приложениям нужно больше, чем обычные поля формы. Ширину объекта должно быть удобно менять перетаскиванием. Поле цвета должно показывать редактируемый цвет. Линейка должна использовать те же координаты, что и объекты на холсте.
Мы создаём DSK, чтобы такие взаимодействия можно было переиспользовать в инструментах Flowscape и других проектах. Наша цель – помочь командам уделять больше времени творческим возможностям своих редакторов, сохраняя контроль над внешним видом и поведением интерфейса.
В основе набора три идеи:
- Небольшие компоненты, которые работают вместе. Используйте отдельное числовое поле, соберите собственную палитру из цветовых контролов или разместите виджеты с привязкой к координатам вокруг рабочей области.
- Ваш визуальный стиль. Настраивайте компоненты через CSS-переменные и доступные части Shadow DOM. Создавайте окружающую разметку с помощью обычных HTML и CSS.
- Ваша модель приложения. Читайте значения, подписывайтесь на события и связывайте их со своим состоянием. Отрисовка, выделение, сохранение и общая история изменений документа остаются в ведении приложения.
Для кого этот набор
DSK предназначен для разработчиков инструментов дизайна, интерактивных досок, редакторов диаграмм, интерфейсов анимации и других интерактивных рабочих пространств. Он особенно полезен там, где пользователи редактируют объекты через панель свойств и нуждаются как в прямом управлении, так и в точном вводе значений.
Например, инспектор объекта может объединять числовые поля для позиции и размера, угловой контрол для поворота, палитру для оформления и поле выбора файла для изображения. Дерево слоёв может представлять иерархию документа, а линейки и маркеры – следовать системе координат редактора.
Эти части можно подключать независимо. Использование инпута DSK не требует замены существующего холста, управления состоянием или структуры интерфейса приложения.
Что входит в набор?
Текущая vanilla-реализация включает 19 пользовательских HTML-элементов, сгруппированных по назначению.
Поля ввода и выбор файлов
Основа панели свойств: точные значения, связанные поля и локальные файлы.
| Компонент | Назначение |
|---|---|
dsk-input | Числовое поле с вводом арифметических выражений, изменением перетаскиванием, границами и шагом. |
dsk-input-hex | Поле для редактирования и пошагового изменения шестнадцатеричных значений. |
dsk-input-color | Поле RGB/RGBA с образцом текущего цвета и настраиваемым отображением альфа-канала. |
dsk-input-group | Координирует поля, включая связанные изменения и отображение разных значений при редактировании нескольких объектов. |
dsk-input-upload | Позволяет выбрать или перетащить локальный файл, показывает миниатюру изображения или иконку документа и фильтрует допустимые типы. |
Управление цветом
Соберите палитру под свой интерфейс: от компактной полоски до полноценной панели.
| Компонент | Назначение |
|---|---|
dsk-color-area | Двумерная область выбора насыщенности и яркости. |
dsk-color-hue | Ползунок выбора оттенка. |
dsk-color-alpha | Ползунок изменения непрозрачности. |
dsk-color-eyedropper | Получает цвет с экрана, со страницы или через механизм считывания, предоставленный приложением, в зависимости от поддерживаемого режима. |
Углы и кривые
Визуальные контролы для свойств, которые проще понять через форму или направление.
| Компонент | Назначение |
|---|---|
dsk-angle | Контрол поворота в виде компаса со значением в центре, настраиваемыми границами и несколькими единицами измерения угла. |
dsk-curve | Редактор кривой для настройки плавности анимации и работы с точками и сегментами. |
Слои и иерархия
Представьте объекты документа в виде дерева и добавляйте вспомогательные элементы только там, где они нужны.
| Компонент | Назначение |
|---|---|
dsk-layer-tree | Управляет иерархией слоёв и изменением порядка перетаскиванием. |
dsk-list-value | Строка слоя или ветка, которую можно раскрывать, переименовывать и перемещать в дереве. |
dsk-list-header | Необязательная область заголовка списка. |
dsk-list-footer | Необязательная нижняя область списка. |
dsk-tree-search | Необязательное поле поиска, которое фильтрует дерево и сохраняет возможность раскрывать найденные ветки. |
Виджеты холста
Виджеты на HTML/CSS, которые подключаются к рабочей области без привязки к конкретному движку отрисовки.
| Компонент | Назначение |
|---|---|
dsk-pan-zoom | Лёгкая интерактивная область для HTML-содержимого с панорамированием и масштабированием. |
dsk-ruler | Горизонтальная или вертикальная координатная линейка с генерацией делений в видимой области, выделением диапазонов и перетаскиваемыми направляющими. |
dsk-canvas-marker | Подпись или аннотация, расположенная по координатам, с настраиваемым отслеживанием панорамирования и масштаба. |
Пакет также экспортирует вспомогательные функции для привязки собственных HTML-виджетов к камере. Вы решаете, какие виджеты следуют за перемещением и масштабом, а какие остаются неподвижными в рабочей области.
Первый взгляд на использование
Базовая схема подключения DSK: импорт → HTML → события. Задайте компоненту начальное значение, затем свяжите действия пользователя с объектом в своём приложении.
Установка в двух словах
Установите DSK через npm:
npm i @flowscape-ui/dskПолное руководство по настройке и инициализации в браузере находится в разделе «Подключение».
Одно поле, одна связь
Ниже – минимальный пример управления шириной обычного HTML-элемента. Отдельный движок отрисовки для него не нужен.
<dsk-input
id="width"
value="160"
min="40"
max="320"
aria-label="Ширина фигуры"
></dsk-input>
<div
id="shape"
style="width:160px;height:120px;margin-top:24px;background:#ff007a;border-radius:16px"
></div>Выполните этот модуль в браузере после появления разметки:
import '@flowscape-ui/dsk';
const width = document.querySelector('dsk-input')!;
const shape = document.querySelector<HTMLElement>('#shape')!;
width.addEventListener('input', () => {
shape.style.width = `${width.value}px`;
});Так же можно обновлять объект в своём движке вместо DOM-элемента. Большинство контролов значений отправляют input во время редактирования и change при подтверждении изменения. Программные присваивания обновляют компонент без этих пользовательских событий; собственные события специализированных компонентов описаны в их документации.
Создано Flowscape Team
Flowscape Team разрабатывает DSK как основу интерфейсов для создания и редактирования. Проект распространяется по лицензии MIT, а основное внимание сейчас уделяется vanilla-реализации веб-компонентов.
Посмотрите реальный пример с tldraw SDK: DSK связывается с камерой и объектами стороннего редактора обычными DOM-событиями.
Исходный код на GitHub открыт для изучения и участия в развитии проекта.
Если вам близко это направление, вы можете поддержать проект.
Куда дальше
- Попробуйте взаимодействия: откройте интерактивную главную страницу или запустите плейграунд по руководству подключения.
- Подстройте DSK под свой продукт: прочитайте раздел «Стили и темы».
- Соберите первую панель свойств: начните с полей и групп, затем добавьте контролы для своих задач.