Currently in the process of developing a flowchart editor using MXGraph, I recently integrated it into my Vue.JS project. To do this, I utilized NPM to install the mxgraph library and incorporated the following code to acquire the necessary references in each file:
import * as mxgraph from 'mxgraph';
const {
mxClient, mxGraph, mxUtils, mxEvent, mxConstraintHandler, mxConnectionHandler, mxEditor, mxGraphModel, mxKeyHandler, mxConstants, mxGraphView
} = mxgraph();
I imported the flowchart editor into Vue.js as a plugin:
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')
The Vue view for the flowchart tool has a route set up, and upon navigating to that route, the flowchart editor displays correctly. However, the issue arises with my custom registered shapes not functioning as intended. The Start node is meant to be round, but instead, all custom shapes appear square: https://i.sstatic.net/Y7p3Z.png
The image below showcases the same code running outside of Vue.JS, solely with Webpack: https://i.sstatic.net/hiwiv.png
This snippet depicts how the custom shapes are created and registered:
addCustomShapes(graph) {
//Ellipse representing 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';
}
Below is the code that sets the newly registered shape as the default shape to generate the start node:
setCustomShape(graph, name) {
var style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = "4";
return style
}
I have already followed the MXGraph tutorial (tutorial) without success. This situation is quite perplexing to me, and any assistance would be greatly appreciated.
Apologies for the lengthy post, but I am struggling with this and hoping someone can offer guidance.