标签: mxgraph

我正在寻找一种仅使用mxGraph Javascript而不使用SVG画布来呈现HTML图形的方法。用户手册说：

mxGraph还包括完全使用html呈现的功能，这限制了可用功能的范围，但适用于更简单的图表。”

但是，我尝试了以下操作但未成功：

var editor = new mxEditor();
var graph = new mxGraph(graphContElem, new mxGraphModel(), 'fastest'); // fastest maps to stricthtml
graph.setHtmlLabels(true);
graph.dialect = mxConstants.DIALECT_STRICTHTML;
editor.graph = graph;
editor.createGraph();

添加此单元格：

var prototype = new mxCell('<input type="text" value="test" />', new mxGeometry(0, 0, w, h), style);
prototype.setVertex(true);
... import cells ...

导致此：

<svg style="width: 100%; height: 100%; display: block; min-width: 1px; min-height: 1px;">
...
    <g transform="translate(104,61)">
        <foreignObject style="overflow:visible;" pointer-events="all" width="173" height="19">
            <div style="display:inline-block;font-size:11px;font-family:Arial,Helvetica;color:#774400;line-height:1.2;vertical-align:top;white-space:nowrap;text-align:center;">
                <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;">
                    <input type="text" value="test">
                </div>
            </div> …

我正在尝试使用Java将XML转换为SVG,但看起来形状信息在这个过程中会丢失.

给出一个简单的draw.io图表:

运行XmlToSvg.java后,我得到:

我将其保存为未压缩的XML.我使用的是mxgraph-all.jar从mxGraph回购

你知道是否有隐藏的设置来保存形状和颜色？

我正在使用Angular 4，并且希望将mxGraph集成到我的项目中。我已经用谷歌搜索了，但是没有得到完整的示例。

我已经尝试过以下方法，但对我也不起作用。

我遵循的步骤：

1. 安装的mxgraph： npm install mxgraph --save

   用于mxgraph的npm软件包：https ://www.npmjs.com/package/mxgraph

2. 安装的mxgraph-typings： npm install lgleim/mxgraph-typings --save

   Github回购mxgraph-typings- https://github.com/lgleim/mxgraph-typings

3. 现在，我已将其导入到组件中： import {mxgraph} from 'mxgraph';

4. 在.angular-cli.json资产数组中添加了以下行，以使mxGraph资产可用。

   {"glob":"**/*", "input":"node_modules/mxgraph/javascript/src", "output": "./mxgraph"}
   

   Run Code Online (Sandbox Code Playgroud)

5. 如果我尝试像这样使用它： const graph: mxgraph.mxGraph = new mxgraph.mxGraph(document.getElementById('graphContainer'));

   当我跑步时 ng serve

   然后我遇到问题/错误：
   Module not found: Error: Can't resolve 'mxgraph' in 'path to my file where I have imported and used mxgraph'

6. 现在，如果我尝试设置mxBasePath：

   const mx = require('mxgraph')({
     mxImageBasePath: 'mxgraph/images',
     mxBasePath: 'mxgraph'
   });
   

   Run Code Online (Sandbox Code Playgroud)

   像这样使用：

   const graph: mxgraph.mxGraph = mx.mxGraph(document.getElementById('graphContainer'));

   当我跑步时 ng serve

   这次我也遇到同样的问题/错误：
   Module …

我试图以编程方式为我的图形中的每个单元格关闭格式化文本,这样我就可以避免mxgraph编辑器中的查看器不支持(类似于Draw.io)

这是我的尝试:

graph.stopEditing();
graph.getModel().beginUpdate();

try
{
    var cells = graph.getChildCells(graph.getDefaultParent());
    cells.forEach(function (cell)
    {
        var state = graph.getView().getState(cell);
        if (state == null)
        {
            return;
        }
        if (state.style['html'] != '1') {
            return;
        }

        var label = graph.convertValueToString(state.cell);
        if (mxUtils.getValue(state.style, 'nl2Br', '1') != '0')
        {
            label = label.replace(/\n/g, '').replace(/<br\s*.?>/g, '\n');
        }

        // Removes HTML tags
        var temp = document.createElement('div');
        temp.innerHTML = label;
        label = mxUtils.extractTextWithWhitespace(temp.childNodes);

        graph.cellLabelChanged(state.cell, label);
        graph.setCellStyles('html', null);
    });

    ui.fireEvent(new mxEventObject('styleChanged', 'keys', ['html'],
        'values', ['0'], 'cells', cells));
} …

我想拖动每个表行，因为rectangle它必须具有与相同的功能rectangle。

运行代码后，您可以看到表格矩形下方的表格将位于左上方，我想为表格行复制相同的功能 drag

// Program starts here. Creates a sample graph in the
// DOM node with the specified ID. This function is invoked
// from the onLoad event handler of the document (see below).
function main() {
  // Checks …