解码 xml 并渲染回 canvas 图形后，mxgraph 中未显示单元格

Question

我能够成功解码图 xml 模型，但在拖动之前单元格不可见

下面的 GIF 显示了我的问题

问题： 我想在第 1 次（现在只显示 div）时完全加载图形，也不需要拖动

这是我进行解码和渲染的方式xml

var graphXmlStr = ''//xmldata
var doc = mxUtils.parseXml(graphXmlStr)
var codec = new mxCodec(doc);
codec.decode(doc.documentElement, graph.getModel());

我正在使用下面的代码 html graph.htmlLabels 我需要下面的代码

  graph.convertValueToString = function(cell) {
    return cell.value;
  }

下面是我的完整代码

<html>

    <head>
        <title>Toolbar example for mxGraph</title>
        <style>
            #graph-wrapper {
                background: #333;
                width: 100%;
                height: 528px;
            }
        </style>
        <script type="text/javascript">
            mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';
        </script>
        <script src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js"></script>
    </head>
    
    <body onload="initCanvas()">
        <h4>find div text and drag it , as you drag it will become visible</h4>
    
        <div id="graph-wrapper">
        </div>
      <script>

var graph;

function initCanvas() {

  //This function is called onload of body itself and it will make the mxgraph canvas
  graph = new mxGraph(document.getElementById('graph-wrapper'));
  graph.htmlLabels = true;
  graph.cellsEditable = false;

    graph.model.beginUpdate();
    var graphXmlStr =  `<mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/><div xmlns="http://www.w3.org/1999/xhtml" id="2" style="width: 100px; height: 100px; border-radius: 50%; background: red; display: inline-flex; text-align: center; color: #fff; align-items: center; justify-content: center;">&#xa;                Pipe&#xa;           <mxCell xmlns="" style="fillColor=none;strokeColor=none" vertex="1" parent="1"><mxGeometry x="150" y="50" width="100" height="100" as="geometry"/></mxCell></div></root></mxGraphModel>`;
    var doc = mxUtils.parseXml(graphXmlStr);
    var codec = new mxCodec(doc);
    codec.decode(doc.documentElement, graph.getModel());
    graph.model.endUpdate();

    // render as HTML node always. You probably won't want that in real world though
    graph.convertValueToString = function(cell) {
        return cell.value;
    }

} 
      </script>
    </body>
    </html>

请帮我提前谢谢！！！

Answer 1

我发现你必须打电话给 graph.refresh();。

<html>

    <head>
        <title>Toolbar example for mxGraph</title>
        <style>
            #graph-wrapper {
                background: #333;
                width: 100%;
                height: 528px;
            }
        </style>
        <script type="text/javascript">
            mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';
        </script>
        <script src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js"></script>
    </head>
    
    <body onload="initCanvas()">
        <h4>find div text and drag it , as you drag it will become visible</h4>
    
        <div id="graph-wrapper">
        </div>
      <script>

var graph;

function initCanvas() {

  //This function is called onload of body itself and it will make the mxgraph canvas
  debugger
  graph = new mxGraph(document.getElementById('graph-wrapper'));
  graph.htmlLabels = true;
  graph.cellsEditable = false;

    graph.model.beginUpdate();
    var graphXmlStr =  `<mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/><div xmlns="http://www.w3.org/1999/xhtml" id="2" style="width: 100px; height: 100px; border-radius: 50%; background: red; display: inline-flex; text-align: center; color: #fff; align-items: center; justify-content: center;">&#xa;                Pipe&#xa;           <mxCell xmlns="" style="fillColor=none;strokeColor=none" vertex="1" parent="1"><mxGeometry x="150" y="50" width="100" height="100" as="geometry"/></mxCell></div></root></mxGraphModel>`;
    var doc = mxUtils.parseXml(graphXmlStr);
    var codec = new mxCodec(doc);
    codec.decode(doc.documentElement, graph.getModel());
    graph.model.endUpdate();
    
    //graph.graphModelChanged([])
    // render as HTML node always. You probably won't want that in real world though
    graph.convertValueToString = function(cell) {
        return cell.value;
    }
    
    graph.refresh();

} 
      </script>
    </body>
    </html>

解码 xml 并渲染回 canvas 图形后，mxgraph 中未显示单元格

after decoding xml and rendering back on to the canvas graph cell is not showing in mxgraph

javascript

jquery

mxgraph

jgraph