在React中使mxGraph的Hello World示例正常工作

Question

我是一个mxGraph和React的新手，想要在React中运行mxGraph hello world示例，以了解如何与mxGraph（以及其他第三方库）一起使用。

我使用typescript模板创建了一个新的React项目，并使用yarn add mxgraph安装了mxGraph。

由于我没有找到官方的typescript类型定义文件，所以不太确定应该如何导入该库以便开始使用它。

尝试像这样导入：

import * as mxGraph from "mxgraph";

给我的

找不到“mxgraph”模块的声明文件。

还尝试过

const mxGraph = require("mxgraph");

但是那也不行......所以我有点困惑，不知道该如何开始。有人能帮我启动吗？谢谢！

- mottosson

---

这是该库的TypeScript定义 https://github.com/lgleim/mxgraph-typings - demkovych

我尝试过这些，但无法使其工作。import { mxgraph } from "mxgraph"; 和 const { mxEvent } = mxgraph;: mxgraph和mxEvent都未定义。我应该用其他方法吗？ - mottosson

检查此演示：https://codesandbox.io/s/github/eyupcolak/mxgraph-react/tree/master/?from-embed - demkovych

mxGraph是一个跨多种编程语言的项目，mxgraph-js则是它的仅包含JS的版本。https://github.com/jgraph/mxgraph，https://github.com/jgraph/mxgraph-js - Frodo Baggins

噢！我没有意识到这一点！现在更有意义了。谢谢你的澄清。 - mottosson

Answer 1

不需要使用名为mxgraph-js的npm包，即npm mxgraph-js，它似乎指的是旧版本的mxgraph（3.6.0）。我们可以直接使用官方mxgraph，通过npm安装：npm install mxgraph。 通过阅读用户手册弄清楚如何使用mxgraph后，现在我可以使用它了。 这是我的 Hello World 示例代码：

import React, {Component} from "react"

var mxnspaceobj = require("mxgraph")({
    mxImageBasePath: "mxgraph/javascript/src/images",
    mxBasePath: "mxgraph/javascript/src"
})
// The manual tells the above factory function returns a "namespace" object 
// that has access to all objects of the mxgraph package. Here I give it a name
// mxnspaceobj, although we can use any valid name. We will use this object,
// including when calling mxGraph constructor.

export default class MyMxGraph extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        //let mxClient = mxnspaceobj.mxClient
        let mxRubberband = mxnspaceobj.mxRubberband
        let mxKeyHandler = mxnspaceobj.mxKeyHandler        
        let mxUtils = mxnspaceobj.mxUtils
        let mxEvent = mxnspaceobj.mxEvent

        const container = document.querySelector("#mxcontainer")        
    
        // Now, the tricky one, because most examples codes directly use the 
        // following statement :
        // let graph = new mxGraph(container); 
        // which will fail.
    
        // Instead, we have to call the mxGraph constructor via mxnspaceobj
        // variable as follows :
        let graph = new mxnspaceobj.mxGraph(container);

        // -- The rest is the same as usually found in examples -- //

        new mxRubberband(graph);
        let parent = graph.getDefaultParent();

        graph.getModel().beginUpdate();
        try {
            const v1 = graph.insertVertex(parent, null,
               'Hello,', 20, 20, 80, 30);
            const v2 = graph.insertVertex(parent, null,
               'World!', 200, 150, 80, 30);
            const e1 = graph.insertEdge(parent, null, '', v1, v2);
        } finally {
            graph.getModel().endUpdate();
        }
    }

    render(){
        return (
            <div id="mxcontainer" style={{height:"400px", width:"1200px"}}>
                <h3>Created using mxgraph</h3>
            </div>          
        );
    }
}

- Lex Soft

Answer 2

如果你正在使用TypeScript，你可以使用这个包装器：ts-mxgraph。

然后，Hello World的例子变成了：

import React from 'react';
import { mxgraphFactory } from "ts-mxgraph";

const { mxGraph, mxRubberband,  } = mxgraphFactory({
    mxLoadResources: false,
    mxLoadStylesheets: false
});


class App extends React.Component {

  componentDidMount() {
      let container = document.getElementById('containerMx')!;
      var graph = new mxGraph(container);

      // Enables rubberband selection
      new mxRubberband(graph);

      // Gets the default parent for inserting new cells. This
      // is normally the first child of the root (ie. layer 0).
      var parent = graph.getDefaultParent();

      // Adds cells to the model in a single step
      graph.getModel().beginUpdate();
      try
      {
          var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
          var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
          var e1 = graph.insertEdge(parent, null, '', v1, v2);
      }
      finally
      {
          // Updates the display
          graph.getModel().endUpdate();
      }
  }


  render() {
    return (
      <div id="containerMx">
          Hello World!
      </div>
    );
  }

}

export default App;

- Ilias Sebati

Answer 3

这是我让它工作的方法。不确定是否完全正确，但我想这是一个开始。

import React, { useEffect, useRef } from "react";
import { mxGraph, mxRubberband, mxClient, mxUtils, mxEvent } from "mxgraph-js";

const App: React.FC = () => {
  const divGraph = useRef(null);

  useEffect(() => {
    if (!mxClient.isBrowserSupported()) {
      mxUtils.error("Browser is not supported!", 200, false);
    } else {
      mxEvent.disableContextMenu(divGraph.current);
      const graph = new mxGraph(divGraph.current);
      new mxRubberband(graph);
      const parent = graph.getDefaultParent();
      graph.getModel().beginUpdate();

      try {
        const v1 = graph.insertVertex(parent, null, "Hello,", 20, 20, 80, 30);
        const v2 = graph.insertVertex(parent, null, "World!", 200, 150, 80, 30);
        const e1 = graph.insertEdge(parent, null, "", v1, v2);
      } finally {
        graph.getModel().endUpdate();
      }
    }
  });

  return <div className="graph-container" ref={divGraph} id="divGraph" />;
};

export default App;

- mottosson