在mxgraph和react中加载diagram.xml时无显示

Question

我正在使用 mxgraph 和 React 执行一个项目，其中我想实现一个功能，允许加载保存在 xml 文件中的图表，但是加载图表时，图表不会显示，当我检查页面时，它不会显示我的错误。这是完整的代码：

import React, { useRef, useEffect } from 'react';
import { mxGraph, mxRubberband, mxClient, mxUtils, mxCodec } from 'mxgraph-js';
import './DiagramEditor.css'; // Asegúrate de tener este archivo CSS en tu proyecto

const DiagramModifier = () => {
    const graphContainer = useRef(null);
    const graph = useRef(null);

    useEffect(() => {
        if (!mxClient.isBrowserSupported()) {
            mxUtils.alert('Browser is not supported!');
            return;
        }

        // Initialize the graph within the container
        graph.current = new mxGraph(graphContainer.current);
        graph.current.setHtmlLabels(true);
        graph.current.setCellsEditable(true);
        graph.current.setCellsDeletable(true);
        graph.current.setCellsMovable(true);
        graph.current.setConnectable(true);
        graph.current.setCellsResizable(true);
        new mxRubberband(graph.current); // Enables rubber-band selection

    }, []);

    const updateGraph = (action) => {
        const model = graph.current.getModel();
        model.beginUpdate();
        try {
            action();
        } finally {
            model.endUpdate();
        }
    };

    const addVertex = () => {
        updateGraph(() => {
            const parent = graph.current.getDefaultParent();
            graph.current.insertVertex(parent, null, 'Node', 100, 100, 80, 30);
        });
    };

    const connectVertices = () => {
        const selectedCells = graph.current.getSelectionCells();
        if (selectedCells.length === 2) {
            updateGraph(() => {
                const parent = graph.current.getDefaultParent();
                graph.current.insertEdge(parent, null, 'Edge', selectedCells[0], selectedCells[1]);
            });
        } else {
            alert('Select exactly two nodes to connect.');
        }
    };

    const deleteVertex = () => {
        const selected = graph.current.getSelectionCell();
        if (selected) {
            updateGraph(() => {
                graph.current.removeCells([selected]);
            });
        } else {
            alert('Please select a node to delete.');
        }
    };

    const saveDiagram = () => {
        const encoder = new mxCodec();
        const result = encoder.encode(graph.current.getModel());
        const xml = mxUtils.getXml(result);
        const blob = new Blob([xml], { type: 'application/xml' });
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.setAttribute('href', url);
        link.setAttribute('download', 'diagram.xml');
        link.click();
    };

    const loadDiagram = () => {
        const input = document.createElement('input');
        input.type = 'file';
        input.accept = '.xml';
        input.onchange = e => {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = e => {
                    try {
                        const xml = e.target.result;
                        const doc = mxUtils.parseXml(xml);
                        const codec = new mxCodec(doc);
                        const model = graph.current.getModel();
                        model.beginUpdate();
                        try {
                            codec.decode(doc.documentElement, model);
                        } finally {
                            model.endUpdate();
                            graph.current.refresh(); 
                        }
                    } catch (err) {
                        console.error('Error loading the diagram:', err);
                        alert('Failed to load the diagram.');
                    }
                };
                reader.readAsText(file);
            } else {
                alert('No file selected.');
            }
        };
        input.click();
    };

    return (
        <div className="diagram-editor">
            <div ref={graphContainer} className="graph-container" />
            <div className="toolbar">
                <button onClick={addVertex}>Add Node</button>
                <button onClick={connectVertices}>Connect Nodes</button>
                <button onClick={deleteVertex}>Delete Node</button>
                <button onClick={saveDiagram}>Save Diagram</button>
                <button onClick={loadDiagram}>Load Diagram</button>
            </div>
        </div>
    );
};

export default DiagramModifier;

起初我使用mxgraph 1.0.1，但我已经将其更新到最新版本4.2.2

Answer 1

mxgraph 不能作为模块使用。您必须将其导入全局命名空间。 此外，mxgraph 团队不再支持它（他们完全切换到 draw.io 作为应用程序，并且不提供可嵌入组件）

你可以尝试它的一个分支：https://github.com/maxGraph/maxGraph