невозможно создать MxGraph из предоставленного XML

Это проект React, и я пытаюсь конвертировать XML в MxGraph.

ПФБ: - код, который у меня есть

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='&lt;b style=&quot;font-size: 20px;&quot;&gt;Scorecard&lt;/b&gt;' 
        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='&lt;b style=&quot;font-size: 20px;&quot;&gt;Domain&lt;/b&gt;' 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='&lt;b style=&quot;font-size: 20px;&quot;&gt;KPI&lt;/b&gt;' 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='&lt;font style=&quot;font-size: 23px&quot;&gt;&lt;span&gt;R 19 762&lt;/span&gt;&lt;br&gt;&lt;font style=&quot;font-size: 15px&quot;&gt;19.8%&lt;/font&gt;&lt;/font&gt;&lt;br&gt;' 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='&lt;font style=&quot;font-size: 23px&quot;&gt;&lt;span&gt;R 15 544&lt;/span&gt;&lt;br&gt;&lt;font style=&quot;font-size: 15px&quot;&gt;15.5%&lt;/font&gt;&lt;/font&gt;&lt;br&gt;' 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='&lt;font style=&quot;font-size: 23px&quot;&gt;&lt;span&gt;R 35&lt;/span&gt;&lt;span&gt;&amp;nbsp;306&lt;/span&gt;&lt;br&gt;&lt;font style=&quot;font-size: 15px&quot;&gt;35.3%&lt;/font&gt;&lt;/font&gt;&lt;br&gt;' 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='&lt;font style=&quot;font-size: 23px&quot;&gt;&lt;span&gt;R 19 500&lt;/span&gt;&lt;br&gt;&lt;font style=&quot;font-size: 15px&quot;&gt;19.5%&lt;/font&gt;&lt;/font&gt;&lt;br&gt;' 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='&lt;font style=&quot;font-size: 23px&quot;&gt;&lt;span&gt;R 19 500&lt;/span&gt;&lt;br&gt;&lt;font style=&quot;font-size: 15px&quot;&gt;19.5%&lt;/font&gt;&lt;/font&gt;&lt;br&gt;' 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='&lt;font style=&quot;font-size: 23px&quot;&gt;&lt;span&gt;R&amp;nbsp;&lt;/span&gt;&lt;span&gt;54 806&lt;/span&gt;&lt;br&gt;&lt;font style=&quot;font-size: 15px&quot;&gt;54.8%&lt;/font&gt;&lt;/font&gt;&lt;br&gt;' 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='&lt;font style=&quot;font-size: 23px&quot;&gt;&lt;span&gt;R&amp;nbsp;&lt;/span&gt;&lt;span&gt;54 806&lt;/span&gt;&lt;br&gt;&lt;font style=&quot;font-size: 15px&quot;&gt;54.8%&lt;/font&gt;&lt;/font&gt;&lt;br&gt;' 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='&lt;font style=&quot;font-size: 23px&quot;&gt;&lt;span&gt;R&amp;nbsp;&lt;/span&gt;&lt;span&gt;54 806&lt;/span&gt;&lt;br&gt;&lt;font style=&quot;font-size: 15px&quot;&gt;54.8%&lt;/font&gt;&lt;/font&gt;&lt;br&gt;' 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;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='&lt;font style=&quot;font-size: 23px&quot;&gt;&lt;span&gt;R 0&lt;/span&gt;&lt;br&gt;&lt;font style=&quot;font-size: 15px&quot;&gt;0.0%&lt;/font&gt;&lt;/font&gt;&lt;br&gt;' 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='&lt;font style=&quot;font-size: 23px&quot;&gt;&lt;span&gt;R 0&lt;/span&gt;&lt;br&gt;&lt;font style=&quot;font-size: 15px&quot;&gt;0.0%&lt;/font&gt;&lt;/font&gt;&lt;br&gt;' 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='&lt;font style=&quot;font-size: 23px&quot;&gt;&lt;span&gt;R 0&lt;/span&gt;&lt;br&gt;&lt;font style=&quot;font-size: 15px&quot;&gt;0.0%&lt;/font&gt;&lt;/font&gt;&lt;br&gt;' 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 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

Обратите внимание: - тот же XML работает на draw.io, и я не могу уловить ошибку в моем коде, поэтому любая помощь в этом будет оценена

ОТВЕТЫ

Ответ 1

Я столкнулся с той же проблемой, так как не мог найти работающий способ декодирования xml в графическую модель. Но доступный обходной путь здесь:

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)
      )
    }
  }
}

И использование так было бы (если у вас есть график):

const doc = mxUtils.parseXml(myXmlString) //yields xml object
parseXmlToGraph(doc, graph)

С уважением

Ответ 2

Если формат вашего xml имеет вид <root><mxCell id="2" value="Hello," vertex="1"><mxGeometry x="20" y="20" width="80" height="30" as="geometry"/></mxCell>..... вот обходной путь для импорта xml в ваш объект mxGraph

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.graphname != undefined && 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);