metaeditor-mxgraph

v2.0.7

Published

5 months ago

图元编辑器，支持独立的流程图编辑器，以及 `DrawIO` 嵌入方案。

Downloads

0High
0Medium
0Low

ilex.h

MetaEditor

图元编辑器，支持独立的流程图编辑器，以及 DrawIO 嵌入方案。

npm i metaeditor-mxgraph

直接使用内置的图源编辑器

使用方法可参考 src/example/OnlyEditor.js。

import { MetaEditor as MER } from 'metaeditor-mxgraph';
// 引入样式
import 'metaeditor-mxgraph/assets/index.scss';

const { MetaGraphEditor, MetaGraphViewer, getLanguage } = MER;

// 预览
const metaGraphViewer = new MetaGraphViewer({
  xml: stringToXml(xml)
});
// 支持自定义大小
const svg = metaGraphViewer.renderSVGDom(null, 1, 1, { width: 200, height: 300 });
const dom = document.getElementById('mypreview');
dom.appendChild(svg);

使用嵌入 DrawIO

采用嵌入 DrawIO 的方式。

import { MetaEditor as MER } from 'metaeditor-mxgraph';

const { DrawioEvent, base64ToSvgString, stringToSvg } = MER;

function renderSVG(svg){
  const svgTag = stringToSvg(svgString);
  document.body.appendChild(svgTag);
}

function init(){
  const de = new DrawioEvent({
    data: svgData,
    format: 'xmlsvg',
    onExport: svg => {
      const svgStr = base64ToSvgString(svg);
      if (svgStr) {
        updateSvg(svgStr);
        renderSVG(svgStr);
      }
    }
  });
  de.createDrawio();
}

直接使用 umd 模块

since v2.0.1 之后版本，umd 模块，不再需要引入其它外部模块。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>my demo</title>
  <script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
  <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
  <!-- <script src="./node_modules/mxgraph/javascript/dist/build.js"></script> -->
  <link rel="stylesheet" href="./assets/index.css">

  <style>
    body {
      margin: 0;
      font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
      font-size: 14px;
      border: none;
      user-select: none;
    }

    .metagraph-container .metagraph-refresh-btn {
      margin-right: 10px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div id="app"></div>
  <script src="./umd/metaeditor.js"></script>
  <script type="text/babel">
    const { Component } = React;
    const { MetaGraphEditor, getLanguage, stringToXml, xmlToString } = MetaEditor;

    const XML_DATA = `
<mxGraphModel dx="1186" dy="670" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
  <root>
    <mxCell id="0" />
    <mxCell id="1" parent="0" />
    <mxCell id="9v9bDfxMJK_rrW6hIOUh-4" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="9v9bDfxMJK_rrW6hIOUh-1" target="9v9bDfxMJK_rrW6hIOUh-3">
      <mxGeometry relative="1" as="geometry" />
    </mxCell>
    <mxCell id="9v9bDfxMJK_rrW6hIOUh-1" value="Start" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
      <mxGeometry x="200" y="140" width="120" height="60" as="geometry" />
    </mxCell>
    <mxCell id="9v9bDfxMJK_rrW6hIOUh-3" value="End" style="whiteSpace=wrap;html=1;rounded=0;" vertex="1" parent="1">
      <mxGeometry x="400" y="140" width="120" height="60" as="geometry" />
    </mxCell>
  </root>
</mxGraphModel>`;

    class Demo extends Component {
      constructor(props) {
        super(props);
        this.state = {
          fileData: XML_DATA
        };

        this.rootRef = React.createRef();
      }

      componentDidMount() {
        this.renderEditor();
      }

      updateXml = (fileData) => {
        this.setState({
          fileData
        });
      }

      renderEditor = () => {
        const { fileData } = this.state;
        const renderExtra = el => {
          ReactDOM.render(
            <div onClick={() => window.location.reload()} className="metagraph-refresh-btn">
              刷新
            </div>,
            el
          );
        };

        const dom = this.rootRef.current;

        const metaGraphEditor = new MetaGraphEditor({ container: dom, renderExtraMenu: renderExtra });
        const lan = getLanguage('zh');
        metaGraphEditor.init(lan, stringToXml(fileData), xml => {
          const xmlString = xmlToString(xml);
          xmlString && this.updateXml(xmlString);
        });
      };

      render() {
        return (
          <div ref={this.rootRef} />
        );
      }
    }
    ReactDOM.render(<Demo />, document.getElementById('app'));
  </script>
</body>

</html>

直接访问：demo

changelog

2023-12-1 v2.0.7

add ele shapes

2023-11-25 v2.0.5

graph view add size

2023-11-15 v2.0.3

add import file svg、xml、drawio
add show xml info
fix dialog bugs

2023-11-10 v2.0.2

add insert
add insert link and image
add editdata
add sidebar icon tip locale zh
add arc shapes
extend general shape

20231019~10.23 v2.0.1

fix bugs and rebuild umd
add original offset

20231019 v2.0.0

update params

20231018 v1.0.0

init