After parsing the XML string, the decode method fails #102
Description
I use the following code to parse the XML string into SVG and render it to the DOM node
/**
* @type renderXmlType
*/
export type renderXmlType = (this: instanceObject, xml: string) => void;
export const renderXml: renderXmlType = function (xml: string) {
const xmlDoc = new DOMParser().parseFromString(xml, 'text/xml');
// const xmlDoc = xmlUtils.parseXml(xml);
const decoder = new Codec(xmlDoc);
decoder.decode(xmlDoc.documentElement, this.graph.getDataModel());
};
const container2 = document.createElement('div');
container2.style.flex = '1';
document.body.appendChild(container2)
const _graph2 = graph.init(container2);
const xml = `<GraphDataModel><root><Cell id="0"><Object as="style"/></Cell><Cell id="1" parent="0"><Object as="style"/></Cell><Cell id="2" value="test1" vertex="1" parent="1"><Geometry _width="100" _height="100" as="geometry"/><Object align="right" shape="halfCircle" as="style"/></Cell><Cell id="3" value="test2" vertex="1" parent="1"><Geometry _x="300" _y="100" _width="100" _height="100" as="geometry"/><Object shape="halfCircle" as="style"/></Cell><Cell id="4" value="test2" vertex="1" parent="1"><Geometry _y="220" _width="100" _height="100" as="geometry"/><Object as="style"/></Cell><Cell id="__edge_1__" value="edge1" edge="1" parent="1"><Geometry relative="1" as="geometry"/><Object as="style"/></Cell><Cell id="__edge_2__" value="edge2" edge="1" parent="1"><Geometry relative="1" as="geometry"/><Object as="style"/></Cell><Cell id="__edge_3__" value="edge3" edge="1" parent="1"><Geometry relative="1" as="geometry"/><Object as="style"/></Cell></root></GraphDataModel>`;
_graph2.renderXml(xml);But it did not succeed
I debug the source code to get this Code:
decode(node, into) {
this.updateElements();
let obj = null;
if (node != null && node.nodeType === NODETYPE.ELEMENT) {
let ctor = null;
try {
// @ts-ignore
ctor = window[node.nodeName];
}
catch (err) {
// ignore
}
const dec = CodecRegistry.getCodec(ctor);
if (dec != null) {
obj = dec.decode(this, node, into);
}
else {
obj = node.cloneNode(true);
obj.removeAttribute('as');
}
}
return obj;
}Where ctor = window [node. NodeName]; In this code, ctor is undefined because node.nodename is the method name. For example, when resolving < GraphDataModel>, node NodeName === 'GraphDataModel', but the "GraphDataModel" class does not exist on the window object, so the subsequent parsing fails, including the possibility of obtaining "Cell" and "Geometry " methods.
My solution is:
import { Cell, Geometry, GraphDataModel } from "maxgraph"
declare global {
interface Window {
GraphDataModel: typeof GraphDataModel;
Cell: typeof Cell;
Geometry: typeof Geometry;
}
}
window.GraphDataModel = GraphDataModel;
window.Cell = Cell;
window.Geometry = Geometry;After this configuration, it can be displayed normally
Thank you for reading