Редактор блок схем — о дружбе Vue.js и MxGraph

С чего все началось?

Я фронтенд разработчик, но стремлюсь к развитию, решил написать fullstack приложение и стать миллионером получить бесценный опыт.

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

Но столкнулся с отсутствием простого и достаточно функционального редактора схем без излишеств для NoSQL баз данных.

— Нет? Значит сделаю делов то, найти библиотеку и накидать интерфейс!
Fullstack идея была отодвинута на задний план и я начал проработку простейшего редактора схем БД.
— Наивный… – но это я понял немного позднее.

Поиски

Во первых библиотеки такого рода в основном платные и требуют за них очень немало!
Во вторых те что бесплатные не блещут функционалом или полны багов!

В третьих не будет ибо нашел MxGraph. Он практически не упоминается на просторах интернета, хотя на нем написан прекрасный сервис draw.io да и сам по себе это весьма удобный инструмент для визуализации и редактирования данных.

Представление

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

MxGraph – это библиотека для визуализации и редактирования различных процессов, workflow и BPM, визуализации базы данных, отображение сетей и телекоммуникаций, картографических приложений и GIS, диаграмм UML, электронных схем, СБИС, САПР, финансовых и социальных сетей, организационных схем и многого другого.

Совместимость

MxGraph достаточно старый(но не устаревшый) инструмент поэтому простой npm install в Vue проект тут не даст нам полной совместимости. Поэтому тут пришлось перекапывать сеть и открывать производство велосипедов.

Выстраданные Найденные решения

Импорт и встраивание в компонент Vue выглядит таким образом:

<script>
 import mxgraph from 'mxgraph';

    // если планируется использовать встроенные интерфейсы то нужно указать пути к ресурсам
    const graphConfig = {
        mxBasePath: '/mx/', //the path in mxClient.basePath.
        mxImageBasePath: '/mx/images', // the path in mxClient.imageBasePath.
        mxLanguage: 'en', // the language for resources in mxClient.language.
        mxDefaultLanguage: 'en', // the default language in mxClient.defaultLanguage.
        mxLoadResources: false, // if any resources should be loaded.  Default is true.
        mxLoadStylesheets: false, // if any stylesheets should be loaded.  Default is true
    };

    const {
        mxClient, mxUtils, mxEvent, mxEditor, mxRectangle, mxGraph, mxGeometry, mxCell,
        mxImage, mxDivResizer, mxObjectCodec, mxCodecRegistry, mxConnectionHandler
    } = mxgraph(graphConfig);

    window.mxClient = mxClient;
    window.mxUtils = mxUtils;
    window.mxRectangle = mxRectangle;
    window.mxGraph = mxGraph;
    window.mxEvent = mxEvent;
    window.mxGeometry = mxGeometry;
    window.mxCell = mxCell;
    window.mxImage = mxImage;
    window.mxEditor = mxEditor;
    window.mxDivResizer = mxDivResizer;
    window.mxObjectCodec = mxObjectCodec;
    window.mxCodecRegistry = mxCodecRegistry;
    window.mxConnectionHandler = mxConnectionHandler;

    var editor;

    // CustomUserObject
    window.CustomUserObject = function (name, type) {
        this.name = name || 'New Name';
        this.type = type || 'New Type';
        this.clone = function () {
            return mxUtils.clone(this);
        };
    };

    export default {
     // vue logic
    }
</script>

Зачем создал переменные, а потом еще и в window их прописал?!

Дело в том что webpack при сборке переименовывает переменные и mxgraph в последствии не может их найти. Поэтому специально для mxgraph я вынес их в глобальный объект.

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

А переменную editor зачем вынес из vue?!

Во время работы у нас не всегда будет возможность обратиться к переменной vue из-за контекста методов mxgraph. А вынос в глобальные переменные серьезно сэкономит время и пару горстей нервов.

Кастомные объекты данных зачем опять в window?!

Для создания новых объектов данных в mxgraph используются прототипы. Их тоже нужно записывать в window – иначе возникнут проблемы со встроенным импортомэкспортом схем.

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

И что получилось?

Небольшое приложение для моделинга схем баз данных: nosqldbm.ru ^[1]
Которое помогает мне, визуализировать примерную схему БД будущих проектов.

Спасибо что прочитали мою первую публикацию, надеюсь вам было интересно.

Полный пример на git

Репозиторий ^[2]

Подборка материалов по MxGraph

Репозиторий ^[3]
Небольшое руководство ^[4]
API Docs ^[5]
Примеры ^[6]

Автор: KraisLi

Источник ^[7]