前端JS如何使用mxgraph编辑器
说明：此项目是JS项目，目前还不支持TS
引入资源
可以直接从官网上拿下来，或者从其他地方获取
官网编辑器
如果只是展示图形的话只引入 mxClient.js就可以了
一个免费在线编辑器
自己用它做了一个在线编辑器，可以参考一下
当前项目源码
图形资源展示
const graph = new mxGraph(document.getElementById('graph'))
graph.model.clear()
let xmlDoc = mxUtils.parseXml(xml);
let codec = new mxCodec(xmlDoc);
codec.decode(xmlDoc.documentElement, graph.getModel());
graph.setEnabled(false);
// graph.fit(); // 自适应缩放
编辑器
// 编辑器
(function () {// 语言资源let bundle = 'https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/resources/grapheditor.txt';// 默认样式let defaultThemes='https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/styles/default.xml'mxUtils.getAll([bundle,defaultThemes ], function (xhr) {// 添加语言配置mxResources.parse(xhr[0].getText());// 配置默认样式let themes = {};themes[Graph.prototype.defaultThemeName] = xhr[1].getDocumentElement();const editor = new EditorUi(new Editor(false, themes), document.getElementById('editor'))//初始化完成后可以再进一步配置编辑器，比如添加右键菜单，或者添加工具栏按钮等等}, function () {document.body.innerHTML = '<center style="margin-top:10%;">Error loading resource files. Please check browser console.</center>';});
})()
其他配置
- 添加一个爪子箭头样式在箭头cell中设置style=endArrow= claw;startArrow= claw;
// 添加爪子箭头, style=endArrow=claw;startArrow=claw;
function createClaw(widthFactor) {widthFactor = (widthFactor != null) ? widthFactor : 2;return function (canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) {let endOffsetX = unitX * sw * 1.118;let endOffsetY = unitY * sw * 1.118;unitX = unitX * (size + sw);unitY = unitY * (size + sw);let pt = pe.clone();pt.x -= endOffsetX;pt.y -= endOffsetY;let f = (type != mxConstants.ARROW_CLASSIC && type != mxConstants.ARROW_CLASSIC_THIN) ? 1 : 3 / 4;pe.x += -unitX * f - endOffsetX;pe.y += -unitY * f - endOffsetY;const y = (pt.y === pe.y ? pt.x > pe.x ? -unitX : unitX : 0) / widthFactor;const x = (pt.x === pe.x ? pt.y < pe.y ? unitY : -unitY : 0) / widthFactor;return function () {canvas.begin();canvas.moveTo(pe.x, pe.y);canvas.lineTo(pt.x, pt.y);canvas.moveTo(pe.x, pe.y);canvas.lineTo(pt.x + x, pt.y + y);canvas.moveTo(pe.x, pe.y);canvas.lineTo(pt.x - x, pt.y - y);canvas.close();canvas.stroke();};}
}mxMarker.addMarker('claw', createClaw(1.5));
- 工具栏中添加保存按钮
const toolbarInit = Toolbar.prototype.init;
Toolbar.prototype.init = function () {toolbarInit.apply(this, arguments);this.editorUi.menus.put('save', new Menu(() => this.editorUi.actions.get('save').funct(), true))// geSprite-save 这是一个样式，官网中没有save图标，可以自定义this.addMenu('geSprite-save', mxResources.get('save'), false, 'save', null, true);
}