需要整合mxGraph和react js

Question

是否有任何示例或示例项目解释如何将 mxGraph 与 React js 集成？

Answer 1

mxGraph 存储库中有一个 grunt file 可能对您有用。

此文件的第一个提交消息：

Make objects available via CommonJS require, and create a package.json file for npm

用法有 Anchors 示例 (file)

请与我们分享您的集成经验。

Answer 2

import React, {Component} from "react";
import PropTypes from "prop-types";
import ReactDOM from "react-dom";
import {
    mxGraph,
    mxParallelEdgeLayout,
    mxConstants,
    mxEdgeStyle,
    mxLayoutManager,
    mxCell,
    mxGeometry,
    mxRubberband,
    mxDragSource,
    mxKeyHandler,
    mxCodec,
    mxClient,
    mxConnectionHandler,
    mxUtils,
    mxToolbar,
    mxEvent,
    mxImage,
    mxFastOrganicLayout
} from "mxgraph-js";

class mxGraphGridAreaEditor extends Component {
    constructor(props) {
        super(props);
        this.state = {
            
        };
        this.LoadGraph = this
            .LoadGraph
            .bind(this);
    }
    

    LoadGraph(data) {
        var container = ReactDOM.findDOMNode(this.refs.divGraph);
        var zoomPanel = ReactDOM.findDOMNode(this.refs.divZoom);
        
        // Checks if the browser is supported
        if (!mxClient.isBrowserSupported()) {
            // Displays an error message if the browser is not supported.
            mxUtils.error("Browser is not supported!", 200, false);
        } else {
            // Disables the built-in context menu
            mxEvent.disableContextMenu(container);

            // Creates the graph inside the given container
            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();
            // Enables tooltips, new connections and panning
            graph.setPanning(true);
            //graph.setTooltips(true); graph.setConnectable(true);
            graph.setEnabled(false);

            // Autosize labels on insert where autosize=1
            graph.autoSizeCellsOnAdd = true;

            // Allows moving of relative cells
            graph.isCellLocked = function (cell) {
                return this.isCellsLocked();
            };

            graph.isCellResizable = function (cell) {
                var geo = this
                    .model
                    .getGeometry(cell);

                return geo == null || !geo.relative;
            };

            // Truncates the label to the size of the vertex
            graph.getLabel = function (cell) {
                var label = this.labelsVisible
                    ? this.convertValueToString(cell)
                    : "";
                var geometry = this
                    .model
                    .getGeometry(cell);

                if (!this.model.isCollapsed(cell) && geometry != null && (geometry.offset == null || (geometry.offset.x == 0 && geometry.offset.y == 0)) && this.model.isVertex(cell) && geometry.width >= 2) {
                    var style = this.getCellStyle(cell);
                    var fontSize = style[mxConstants.STYLE_FONTSIZE] || mxConstants.DEFAULT_FONTSIZE;
                    var max = geometry.width / (fontSize * 0.625);

                    if (max < label.length) {
                        return label.substring(0, max) + "...";
                    }
                }

                return label;
            };

            // Enables wrapping for vertex labels
            graph.isWrapping = function (cell) {
                return this
                    .model
                    .isCollapsed(cell);
            };

            // Enables clipping of vertex labels if no offset is defined
            graph.isLabelClipped = function (cell) {
                var geometry = this
                    .model
                    .getGeometry(cell);

                return (geometry != null && !geometry.relative && (geometry.offset == null || (geometry.offset.x == 0 && geometry.offset.y == 0)));
            };
            var layout = new mxParallelEdgeLayout(graph);

            // Moves stuff wider apart than usual
            layout.forceConstant = 140;
            //// Adds cells to the model in a single step
            graph
                .getModel()
                .beginUpdate();
            try {

    //mxGrapg componnent
                var doc = mxUtils.createXmlDocument();
                var node = doc.createElement('YES')
                node.setAttribute('ComponentID', '[P01]');
                
                var vx = graph.insertVertex(graph.getDefaultParent(), null, node, 240, 40, 150, 30);

                var v1 = graph.insertVertex(parent, null, 'Example_Shape_01', 20, 120, 80, 30);
                var v2 = graph.insertVertex(parent, null, 'Example_Shape_02', 300, 120, 80, 30);
                var v3 = graph.insertVertex(parent, null, 'Example_Shape_03', 620, 180, 80, 30);
                var e1 = graph.insertEdge(parent, null, 'Example Edge name_01', v1, v2);
                var e2 = graph.insertEdge(parent, null, 'Example Edge name_02', v2, v3);
                var e3 = graph.insertEdge(parent, null, 'Example Edge name_02', v1, v3);


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

                // Executes the layout
                layout.execute(parent);
                //data
            } finally {
                // Updates the display
                graph
                    .getModel()
                    .endUpdate();
            }

            // Automatically handle parallel edges
            var layout = new mxParallelEdgeLayout(graph);
            var layoutMgr = new mxLayoutManager(graph);

            // Enables rubberband (marquee) selection and a handler for basic keystrokes
            var rubberband = new mxRubberband(graph);
            var keyHandler = new mxKeyHandler(graph);
        }
    }
    render() {
        return (
                <div className="graph-container" ref="divGraph" id="divGraph"/>
                );
    }
}

export default mxGraphGridAreaEditor;

注意：当您在此处运行时，此代码无法正常工作。这是将 mxgraph 与 react js 集成的示例指南

Answer 3

给你：

运行:

 npm i --save-dev script-loader
 npm i mxgraph

关于您的代码：

/* eslint import/no-webpack-loader-syntax: off */
/* eslint  no-undef: off */
import mxClient from "script-loader!mxgraph/javascript/mxClient";

您将可以访问其所有对象：

export default class DG {

static drawGraph(vertexes){
    let container =  document.createElement("div")

    // Disables the built-in context menu
    mxEvent.disableContextMenu(container);

    // Creates the graph inside the given container
    var graph =  new mxGraph(container);;

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

    var selectionCells= [];
    // Adds cells to the model in a single step
    graph.getModel().beginUpdate();
...
...

如果您不想使用内置样式表和资源，请添加到您的 index.html 文件：

 <script type="text/javascript">    var mxLoadResources = false; var mxLoadStylesheets = false;</script>

Answer 4

codesandbox 上的以下内容可能对您有所帮助：

需要整合mxGraph和react js

Need to integrate mxGraph with react js

mxgraph

reactjs