mxGraph js не кодирует оверлей с вершиной

Question

В 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.
Как я могу кодировать граф с помощью наложений, а затем правильно декодировать его?

Answer 1

Я столкнулся с той же проблемой. Не копаясь в коде mxGraph js, я подозреваю, что это недостающая функция или возможно сломанная функциональность.

Вот несколько возможных вариантов, которые я вижу.

1. Код для вставки в ячейку. См. Исходный пример 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> 
   

2. клетка порта типа (определенная в стиле), которые связаны с помощью родительского атрибута в основную ячейку. См. Пример источника 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. Форма клетки и клеточное изображения сгруппированы вместе.

   <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

не исследовались добавление дочерних клеток, как в варианте № 2 от первоначального ответа, но не нашел способа добавить обработчик событий щелчка. Закончился копание исходного кода и обнаружил, что в классе mxCellCodec он создает экземпляр mxObjectCodec, имеющий список исключений по умолчанию, который включает в себя наложения.

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

Решение должно было удалить «наложения» из списка исключений кодеков. Мне также пришлось установить для свойства allowEval значение true, чтобы позволить функции прослушивателя событий также кодироваться &.