标签: mxgraph

最近发布的mxGraph添加了曲线作为边缘样式.我希望这是一种边缘路由风格,但似乎没有.有人能给我看一个带曲线边缘的小图吗？

我正在尝试从 xml 文件创建图形。

我的 JavaScript 代码是-

function loadXML() {
console.log("Inside loadXML");
var doc = mxUtils.parseXml('<root><mxCell id="0"/><mxCell id="1" parent="0"/><mxCell id="2" value="&lt;img src=&quot;printer.png&quot; onClick=&quot;printer()&quot; style=&quot;width:40px;height:40px;&quot;&gt;&lt;img&gt;" style="shape=image" vertex="1" parent="1"><mxGeometry x="434" y="81" width="40" height="40" as="geometry"/></mxCell></root>');

console.log("XML Parse: " + doc);

var codec = new mxCodec(doc);

console.log("Node Length: " + doc.documentElement.childNodes.length);

var cells = new Array();
for (var i = 0; i < doc.documentElement.childNodes.length; i++) {
    console.log("Node ID: " + i);
    cells[i] = codec.decodeCell(doc.documentElement.childNodes[i]);
}

// import cells into the graph
var delta = mxClipboard.insertCount …

我有一组需要转换为 mxGraph 图的 JSON 格式数据。

它应该是这样的：

这是我的 JSON 数据的结构

[
  {
    name: 'Globals',    
    parentObjects: []
  },

  {
    name: 'Customer',
    included: true,    
    parentObjects: [
      {
        name: 'Globals',
      }
    ],
  },

  {
    name: 'Product',
    included: true,    
    parentObjects: [
      {
        name: 'Globals',
      }
    ],
  },

  {
    name: 'Transaction',
    included: true,    
    parentObjects: [
      {
        name: 'Customer',
      },
      {
        name: 'Product',
      }
    ],
  },
]

我对 mxGraph 很陌生，我对它没有太多经验，因此非常感谢任何帮助。谢谢你。

我创建了一个界面,包括mxgraph(javascript),它允许用户单击一个单元格,并在与图形分开的常规表单文本输入中编辑单元格的标签.我想在用户保存表单(ajax submit)后更改单元格的标签,而无需重新加载图表.

我真的不需要做任何花哨的细胞/椎骨标签,但我确实需要能够改变它的文字.如果这是可以避免的,我不需要HTML标签.并且,我还没有在API中找到类似"setLabel"方法的内容.

听起来很简单.我错过了什么？

谢谢

我试图在连接时改变边缘的样式.样式由逻辑依赖于源顶点或目标顶点设置.我可以通过添加连接侦听器和使用mxCell.setStyle来改变样式:

graph.connectionHandler.addListener(mxEvent.CONNECT, function (sender, evt)
{
     var edge = evt.getProperty('cell');
     edge.setStyle("...");         
}

虽然这会将样式设置为我指定的样式,但由于某种原因,它会更改目标顶点上的连接点.例如,如果我将其拖动到目标顶点上的9:00,在设置样式后,它将多次将连接点移动到目标顶点上的6:00.

给定 javascript Hello World 示例 ( mxgraph/javascript/examples/helloworld.html)：如果您单击并拖动边，它将移动，以便不再连接到顶点。我想修改helloworld.html，以便边缘无法与顶点解耦。我怎样才能做到这一点？

如何创建 mxCell，设置其 mxGeometry 的最小宽度，但如果它比默认宽度高，则会调整为其 value 字段的 html 元素的宽度？

现在我有这个代码

var style = 'rounded=0;whiteSpace=wrap;html=1;autosize=1;resizable=0;';
var cell = new mxCell(value, new mxGeometry(0, 0, width, height), style);

但是当我创建这个 mxCell 时，它的大小总是“宽度”和“高度”，即使它包含的 html 元素（一个 h3 标题）超过了 mxRectangle。我怎样才能解决这个问题？

编辑：谢谢，它使用 graph.updateCellSize() 工作。因为我只想在它必须高于默认值时更改大小，所以我写了这段代码

this.graph.updateCellSize(cell, true);
var geom = cell.getGeometry();
geom.width = geom.width > width ? geom.width : width;

它将值更改两次，这是低效的。我找到了另一种使用 getPreferredSizeForCell 的方法

var preferred = this.graph.getPreferredSizeForCell(cell);
var current = cell.getGeometry();
current.width = preferred.width > width ? preferred.width : width;
current.height = preferred.height > height ? preferred.height : height;

我正在创建一个 React 组件，它将通过使用带有 mxGraph 的 XML 字符串来呈现图形。图形在组件内部渲染，但一些形状，如圆形、菱形和泳道，渲染不正确；它们显示为简单的正方形或矩形。这特别奇怪，因为一些非矩形形状（例如文档）正确显示。

该图是使用jgraph 的“grapheditor”工具的编辑版本创建的，其中包含一些自定义形状：

此图形编辑器工具与参考实现相同，只是更改了 addGeneralPalette() 函数Sidebar.js以使用我们自定义的形状：

/**
 * Adds the general palette to the sidebar.
 */
Sidebar.prototype.addGeneralPalette = function(expand)
{
    var fns = [
        this.createVertexTemplateEntry('ellipse;whiteSpace=wrap;html=1;aspect=fixed;fontFamily=Helvetica;fontSize=16;fillColor=#e8f5e9;strokeColor=#4caf50;strokeWidth=4;gradientColor=#c8e6c9;', 80, 80, 'Start', 'Start', null, null, 'start begin starting beginning'),
        this.createVertexTemplateEntry('shape=process;whiteSpace=wrap;html=1;backgroundOutline=1;strokeColor=#ff9800;strokeWidth=4;perimeterSpacing=0;fontSize=16;gradientColor=#ffe0b2;fillColor=#fff3e0;', 200, 120, 'Process', 'Process', null, null, 'process proc'),
        this.createVertexTemplateEntry('rounded=1;whiteSpace=wrap;html=1;strokeColor=#00ACC1;strokeWidth=5;glass=0;comic=0;gradientColor=#b2ebf2;fillColor=#e0f7fa;fontSize=16;fontColor=#000000;', 200, 120, 'Template', 'Template', null, null, 'template temp'),
        this.createVertexTemplateEntry('rhombus;whiteSpace=wrap;html=1;rounded=0;glass=0;comic=0;labelBackgroundColor=none;strokeColor=#333333;strokeWidth=4;fillColor=#eeeeee;gradientColor=#e5e5e5;fontFamily=Helvetica;fontSize=16;fontColor=#000000;align=center;', 200, 120, 'Decision', 'Decision', null, null, 'decision decide'),
        this.createVertexTemplateEntry('shape=document;whiteSpace=wrap;html=1;boundedLbl=1;strokeWidth=4;strokeColor=#9C27B0;gradientColor=#E1BEE7;fillColor=#F3E5F5;fontSize=16;', 200, 120, 'Documentation', 'Documentation', null, …

当我使用任何 mxgraph 方法/值时，我的 mxgraph 是“未定义”

我已经尝试过 viks 在此线程上的回答：How to Integration mxGraph with Angular 4?

但即使这给了我打字和智能感知工作正常我仍然有我的 mxgraph 未定义。

我应该提到，这是一个全新的角度项目，我只是按照 viks 的教程到达这里。

import { mxgraph } from "mxgraph";

declare var require: any;

const mx = require('mxgraph')({
  mxBasePath: 'assets/mxgraph'
});
@Component({...})
export class LetestComponent implements OnInit {
  ngOnInit() {
    var container = document.getElementById('graphContainer');
    var graph = new mx.mxGraph(container);
  }
}

HTML 文件中包含此内容

<div id="graphContainer"></div>

我不应该有任何错误，我应该能够使用 mx 调用任何 mxGraph 方法。

当我编译代码时，它似乎工作正常，但是当我在浏览器的控制台上查看它时，我有：

“未捕获的类型错误：无法在 Module../src/app/letest/letest.component.ts (letest.component.ts:6) 的 build.js:11 设置未定义的属性“mxBasePath””

我不知道这是否是一个问题，因为我使用的是 Angular 8，而 Viks 的答案是 Angular …

当我们使用 graph.getSelectionCells() 获取选定的单元格时，它仅返回选定的外部单元格，但是，我还需要获取其子元素。

返回的单元格中不包含其子元素详细信息。

我是 mxGraph 的新手。有谁知道如何从 mxGraph 编辑器（http://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/index.html）将文件保存到我的本地存储？顺便说一句，使用 draw.io 创建的 XML 文件是否与 mxGraph 兼容？谢谢。

我在 draw.io 中创建了一个形状并将其导出以获取其 XML 文件，如下所示：

<mxlibrary>[{"xml":"vZTNcoIwEMefJnckXjxarF7aXvoEKawk05Blwirap+8SooLa0XbaZoaZ7H8/sssPImRW7VZe1foZC7BCPgqZeUTqd9UuA2tFmphCyIVI04QfkS6/8E6CN6mVB0f3JKR9wlbZDfRKLzS0t1EoPW5qIR88kiL1FuSE7ZgJnmA3Oj1H5yA/hB5bGHUVQmNLK8AKyO85pDUF6Rgxi2kaTKkPaTKKqonNHXNPQ/Imznl9Znkx8wsSNBeD89yugCKO22pD8FqrvPO2DIw1TRUfspjwttGqwPZgkMd3yNCiD6VkFhZ71sbagT4Lq9PR0UBfhsW6sqZ0rFlYU1eYzzeufArWYtpRgcZ8DKhUuB1YUJghsjGZJNS32M69x7aJyt2YhzjTn+H8DZrT21/wX4A8A9O9H5MrO48yYX0V1xjPObz/5rMfY7j59yXf58Xm6TYLvtFl9wk=","w":190,"h":130,"aspect":"fixed","title":"notes"}]</mxlibrary>

是否可以使用此数据插入新顶点？我什至不知道从哪里开始这个。

我移动了点，我想保存移动后的位置。我怎样才能赶上这个活动？我知道，边缘在移动后得到点，我可以在几何图形中找到控制点。但我需要运动结束的那一刻。