Блог

В настоящее время я создаю редактор блок-схем с помощью mxGraph, и сегодня я импортировал его в свой Vue.Проект JS. Я использовал NPM для установки библиотеки mxgraph и использовал следующий код, чтобы получить соответствующие ссылки в каждом файле:

 import * as mxgraph from 'mxgraph';

const {
    mxClient, mxGraph, mxUtils, mxEvent, mxConstraintHandler, mxConnectionHandler, mxEditor, mxGraphModel, mxKeyHandler, mxConstants, mxGraphView
} = mxgraph();
  

Я импортировал свой редактор блок-схем в Vue.js в качестве плагина:

 import Vue from 'vue'
import flowchartEditor from './plugins/flowchartEditor/flowchartEditor';


import App from './App.vue'
import store from './store/store'
import router from './router/router'

Vue.config.productionTip = false
Vue.use(flowchartEditor);

new Vue({
  store,
  router,
  render: h => h(App)
}).$mount('#app')
  

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

Следующее изображение — это то, что я получил с тем же кодом, но не импортировал в Vue.JS, но только с помощью Webpack:

Это код, который создает и регистрирует пользовательские фигуры:

 addCustomShapes(graph) {
        //Ellipse that represents the start node
        function ellipse() {};
        ellipse.prototype = new mxEllipse();
        ellipse.prototype.constructor = ellipse;

        registerCustomShape(graph, ellipse, 'start');
    },

function registerCustomShape(graph, shape, name) {    
    mxCellRenderer.registerShape(name, shape);

    let style = graph.getStylesheet().getDefaultVertexStyle();
    style[mxConstants.STYLE_SHAPE] = name;
    style[mxConstants.STYLE_FILLCOLOR] = '#ffffff';
    style[mxConstants.STYLE_STROKECOLOR] = '#000000';
    style[mxConstants.STYLE_FONTCOLOR] = '#000000';
    style[mxConstants.STYLE_FONTSIZE] = '16';

    style = graph.getStylesheet().getDefaultEdgeStyle();
    style[mxConstants.STYLE_STROKECOLOR] = '#000000';
    style[mxConstants.STYLE_FONTCOLOR] = '#000000';
    style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = '#ffffff';
    style['fontStyle'] = '0';
    style['fontStyle'] = '0';
    style[mxConstants.STYLE_FONTSIZE] = '16';
    style['startSize'] = '8';
    style['endSize'] = '8';
}
  

А затем код, который устанавливает вновь зарегистрированную фигуру в качестве фигуры по умолчанию, чтобы создать начальный узел в:

 setCustomShape(graph, name) {
        var style = graph.getStylesheet().getDefaultVertexStyle();
        style[mxConstants.STYLE_SHAPE] = "4";

        return style
    }
  

Я знаком с руководством по mxGraph (учебное пособие) и уже сделал это, но это дало мне тот же результат, что и этот код.

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

https://github.com/jgraph/mxgraph/tree/master/javascript/examples/editors

Посмотрите в этом репозитории.

Это очень простой пример редактора! Проще, чем draw.io редактор