如何自定义MXGRAPH工具栏和属性面板

Question

我正在编写一个Web应用程序。我的应用程序中有工作流程，这意味着我们应该创建工作流并从中提取数据并保存在数据库中。

我选择了设计工作流程的mxgraph。现在，我需要为我的项目自定义它：1.自定义工具栏，仅包含一些用于BPMN和工作流程的工具。2.双击元素的能力和打开模式以创建元素属性。

我该怎么做？我阅读了文档，但对我不清楚。

Answer 1

我会假设您正在使用GraphEditorexample

1. 您可以使用以下此代码创建一个新的侧边栏：

在您的 sidebar.js

上

Sidebar.prototype.init = function()
{
    var dir = STENCIL_PATH;
    this.addYourPalette(true); // HERE YOU CAN ADD A NEW PALLETE
    this.addSearchPalette(true);
    this.addGeneralPalette(true); 
    this.addMiscPalette(false); 
    this.addAdvancedPalette(false); 
    this.addBasicPalette(dir);   
    this.addStencilPalette('arrows', mxResources.get('arrows'), dir + '/arrows.xml',
        ';whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#000000;strokeWidth=2');
    this.addUmlPalette(false);
    this.addBpmnPalette(dir, false);
    this.addImagePalette('clipart', mxResources.get('clipart'), dir + '/clipart/', '_128x128.png',
        ['Earth_globe', 'Empty_Folder', 'Full_Folder', 'Gear', 'Lock', 'Software', 'Virus', 'Email',
         'Database', 'Router_Icon', 'iPad', 'iMac', 'Laptop', 'MacBook', 'Monitor_Tower', 'Printer',
         'Server_Tower', 'Workstation', 'Firewall_02', 'Wireless_Router_N', 'Credit_Card',
         'Piggy_Bank', 'Graph', 'Safe', 'Shopping_Cart', 'Suit1', 'Suit2', 'Suit3', 'Pilot1',
         'Worker1', 'Soldier1', 'Doctor1', 'Tech1', 'Security1', 'Telesales1'], null,
         {'Wireless_Router_N': 'wireless router switch wap wifi access point wlan',
          'Router_Icon': 'router switch'});
};

您可以在此新调色板中定义想要的元素创建一个函数：

Sidebar.prototype.addYourPalette = function(expand)
{
    var lineTags = 'line lines connector connectors connection connections arrow arrows ';
    var fns = [
        this.createVertexTemplateEntry('rounded=0;whiteSpace=wrap;html=1;', 120, 60, '', 'Rectangle', null, null, 'rect rectangle box'),
        this.createVertexTemplateEntry('rounded=1;whiteSpace=wrap;html=1;', 120, 60, '', 'Rounded Rectangle', null, null, 'rounded rect rectangle box'),
    ];
    this.addPaletteFunctions('New', 'New', (expand != null) ? expand : true, fns);
};

上面的示例将具有2个元素：一个矩形和一个圆形矩形，但是您可以将自己喜欢的元素放置。

2. 您可以使用以下示例向单元格中添加新属性：

在您的 dialogs.js 中使用函数

    function addProps(name) {
        // Avoid ':' in attribute names which seems to be valid in Chrome
        if (name.length > 0 && name != 'label' && name != 'placeholders' && name.indexOf(':') < 0) {
            try {
                var idx = mxUtils.indexOf(names, name);
                if (idx >= 0 && texts[idx] != null) {
                    texts[idx].focus();
                } else {
                    // Checks if the name is valid
                    var clone = value.cloneNode(false);
                    clone.setAttribute(name, '');
                    if (idx >= 0) {
                        names.splice(idx, 1);
                        texts.splice(idx, 1);
                    }
                    names.push(name);
                    var text = form.addTextarea(name + ':', '', 2);
                    text.style.width = '100%';
                    texts.push(text);
                    addRemoveButton(text, name);
                    text.focus();
                }
                nameInput.value = '';
            } catch (e) {
                mxUtils.alert(e);
            }
        } else {
            mxUtils.alert(mxResources.get('invalidName'));
        }
    }

，然后调用传递您的参数的功能为新属性的名称

    addProps('yourPropName');