workflow - 如何自定义 mxgraph 工具栏和属性面板

Question

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

我选择 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 个元素:一个矩形和一个圆角矩形，但您可以将元素放在您喜欢的任何位置。

您可以使用以下示例向单元格添加新属性:

在您的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');