在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';
}

然后代码将新注册的形状设置为默认形状，以在以下位置生成起始节点：

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

        return style
    }

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

很长的帖子很抱歉，但是我觉得这很奇怪，我真的希望有人能帮助我。

Answer 1

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

查看此存储库。

这是非常简单的编辑器示例！ 比draw.io编辑器

简单