mxgraph编辑器的使用

前端JS如何使用mxgraph编辑器

说明:此项目是JS项目,目前还不支持TS

引入资源

可以直接从官网上拿下来,或者从其他地方获取

官网编辑器

如果只是展示图形的话只引入 mxClient.js就可以了

一个免费在线编辑器

自己用它做了一个在线编辑器,可以参考一下
当前项目源码

图形资源展示

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(); // 自适应缩放

编辑器

js 复制代码
// 编辑器
(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;
js 复制代码
// 添加爪子箭头, 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));
  • 工具栏中添加保存按钮
js 复制代码
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);
}
相关推荐
森叶11 小时前
Git Bash 设置Notepad++作为默认编辑器
git·编辑器·notepad++
爱趣五科技1 天前
H5DS编辑器教程——H5页面触发动画实战指南
编辑器
正宗咸豆花1 天前
利用 VSCode 配置提升 vibe coding 开发效率
ide·vscode·编辑器
徐子竣1 天前
Unity编辑器功能及拓展(2) —Gizmos编辑器绘制功能
unity·编辑器·游戏引擎
徐子竣1 天前
Unity编辑器功能及拓展(1) —特殊的Editor文件夹
unity·编辑器·游戏引擎
徐子竣1 天前
Unity编辑器功能及拓展(3) —[Attribute]特性
unity·编辑器·游戏引擎
一个程序员(●—●)2 天前
编辑器场景视窗扩展
编辑器
白又白、2 天前
windows下安装sublime
编辑器·sublime text
arbboter2 天前
【AI工具开发】Notepad++插件开发实践:从基础交互到ScintillaCall集成
人工智能·编辑器·notepad++·插件开发·scintilla·scintillacall·scintilla类封装
牛先森家的牛奶3 天前
VScode如何删除带有某些关键字的行和空白行
ide·vscode·编辑器