Я нашел решение.
Я использовал эту ссылку .
Я начал свой проект, используя этот проект .
Я создал класс, который наследует от mxgraph, переопределяющего convertValueToString и cellLabelChanged.
export class myMxGraph extends mxGraph
{
convertValueToString(cell:mxCell)
{
if ((<any>window).mxUtils.isNode(cell.value))
{
return cell.getAttribute('label', '')
}
}
cellLabelChanged(cell, newValue, autoSize)
{
if ((<any>window).mxUtils.isNode(cell.value))
{
// Clones the value for correct undo/redo
var elt = cell.value.cloneNode(true);
elt.setAttribute('label', newValue);
newValue = elt;
}
super.cellLabelChanged(cell, newValue,autoSize);
};
}
Как это использовать:
import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
import beautify from 'xml-beautifier';
import { myMxGraph } from './myMxGraph';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
@ViewChild('graphContainer') graphContainer: ElementRef;
vertexCreated = false;
graph: myMxGraph;
vertex:mxCell;
jsonText = "";
ngAfterViewInit() {
this.graph = new myMxGraph(this.graphContainer.nativeElement);
}
createNewVertex(): void {
const itemStyle = "";
const doc = (<any>window).mxUtils.createXmlDocument();
var node = doc.createElement('vertex');
node.setAttribute('type', 'aaaa');
try {
const parent = this.graph.getDefaultParent();
this.graph.getModel().beginUpdate();
this.vertex = this.graph.insertVertex(parent, "uuid.v4()", node, 50, 50, 30, 80,itemStyle,'');
this.vertex.setAttribute('label', 'Vertex');
} finally {
this.graph.getModel().endUpdate();
}
this.vertexCreated = true;
}
updateInput()
{
var encoder = new (<any>window).mxCodec();
var node = encoder.encode(this.graph.getModel());
this.jsonText = beautify((<any>window).mxUtils.getXml(node));
}
updateVertex()
{
try {
this.graph.getModel().beginUpdate();
this.vertex.value.setAttribute('label','yael');
const color = '#ff69b4';
const style = this.vertex.getStyle();
var styleArr = style.split(';')
var styleArr = style.split(';');
var res = styleArr.filter(function (value) {
return !value.includes('strokeColor');
});
res.unshift( 'strokeColor='+ color);
this.vertex.setStyle(res.join(';'));
this.graph.refresh(this.vertex);
}
finally
{
this.graph.getModel().endUpdate();
}
}
}
Таким образом, mxcell является частью клонированного узла xml даже после изменения метки, поэтому атрибуты не теряются.