Как я создал Advanced SDN PoC Designer с помощью mxGraph и VueJS

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

Порожденный из JGraph (Java), mxGraph основан на JavaScript, большая часть его кодовой базы на основе JGraph. С точки зрения происхождения он примерно начался в конце 2005 года и стал EOL после 2020 года, как гласит примечание Github:

NOTE 09.11.2020 : Development on mxGraph has now stopped, this repo is effectively end of life.

Вы все еще можете найти его корнем в JGraph, также известном как. Diagrams.net, который работает как на компьютере, так и в Интернете. Одной из интересных частей этой библиотеки является формат файла на основе XML, который безупречно работает с файлами диаграмм, созданными в 2005 году.

Что такое mxGraph? 🤨

В двух словах, это библиотека разработчика JavaScript, предназначенная для предоставления компонентов plug-and-play для рисования, перемещения и взаимодействия с элементами контекстной диаграммы или графика со свойствами. Он написан на чистом JavaScript, без транспиляторов или NPM-зависимостей. Простой ванильный редактор mxGraph выглядит так:

В крайнем левом углу находится библиотека Stencils (Shapes) или объекты-узлы, которые можно размещать, взаимодействовать и соединять, холст для рисования посередине и крайняя правая панель свойств для холста для рисования или выбранного объекта-узла. Узлы, размещенные и соединенные на холсте макета, отображаются как SVG, но в фоновом режиме склеиваются в формате файла XML.

Понимание структуры библиотеки mxGraph 🧐

Прежде чем совершить гигантский скачок, было важно знать точную структуру этой библиотеки. Несколько каталогов и файлов для редактора холста, библиотеки трафаретов (форм), взаимодействия, ввода/вывода (IO), утилит, а также того, как они просматриваются на холсте. Подводя итог, проверьте вывод tree:

.
├── editor
├── handler
├── io
├── layout
├── model
├── shape
├── util
├── view
└── mxClient.js
11 directories, 143 files

Инициализация mxGraph выполняется с помощью mxClient.js файла, который включает в себя все необходимые заводские настройки, шаблоны (фигуры), взаимодействия, прослушиватели событий, элементы меню, панели инструментов и холст макета. Прошерстив сотни файлов, я близко изучил архитектуру. Большая часть компонентов основана на объекте-прототипе JavaScript, который может быть унаследован или переопределен. Косметические изменения в значительной степени зависели от того, как и где их переопределить, не затрагивая ядро.

mxGraph против VueJS 🤦🏻

Facepalming в значительной степени соответствует моей первой реакции, когда я читал о требованиях к PoC-дизайнеру. На клиенте было запущено приложение Python (Django) для управления/предоставления кластеров, поддерживаемых через реестр поставщиков, сетевых и облачных объектов. Весь рабочий процесс можно сжать на диаграмме ниже (создано с помощью диаграммы.io)

Хотя конструктор PoC действует как визуальный инструмент построения SDN, он все же должен использовать объекты узла (Stencils), их свойства по умолчанию, операции кластера, которые предоставляют, останавливают, завершают и замораживают экземпляр в API Python (JSON). Когда проект кластера готов с постоянными свойствами и коннекторами, которые могут быть динамическими, шаблон сохраняется в формате XML (в кодировке base64) с использованием еще одного Python API.

Впереди была цепочка геркулесовых трудов — создание динамических элементов управления для свойств с сохраняемостью, привязкой событий, гладкой передачей знаний и устойчивой кодовой базой — это лишь некоторые из них. VueJS обеспечивает правильную симметрию между удобочитаемым кодом, архитектурой plug-and-play, сохраняемостью сеанса (связывание данных через модели) и более того — отсутствие зависимостей от сборщиков.

Развязка mxGraph — первый геркулесов труд 💪🏻

Разделяй и властвуй! Наука дедукции не может ошибиться, проверяя эту гипотезу. Работа в режиме бога 🤞🏻 Сначала я решил отделить макет mxGraph. Разбивая его с осторожными надрезами, разбивая его только на холст макета. Надрез находится в файлах EditorUI.js и Editor.js (и еще нескольких):

Комментирование избавило от меню, панели инструментов и боковых панелей. То, как вы включаете, инициализируете и переопределяете, имеет первостепенное значение. Моя иерархия включения выглядит так:

Обратите внимание на строки 97 и 98, вроде как получилось 😊. Дальнейшие шаги стали более понятными, все, что мне нужно было сделать, это переопределить и включить файлы после mxClient.js, в лучшем случае они просто клонируются и/или модифицируются для дооснащения.

СОВЕТ ПРОФЕССИОНАЛА: не путайте оригинал, даже если это песня 80–90-х годов!

Сказать, что это был своего рода взлом, но правильный. Позднее были введены небольшие дополнения для Stencils и Properties с использованием VueJS x-template синтаксического сахара. Шаблон компонента с несколькими элементами управления:

Это примерно дало мне возможность создавать динамические свойства с синтаксисом на основе шаблона, а также позволяло динамическое связывание с Python API (JSON):

Мне удалось собрать воедино всю библиотеку трафаретов (фигур), свойства динамических узлов/коннекторов с помощью Python API. Библиотека трафаретов по умолчанию и свойства объекта узла/соединителя нуждались в предварительной инициализации:

Модернизация mxGraph с помощью VueJS — второй геркулесов труд 💪🏻

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

Во вселенной ГИС непространственные атрибуты относятся к расширенным данным о географическом местоположении, точно так же настраиваемые свойства сохраняются внутри тега <CustomData> XML (как JSON), что является одной из удобных функций mxGraph. Исходный XML-код графа будет выглядеть так: