Построение великолепных блок-схем с помощью Svelvet

Автор: Дэвид Омотайо✏️

Svelte — один из самых популярных фреймворков, построенных на JavaScript. Хотя он был представлен еще в 2016 году, он все еще считается относительно новым фреймворком (по сравнению с React, Vue.js и другими) в области фронтенда.

Несмотря на позднее появление, дружественный синтаксис и отличная производительность Svelte не позволяют игнорировать его. Но, даже несмотря на отличную репутацию, экосистема Svelte с трудом поспевает за современными инструментами, и ей потребуется больше времени, чтобы сравняться по размеру инструментария со своими аналогами.

К счастью, сообщество Svelte прилагает все усилия для поддержания актуальности фреймворка, постоянно представляя новые полезные инструменты в надежде сократить разрыв между другими фреймворками. Одним из примеров является Svelvet, недавно запущенная библиотека компонентов, которая позволяет легко создавать великолепные, настраиваемые диаграммы потоков в Svelte.

В этой статье мы познакомимся с основными концепциями Svelvet и продемонстрируем, как строить блок-схемы в Svelte с помощью Svelvet. Перейти вперед:

• Предварительные условия
• Что такое Svelvet?
• Начало работы
• Узлы
  • id
  • data
  • position
  • bgColor
  • width и height
• Edges
  • id
  • source
  • target
  • label
  • animate
  • type
  • arrow
  • noHandle
• Построение блок-схемы с помощью Svelvet

Предварительные условия

Чтобы следовать этому руководству, вам необходимо иметь базовые знания о Svelvet и его концепциях.

Что такое Svelvet?

Svelvet — это легкая библиотека компонентов для визуализации интерактивных диаграмм потоков на основе узлов в Svelte. Библиотека использует графовый редактор для преобразования, анализа и визуализации данных. Она также использует компоненты масштабирования и выделения D3.js для обеспечения плавного масштабирования и панорамирования диаграммы.

По словам создателей Svelvet, библиотека была создана для того, чтобы удовлетворить потребности Svelte в инструменте построения диаграмм, аналогичном React flow, узловому рендереру графов для React. В результате Svelvet имеет схожие с React Flow функциональные возможности и особенности, такие как:

• Простота использования
• Простота настройки
• Интерактивность
• Быстрый рендеринг

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

Начало работы

Вы можете установить Svelvet в свои проекты через npm или Yarn с помощью одной из следующих команд:

npm install svelvet

yarn add svelvet

Если у вас еще нет установленного проекта, вы можете загрузить проект Svelte следующим образом:

npx degit sveltejs/template

Затем установите зависимости:

npm install

Далее вы можете интегрировать Svelvet в свой проект Svelte, импортировав компонент Svelvet в раздел script любого компонента в папке вашего проекта:

import Svelvet from 'svelvet';

Компонент Svelvet принимает несколько реквизитов, но свойства nodes и edges являются фактическими строительными блоками компонента. Свойства nodes и edges компонента отображают графики в соответствии с присвоенными им значениями.

Вот базовое использование компонента Svelvet:

<script>
  import Svelvet from 'svelvet';

  const initialNodes = [
    {
    id: 1,
    position: { x: 350, y: 50 },
    data: { label: 'input Node' },
    width: 175,
    height: 40,
    bgColor: 'white'
    },
    {
    id: 2,
    position: { x: 350, y: 150 },
    data: { label: 'Default Node' },
    width: 175,
    height: 40,
    bgColor: 'white'
    }
];

  const initialEdges = [
    { id: 'e1-2', source: 1, target: 2, type: 'default', label: 'label'},
];
</script>

<Svelvet nodes={initialNodes} edges={initialEdges} background />

Как вы видите, массив объектов initialNodes и initialEdges передаются реквизитам nodes и edges соответственно. Svelvet отрисует графы в соответствии со значениями свойств объектов в каждом массиве.

Приведенный выше код отобразит в браузере приведенный ниже график:

Этот пример должен дать вам представление о том, как работают реквизиты nodes и edges. Далее мы рассмотрим, как свойства объекта определяют и связывают реквизиты nodes и edges.

Узлы

Реквизит nodes используется для отображения на графе элементов в форме коробки, называемых узлами. Каждый узел может содержать текст или информацию, описывающую, что представляет собой узел.

Реквизит nodes принимает массив объектов, и свойства объектов используются для определения width, height, position и цвета фона (bgColor) каждого узла. Каждый объект представляет узел, поэтому если в определенном массиве узлов присутствует пять объектов, компонент отобразит на графике пять узлов.

Вот типичный объект узла:

{
    id: 1,
    position: { x: 350, y: 50 },
    data: { label: 'input Node' },
    width: 175,
    height: 40,
    bgColor: 'white'
}

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

id

Свойство id используется для присвоения идентификаторов каждому узлу. Свойство принимает целое число, которое выступает в качестве идентификатора узла. Целые числа используются для ссылки на каждый узел при определении свойства edge.

data

Свойство data используется для маркировки узлов. Оно принимает объект со свойством 'label', которое принимает строковое значение текста или информации, отображаемой на узле.

position

Свойство position используется для позиционирования узла на графике; оно принимает объект со свойствами x и y. Эти свойства принимают целочисленные значения, которые используются для выравнивания узла по осям x и y.

bgColor

Свойство bgColor делает то, что следует из его названия; оно используется для изменения цвета фона узлов.

width и height

Свойства width и height используются для управления размерами узла; они принимают целочисленные значения.

Edges

Свойство edges используется для построения линий между узлами графа. Эти линии называются ребрами, и они служат соединителем между двумя узлами.

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

const initialEdges = [
    { 
      id: 'e1-2',
      source: 1,
      target: 2,
      type: 'straight',
      label: 'edge'
    },
];

...
 <Svelvet ... edges={initialEdges} .../> 

Давайте рассмотрим свойства объектов, чтобы лучше понять, как они работают.

id

Свойство id также служит идентификатором для ребер, но, в отличие от первого, оно принимает строковые значения, а не целые числа. Значение описывает узлы, соединяемые объектом. Например, объект edge со значением id 'e1-2' соединит узел с id 1 с другим узлом, чей id равен 2.

//edge for connecting node 1 and 2
{ id: 'e1-2', ...}

source

Свойство source используется для задания начала края. Свойство принимает целое число, которое ссылается на значение id узла и отмечает его как источник ребра.

//referencing the node with an id of 1
{ 
  ...,
  source: 1, 
  ...
}

Когда целевой узел установлен, компонент начнет рисовать линию края от узла-источника.

target

Свойство target используется для задания назначения грани от источника. Свойство также принимает целое число, которое ссылается на значение id узла, отличного от исходного.

Например, если свойство source ссылается на узел, id которого 1, свойство target будет ссылаться на другой узел, id которого 2 или 3.

//node 1 targeting node 2
{
  ...,
  source: 1,
  target: 2,
  ...
}

label

Свойство label работает аналогично свойству узла data; оно используется для добавления текста или информации к граням. Метка label размещается на пересечении двух соединяющих узлов.

{
  ...,
  label: 'label'
}

animate

Свойство animate используется для анимации ребер. Оно принимает булево значение, которое анимирует ребро, если установлено в true и сохраняет его статичным, если установлено в false.

{
  ... ,
  animate: true
}

type

Свойство type используется для установки внешнего вида края, оно принимает строковое значение default или straight. Тип края default — кривая Безье, а тип края straight — прямая линия.

{
  ... ,
  type: ‘default’
}
//or
{
  ... ,
  type: ‘straight’
} 

arrow

Свойство arrow используется для настройки конечной точки линии края; оно преобразует край в наконечник стрелки, направленной к целевому узлу. Свойство arrow принимает булево значение true или false.

{
  ... ,
  arrow: true
}

noHandle

Свойство noHandle аналогично свойству arrow; оно используется для удаления ручки линии ребра в направлении целевого узла. Свойство принимает булево значение true или false.

{
  ... ,
  noHandle: true
}

Построение блок-схемы с помощью Svelvet

Мы рассмотрели основные концепции Svelvet; этой информации достаточно, чтобы помочь вам начать свое путешествие по построению диаграмм в Svelvet.

В завершение давайте построим блок-схему с нуля. В качестве первого шага создайте новый компонент в проекте Svelte или используйте вместо него основной компонент App.svelte. Затем импортируйте компонент Svelte в раздел сценария, создайте два массива объектов и настройте свойства по своему усмотрению.

Для данного примера мы будем использовать следующее:

<script>
Import Svelvet from ‘svelvet’

//nodes array
const nodeArr = [
   {
     id: 1,
     position: { x: 300, y: 20 },
     data: { label: "Input Node" },
     width: 175,
     height: 40,
     bgColor: "#127369"
   },
   {
     id: 2,
     position: { x: 80, y: 150 },
     data: { label: "bezier" },
     width: 70,
     height: 40,
     bgColor: "#8AA6A3"
   },
   {
     id: 3,
     position: { x: 282, y: 190 },
     data: { label: "straight" },
     width: 70,
     height: 40,
     bgColor: "#F2BE22"
   },
   {
     id: 4,
     position: { x: 494, y: 150 },
     data: { label: "animated" },
     width: 140,
     height: 40,
     bgColor: "#BFBFBF"
   },
   {
     id: 5,
     position: { x: 120, y: 225 },
     data: { label: "no handle" },
     width: 80,
     height: 40,
     bgColor: "#03A678"
   },
   {
     id: 6,
     position: { x: 390, y: 225 },
     data: { label: "arrow handle" },
     width: 100,
     height: 40,
     bgColor: "#F27405"
   }
 ];

 //edges array
 const edgeArr = [
   {
     id: "e1-2",
     source: 1,
     target: 2,
     type: "bezier",
     label: "default edge"
   },
   {
     id: "e1-3",
     source: 1,
     target: 3,
     type: "straight",
     label: "straight edge"
   },
   {
     id: "e1-4",
     source: 1,
     target: 4,
     type: "bezier",
     animate: true,
     label: "animated edge"
   },
   {
     id: "e1-5",
     source: 1,
     target: 5,
     type: "bezier",
     noHandle: true,
     label: "noHandle edge"
   },
   {
     id: "e1-6",
     source: 1,
     target: 6,
     type: "bezier",
     arrow: true,
     label: "arrow edge"
   }
 ];
</script>

Далее добавьте компонент Svelvet в раздел шаблона компонента и передайте массив nodeArr в prop nodes, а массив edgesArr в prop edges, примерно так:

<Svelvet nodes={nodeArr} edges={edgeArr} />

Теперь сохраните код и запустите сервер разработки, выполнив следующую команду:

npm run dev

Вы заметите, что границы рендерера Svelvet трудно различимы, и узлы часто перекрываются за пределами границ. Это происходит из-за белого фона рендера по умолчанию.

Чтобы исправить эту проблему и сделать рендерер менее расплывчатым, можно добавить к компоненту параметр background, как показано ниже:

<Svelvet nodes={nodeArr} edges={edgeArr} background />

Свойство background добавит точечный фон к рендереру, что значительно облегчит восприятие размера рендера.

Мы также можем увеличить размер рендера, добавив реквизиты width и height к компоненту:

<Svelvet nodes={nodeArr} edges={edgeArr} background width={900} height={800} />

Вот и все; мы создали блок-схему в мгновение ока!

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

Заключение

В этой статье мы рассмотрели основные концепции Svelvet, изучили свойства объектов узлов и ребер и продемонстрировали, как использовать Svelvet для создания базовой диаграммы потоков.

Svelvet все еще находится в зачаточном состоянии, и ему не хватает некоторых функций, предлагаемых его аналогом, React flow. Команда Svelvet пообещала сделать библиотеку более обширной за счет интеграции дополнительных функций настройки, тестирования и обработки ошибок в будущем.

Независимо от этого, базовая функциональность библиотеки уже создана и готова к производству; вы можете использовать ее в своих проектах. Даже без дополнительной функциональности Svelvet является интуитивно понятным решением для построения красивых диаграмм потоков в Svelte.

Чтобы узнать больше о Svelvet, обратитесь к документации или репозиторию на GitHub.

Ваш фронтенд перегружает процессор пользователей?

По мере того, как веб-фронтенды становятся все более сложными, жадные до ресурсов функции требуют от браузера все больше и больше. Если вы заинтересованы в мониторинге и отслеживании использования CPU на стороне клиента, памяти и прочего для всех ваших пользователей на производстве, попробуйте LogRocket.

LogRocket — это как видеорегистратор для веб-приложений и мобильных приложений, записывающий все, что происходит в вашем веб-приложении или на сайте. Вместо того чтобы гадать, почему возникают проблемы, вы можете собирать и предоставлять отчеты по ключевым показателям производительности фронтенда, воспроизводить сеансы пользователей вместе с