Регистрация пользовательских форм с моей библиотекой mxgraph в Vue.JS - PullRequest
Новая
       27

Регистрация пользовательских форм с моей библиотекой mxgraph в Vue.JS

1 голос
/ 08 апреля 2019

В настоящее время я создаю редактор потоковых диаграмм с 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 с маршрутом, и когда я иду по этому маршруту, редактор потоковой диаграммы выглядит хорошо. Проблема в том, что все мои зарегистрированные формы не работают. Предполагается, что узел «Начало» является круглым, но вместо этого все мои пользовательские фигуры выглядят квадратными: flowchart editor problem

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

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

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 ( учебник ) и уже сделал это, но он дал мне тот же результат, что и этот код.

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

...