使用 mxgraph 从现有的 XML 字符串构造和呈现图形

Question

我正在尝试使用 mxgraph 在 React 组件内部呈现图形（类似于有人使用mxgraph-js fork创建的这个示例）。我希望使用先前通过 mxgraph图形编辑器工具创建的现有 XML 字符串构建此图。当这个 React 组件 (DisplayGraph) 在我的 React 应用程序中构建和呈现时，图表永远不会出现。尽管它似乎确实在初始化图形对象，因为容器 div (id "divGraph") 在右键单击时没有上下文菜单，每个mxEvent.disableContextMenu(container). 当我点击并拖动空的 div 时，我可以看到一个新的 divmxRubberband出现并在我拖动光标时实时更改其左/上/宽/高样式。检查时，容器 div 在 DOM 中如下所示：<div class="graph-container" id="divGraph" style="width: 100%; position: relative; touch-action: none;">  <svg style="left: 0px; top: 0px; width: 100%; height: 100%; display: block; min-width: 1px; min-height: 1px;">    <g>      <g></g>      <g></g>      <g></g>      <g></g>    </g>  </svg></div>更改由 mxUtils 解析的 XML 字符串似乎永远不会更改 React 组件中呈现的实际图形；<g>无论我传入什么 XMLString，它似乎总是有 4 个空元素mxUtils.parseXml()。我已经尝试了一些不同的方法，如详细的那些在这里，在这里，和文档的例子在这里，但无济于事。使用此组件时，控制台中不会出现任何错误，因此我不完全确定问题出在哪里。所以该模块似乎正在运行，但我无法弄清楚为什么我传递的 XML 字符串mxUtils.parseXml()没有被正确解析/呈现。

Answer 1

我在我的 webpack 项目 (vuejs) 中找到了解决这个问题的方法，也许是同样的问题

因为所有的 mx 对象都必须在 window dict 中

例如 window['mxCell'] = mxCell

所以我写这个

const {mxCell .......} = mxgraph({

  mxImageBasePath: ..... })

// register all object 

window['mxClient'] = mxClient

window['mxGraph'] = mxGraph

window['mxUtils'] = mxUtils

window['mxEvent'] = mxEvent

window['mxVertexHandler'] = mxVertexHandler

window['mxConstraintHandler'] = mxConstraintHandler

window['mxConnectionHandler'] = mxConnectionHandler

window['mxEdgeHandler'] = mxEdgeHandler

window['mxCellHighlight'] = mxCellHighlight

window['mxEditor'] = mxEditor

window['mxGraphModel'] = mxGraphModel

window['mxKeyHandler'] = mxKeyHandler

window['mxStencilRegistry'] = mxStencilRegistry

window['mxConstants'] = mxConstants

window['mxGraphView'] = mxGraphView

window['mxCodec'] = mxCodec

window['mxToolbar'] = mxToolbar

window['mxRubberband'] = mxRubberband

window['mxShape'] = mxShape

window['mxImage'] = mxImage

window['mxConnectionConstraint'] = mxConnectionConstraint

window['mxPoint'] = mxPoint

window['mxDivResizer'] = mxDivResizer

window['mxGraphHandler'] = mxGraphHandler

window['mxPerimeter'] = mxPerimeter

window['mxPolyline'] = mxPolyline

window['mxCellState'] = mxCellState

window['mxOutline'] = mxOutline

window['mxCell'] = mxCell

window['mxGeometry'] = mxGeometry

window['mxGuide'] = mxGuide

window['mxDefaultKeyHandler'] = mxDefaultKeyHandler

window['mxDefaultToolbar'] = mxDefaultToolbar

window['mxXmlCanvas2D'] = mxXmlCanvas2D

window['mxImageExport'] = mxImageExport

// your code here