Menu
It's a React project and I am trying to convert XML to MxGraph.
PFB :- the code that I have
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import {
mxGraph,
mxRubberband,
mxKeyHandler,
mxClient,
mxUtils,
mxEvent
} from 'mxgraph-js'
// import axios from 'axios'
import parser from 'fast-xml-parser'
import '../../common.css'
import '../../mxgraph.css'
class mxGraphGridAreaEditor extends Component {
constructor (props) {
super(props)
this.state = {
graph: {},
layout: {},
json: '',
dragElt: null,
createVisile: false,
currentNode: null,
currentTask: ''
}
this.LoadGraph = this.LoadGraph.bind(this)
}
componentDidMount () {
const xml = `<mxGraphModel dx='2221' dy='774' grid='1' gridSize='10' guides='1' tooltips='1' connect='1' arrows='1' fold='1' page='1' pageScale='1' pageWidth='827' pageHeight='1169' math='0' shadow='0'>
<root>
<mxCell id='0'/>
<mxCell id='1' parent='0'/>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-7' value='<b style="font-size: 20px;">Scorecard</b>'
style='rounded=0;whiteSpace=wrap;html=1;fillColor=#E6E6E6;fontSize=20;verticalAlign=top;strokeColor=none;' parent='1' vertex='1'>
<mxGeometry x='-230' y='10' width='240' height='800' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-1' value='KPA' style='rounded=0;whiteSpace=wrap;html=1;verticalAlign=top;fontStyle=1;strokeColor=none;fontSize=20;fillColor=#CCCCCC;' parent='1' vertex='1'>
<mxGeometry x='10' y='10' width='240' height='800' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-2' value='<b style="font-size: 20px;">Domain</b>' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#E6E6E6;fontSize=20;verticalAlign=top;strokeColor=none;' parent='1' vertex='1'>
<mxGeometry x='250' y='10' width='240' height='800' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-3' value='Cluster' style='rounded=0;whiteSpace=wrap;html=1;verticalAlign=top;fontStyle=1;strokeColor=none;fontSize=20;fillColor=#CCCCCC;' parent='1' vertex='1'>
<mxGeometry x='490' y='10' width='240' height='800' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-4' value='<b style="font-size: 20px;">KPI</b>' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#E6E6E6;fontSize=20;verticalAlign=top;strokeColor=none;' parent='1' vertex='1'>
<mxGeometry x='730' y='10' width='240' height='800' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-15' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-13' target='y3w0JNk_32n-TRd_Wrkm-5' edge='1'>
<mxGeometry width='50' height='50' relative='1' as='geometry'>
<mxPoint x='-160' y='450' as='sourcePoint'/>
<mxPoint x='-110' y='400' as='targetPoint'/>
</mxGeometry>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-19' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;entryX=1;entryY=0.5;entryDx=0;entryDy=0;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-16' target='y3w0JNk_32n-TRd_Wrkm-13' edge='1'>
<mxGeometry width='50' height='50' relative='1' as='geometry'>
<mxPoint x='40' y='297.5' as='sourcePoint'/>
<mxPoint y='297.5' as='targetPoint'/>
</mxGeometry>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-26' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;entryX=1;entryY=0.5;entryDx=0;entryDy=0;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-20' target='y3w0JNk_32n-TRd_Wrkm-16' edge='1'>
<mxGeometry width='50' height='50' relative='1' as='geometry'>
<mxPoint x='280' y='297.5' as='sourcePoint'/>
<mxPoint x='240' y='297.5' as='targetPoint'/>
</mxGeometry>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-27' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-23' target='y3w0JNk_32n-TRd_Wrkm-16' edge='1'>
<mxGeometry width='50' height='50' relative='1' as='geometry'>
<mxPoint x='520' y='189.79310344827593' as='sourcePoint'/>
<mxPoint x='480' y='297.37931034482756' as='targetPoint'/>
</mxGeometry>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-38' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-34' target='y3w0JNk_32n-TRd_Wrkm-20' edge='1'>
<mxGeometry width='50' height='50' relative='1' as='geometry'>
<mxPoint x='280' y='297.5' as='sourcePoint'/>
<mxPoint x='240' y='297.5' as='targetPoint'/>
</mxGeometry>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-48' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-40' target='y3w0JNk_32n-TRd_Wrkm-23' edge='1'>
<mxGeometry width='50' height='50' relative='1' as='geometry'>
<mxPoint x='520' y='402.2068965517242' as='sourcePoint'/>
<mxPoint x='480' y='297.37931034482756' as='targetPoint'/>
</mxGeometry>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-49' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-43' target='y3w0JNk_32n-TRd_Wrkm-23' edge='1'>
<mxGeometry width='50' height='50' relative='1' as='geometry'>
<mxPoint x='530' y='412.2068965517242' as='sourcePoint'/>
<mxPoint x='490' y='307.37931034482756' as='targetPoint'/>
</mxGeometry>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-50' value='' style='group' parent='1' vertex='1' connectable='0'>
<mxGeometry x='750' y='440' width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-43' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-50' vertex='1'>
<mxGeometry width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-44' value='End To End Fault Handling Effectiveness S2' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-50' vertex='1'>
<mxGeometry width='200' height='55' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-45' value='<font style="font-size: 23px"><span>R 19 762</span><br><font style="font-size: 15px">19.8%</font></font><br>' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-50' vertex='1'>
<mxGeometry x='10' y='65' width='180' height='70' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-51' value='' style='group' parent='1' vertex='1' connectable='0'>
<mxGeometry x='750' y='247.5' width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-40' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-51' vertex='1'>
<mxGeometry width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-41' value='End To End Fault Handling Effectiveness S1' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-51' vertex='1'>
<mxGeometry width='200' height='55' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-42' value='<font style="font-size: 23px"><span>R 15 544</span><br><font style="font-size: 15px">15.5%</font></font><br>' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-51' vertex='1'>
<mxGeometry x='10' y='65.5' width='180' height='70' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-52' value='' style='group' parent='1' vertex='1' connectable='0'>
<mxGeometry x='510' y='344' width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-23' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-52' vertex='1'>
<mxGeometry width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-24' value='Fault Management' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-52' vertex='1'>
<mxGeometry width='200' height='55' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-25' value='<font style="font-size: 23px"><span>R 35</span><span>&nbsp;306</span><br><font style="font-size: 15px">35.3%</font></font><br>' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-52' vertex='1'>
<mxGeometry x='10' y='65' width='180' height='70' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-53' value='' style='group' parent='1' vertex='1' connectable='0'>
<mxGeometry x='750' y='58' width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-34' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-53' vertex='1'>
<mxGeometry width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-35' value='Reporting Effectiveness' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-53' vertex='1'>
<mxGeometry width='200' height='55' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-36' value='<font style="font-size: 23px"><span>R 19 500</span><br><font style="font-size: 15px">19.5%</font></font><br>' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-53' vertex='1'>
<mxGeometry x='10' y='65' width='180' height='70' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-54' value='' style='group' parent='1' vertex='1' connectable='0'>
<mxGeometry x='510' y='58' width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-20' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-54' vertex='1'>
<mxGeometry width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-21' value='Reporting' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-54' vertex='1'>
<mxGeometry width='200' height='55' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-22' value='<font style="font-size: 23px"><span>R 19 500</span><br><font style="font-size: 15px">19.5%</font></font><br>' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-54' vertex='1'>
<mxGeometry x='10' y='65' width='180' height='70' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-55' value='' style='group' parent='1' vertex='1' connectable='0'>
<mxGeometry x='270' y='201' width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-16' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-55' vertex='1'>
<mxGeometry width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-17' value='Common' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-55' vertex='1'>
<mxGeometry width='200' height='55' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-18' value='<font style="font-size: 23px"><span>R&nbsp;</span><span>54 806</span><br><font style="font-size: 15px">54.8%</font></font><br>' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-55' vertex='1'>
<mxGeometry x='10' y='65' width='180' height='70' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-56' value='' style='group' parent='1' vertex='1' connectable='0'>
<mxGeometry x='30' y='420' width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-13' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-56' vertex='1'>
<mxGeometry width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-14' value='Process' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-56' vertex='1'>
<mxGeometry width='200' height='55' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-11' value='<font style="font-size: 23px"><span>R&nbsp;</span><span>54 806</span><br><font style="font-size: 15px">54.8%</font></font><br>' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-56' vertex='1'>
<mxGeometry x='10' y='65' width='180' height='70' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-57' value='' style='group' parent='1' vertex='1' connectable='0'>
<mxGeometry x='-210' y='419.99999999999994' width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-5' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-57' vertex='1'>
<mxGeometry width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-6' value='<font style="font-size: 23px"><span>R&nbsp;</span><span>54 806</span><br><font style="font-size: 15px">54.8%</font></font><br>' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-57' vertex='1'>
<mxGeometry x='10' y='65' width='180' height='70' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-12' value='Huawei RAN and Transmission O&amp;M' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-57' vertex='1'>
<mxGeometry width='200' height='55' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-62' value='' style='group' parent='1' vertex='1' connectable='0'>
<mxGeometry x='750' y='640' width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-59' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-62' vertex='1'>
<mxGeometry width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-60' value='Network Monitoring Effectiveness' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-62' vertex='1'>
<mxGeometry width='200' height='55' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-61' value='<font style="font-size: 23px"><span>R 0</span><br><font style="font-size: 15px">0.0%</font></font><br>' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-62' vertex='1'>
<mxGeometry x='10' y='65' width='180' height='70' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-68' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-59' target='y3w0JNk_32n-TRd_Wrkm-65' edge='1'>
<mxGeometry width='50' height='50' relative='1' as='geometry'>
<mxPoint x='760' y='522.5' as='sourcePoint'/>
<mxPoint x='720' y='426.66666666666674' as='targetPoint'/>
</mxGeometry>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-73' value='' style='group' parent='1' vertex='1' connectable='0'>
<mxGeometry x='510' y='640' width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-65' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-73' vertex='1'>
<mxGeometry width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-66' value='Supervision' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-73' vertex='1'>
<mxGeometry width='200' height='55' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-67' value='<font style="font-size: 23px"><span>R 0</span><br><font style="font-size: 15px">0.0%</font></font><br>' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-73' vertex='1'>
<mxGeometry x='10' y='65' width='180' height='70' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-74' value='' style='group' parent='1' vertex='1' connectable='0'>
<mxGeometry x='270' y='640' width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-70' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-74' vertex='1'>
<mxGeometry width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-71' value='Front Office' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-74' vertex='1'>
<mxGeometry width='200' height='55' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-72' value='<font style="font-size: 23px"><span>R 0</span><br><font style="font-size: 15px">0.0%</font></font><br>' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-74' vertex='1'>
<mxGeometry x='10' y='65' width='180' height='70' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-75' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-65' target='y3w0JNk_32n-TRd_Wrkm-70' edge='1'>
<mxGeometry width='50' height='50' relative='1' as='geometry'>
<mxPoint x='760.166666666667' y='722.5' as='sourcePoint'/>
<mxPoint x='720' y='722.5' as='targetPoint'/>
</mxGeometry>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-76' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;entryX=1;entryY=0.5;entryDx=0;entryDy=0;exitX=0;exitY=0.5;exitDx=0;exitDy=0;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-70' target='y3w0JNk_32n-TRd_Wrkm-13' edge='1'>
<mxGeometry width='50' height='50' relative='1' as='geometry'>
<mxPoint x='280' y='284' as='sourcePoint'/>
<mxPoint x='240' y='503' as='targetPoint'/>
</mxGeometry>
</mxCell>
</root>
</mxGraphModel>
`
this.setState({ data: xml })
this.LoadGraph()
}
LoadGraph () {
var container = ReactDOM.findDOMNode(this.refs.divPenaltyGraph)
// 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)
var options = {
attributeNamePrefix: '',
textNodeName: '#text',
ignoreAttributes: false,
ignoreNameSpace: false,
allowBooleanAttributes: false,
parseNodeValue: true,
parseAttributeValue: true,
trimValues: true,
cdataTagName: '__cdata', // default is 'false'
cdataPositionChar: '\\c',
localeRange: '', // To support non english character in tag/attribute values.
parseTrueNumberOnly: false
}
if (parser.validate(this.state.data) === true) { // optional (it'll return an object in case it's not valid)
var jsonObj = parser.parse(this.state.data, options)
}
// 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 {
// mxGrapg component
var doc = mxUtils.createXmlDocument()
var node = doc.createElement('Node')
node.setAttribute('ComponentID', '[P01]')
const items = []
jsonObj.mxGraphModel.root.mxCell.forEach(cell => {
if (cell.value) {
const vertexObj = {}
let vertex = graph.insertVertex(
parent,
cell.id,
cell.value,
cell.mxGeometry.x,
cell.mxGeometry.y,
cell.mxGeometry.width,
cell.mxGeometry.height,
cell.style
)
vertexObj[cell.id] = vertex
items.push(vertexObj)
}
})
const mxCellCount = jsonObj.mxGraphModel.root.mxCell.length
for (let i = 0; i <= mxCellCount; i++) {
const cell = jsonObj.mxGraphModel.root.mxCell[i]
if (!cell.value) {
let sourceObject = items.filter(vertex => {
return Object.keys(vertex) === cell.source
})[0]
let source = sourceObject ? sourceObject[cell['source']] : null
let targetObject = items.filter(vertex => {
return Object.keys(vertex) === cell.target
})[0]
let target = targetObject ? cell['target'] : null
graph.insertEdge(
parent,
null,
'',
source,
target
)
}
}
// data
} finally {
// Updates the display
graph.getModel().endUpdate()
}
// Enables rubberband (marquee) selection and a handler for basic keystrokes
new mxRubberband(graph)
new mxKeyHandler(graph)
}
}
render () {
return (
<div className='graph-container' ref='divPenaltyGraph' id='divPenaltyGraph' />
)
}
}
export default mxGraphGridAreaEditor
Please Note :- The same XML works on draw.io and I am not able to catch the error in my code so any assistance in this will be appreciated
615
I was facing same trouble since I couldn't find a working way to decode xml to graph model. But an available workaround is here:
function parseXmlToGraph(xmlDoc, graph) {
const cells = xmlDoc.documentElement.children[0].children
const parent = graph.getDefaultParent()
for (let i = 0; i < cells.length; i++) {
const cellAttrs = cells[i].attributes
if (cellAttrs.vertex) { // is vertex
const vertexName = cellAttrs.value.value
const vertexId = Number(cellAttrs.id.value)
const geom = cells[i].children[0].attributes
const xPos = Number(geom.x.value)
const yPos = Number(geom.y.value)
const height = Number(geom.height.value)
const width = Number(geom.width.value)
graph.insertVertex(parent, vertexId, vertexName, xPos, yPos, width, height)
} else if (cellAttrs.edge) { //is edge
const edgeName = cellAttrs.value.value
const edgeId = Number(cellAttrs.id.value)
const source = Number(cellAttrs.source.value)
const target = Number(cellAttrs.target.value)
graph.insertEdge(parent, edgeId, edgeName,
graph.getModel().getCell(source),
graph.getModel().getCell(target)
)
}
}
}
And using so would be like (supposing you have a graph):
const doc = mxUtils.parseXml(myXmlString) //yields xml object
parseXmlToGraph(doc, graph)
Regards
EDIT
As pointed by nbatolov's comment problem resides in the fact there is no such mx* functions in window (global object) at runtime, e.g., in your case, apparently, window is missing some functions, such as mxGraph(), mxGraphModel(), mxCodec(), etc. Then you could add them to your window before running mxCodec's decode function with
window.['mxCodec'] = mxgraph.mxCodec
where mxgraph is your start-point to use mxGraph's functions and objects.
138
If the format of your xml is like <root><mxCell id="2" value="Hello," vertex="1"><mxGeometry x="20" y="20" width="80" height="30" as="geometry"/></mxCell> ..... here is a workaround to import the xml into your mxGraph object
var graph = new mxGraph(container)
let doc = mxUtils.parseXml(xml);
let codec = new mxCodec(doc);
codec.decode(doc.documentElement, graph.getModel());
let elt = doc.documentElement.firstChild;
let cells = [];
while (elt != null)
{
let cell = codec.decode(elt)
if(cell != undefined){
if(cell.geometry != undefined){
if(cell.id != undefined && cell.parent != undefined && (cell.id == cell.parent)){
elt = elt.nextSibling;
continue;
}
cells.push(cell);
}
}
elt = elt.nextSibling;
}
graph.addCells(cells);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
