Svelte — это внешний компилятор, популярность которого резко возросла благодаря простоте использования и отличной производительности. В прошлом месяце был выпущен Svelvet 1.0, который получил большой отклик от сообщества Svelte. Svelvet — это библиотека компонентов, которая позволяет разработчикам Svelte создавать интерактивный пользовательский интерфейс на основе узлов. Мы рады объявить о выпуске Svelvet 2.0, который включает в себя множество новых функций и исправляет существующие ошибки.
Введите Svelvet 2.0
Svelvet — это библиотека компонентов Svelte с открытым исходным кодом, которая позволяет разработчикам создавать интерактивные диаграммы на основе узлов и пользовательский интерфейс. Это включает в себя рендеринг пользовательских узлов, краев, масштабирования и панорамирования. С Svelvet отображение идей и определение функциональных возможностей приложения стало проще, чем когда-либо!
Установка
Svelvet доступен как в виде пакета npm, так и в виде пакета yarn. Чтобы установить Svelvet в свое приложение, вам просто нужно ввести одну из следующих команд:
npm install svelvet
or
yarn add svelvet
Теперь, когда вы установили Svelvet в свое приложение Svelte, вам нужно импортировать его в ту часть кода, которая будет его использовать, вот так:
import Svelvet from 'svelvet';
Новые функции Svelvet 2.0
- Левая и правая опорные точки для ребер
- Смешанная функциональность ребер (исходный узел сверху/снизу к целевому узлу слева/справа)
- Добавление изображений к узлам
- Новые типы ребер (шаг и плавный шаг) )
-Настройка краев
-Настройка меток краев
-Интегрированная мобильная функциональность
-Исправлены нерешенные проблемы и ошибки GitHub
Недавно обновленная документация (www.svelvet.io) включает всю обновленную информацию, а также добавленный Svelvet REPL. Теперь пользователи могут создавать прототипы своих узловых диаграмм прямо с веб-сайта Svelvet и сохранять свои диаграммы как в настольном, так и в мобильном браузере.
Пример
Библиотека компонентов Svelvet состоит из узлов и ребер, эти узлы и ребра будут отображаться в соответствии со значениями, которые вы назначаете им в своем приложении. В этом примере мы будем отображать узлы и ребра с информацией ниже:
| <script> | |
| import Svelvet from 'svelvet'; | |
| const initialNodes = [ | |
| { | |
| id: 1, | |
| position: { x: 225, y: 10 }, | |
| data: { label: 'Add Images!' }, | |
| width: 100, | |
| height: 100, | |
| bgColor: 'white', | |
| borderColor: 'transparent', | |
| image: true, | |
| src: 'https://svelvet.io/_app/assets/Logo%201-cc7b0baf.svg' | |
| }, | |
| { | |
| id: 2, | |
| position: { x: 390, y: 180 }, | |
| data: { label: 'Mixed Anchors' }, | |
| width: 125, | |
| height: 40, | |
| bgColor: 'white', | |
| targetPosition: 'left' | |
| }, | |
| { | |
| id: 3, | |
| position: { x: 225, y: 260 }, | |
| data: { label: 'Output Node' }, | |
| width: 100, | |
| height: 40, | |
| bgColor: '#FFE4E6' | |
| }, | |
| { | |
| id: 4, | |
| position: { x: 25, y: 180 }, | |
| data: { label: 'Drag me!' }, | |
| width: 125, | |
| height: 40, | |
| bgColor: 'white', | |
| targetPosition: 'right' | |
| }, | |
| { | |
| id: 5, | |
| position: { x: 390, y: 380 }, | |
| data: { label: 'Custom Node' }, | |
| width: 125, | |
| height: 40, | |
| bgColor: '#C8FFC7', | |
| borderColor: 'transparent', | |
| borderRadius: 0 | |
| }, | |
| { | |
| id: 6, | |
| position: { x: 47.5, y: 360 }, | |
| data: { label: 'Custom Node' }, | |
| width: 80, | |
| height: 80, | |
| borderColor: '#FF4121', | |
| borderRadius: 30, | |
| bgColor: 'white', | |
| textColor: '#FF4121' | |
| } | |
| ]; | |
| const initialEdges = [ | |
| { id: 'e1-2', source: 1, target: 2, label: 'edge label' }, | |
| { id: 'e2-3', source: 2, target: 3, animate: true, label: 'animated edges' }, | |
| { id: 'e1-4', source: 1, target: 4, type: 'step', animate: true, edgeColor: '#FF4121' }, | |
| { id: 'e2-5', source: 2, target: 5, label: 'colored edges', animate: true, arrow: true, edgeColor: '#FF4121', labelBgColor: '#1F2937', labelTextColor: '#FFE4E6'}, | |
| { id: 'e2-5', source: 4, target: 6, type: 'straight' }, | |
| { id: 'e2-5',source: 3, target: 6, type: 'smoothstep', label: 'colored label', labelBgColor: '#FF4561', labelTextColor: 'white', animate: true} | |
| ]; | |
| </script> | |
| <Svelvet nodes={initialNodes} edges={initialEdges} width={600} background /> |
Как только вы визуализируете компонент Svelvet с только что инициализированной информацией, вы увидите диаграмму ниже:
После рендеринга пользователь сможет выбирать и перемещать узлы, увеличивать масштаб и панорамировать.
Как внести свой вклад
Svelvet продолжит работу. Если функциональность, встроенная в эту библиотеку, представляет для вас интерес, пожалуйста, не стесняйтесь вносить свой вклад!
Проверьте Svelvet на GitHub: github.com/open-source-labs/Svelvet
Заключительные мысли
Мы хотели бы поблагодарить всех вас за вашу поддержку, и мы продолжим добавлять новые функции, которые запрашиваются. Если вам нравится наш продукт, поставьте нам звездочку на GitHub и следите за обновлениями в LinkedIn. Ваша поддержка очень ценится!
Проверьте Svelvet на LinkedIn: https://linkedin.com/company/Svelvet
Команда Svelvet
Ану Шарма
LinkedIn: https://linkedin.com/in/anu-sharma-6936a686/
Github: https://github.com/anulepau
Эндрю Виджаджа
LinkedIn: https://linkedin.com/in/andrew-widjaja/
Github: https://github.com/andrew-widjaja
Аарон Уиллетт
LinkedIn: https://linkedin.com/in/awillettnyc/
Github: https://github.com/awillettnyc
Александр Замбрано
LinkedIn: https://linkedin.com/in/alexander-z-8b7716b0/
Github: https://github.com/azambran21
Али Адамс
LinkedIn: https://linkedin.com/in/alimadams/
Github: https://github.com/AliA12336
Дамиан Лим
LinkedIn: https://linkedin.com/in/lim-damian/
Github: https://github.com/limd96
Джастин Воутерс
LinkedIn: https://linkedin.com/in/justinwouters/
Github: https://github.com/justinwouters
Фон Гарсия
LinkedIn: https://linkedin.com/in/vongarcia97
Github: https://github.com/vongarcia97
Уолтер ДеВолт
LinkedIn: https://linkedin.com/in/walter-devault/
Github: https://github.com/TensionCoding
Документация
https://svelvet.io
