在Vue.JS中使用我的mxgraph librarie注册自定义形状

Question

我目前正在使用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';

}

我知道MXGraph的教程（tutorial），并且已经做到了，但是它得到的结果与此代码相同。