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

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

Библиотека

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

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

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

Ссылки

Репозиторий: https://github.com/projectstorm/react-diagrams
Демо: http://projectstorm.cloud/react-diagrams
Документы: https: //projectstorm.gitbooks .io / реакции-диаграммы

Начиная

Чтобы установить эту библиотеку, вам сначала нужно установить ее в свое приложение React.

Через пряжу

yarn install storm-react-diagrams

Через npm

npm install storm-react-diagrams

Затем импортируйте его и используйте в своем приложении React в компоненте, который инкапсулирует вашу диаграмму:

import * as SRD from "storm-react-diagrams"
require("storm-react-diagrams/dist/style.min.css")

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

Затем вы можете отобразить его с помощью следующего JSX-кода:

<SRD.DiagramWidget diagramEngine={engine} />

Вот и классная диаграмма!

Продвинутые концепции

Фабрики и настройка узлов

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

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

Давайте посмотрим на это подробнее и возьмем один пример из их сборника рассказов в качестве введения в эти концепции. В этом примере мы хотим нарисовать узел в форме ромба, как показано на этом снимке экрана:

Сразу после регистрации фабрик по умолчанию из диаграммы мы объявим две новые фабрики.

Это научит механизм диаграмм, как рисовать узлы в форме ромба, и зарегистрировать этот новый узел в механизме диаграмм. После этого вы сможете объявлять узлы типа «ромб».

Обязательные события

Обработка событий позволяет вам определять настраиваемое поведение при взаимодействии с диаграммами и выполнять их при взаимодействии с ними.

Этот шаг довольно легко воспроизвести:

var node = new DefaultNodeModel("Node 3", "rgb(128,99,255)");
node.addListener({
   selectionChanged: () => { console.log("selectionChanged") }
});

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

События для модели диаграммы

nodesUpdated
linksUpdated
offsetUpdated
zoomUpdated
gridUpdated
selectionChanged
entityRemoved

События для моделей ссылок

sourcePortChanged
targetPortChanged
selectionChanged
entityRemoved

События для моделей узлов и моделей точек

selectionChanged
entityRemoved

Умная маршрутизация

Назначив smartRouting={true} компоненту основной диаграммы, вы можете отображать ссылки диаграммы, которые являются прямыми сегментами, автоматически избегая отображаемых узлов.

Сериализация и десериализация диаграмм

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

Затем вы можете восстановить ранее сохраненную диаграмму, используя метод deSerializeDiagram для той же модели диаграммы.

Полный пример доступен здесь.

Дагре

Dagre - это библиотека, используемая для визуального изменения порядка диаграмм. Это реорганизует вашу диаграмму, чтобы сделать ее удобочитаемой.

Эта библиотека может работать с любыми библиотеками диаграмм и инструментами, если вы можете извлекать позиции своих элементов и перемещать их программно.

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

Рассмотрение

Эта библиотека действительно проста в использовании, если вы думаете о том, что происходит под капотом. Создание интерактивных диаграмм обычно - непростая задача, а добавление возможностей настройки обычно добавляет к API бремя, которое может стать очень трудным для понимания.

React-diagrams действительно хороши в этом смысле и раскрывают то, что необходимо разработчику, когда это необходимо ему. Работа по внедрению выполнена элегантно и пользоваться ею действительно приятно.

Однако одной вещи, которой сейчас не хватает (с моей точки зрения), является возможность настраивать диаграммы прямо из шаблона, используя компоненты. Это может быть необязательный, менее сложный и менее настраиваемый способ реализации диаграммы. Подобные идеи уже были замечены в других компонентах, так почему бы и нет?

Что касается скрытых замечаний, библиотека использует элементы div для рендеринга узлов и группирует рендеринг всех ссылок в элемент SVG. Такой способ отрисовки диаграмм может вызывать сомнения, но разработчик уже ответил на этот вопрос здесь, заявив, что столкнулся с несколькими проблемами с SVG.

Проектная деятельность

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

Также хорошо поддерживается управление версиями, а также журнал изменений и документация (можно оценить дополнительную документацию по API, но вы также можете взглянуть на примеры).

Альтернативы для других фреймворков и ванильного JS

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

Используя Vue.js, я не нашел ни одной библиотеки, которая правильно выполняла бы свою работу, поэтому я начал создавать ее самостоятельно. Однако он далеко не полный.

Если у вас есть альтернатива для другого фреймворка (я пока ничего не нашел для Angular), не стесняйтесь помочь мне заполнить этот список в комментариях!