React / mxGraph：如何使用功能性 React 组件从外部源渲染 Graph？

Question

我是这里的初学者，我正在努力研究 mxGraph 库。我的最终游戏是从外部源读取 mxGraphModel 并使用 mxGraph -library (https://jgraph.github.io/mxgraph/) 和功能性 React 组件将其渲染为可见。

但作为垫脚石，我正在尝试让这个示例在组件中运行 (https://jgraph.github.io/mxgraph/docs/js-api/files/io/mxCodec-js.html)。

我也知道这个库没有维护 - 可能有替代品。

我设法让 Hello World -示例正常工作，因此导入和渲染工作得很好，但我需要从外部 XML 变量或文件读取该定义 - 而不是单独定义它们。

文档 Link - https://jgraph.github.io/mxgraph/docs/tutorial.html
API Link - https://jgraph.github.io/mxgraph/docs/js-api/files/index-txt.html

这是我目前拥有的。

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

const {
    mxGraph,
    mxGraphModel,
    // mxDragSource,
    // mxUndoManager,
    // mxCompactTreeLayout,
    // mxGraphHandler,
    // mxGuide,
    // mxEdgeHandler,
    // mxEdgeStyle,
    // mxConstraintHandler,
    // mxEvent,
    // mxImage,
    // mxConstants,
    // mxKeyHandler,
    // mxRubberband,
    // mxPerimeter,
    mxUtils,
    // mxVertexHandler,
    mxClient,
    mxCodec,
} = mxgraph();
  
const DiagramRenderer = () => {
    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); 
            // const parent = graph.getDefaultParent();
            let doc = mxUtils.parseXml(xml); 
            let codec = new mxCodec(doc);

            codec.decode(doc.documentElement, graph.getModel());

            graph.getModel().beginUpdate();

            try {
                //     const v1 = graph.insertVertex(
                //         parent,
                //         null,
                //         'Hello',
                //         100,
                //         100,
                //         300,
                //         100
                //     );
                //     const v2 = graph.insertVertex(
                //         parent,
                //         null,
                //         'World',
                //         500,
                //         100,
                //         300,
                //         100
                //     );
                //     graph.insertEdge(parent, null, '', v1, v2);

                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;

在此处记录 Graph 时，似乎我在那里有正确的东西（？），如果我是正确的 - 唯一的问题是绘制这个可见的，但我不完全确定。

非常感谢任何提示！

Answer 1

我设法让这个工作，根据这个： - 我添加了

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

在解析方法和更新我的导入之前

从 'mxgraph' 导入 mxgraph；

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

这就是整个功能组件，它读取 XML 并使用 mxGraph 将其呈现在屏幕上。

这是完整的解决方案：

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;

React / mxGraph：如何使用功能性 React 组件从外部源渲染 Graph？

React / mxGraph: How to render Graph from external source, with functional react component?

javascript

xml

mxgraph

reactjs