I am a beginner here, and trying to wrap my head around mxGraph library. My end-game is to read mxGraphModel from external source and render that visible with mxGraph -library (

Any tip is greatly appreciated!

CodePudding user response：

I managed to get this working, according to this: mxCodec doesn't decode xml correctly - I added

window['mxGraphModel'] = mxGraphModel;
window['mxGeometry'] = mxGeometry;

before parse methods and updated my imports

import mxgraph from 'mxgraph';

const {
    mxGraph,
    mxGraphModel,
    // mxDragSource,
    // mxUndoManager,
    // mxCompactTreeLayout,
    // mxGraphHandler,
    // mxGuide,
    // mxEdgeHandler,
    // mxEdgeStyle,
    // mxConstraintHandler,
    // mxEvent,
    // mxImage,
    // mxConstants,
    // mxKeyHandler,
    // mxRubberband,
    // mxPerimeter,
    mxGeometry,
    mxUtils,
    // mxVertexHandler,
    mxClient,
    mxCodec,
} = mxgraph();

So this is the whole functional component, which reads XML and renders that visible to the screen using mxGraph.

This is the whole solution:

import React, { useEffect, useCallback } from 'react';
import { StyledTestComponent } from '../styles/TestComponent.styled';
import mxgraph from 'mxgraph';

const {
    mxGraph,
    mxGraphModel,
    mxGeometry,
    mxUtils,
    mxClient,
    mxCodec,
} = mxgraph();
   
const TestComponent = () => {
    useEffect(() => {
        console.log('Hello from useEffect');
    }, []);
    
    const xml =
        '<root><mxCell id="2" value="Hello," vertex="1"><mxGeometry x="20" y="20" width="80" height="30" as="geometry"/></mxCell><mxCell id="3" value="World!" vertex="1"><mxGeometry x="200" y="150" width="80" height="30" as="geometry"/></mxCell><mxCell id="4" value="" edge="1" source="2" target="3"><mxGeometry relative="1" as="geometry"/></mxCell></root>';

    if (!mxClient.isBrowserSupported()) {
        mxUtils.error('Browser is not supported!', 200, false);
    }

    let graph = null;

    const containerRef = useCallback((container) => {
        if (container !== null) {
            let model = new mxGraphModel();
            graph = new mxGraph(container, model);
            window['mxGraphModel'] = mxGraphModel;
            window['mxGeometry'] = mxGeometry;
            let doc = mxUtils.parseXml(xml); 
            let codec = new mxCodec(doc);
            codec.decode(doc.documentElement, graph.getModel());
            graph.getModel().beginUpdate();

            try {
                var elt = doc.documentElement.firstChild;
                var cells = [];
                while (elt !== null) {
                    cells.push(codec.decodeCell(elt));
                    elt = elt.nextSibling;
                }
                graph.addCells(cells);
            } finally {
                graph.getModel().endUpdate();
            }
        }
    }, []);

    return (
        <StyledTestComponent>
            <div ref={containerRef}></div>
        </StyledTestComponent>
    );
};

export default TestComponent;