由一个问题"Need to integrate mxGraph with react js"引发的开发测试实践
问题地址:
https://stackoverflow.com/questions/48883403/need-to-integrate-mxgraph-with-react-js
mxGraph javascript测试步骤
1.下载工程:
https://github.com/jgraph/mxgraph
2.eclipse新建一个空的java项目
3.将java和javascript/examples/grapheditor/java/src/com/mxgraph/examples/web/目录下的jars和src拷贝到项目目录，将javascript目录拷贝到项目目录
4.将jars里面的jar文件加入到构建路径
5.由于我时想测试javascript版本的，所以java文件里和绘制有关的文件可以删除
6.执行com.mxgraph.examples.web.GraphEditor启动服务器
7.访问
http://localhost:{port}/javascript/index.html
http://localhost:9333/javascript/examples/grapheditor/www/index.html
mxGraph事件测试
<html>
<head>
<title>Hello, World! example for mxGraph</title>
<!-- Sets the basepath for the library if not in same directory -->
<script type="text/javascript">
mxBasePath = 'src';
</script>
<!-- Loads and initializes the library -->
<script type="text/javascript" src="./mxClient.js"></script>
<!-- Example code -->
<script type="text/javascript">
function main(container)
{
if (!mxClient.isBrowserSupported())
{
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
mxEvent.disableContextMenu(container);
var graph = new mxGraph(container);
new mxRubberband(graph);
var parent = graph.getDefaultParent();
graph.getModel().beginUpdate();
try
{
var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
var e1 = graph.insertEdge(parent, null, '', v1, v2);
}
finally
{
// Updates the display
graph.getModel().endUpdate();
}
graph.addMouseListener(
{
mouseDown: function(sender, evt)
{
mxLog.debug('mouseDown');
},
mouseMove: function(sender, evt)
{
mxLog.debug('mouseMove');
},
mouseUp: function(sender, evt)
{
mxLog.debug('mouseUp');
}
});
graph.addListener(mxEvent.CLICK, function (sender, evt) {
var cell = evt.getProperty("cell");
if(cell!=null){
console.log(cell.id);
}
//var id = cell.id;
/*var cell = graph.getSelectionCell();
if (cell != null) {
console.log(cell.id);
}*/
});
var enc = new mxCodec();
var str=enc.encode(graph.getModel());
enc.encode(graph.getModel().getCell(1));
}
};
</script>
</head>
<body onload="main(document.getElementById('graphContainer'))">
<div id="graphContainer"
style="position:relative;overflow:hidden;width:321px;height:241px;background:url('examples/editors/images/grid.gif');cursor:default;">
</div>
</body>
</html>DrawIo和mxGraph的关系是，drawio是基于mxGraph并做了一些拓展的站点和服务商，并有开源版本
项目地址:https://github.com/jgraph/drawio
可以安装桌面版也可以运行docker版，我使用的是源码打到tomcat中运行的，运行一切正常 很不错；
从mxfiles中提取XML
保存图表的默认格式在不久前已经从使用标准deflate压缩的原始XML更改为XML。造成这种情况的主要原因是，当Google的服务器挣扎时，压缩文件的写入机会要大得多。也就是说，原始XML可能有助于了解如何构建图表。
当您查看压缩的draw.io XML文件时，您将看到如下内容（灰色突出显示的文本是您的实际图表数据）：
标签之间的部分使用标准的deflate流程进行压缩。您可以将其复制并粘贴到https://jgraph.github.io/drawio-tools/tools/convert.html，按解码，然后您将获得原始XML：
在draw.io编辑器中编辑XML代码
如果您不想使用额外的inflate / deflate工具，您还可以查看图表的XML代码并直接编辑它，或将其复制到文本编辑器中。
单击Extras> Edit Diagram查看和编辑图表的XML代码。
关于vsd vsdx文件
drawio-8.6.3提供的java版本集成在站点之内，支持vsdx（是一个beta功能，但是个人比较推荐）
drawio-9.4.1提供的是.net调用visio的版本,支持vsd和vsdx
后面的版本全是服务的方式
- 点赞
- 收藏
- 关注作者
评论（0）