Редактор блок схем — о дружбе 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
Которое помогает мне, визуализировать примерную схему БД будущих проектов.

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

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

Репозиторий

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

Репозиторий
Небольшое руководство
API Docs
Примеры