mxGraph js codiert Overlay mit Vertex nicht

Question

In mxGraph-js verwende ich folgenden Code, um Überlagerungen zu Vertices hinzuzufügen.

graph.addCellOverlay(cell, overlay); 

Und kodieren Grafik xml mit

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

es dann dekodieren folgende Methode zurück.

Mein Problem ist, wenn die codierte Grafik zurück decodieren, zieht es die Grafik ohne Überlagerungen. Es scheint, wenn die Codierung von Overlays nicht in XML codiert wird.
Wie kann ich Graphen mit Overlays codieren und dann wieder richtig dekodieren?

Answer 1

Ich habe das gleiche Problem durchlaufen. Ohne den mxGraph js-Code zu durchsuchen, vermute ich, dass es sich um ein fehlendes Feature oder eine möglicherweise fehlerhafte Funktionalität handelt.

Hier sind ein paar mögliche Optionen, die ich sehe.

1. Bild in Zellstil einbetten. Siehe Quellbeispiel fixicon.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> 
   

2. Port-Typ-Zellen (in der Art definiert ist), die zur Hauptzelle über geordnete Attribut verknüpft sind. Siehe Quellbeispiel 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> 
   

3. Form Zelle und Bildzelle zusammen gruppiert.

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

Answer 2

War das Hinzufügen erforschen Kind-Zellen, wie in Option # 2 von der ersten Antwort fand aber keinen Weg Click-Ereignishandler hinzuzufügen. Nach dem Durchsuchen des Quellcodes wurde festgestellt, dass in der mxCellCodec-Klasse ein mxObjectCodec instanziiert wird, der eine Standardausschlussliste mit Überlagerungen enthält.

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

Lösung war, "Überlagerungen" aus Codec-Ausschlussliste zu entfernen. Außerdem musste ich die Eigenschaft allowEval auf "true" setzen, damit Ereignis-Listener-Funktionen auch als encoded & dekodiert werden können.

// 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;