I'm attempting to use mxgraph to render a graph inside of a React component (similar to this example someone created using the mxgraph-js fork). I'd like this graph to be constructed using an existing XML string which was created earlier via the mxgraph grapheditor tool.
My React component looks like this:
import React, { Component } from "react";
import * as mxgraph from 'mxgraph';
const { mxClient, mxGraph, mxRubberband, mxUtils, mxEvent, mxKeyHandler, mxCodec } = mxgraph();
class DisplayGraph extends Component {
constructor(props) {
super(props);
this.LoadGraph = this.LoadGraph.bind(this);
}
componentDidMount() {
this.LoadGraph();
}
LoadGraph() {
var container = document.getElementById("divGraph");
// Checks if the browser is supported
if (!mxClient.isBrowserSupported()) {
// Displays an error message if the browser is not supported.
mxUtils.error("Browser is not supported!", 200, false);
} else {
// Disables the built-in context menu
mxEvent.disableContextMenu(container);
// Creates the graph inside the given container
var graph = new mxGraph(container);
// Gets the default parent for inserting new cells. This is normally the first child of the root (ie. layer 0).
var parent = graph.getDefaultParent();
// Enables tooltips, new connections and panning
graph.setPanning(true);
graph.setTooltips(true);
graph.setConnectable(true);
graph.setEnabled(true);
graph.setEdgeLabelsMovable(false);
graph.setVertexLabelsMovable(false);
graph.setGridEnabled(true);
graph.setAllowDanglingEdges(false);
graph.getModel().beginUpdate();
//construct graph from XML string
try{
console.log('Updating the graph');
//In reality, this string will be fetched from a database. For now, we will use an example string
let xmlString = '<mxGraphModel dx="116" dy="608" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100"><root><mxCell id="0"/><mxCell id="1" parent="0"/><mxCell id="2" value="Template" style="rounded=1;whiteSpace=wrap;html=1;strokeColor=#00ACC1;strokeWidth=5;glass=0;comic=0;gradientColor=#b2ebf2;fillColor=#e0f7fa;fontSize=16;fontColor=#000000;" vertex="1" parent="1"><mxGeometry x="210" y="120" width="200" height="120" as="geometry"/></mxCell><mxCell id="3" value="Sub-Process" style="shape=process;whiteSpace=wrap;html=1;backgroundOutline=1;strokeColor=#ffb74d;strokeWidth=4;perimeterSpacing=0;fontSize=16;gradientColor=#fff3e0;fillColor=#FFFFFF;" vertex="1" parent="1"><mxGeometry x="210" y="260" width="200" height="120" as="geometry"/></mxCell><mxCell id="4" value="End" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fontFamily=Helvetica;fontSize=16;fillColor=#ffebee;strokeColor=#f44336;strokeWidth=4;gradientColor=#ffcdd2;" vertex="1" parent="1"><mxGeometry x="240" y="400" width="80" height="80" as="geometry"/></mxCell><mxCell id="5" value="Process" style="shape=process;whiteSpace=wrap;html=1;backgroundOutline=1;strokeColor=#ff9800;strokeWidth=4;perimeterSpacing=0;fontSize=16;gradientColor=#ffe0b2;fillColor=#fff3e0;" vertex="1" parent="1"><mxGeometry x="240" y="500" width="200" height="120" as="geometry"/></mxCell><mxCell id="6" value="Start" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fontFamily=Helvetica;fontSize=16;fillColor=#e8f5e9;strokeColor=#4caf50;strokeWidth=4;gradientColor=#c8e6c9;" vertex="1" parent="1"><mxGeometry x="270" y="640" width="80" height="80" as="geometry"/></mxCell><mxCell id="7" value="Start" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fontFamily=Helvetica;fontSize=16;fillColor=#e8f5e9;strokeColor=#4caf50;strokeWidth=4;gradientColor=#c8e6c9;" vertex="1" parent="1"><mxGeometry x="270" y="740" width="80" height="80" as="geometry"/></mxCell><mxCell id="8" value="Documentation" style="shape=document;whiteSpace=wrap;html=1;boundedLbl=1;strokeWidth=4;strokeColor=#9C27B0;gradientColor=#E1BEE7;fillColor=#F3E5F5;fontSize=16;" vertex="1" parent="1"><mxGeometry x="270" y="840" width="200" height="120" as="geometry"/></mxCell><mxCell id="9" value="Sub-Process" style="shape=process;whiteSpace=wrap;html=1;backgroundOutline=1;strokeColor=#ffb74d;strokeWidth=4;perimeterSpacing=0;fontSize=16;gradientColor=#fff3e0;fillColor=#FFFFFF;" vertex="1" parent="1"><mxGeometry x="300" y="980" width="200" height="120" as="geometry"/></mxCell><mxCell id="10" value="Template" style="rounded=1;whiteSpace=wrap;html=1;strokeColor=#00ACC1;strokeWidth=5;glass=0;comic=0;gradientColor=#b2ebf2;fillColor=#e0f7fa;fontSize=16;fontColor=#000000;" vertex="1" parent="1"><mxGeometry x="330" y="1120" width="200" height="120" as="geometry"/></mxCell><mxCell id="11" value="Decision" style="rhombus;whiteSpace=wrap;html=1;rounded=0;glass=0;comic=0;labelBackgroundColor=none;strokeColor=#333333;strokeWidth=4;fillColor=#eeeeee;gradientColor=#e5e5e5;fontFamily=Helvetica;fontSize=16;fontColor=#000000;align=center;" vertex="1" parent="1"><mxGeometry x="360" y="1260" width="200" height="120" as="geometry"/></mxCell><mxCell id="12" value="End" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fontFamily=Helvetica;fontSize=16;fillColor=#ffebee;strokeColor=#f44336;strokeWidth=4;gradientColor=#ffcdd2;" vertex="1" parent="1"><mxGeometry x="390" y="1400" width="80" height="80" as="geometry"/></mxCell><mxCell id="13" value="Process" style="shape=process;whiteSpace=wrap;html=1;backgroundOutline=1;strokeColor=#ff9800;strokeWidth=4;perimeterSpacing=0;fontSize=16;gradientColor=#ffe0b2;fillColor=#fff3e0;" vertex="1" parent="1"><mxGeometry x="390" y="1500" width="200" height="120" as="geometry"/></mxCell><mxCell id="14" value="Documentation" style="shape=document;whiteSpace=wrap;html=1;boundedLbl=1;strokeWidth=4;strokeColor=#9C27B0;gradientColor=#E1BEE7;fillColor=#F3E5F5;fontSize=16;" vertex="1" parent="1"><mxGeometry x="420" y="1640" width="200" height="120" as="geometry"/></mxCell><mxCell id="15" value="Phase" style="swimlane;html=1;horizontal=0;swimlaneLine=0;rounded=0;glass=0;comic=0;labelBackgroundColor=none;strokeColor=#000000;strokeWidth=4;fillColor=#26C6DA;gradientColor=#00ACC1;fontFamily=Helvetica;fontSize=16;fontColor=#FFFFFF;gradientDirection=east;spacing=0;spacingTop=-4;swimlaneFillColor=none;collapsible=0;" vertex="1" parent="1"><mxGeometry x="450" y="1780" width="1020" height="200" as="geometry"/></mxCell><mxCell id="16" value="Phase" style="swimlane;html=1;horizontal=0;swimlaneLine=0;rounded=0;glass=0;comic=0;labelBackgroundColor=none;strokeColor=#000000;strokeWidth=4;fillColor=#26C6DA;gradientColor=#00ACC1;fontFamily=Helvetica;fontSize=16;fontColor=#FFFFFF;gradientDirection=east;spacing=0;spacingTop=-4;swimlaneFillColor=none;collapsible=0;" vertex="1" parent="1"><mxGeometry x="480" y="2000" width="1020" height="200" as="geometry"/></mxCell><mxCell id="17" value="Phase" style="swimlane;html=1;horizontal=0;swimlaneLine=0;rounded=0;glass=0;comic=0;labelBackgroundColor=none;strokeColor=#000000;strokeWidth=4;fillColor=#26C6DA;gradientColor=#00ACC1;fontFamily=Helvetica;fontSize=16;fontColor=#FFFFFF;gradientDirection=east;spacing=0;spacingTop=-4;swimlaneFillColor=none;collapsible=0;" vertex="1" parent="1"><mxGeometry x="510" y="2220" width="1020" height="200" as="geometry"/></mxCell><mxCell id="18" value="Phase" style="swimlane;html=1;horizontal=0;swimlaneLine=0;rounded=0;glass=0;comic=0;labelBackgroundColor=none;strokeColor=#000000;strokeWidth=4;fillColor=#26C6DA;gradientColor=#00ACC1;fontFamily=Helvetica;fontSize=16;fontColor=#FFFFFF;gradientDirection=east;spacing=0;spacingTop=-4;swimlaneFillColor=none;collapsible=0;" vertex="1" parent="1"><mxGeometry x="540" y="2440" width="1020" height="200" as="geometry"/></mxCell><mxCell id="19" value="Process" style="shape=process;whiteSpace=wrap;html=1;backgroundOutline=1;strokeColor=#ff9800;strokeWidth=4;perimeterSpacing=0;fontSize=16;gradientColor=#ffe0b2;fillColor=#fff3e0;" vertex="1" parent="1"><mxGeometry x="570" y="2660" width="200" height="120" as="geometry"/></mxCell><mxCell id="20" value="Start" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fontFamily=Helvetica;fontSize=16;fillColor=#e8f5e9;strokeColor=#4caf50;strokeWidth=4;gradientColor=#c8e6c9;" vertex="1" parent="1"><mxGeometry x="600" y="2800" width="80" height="80" as="geometry"/></mxCell><mxCell id="21" value="Process" style="shape=process;whiteSpace=wrap;html=1;backgroundOutline=1;strokeColor=#ff9800;strokeWidth=4;perimeterSpacing=0;fontSize=16;gradientColor=#ffe0b2;fillColor=#fff3e0;" vertex="1" parent="1"><mxGeometry x="600" y="2900" width="200" height="120" as="geometry"/></mxCell><mxCell id="22" value="Action" style="rounded=1;whiteSpace=wrap;html=1;glass=0;comic=0;labelBackgroundColor=none;strokeColor=#e91e63;strokeWidth=4;fillColor=#fce4ec;gradientColor=#f8bbd0;fontFamily=Helvetica;fontSize=16;fontColor=#000000;" vertex="1" parent="1"><mxGeometry x="630" y="3040" width="280" height="40" as="geometry"/></mxCell><mxCell id="23" value="Process" style="shape=process;whiteSpace=wrap;html=1;backgroundOutline=1;strokeColor=#ff9800;strokeWidth=4;perimeterSpacing=0;fontSize=16;gradientColor=#ffe0b2;fillColor=#fff3e0;" vertex="1" parent="1"><mxGeometry x="660" y="3100" width="200" height="120" as="geometry"/></mxCell><mxCell id="24" value="Sub-Process" style="shape=process;whiteSpace=wrap;html=1;backgroundOutline=1;strokeColor=#ffb74d;strokeWidth=4;perimeterSpacing=0;fontSize=16;gradientColor=#fff3e0;fillColor=#FFFFFF;" vertex="1" parent="1"><mxGeometry x="690" y="3240" width="200" height="120" as="geometry"/></mxCell><mxCell id="25" value="End" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fontFamily=Helvetica;fontSize=16;fillColor=#ffebee;strokeColor=#f44336;strokeWidth=4;gradientColor=#ffcdd2;" vertex="1" parent="1"><mxGeometry x="720" y="3380" width="80" height="80" as="geometry"/></mxCell><mxCell id="26" value="Decision" style="rhombus;whiteSpace=wrap;html=1;rounded=0;glass=0;comic=0;labelBackgroundColor=none;strokeColor=#333333;strokeWidth=4;fillColor=#eeeeee;gradientColor=#e5e5e5;fontFamily=Helvetica;fontSize=16;fontColor=#000000;align=center;" vertex="1" parent="1"><mxGeometry x="720" y="3480" width="200" height="120" as="geometry"/></mxCell><mxCell id="27" value="Template" style="rounded=1;whiteSpace=wrap;html=1;strokeColor=#00ACC1;strokeWidth=5;glass=0;comic=0;gradientColor=#b2ebf2;fillColor=#e0f7fa;fontSize=16;fontColor=#000000;" vertex="1" parent="1"><mxGeometry x="750" y="3620" width="200" height="120" as="geometry"/></mxCell><mxCell id="28" value="Process" style="shape=process;whiteSpace=wrap;html=1;backgroundOutline=1;strokeColor=#ff9800;strokeWidth=4;perimeterSpacing=0;fontSize=16;gradientColor=#ffe0b2;fillColor=#fff3e0;" vertex="1" parent="1"><mxGeometry x="780" y="3760" width="200" height="120" as="geometry"/></mxCell><mxCell id="29" value="Start" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fontFamily=Helvetica;fontSize=16;fillColor=#e8f5e9;strokeColor=#4caf50;strokeWidth=4;gradientColor=#c8e6c9;" vertex="1" parent="1"><mxGeometry x="810" y="3900" width="80" height="80" as="geometry"/></mxCell><mxCell id="30" value="Documentation" style="shape=document;whiteSpace=wrap;html=1;boundedLbl=1;strokeWidth=4;strokeColor=#9C27B0;gradientColor=#E1BEE7;fillColor=#F3E5F5;fontSize=16;" vertex="1" parent="1"><mxGeometry x="810" y="4000" width="200" height="120" as="geometry"/></mxCell><mxCell id="31" value="Phase" style="swimlane;html=1;horizontal=0;swimlaneLine=0;rounded=0;glass=0;comic=0;labelBackgroundColor=none;strokeColor=#000000;strokeWidth=4;fillColor=#26C6DA;gradientColor=#00ACC1;fontFamily=Helvetica;fontSize=16;fontColor=#FFFFFF;gradientDirection=east;spacing=0;spacingTop=-4;swimlaneFillColor=none;collapsible=0;" vertex="1" parent="1"><mxGeometry x="840" y="4140" width="1020" height="200" as="geometry"/></mxCell><mxCell id="32" value="Action" style="rounded=1;whiteSpace=wrap;html=1;glass=0;comic=0;labelBackgroundColor=none;strokeColor=#e91e63;strokeWidth=4;fillColor=#fce4ec;gradientColor=#f8bbd0;fontFamily=Helvetica;fontSize=16;fontColor=#000000;" vertex="1" parent="1"><mxGeometry x="870" y="4360" width="280" height="40" as="geometry"/></mxCell><mxCell id="33" value="Documentation" style="shape=document;whiteSpace=wrap;html=1;boundedLbl=1;strokeWidth=4;strokeColor=#9C27B0;gradientColor=#E1BEE7;fillColor=#F3E5F5;fontSize=16;" vertex="1" parent="1"><mxGeometry x="900" y="4420" width="200" height="120" as="geometry"/></mxCell><mxCell id="34" value="Phase" style="swimlane;html=1;horizontal=0;swimlaneLine=0;rounded=0;glass=0;comic=0;labelBackgroundColor=none;strokeColor=#000000;strokeWidth=4;fillColor=#26C6DA;gradientColor=#00ACC1;fontFamily=Helvetica;fontSize=16;fontColor=#FFFFFF;gradientDirection=east;spacing=0;spacingTop=-4;swimlaneFillColor=none;collapsible=0;" vertex="1" parent="1"><mxGeometry x="930" y="4560" width="1020" height="200" as="geometry"/></mxCell><mxCell id="35" value="Process" style="shape=process;whiteSpace=wrap;html=1;backgroundOutline=1;strokeColor=#ff9800;strokeWidth=4;perimeterSpacing=0;fontSize=16;gradientColor=#ffe0b2;fillColor=#fff3e0;" vertex="1" parent="1"><mxGeometry x="960" y="4780" width="200" height="120" as="geometry"/></mxCell><mxCell id="36" value="Sub-Process" style="shape=process;whiteSpace=wrap;html=1;backgroundOutline=1;strokeColor=#ffb74d;strokeWidth=4;perimeterSpacing=0;fontSize=16;gradientColor=#fff3e0;fillColor=#FFFFFF;" vertex="1" parent="1"><mxGeometry x="990" y="4920" width="200" height="120" as="geometry"/></mxCell><mxCell id="37" value="Process" style="shape=process;whiteSpace=wrap;html=1;backgroundOutline=1;strokeColor=#ff9800;strokeWidth=4;perimeterSpacing=0;fontSize=16;gradientColor=#ffe0b2;fillColor=#fff3e0;" vertex="1" parent="1"><mxGeometry x="1020" y="5060" width="200" height="120" as="geometry"/></mxCell></root></mxGraphModel>';
var doc = mxUtils.parseXml(xmlString);
var codec = new mxCodec(doc);
codec.decode(doc.documentElement, graph.getModel());
graph.fit();
}catch(error){
console.log('An exception occurred while updating the graph:');
console.log(error);
}finally{
graph.getModel().endUpdate();
console.log('Graph updating ended');
}
// Enables rubberband (marquee) selection and a handler for basic keystrokes
var rubberband = new mxRubberband(graph);
var keyHandler = new mxKeyHandler(graph);
}
}
render() {
console.log('DisplayGraph Rendered!');
return (
<div className="graph-container" ref="divGraph" id="divGraph" style={{height: "calc(100vh-120px)", width: "100%"}}></div>
);
}
}
export default DisplayGraph;
When this React component (DisplayGraph) is constructed and rendered in my React application, the graph never appears. Although it does appear to be initializing the graph object, as the container div (id "divGraph") has no context menu when right-clicked, per mxEvent.disableContextMenu(container). And when I click and drag on the empty div, I can see a new div, mxRubberband, appear and alter its left/top/width/height styles in realtime as I drag the cursor around.
When inspected, the container div looks like this in the DOM:
<div class="graph-container" id="divGraph" style="width: 100%; position: relative; touch-action: none;">
<svg style="left: 0px; top: 0px; width: 100%; height: 100%; display: block; min-width: 1px; min-height: 1px;">
<g>
<g></g>
<g></g>
<g></g>
<g></g>
</g>
</svg>
</div>
Changing the XML string that is parsed by mxUtils never seems to change the actual graph that is rendered in the React component; it always appears to have 4 empty <g> elements regardless of what XMLString I pass into mxUtils.parseXml().
I've tried some different approaches, such as the ones detailed here, here, and the documentation examples here, but to no avail. No errors appear in the console when using this component, so I'm not entirely sure where the issue is occurring.
It may be worth noting that I can successfully construct and render a graph when manually inserting vertices and edges via the graph.insertVertex and graph.insertEdge methods, like so:
import React, { Component } from "react";
import * as mxgraph from 'mxgraph';
const { mxClient, mxGraph, mxRubberband, mxUtils, mxEvent, mxKeyHandler } = mxgraph();
class DisplayGraph extends Component {
constructor(props) {
super(props);
this.LoadGraph = this.LoadGraph.bind(this);
}
componentDidMount() {
this.LoadGraph();
}
LoadGraph() {
var container = document.getElementById("divGraph");
// Checks if the browser is supported
if (!mxClient.isBrowserSupported()) {
// Displays an error message if the browser is not supported.
mxUtils.error("Browser is not supported!", 200, false);
} else {
// Disables the built-in context menu
mxEvent.disableContextMenu(container);
// Creates the graph inside the given container
var graph = new mxGraph(container);
// Enables rubberband selection
new mxRubberband(graph);
// Gets the default parent for inserting new cells. This is normally the first
// child of the root (ie. layer 0).
var parent = graph.getDefaultParent();
// Enables tooltips, new connections and panning
graph.setPanning(true);
graph.setTooltips(true);
graph.setConnectable(true);
graph.setEnabled(true);
graph.setEdgeLabelsMovable(false);
graph.setVertexLabelsMovable(false);
graph.setGridEnabled(true);
graph.setAllowDanglingEdges(false);
graph.getModel().beginUpdate();
try {
//mxGraph component
var doc = mxUtils.createXmlDocument();
var node = doc.createElement("Node");
node.setAttribute("ComponentID", "[P01]");
var vx = graph.insertVertex(
parent,
null,
node,
240,
40,
150,
30,
"shape=ellipse;fillColor=yellow"
);
var v1 = graph.insertVertex(
parent,
null,
"shape1",
20,
120,
80,
30,
"rounded=1;strokeColor=red;fillColor=orange"
);
var v2 = graph.insertVertex(parent, null, "shape2", 300, 120, 80, 30);
var v3 = graph.insertVertex(parent, null, "shape3", 620, 180, 80, 30);
var e1 = graph.insertEdge(
parent,
null,
"",
v1,
v2,
"strokeWidth=2;endArrow=block;endSize=2;endFill=1;strokeColor=blue;rounded=1;"
);
var e2 = graph.insertEdge(parent, null, "Edge 2", v2, v3);
var e3 = graph.insertEdge(parent, null, "Edge 3", v1, v3);
//data
} finally {
// Updates the display
graph.getModel().endUpdate();
}
// Enables rubberband (marquee) selection and a handler for basic keystrokes
var rubberband = new mxRubberband(graph);
var keyHandler = new mxKeyHandler(graph);
}
}
render() {
return (
<div className="graph-container" ref="divGraph" id="divGraph"></div>
);
}
}
export default DisplayGraph;
So the module appears to be functioning, but I can't figure out why the XML String I'm passing into mxUtils.parseXml() isn't being properly parsed/rendered.
Any insight is greatly appreciated.
