mxGraph js不編碼覆蓋頂點

在mxGraph-js中，我使用以下代碼向頂點添加覆蓋圖。mxGraph js不編碼覆蓋頂點

graph.addCellOverlay(cell, overlay);

和編碼圖形爲XML的

var graph = new mxGraph(container); 
var xml = encoder.encode(graph.getModel());

然後，使用下面的方法對其進行解碼回來。

var doc = mxUtils.parseXml(xml); 
var codec = new mxCodec(doc); 
codec.decode(doc.documentElement, graph.getModel());

我的問題是，當解碼編碼圖回來繪製沒有覆蓋圖的圖形。看起來，編碼重疊不會被編碼到xml中。我如何編碼與覆蓋圖的圖形，然後正確解碼回來？

來源

2017-02-17 HarshaXsoad

我跑過同一個問題。沒有深入挖掘mxGraph js代碼，我懷疑這是一個缺失的功能，或者可能是功能受損。

下面是我看到的一些可能的選項。

將圖像嵌入到單元格樣式中。 查看源示例fixedicon.html。其經由父屬性到主要細胞相關

<mxGraphModel> 
    <root> 
     <mxCell id="0"/> 
     <mxCell id="1" parent="0"/> 
     <mxCell id="2" value="Fixed icon" style="shape=label;image=images/plus.png;imageWidth=16;imageHeight=16;spacingBottom=10;fillColor=#adc5ff;gradientColor=#7d85df;glass=1;rounded=1;shadow=1;" vertex="1" parent="1"> 
      <mxGeometry x="20" y="20" width="80" height="50" as="geometry"/> 
     </mxCell> 
    </root> 
</mxGraphModel>

端口類型的細胞（在式中定義）。 查看源碼示例ports.html。

<mxGraphModel> 
    <root> 
    <mxCell id="0"/> 
    <mxCell id="1" parent="0"/> 
    <mxCell id="2" value="<h1 style="margin:0px;">Website</h1><br><img src="images/icons48/earth.png" width="48" height="48"><br> 
     <a href="http://www.jgraph.com" target="_blank">Browse</a>" vertex="1" connectable="0" parent="1"> 
     <mxGeometry x="280" y="200" width="120" height="120" as="geometry"> 
     <mxRectangle width="120" height="40" as="alternateBounds"/> 
     </mxGeometry> 
    </mxCell> 
    <mxCell id="3" value="Trigger" style="port;image=editors/images/overlays/flash.png;align=right;imageAlign=right;spacingRight=18" vertex="1" parent="2"> 
     <mxGeometry y="0.25" width="16" height="16" relative="1" as="geometry"> 
     <mxPoint x="-6" y="-8" as="offset"/> 
     </mxGeometry> 
    </mxCell> 
    <mxCell id="4" value="Input" style="port;image=editors/images/overlays/check.png;align=right;imageAlign=right;spacingRight=18" vertex="1" parent="2"> 
     <mxGeometry y="0.75" width="16" height="16" relative="1" as="geometry"> 
     <mxPoint x="-6" y="-4" as="offset"/> 
     </mxGeometry> 
    </mxCell> 
    <mxCell id="5" value="Error" style="port;image=editors/images/overlays/error.png;spacingLeft=18" vertex="1" parent="2"> 
     <mxGeometry x="1" y="0.25" width="16" height="16" relative="1" as="geometry"> 
     <mxPoint x="-8" y="-8" as="offset"/> 
     </mxGeometry> 
    </mxCell> 
    <mxCell id="6" value="Result" style="port;image=editors/images/overlays/information.png;spacingLeft=18" vertex="1" parent="2"> 
     <mxGeometry x="1" y="0.75" width="16" height="16" relative="1" as="geometry"> 
     <mxPoint x="-8" y="-4" as="offset"/> 
     </mxGeometry> 
    </mxCell> 
    </root> 
</mxGraphModel>

式樣細胞和細胞圖像組合在一起。

<mxGraphModel> 
    <root> 
    <mxCell id="0"/> 
    <mxCell id="1" parent="0"/> 
    <mxCell id="6" value="" style="group" parent="1" vertex="1" connectable="0"> 
     <mxGeometry x="70" y="70" width="120" height="85" as="geometry"/> 
    </mxCell> 
    <mxCell id="4" value="" style="shape=image;imageAspect=0;aspect=fixed;verticalLabelPosition=bottom;verticalAlign=top;image=images/close.png;" parent="6" vertex="1"> 
     <mxGeometry x="5" y="76" width="9" height="9" as="geometry"/> 
    </mxCell> 
    <UserObject label="shape" id="3"> 
     <mxCell style="whiteSpace=wrap;html=1;" parent="6" vertex="1"> 
     <mxGeometry width="120" height="60" as="geometry"/> 
     </mxCell> 
    </UserObject> 
    </root> 
</mxGraphModel>

來源

2017-05-15 20:37:40

我傾向於選項＃2，因爲我需要將點擊事件分配給圖像。 –

正在探索添加子細胞中的選項＃2，從最初的答案，但發現沒有辦法添加單擊事件處理程序。最後深入挖掘源代碼，發現在mxCellCodec類中它實例化了一個mxObjectCodec，該mxObjectCodec具有包含覆蓋的默認排除列表。

var codec = new mxObjectCodec(new mxCell(), 
['children', 'edges', 'overlays', 'mxTransient'], 
['parent', 'source', 'target']);

解決方法是從編解碼器排除列表中刪除「覆蓋」。我還必須將allowEval屬性設置爲true以允許事件偵聽器函數也被編碼爲&已解碼。

// remove overlays from exclude list for mxCellCodec so that overlays are encoded into XML 
var cellCodec = mxCodecRegistry.getCodec(mxCell); 
var excludes = cellCodec.exclude; 
excludes.splice(excludes.indexOf('overlays'), 1); 

// set flag to allow expressions (function) to be encoded 
cellCodec.allowEval = true; 

// set flag to allow expressions (function) to be decoded 
mxObjectCodec.allowEval = true;

來源

2017-05-18 20:33:42

mxGraph js不編碼覆蓋頂點

回答

相關問題